diff --git a/.claude/commands/comprehensive-pr-review.md b/.claude/commands/comprehensive-pr-review.md
index 84708564ea..1b4047e782 100644
--- a/.claude/commands/comprehensive-pr-review.md
+++ b/.claude/commands/comprehensive-pr-review.md
@@ -67,9 +67,9 @@ This is critical for better file inspection:
 
 Use git locally for much faster analysis:
 
-1. Get list of changed files: `git diff --name-only "origin/$BASE_BRANCH" > changed_files.txt`
-2. Get the full diff: `git diff "origin/$BASE_BRANCH" > pr_diff.txt`
-3. Get detailed file changes with status: `git diff --name-status "origin/$BASE_BRANCH" > file_changes.txt`
+1. Get list of changed files: `git diff --name-only "$BASE_SHA" > changed_files.txt`
+2. Get the full diff: `git diff "$BASE_SHA" > pr_diff.txt`
+3. Get detailed file changes with status: `git diff --name-status "$BASE_SHA" > file_changes.txt`
 
 ### Step 1.5: Create Analysis Cache
 
diff --git a/.gitattributes b/.gitattributes
index de05efbf41..bd0518cde4 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -13,4 +13,4 @@
 
 # Generated files
 src/types/comfyRegistryTypes.ts linguist-generated=true
-src/types/generatedManagerTypes.ts linguist-generated=true
+src/workbench/extensions/manager/types/generatedManagerTypes.ts linguist-generated=true
diff --git a/.github/workflows/backport.yaml b/.github/workflows/backport.yaml
index 907695e573..178bd4ee81 100644
--- a/.github/workflows/backport.yaml
+++ b/.github/workflows/backport.yaml
@@ -4,10 +4,25 @@ on:
   pull_request_target:
     types: [closed, labeled]
     branches: [main]
+  workflow_dispatch:
+    inputs:
+      pr_number:
+        description: 'PR number to backport'
+        required: true
+        type: string
+      force_rerun:
+        description: 'Force rerun even if backports exist'
+        required: false
+        type: boolean
+        default: false
 
 jobs:
   backport:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
+    if: >
+      (github.event_name == 'pull_request_target' && 
+       github.event.pull_request.merged == true && 
+       contains(github.event.pull_request.labels.*.name, 'needs-backport')) ||
+      github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -15,6 +30,35 @@ jobs:
       issues: write
 
     steps:
+      - name: Validate inputs for manual triggers
+        if: github.event_name == 'workflow_dispatch'
+        run: |
+          # Validate PR number format
+          if ! [[ "${{ inputs.pr_number }}" =~ ^[0-9]+$ ]]; then
+            echo "::error::Invalid PR number format. Must be a positive integer."
+            exit 1
+          fi
+          
+          # Validate PR exists and is merged
+          if ! gh pr view "${{ inputs.pr_number }}" --json merged >/dev/null 2>&1; then
+            echo "::error::PR #${{ inputs.pr_number }} not found or inaccessible."
+            exit 1
+          fi
+          
+          MERGED=$(gh pr view "${{ inputs.pr_number }}" --json merged --jq '.merged')
+          if [ "$MERGED" != "true" ]; then
+            echo "::error::PR #${{ inputs.pr_number }} is not merged. Only merged PRs can be backported."
+            exit 1
+          fi
+          
+          # Validate PR has needs-backport label
+          if ! gh pr view "${{ inputs.pr_number }}" --json labels --jq '.labels[].name' | grep -q "needs-backport"; then
+            echo "::error::PR #${{ inputs.pr_number }} does not have 'needs-backport' label."
+            exit 1
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -29,7 +73,7 @@ jobs:
         id: check-existing
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
           # Check for existing backport PRs for this PR number
           EXISTING_BACKPORTS=$(gh pr list --state all --search "backport-${PR_NUMBER}-to" --json title,headRefName,baseRefName | jq -r '.[].headRefName')
@@ -39,6 +83,13 @@ jobs:
             exit 0
           fi
           
+          # For manual triggers with force_rerun, proceed anyway
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ] && [ "${{ inputs.force_rerun }}" = "true" ]; then
+            echo "skip=false" >> $GITHUB_OUTPUT
+            echo "::warning::Force rerun requested - existing backports will be updated"
+            exit 0
+          fi
+          
           echo "Found existing backport PRs:"
           echo "$EXISTING_BACKPORTS"
           echo "skip=true" >> $GITHUB_OUTPUT
@@ -50,8 +101,17 @@ jobs:
         run: |
           # Extract version labels (e.g., "1.24", "1.22")
           VERSIONS=""
-          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
-          for label in $(echo "$LABELS" | jq -r '.[].name'); do
+          
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            # For manual triggers, get labels from the PR
+            LABELS=$(gh pr view ${{ inputs.pr_number }} --json labels | jq -r '.labels[].name')
+          else
+            # For automatic triggers, extract from PR event
+            LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+            LABELS=$(echo "$LABELS" | jq -r '.[].name')
+          fi
+          
+          for label in $LABELS; do
             # Match version labels like "1.24" (major.minor only)
             if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
               # Validate the branch exists before adding to list
@@ -75,12 +135,20 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true'
         id: backport
         env:
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
           FAILED=""
           SUCCESS=""
+          
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,mergeCommit)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi
 
           for version in ${{ steps.versions.outputs.versions }}; do
             echo "::group::Backporting to core/${version}"
@@ -133,10 +201,18 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
-          PR_TITLE: ${{ github.event.pull_request.title }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
-          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
+          # Get PR data for manual triggers
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json title,author)
+            PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+          else
+            PR_TITLE="${{ github.event.pull_request.title }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          fi
+          
           for backport in ${{ steps.backport.outputs.success }}; do
             IFS=':' read -r version branch <<< "${backport}"
 
@@ -165,9 +241,16 @@ jobs:
         env:
           GH_TOKEN: ${{ github.token }}
         run: |
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            PR_DATA=$(gh pr view ${{ inputs.pr_number }} --json author,mergeCommit)
+            PR_NUMBER="${{ inputs.pr_number }}"
+            PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
+            MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
+          else
+            PR_NUMBER="${{ github.event.pull_request.number }}"
+            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+          fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r version reason conflicts <<< "${failure}"
diff --git a/.github/workflows/i18n-custom-nodes.yaml b/.github/workflows/i18n-custom-nodes.yaml
index a5617c1964..f46e9b7ac9 100644
--- a/.github/workflows/i18n-custom-nodes.yaml
+++ b/.github/workflows/i18n-custom-nodes.yaml
@@ -32,11 +32,10 @@ jobs:
       with:
         repository: Comfy-Org/ComfyUI_frontend
         path: ComfyUI_frontend
-    - name: Checkout ComfyUI_devtools
-      uses: actions/checkout@v4
-      with:
-        repository: Comfy-Org/ComfyUI_devtools
-        path: ComfyUI/custom_nodes/ComfyUI_devtools
+    - name: Copy ComfyUI_devtools from frontend repo
+      run: |
+        mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+        cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
     - name: Checkout custom node repository
       uses: actions/checkout@v4
       with:
diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/test-ui.yaml
index eaaaefee09..4f05a6d26c 100644
--- a/.github/workflows/test-ui.yaml
+++ b/.github/workflows/test-ui.yaml
@@ -27,12 +27,10 @@ jobs:
           repository: 'Comfy-Org/ComfyUI_frontend'
           path: 'ComfyUI_frontend'
 
-      - name: Checkout ComfyUI_devtools
-        uses: actions/checkout@v4
-        with:
-          repository: 'Comfy-Org/ComfyUI_devtools'
-          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
+      - name: Copy ComfyUI_devtools from frontend repo
+        run: |
+          mkdir -p ComfyUI/custom_nodes/ComfyUI_devtools
+          cp -r ComfyUI_frontend/tools/devtools/* ComfyUI/custom_nodes/ComfyUI_devtools/
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
diff --git a/.gitignore b/.gitignore
index 5a58d1b1a1..e5bb5f1075 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,8 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files
@@ -44,6 +46,7 @@ components.d.ts
 tests-ui/data/*
 tests-ui/ComfyUI_examples
 tests-ui/workflows/examples
+coverage/
 
 # Browser tests
 /test-results/
@@ -78,8 +81,8 @@ vite.config.mts.timestamp-*.mjs
 *storybook.log
 storybook-static
 
-
-
+# MCP Servers
+.playwright-mcp/*
 
 .nx/cache
 .nx/workspace-data
diff --git a/.i18nrc.cjs b/.i18nrc.cjs
index 0429c35781..2efe5f9662 100644
--- a/.i18nrc.cjs
+++ b/.i18nrc.cjs
@@ -9,7 +9,7 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar'],
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr'],
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
diff --git a/.storybook/main.ts b/.storybook/main.ts
index a799ec143e..aa6bb1fbd1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -15,21 +15,32 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     // Use dynamic import to avoid CJS deprecation warning
     const { mergeConfig } = await import('vite')
+    const { default: tailwindcss } = await import('@tailwindcss/vite')
 
     // Filter out any plugins that might generate import maps
     if (config.plugins) {
-      config.plugins = config.plugins.filter((plugin: any) => {
-        if (plugin && plugin.name && plugin.name.includes('import-map')) {
-          return false
-        }
-        return true
-      })
+      config.plugins = config.plugins
+        // Type guard: ensure we have valid plugin objects with names
+        .filter(
+          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
+            return (
+              plugin !== null &&
+              plugin !== undefined &&
+              typeof plugin === 'object' &&
+              'name' in plugin &&
+              typeof plugin.name === 'string'
+            )
+          }
+        )
+        // Business logic: filter out import-map plugins
+        .filter((plugin) => !plugin.name.includes('import-map'))
     }
 
     return mergeConfig(config, {
       // Replace plugins entirely to avoid inheritance issues
       plugins: [
         // Only include plugins we explicitly need for Storybook
+        tailwindcss(),
         Icons({
           compiler: 'vue3',
           customCollections: {
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 747bbe8029..bfe81f4311 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { definePreset } from '@primevue/themes'
 import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
-import type { Preview } from '@storybook/vue3-vite'
+import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
 import 'primeicons/primeicons.css'
 import PrimeVue from 'primevue/config'
@@ -9,11 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
 
-import '../src/assets/css/style.css'
-import { i18n } from '../src/i18n'
-import '../src/lib/litegraph/public/css/litegraph.css'
-import { useWidgetStore } from '../src/stores/widgetStore'
-import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
+import '@/assets/css/style.css'
+import { i18n } from '@/i18n'
+import '@/lib/litegraph/public/css/litegraph.css'
 
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
@@ -25,13 +23,11 @@ const ComfyUIPreset = definePreset(Aura, {
 // Setup Vue app for Storybook
 setup((app) => {
   app.directive('tooltip', Tooltip)
-  const pinia = createPinia()
-  app.use(pinia)
 
-  // Initialize stores
-  useColorPaletteStore(pinia)
-  useWidgetStore(pinia)
+  // Create Pinia instance
+  const pinia = createPinia()
 
+  app.use(pinia)
   app.use(i18n)
   app.use(PrimeVue, {
     theme: {
@@ -50,8 +46,8 @@ setup((app) => {
   app.use(ToastService)
 })
 
-// Dark theme decorator
-export const withTheme = (Story: any, context: any) => {
+// Theme and dialog decorator
+export const withTheme = (Story: StoryFn, context: StoryContext) => {
   const theme = context.globals.theme || 'light'
 
   // Apply theme class to document root
@@ -63,7 +59,7 @@ export const withTheme = (Story: any, context: any) => {
     document.body.classList.remove('dark-theme')
   }
 
-  return Story()
+  return Story(context.args, context)
 }
 
 const preview: Preview = {
diff --git a/CODEOWNERS b/CODEOWNERS
index 8d4e4a90fe..cd1b4e5087 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -1,17 +1,61 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
+# Desktop/Electron
+/src/types/desktop/                               @webfiltered
+/src/constants/desktopDialogs.ts                  @webfiltered
+/src/constants/desktopMaintenanceTasks.ts         @webfiltered
+/src/stores/electronDownloadStore.ts              @webfiltered
+/src/extensions/core/electronAdapter.ts           @webfiltered
+/src/views/DesktopDialogView.vue                  @webfiltered
+/src/components/install/                          @webfiltered
+/src/components/maintenance/                      @webfiltered
+/vite.electron.config.mts                         @webfiltered
 
-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
+# Common UI Components
+/src/components/chip/                             @viva-jinyi
+/src/components/card/                             @viva-jinyi
+/src/components/button/                           @viva-jinyi
+/src/components/input/                            @viva-jinyi
 
-# Translations (AIGODLIKE team + shinshin86)
-/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
+# Topbar
+/src/components/topbar/                           @pythongosssss
 
-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+# Thumbnail
+/src/renderer/core/thumbnail/                     @pythongosssss
 
-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @brucew4yn3rp @trsommer @Comfy-Org/comfy_frontend_devs
+# Legacy UI
+/scripts/ui/                                      @pythongosssss
+
+# Link rendering
+/src/renderer/core/canvas/links/                  @benceruleanlu
+
+# Node help system
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
+/src/services/nodeHelpService.ts                  @benceruleanlu
+
+# Selection toolbox
+/src/components/graph/selectionToolbox/           @Myestery
+
+# Minimap
+/src/renderer/extensions/minimap/                 @jtydhr88
+
+# Assets
+/src/platform/assets/                             @arjansingh
+
+# Workflow Templates
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+
+# Mask Editor
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskEditorOld.ts             @trsommer @brucew4yn3rp
+
+# 3D
+/src/extensions/core/load3d.ts                    @jtydhr88
+/src/components/load3d/                           @jtydhr88
+
+# Manager
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+
+# Translations
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
diff --git a/browser_tests/README.md b/browser_tests/README.md
index ede6a303a9..ce0ed1f36a 100644
--- a/browser_tests/README.md
+++ b/browser_tests/README.md
@@ -16,9 +16,14 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
+ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
+For local development, copy the devtools files to your ComfyUI installation:
+```bash
+cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
+```
+
 ### Node.js & Playwright Prerequisites
 
 Ensure you have Node.js v20 or v22 installed. Then, set up the Chromium test driver:
@@ -51,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI
 
 ### Common Setup Issues
 
-**Most tests require the new menu system** - Add to your test:
-
-```typescript
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-})
-```
-
 ### Release API Mocking
 
 By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.
diff --git a/browser_tests/assets/vueNodes/simple-triple.json b/browser_tests/assets/vueNodes/simple-triple.json
new file mode 100644
index 0000000000..9b665191db
--- /dev/null
+++ b/browser_tests/assets/vueNodes/simple-triple.json
@@ -0,0 +1 @@
+{"id":"4412323e-2509-4258-8abc-68ddeea8f9e1","revision":0,"last_node_id":39,"last_link_id":29,"nodes":[{"id":37,"type":"KSampler","pos":[3635.923095703125,870.237548828125],"size":[428,437],"flags":{},"order":0,"mode":0,"inputs":[{"localized_name":"model","name":"model","type":"MODEL","link":null},{"localized_name":"positive","name":"positive","type":"CONDITIONING","link":null},{"localized_name":"negative","name":"negative","type":"CONDITIONING","link":null},{"localized_name":"latent_image","name":"latent_image","type":"LATENT","link":null},{"localized_name":"seed","name":"seed","type":"INT","widget":{"name":"seed"},"link":null},{"localized_name":"steps","name":"steps","type":"INT","widget":{"name":"steps"},"link":null},{"localized_name":"cfg","name":"cfg","type":"FLOAT","widget":{"name":"cfg"},"link":null},{"localized_name":"sampler_name","name":"sampler_name","type":"COMBO","widget":{"name":"sampler_name"},"link":null},{"localized_name":"scheduler","name":"scheduler","type":"COMBO","widget":{"name":"scheduler"},"link":null},{"localized_name":"denoise","name":"denoise","type":"FLOAT","widget":{"name":"denoise"},"link":null}],"outputs":[{"localized_name":"LATENT","name":"LATENT","type":"LATENT","links":null}],"properties":{"Node name for S&R":"KSampler"},"widgets_values":[0,"randomize",20,8,"euler","simple",1]},{"id":38,"type":"VAEDecode","pos":[4164.01611328125,925.5230712890625],"size":[193.25,107],"flags":{},"order":1,"mode":0,"inputs":[{"localized_name":"samples","name":"samples","type":"LATENT","link":null},{"localized_name":"vae","name":"vae","type":"VAE","link":null}],"outputs":[{"localized_name":"IMAGE","name":"IMAGE","type":"IMAGE","links":null}],"properties":{"Node name for S&R":"VAEDecode"}},{"id":39,"type":"CLIPTextEncode","pos":[3259.289794921875,927.2508544921875],"size":[239.9375,155],"flags":{},"order":2,"mode":0,"inputs":[{"localized_name":"clip","name":"clip","type":"CLIP","link":null},{"localized_name":"text","name":"text","type":"STRING","widget":{"name":"text"},"link":null}],"outputs":[{"localized_name":"CONDITIONING","name":"CONDITIONING","type":"CONDITIONING","links":null}],"properties":{"Node name for S&R":"CLIPTextEncode"},"widgets_values":[""]}],"links":[],"groups":[],"config":{},"extra":{"ds":{"scale":1.1576250000000001,"offset":[-2808.366467322067,-478.34316506594797]}},"version":0.4}
\ No newline at end of file
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index c9a8820f5e..19796f4c4c 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -1643,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
 
     try {
       await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,
diff --git a/browser_tests/fixtures/UserSelectPage.ts b/browser_tests/fixtures/UserSelectPage.ts
index 62a9613757..ff0735e171 100644
--- a/browser_tests/fixtures/UserSelectPage.ts
+++ b/browser_tests/fixtures/UserSelectPage.ts
@@ -1,4 +1,5 @@
-import { Page, test as base } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { test as base } from '@playwright/test'
 
 export class UserSelectPage {
   constructor(
diff --git a/browser_tests/fixtures/VueNodeHelpers.ts b/browser_tests/fixtures/VueNodeHelpers.ts
index e3b3de5425..b517502997 100644
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -22,6 +22,13 @@ export class VueNodeHelpers {
     )
   }
 
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
   /**
    * Get total count of Vue nodes in the DOM
    */
diff --git a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
index 23dc104cf4..fd40ca9113 100644
--- a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
+++ b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 export class ComfyNodeSearchFilterSelectionPanel {
   constructor(public readonly page: Page) {}
diff --git a/browser_tests/fixtures/components/SettingDialog.ts b/browser_tests/fixtures/components/SettingDialog.ts
index afaf86154b..e9040a3a9a 100644
--- a/browser_tests/fixtures/components/SettingDialog.ts
+++ b/browser_tests/fixtures/components/SettingDialog.ts
@@ -1,6 +1,6 @@
-import { Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
-import { ComfyPage } from '../ComfyPage'
+import type { ComfyPage } from '../ComfyPage'
 
 export class SettingDialog {
   constructor(
diff --git a/browser_tests/fixtures/components/SidebarTab.ts b/browser_tests/fixtures/components/SidebarTab.ts
index 7baaa1ef99..f3fbe42cfb 100644
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 class SidebarTab {
   constructor(
diff --git a/browser_tests/fixtures/components/Topbar.ts b/browser_tests/fixtures/components/Topbar.ts
index 04a9117ce2..6d0cd1fb34 100644
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -1,4 +1,5 @@
-import { Locator, Page, expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 export class Topbar {
   private readonly menuLocator: Locator
diff --git a/browser_tests/fixtures/ws.ts b/browser_tests/fixtures/ws.ts
index e12c534652..f1ab1a538c 100644
--- a/browser_tests/fixtures/ws.ts
+++ b/browser_tests/fixtures/ws.ts
@@ -12,9 +12,10 @@ export const webSocketFixture = base.extend<{
           // so we can look it up to trigger messages
           const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
           window.WebSocket = class extends window.WebSocket {
-            constructor() {
-              // @ts-expect-error
-              super(...arguments)
+            constructor(
+              ...rest: ConstructorParameters<typeof window.WebSocket>
+            ) {
+              super(...rest)
               store[this.url] = this
             }
           }
diff --git a/browser_tests/globalSetup.ts b/browser_tests/globalSetup.ts
index 12033fce34..881ef11c43 100644
--- a/browser_tests/globalSetup.ts
+++ b/browser_tests/globalSetup.ts
@@ -1,4 +1,4 @@
-import { FullConfig } from '@playwright/test'
+import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'
diff --git a/browser_tests/globalTeardown.ts b/browser_tests/globalTeardown.ts
index 47bab3db97..aeed77294c 100644
--- a/browser_tests/globalTeardown.ts
+++ b/browser_tests/globalTeardown.ts
@@ -1,4 +1,4 @@
-import { FullConfig } from '@playwright/test'
+import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
 import { restorePath } from './utils/backupUtils'
diff --git a/browser_tests/helpers/fitToView.ts b/browser_tests/helpers/fitToView.ts
new file mode 100644
index 0000000000..af6c10e9d3
--- /dev/null
+++ b/browser_tests/helpers/fitToView.ts
@@ -0,0 +1,104 @@
+import type { ReadOnlyRect } from '../../src/lib/litegraph/src/interfaces'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+interface FitToViewOptions {
+  selectionOnly?: boolean
+  zoom?: number
+  padding?: number
+}
+
+/**
+ * Instantly fits the canvas view to graph content without waiting for UI animation.
+ *
+ * Lives outside the shared fixture to keep the default ComfyPage interactions user-oriented.
+ */
+export async function fitToViewInstant(
+  comfyPage: ComfyPage,
+  options: FitToViewOptions = {}
+) {
+  const { selectionOnly = false, zoom = 0.75, padding = 10 } = options
+
+  const rectangles = await comfyPage.page.evaluate<
+    ReadOnlyRect[] | null,
+    { selectionOnly: boolean }
+  >(
+    ({ selectionOnly }) => {
+      const app = window['app']
+      if (!app?.canvas) return null
+
+      const canvas = app.canvas
+      const items = (() => {
+        if (selectionOnly && canvas.selectedItems?.size) {
+          return Array.from(canvas.selectedItems)
+        }
+        try {
+          return Array.from(canvas.positionableItems ?? [])
+        } catch {
+          return []
+        }
+      })()
+
+      if (!items.length) return null
+
+      const rects: ReadOnlyRect[] = []
+
+      for (const item of items) {
+        const rect = item?.boundingRect
+        if (!rect) continue
+
+        const x = Number(rect[0])
+        const y = Number(rect[1])
+        const width = Number(rect[2])
+        const height = Number(rect[3])
+
+        rects.push([x, y, width, height] as const)
+      }
+
+      return rects.length ? rects : null
+    },
+    { selectionOnly }
+  )
+
+  if (!rectangles || rectangles.length === 0) return
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const [x, y, width, height] of rectangles) {
+    minX = Math.min(minX, Number(x))
+    minY = Math.min(minY, Number(y))
+    maxX = Math.max(maxX, Number(x) + Number(width))
+    maxY = Math.max(maxY, Number(y) + Number(height))
+  }
+
+  const hasFiniteBounds =
+    Number.isFinite(minX) &&
+    Number.isFinite(minY) &&
+    Number.isFinite(maxX) &&
+    Number.isFinite(maxY)
+
+  if (!hasFiniteBounds) return
+
+  const bounds: ReadOnlyRect = [
+    minX - padding,
+    minY - padding,
+    maxX - minX + 2 * padding,
+    maxY - minY + 2 * padding
+  ]
+
+  await comfyPage.page.evaluate(
+    ({ bounds, zoom }) => {
+      const app = window['app']
+      if (!app?.canvas) return
+
+      const canvas = app.canvas
+      canvas.ds.fitToBounds(bounds, { zoom })
+      canvas.setDirty(true, true)
+    },
+    { bounds, zoom }
+  )
+
+  await comfyPage.nextFrame()
+}
diff --git a/browser_tests/helpers/manageGroupNode.ts b/browser_tests/helpers/manageGroupNode.ts
index a444a97c6a..45010b979f 100644
--- a/browser_tests/helpers/manageGroupNode.ts
+++ b/browser_tests/helpers/manageGroupNode.ts
@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 
 export class ManageGroupNode {
   footer: Locator
diff --git a/browser_tests/helpers/templates.ts b/browser_tests/helpers/templates.ts
index 0d2c9f31ea..c690b8702a 100644
--- a/browser_tests/helpers/templates.ts
+++ b/browser_tests/helpers/templates.ts
@@ -1,7 +1,7 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import path from 'path'
 
-import {
+import type {
   TemplateInfo,
   WorkflowTemplates
 } from '../../src/platform/workflow/templates/types/template'
diff --git a/browser_tests/tests/actionbar.spec.ts b/browser_tests/tests/actionbar.spec.ts
index a504ea4fc1..b23e4466d0 100644
--- a/browser_tests/tests/actionbar.spec.ts
+++ b/browser_tests/tests/actionbar.spec.ts
@@ -29,9 +29,9 @@ test.describe('Actionbar', () => {
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0
-    comfyPage.page.route('**/api/prompt', async (route, req) => {
+    await comfyPage.page.route('**/api/prompt', async (route, req) => {
       await new Promise((r) => setTimeout(r, 100))
-      route.fulfill({
+      await route.fulfill({
         status: 200,
         body: JSON.stringify({
           prompt_id: promptNumber,
diff --git a/browser_tests/tests/backgroundImageUpload.spec.ts b/browser_tests/tests/backgroundImageUpload.spec.ts
index 24af9e8acd..7f3ed6a3d4 100644
--- a/browser_tests/tests/backgroundImageUpload.spec.ts
+++ b/browser_tests/tests/backgroundImageUpload.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Background Image Upload', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Reset the background image setting before each test
diff --git a/browser_tests/tests/changeTracker.spec.ts b/browser_tests/tests/changeTracker.spec.ts
index 7a32833e4f..8e39154f15 100644
--- a/browser_tests/tests/changeTracker.spec.ts
+++ b/browser_tests/tests/changeTracker.spec.ts
@@ -1,5 +1,5 @@
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import {
-  ComfyPage,
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
   })
 }
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Change Tracker', () => {
   test.describe('Undo/Redo', () => {
     test.beforeEach(async ({ comfyPage }) => {
diff --git a/browser_tests/tests/chatHistory.spec.ts b/browser_tests/tests/chatHistory.spec.ts
index db33975143..c47a4d19b0 100644
--- a/browser_tests/tests/chatHistory.spec.ts
+++ b/browser_tests/tests/chatHistory.spec.ts
@@ -1,7 +1,12 @@
-import { Page, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 interface ChatHistoryEntry {
   prompt: string
   response: string
diff --git a/browser_tests/tests/colorPalette.spec.ts b/browser_tests/tests/colorPalette.spec.ts
index 901cce9137..6dd53c194f 100644
--- a/browser_tests/tests/colorPalette.spec.ts
+++ b/browser_tests/tests/colorPalette.spec.ts
@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import type { Palette } from '../../src/schemas/colorPaletteSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,
diff --git a/browser_tests/tests/commands.spec.ts b/browser_tests/tests/commands.spec.ts
index 4225ad228c..e271f2e15c 100644
--- a/browser_tests/tests/commands.spec.ts
+++ b/browser_tests/tests/commands.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should execute command', async ({ comfyPage }) => {
     await comfyPage.registerCommand('TestCommand', () => {
diff --git a/browser_tests/tests/copyPaste.spec.ts b/browser_tests/tests/copyPaste.spec.ts
index 3bcee65f0e..cabb849e80 100644
--- a/browser_tests/tests/copyPaste.spec.ts
+++ b/browser_tests/tests/copyPaste.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
     await comfyPage.clickEmptyLatentNode()
diff --git a/browser_tests/tests/dialog.spec.ts b/browser_tests/tests/dialog.spec.ts
index cf2e5e6be0..7459acf585 100644
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -1,8 +1,13 @@
-import { Locator, expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
     comfyPage
diff --git a/browser_tests/tests/domWidget.spec.ts b/browser_tests/tests/domWidget.spec.ts
index 91d53c4078..6517b9170d 100644
--- a/browser_tests/tests/domWidget.spec.ts
+++ b/browser_tests/tests/domWidget.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('DOM Widget', () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/collapsed_multiline')
diff --git a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png
index 90bc677fcf..2b89be5c53 100644
Binary files a/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png and b/browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.png differ
diff --git a/browser_tests/tests/execution.spec.ts b/browser_tests/tests/execution.spec.ts
index 4adab98b60..075025a3ab 100644
--- a/browser_tests/tests/execution.spec.ts
+++ b/browser_tests/tests/execution.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Execution', () => {
   test('Report error on unconnected slot', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
diff --git a/browser_tests/tests/extensionAPI.spec.ts b/browser_tests/tests/extensionAPI.spec.ts
index 09a08384c8..38f4a6c1de 100644
--- a/browser_tests/tests/extensionAPI.spec.ts
+++ b/browser_tests/tests/extensionAPI.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { SettingParams } from '../../src/platform/settings/types'
+import type { SettingParams } from '../../src/platform/settings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {
diff --git a/browser_tests/tests/featureFlags.spec.ts b/browser_tests/tests/featureFlags.spec.ts
index 73eb35f472..38286b3990 100644
--- a/browser_tests/tests/featureFlags.spec.ts
+++ b/browser_tests/tests/featureFlags.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Feature Flags', () => {
   test('Client and server exchange feature flags on connection', async ({
     comfyPage
diff --git a/browser_tests/tests/graph.spec.ts b/browser_tests/tests/graph.spec.ts
index 25e166bab8..cd89e92d5f 100644
--- a/browser_tests/tests/graph.spec.ts
+++ b/browser_tests/tests/graph.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph', () => {
   // Should be able to fix link input slot index after swap the input order
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts b/browser_tests/tests/graphCanvasMenu.spec.ts
index 9ae090975b..daa165fa47 100644
--- a/browser_tests/tests/graphCanvasMenu.spec.ts
+++ b/browser_tests/tests/graphCanvasMenu.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph Canvas Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Set link render mode to spline to make sure it's not affected by other tests'
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
index f5ca69e541..2736a50c57 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png differ
diff --git a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
index af9081d0a9..fd72c2d0a7 100644
Binary files a/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and b/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png differ
diff --git a/browser_tests/tests/groupNode.spec.ts b/browser_tests/tests/groupNode.spec.ts
index 41b50224ad..9a23102312 100644
--- a/browser_tests/tests/groupNode.spec.ts
+++ b/browser_tests/tests/groupNode.spec.ts
@@ -1,8 +1,13 @@
 import { expect } from '@playwright/test'
 
-import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Group Node', () => {
   test.describe('Node library sidebar', () => {
     const groupNodeName = 'DefautWorkflowGroupNode'
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index c3754ed3bd..2fc7534909 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -1,12 +1,17 @@
-import { Locator, expect } from '@playwright/test'
-import { Position } from '@vueuse/core'
+import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+import type { Position } from '@vueuse/core'
 
 import {
   type ComfyPage,
   comfyPageFixture as test,
   testComfySnapToGridGridSize
 } from '../fixtures/ComfyPage'
-import { type NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
 
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {
diff --git a/browser_tests/tests/keybindings.spec.ts b/browser_tests/tests/keybindings.spec.ts
index ced2936378..f4244ae669 100644
--- a/browser_tests/tests/keybindings.spec.ts
+++ b/browser_tests/tests/keybindings.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should not trigger non-modifier keybinding when typing in input fields', async ({
     comfyPage
diff --git a/browser_tests/tests/litegraphEvent.spec.ts b/browser_tests/tests/litegraphEvent.spec.ts
index 8d8f6c2e85..184943fe05 100644
--- a/browser_tests/tests/litegraphEvent.spec.ts
+++ b/browser_tests/tests/litegraphEvent.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 function listenForEvent(): Promise<Event> {
   return new Promise<Event>((resolve) => {
     document.addEventListener('litegraph:canvas', (e) => resolve(e), {
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts b/browser_tests/tests/loadWorkflowInMedia.spec.ts
index 678cb60f07..f091058d24 100644
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load Workflow in Media', () => {
   const fileNames = [
     'workflow.webp',
diff --git a/browser_tests/tests/lodThreshold.spec.ts b/browser_tests/tests/lodThreshold.spec.ts
index 025347e4de..154ac3c16f 100644
--- a/browser_tests/tests/lodThreshold.spec.ts
+++ b/browser_tests/tests/lodThreshold.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('LOD Threshold', () => {
   test('Should switch to low quality mode at correct zoom threshold', async ({
     comfyPage
diff --git a/browser_tests/tests/nodeBadge.spec.ts b/browser_tests/tests/nodeBadge.spec.ts
index 984dd6ea1f..111efe29cf 100644
--- a/browser_tests/tests/nodeBadge.spec.ts
+++ b/browser_tests/tests/nodeBadge.spec.ts
@@ -4,6 +4,10 @@ import type { ComfyApp } from '../../src/scripts/app'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
diff --git a/browser_tests/tests/nodeDisplay.spec.ts b/browser_tests/tests/nodeDisplay.spec.ts
index 2b76d45427..fdaae14bcb 100644
--- a/browser_tests/tests/nodeDisplay.spec.ts
+++ b/browser_tests/tests/nodeDisplay.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 // If an input is optional by node definition, it should be shown as
 // a hollow circle no matter what shape it was defined in the workflow JSON.
 test.describe('Optional input', () => {
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts b/browser_tests/tests/nodeSearchBox.spec.ts
index 3c5e3cbe24..98ba335836 100644
--- a/browser_tests/tests/nodeSearchBox.spec.ts
+++ b/browser_tests/tests/nodeSearchBox.spec.ts
@@ -3,6 +3,10 @@ import {
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box')
diff --git a/browser_tests/tests/noteNode.spec.ts b/browser_tests/tests/noteNode.spec.ts
index 0f3d6a3178..52dc575423 100644
--- a/browser_tests/tests/noteNode.spec.ts
+++ b/browser_tests/tests/noteNode.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Note Node', () => {
   test('Can load node nodes', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('nodes/note_nodes')
diff --git a/browser_tests/tests/primitiveNode.spec.ts b/browser_tests/tests/primitiveNode.spec.ts
index 7fc408e8b8..0584a3bec2 100644
--- a/browser_tests/tests/primitiveNode.spec.ts
+++ b/browser_tests/tests/primitiveNode.spec.ts
@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('primitive/primitive_node')
diff --git a/browser_tests/tests/remoteWidgets.spec.ts b/browser_tests/tests/remoteWidgets.spec.ts
index 05bb578df9..7a54cae07b 100644
--- a/browser_tests/tests/remoteWidgets.spec.ts
+++ b/browser_tests/tests/remoteWidgets.spec.ts
@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
-import { ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Remote COMBO Widget', () => {
   const mockOptions = ['d', 'c', 'b', 'a']
diff --git a/browser_tests/tests/rerouteNode.spec.ts b/browser_tests/tests/rerouteNode.spec.ts
index 89fdf38b29..0b2b1e0f62 100644
--- a/browser_tests/tests/rerouteNode.spec.ts
+++ b/browser_tests/tests/rerouteNode.spec.ts
@@ -40,6 +40,7 @@ test.describe('Reroute Node', () => {
 
 test.describe('LiteGraph Native Reroute Node', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
   })
 
diff --git a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png
index 6e63295b85..a9e9926bfa 100644
Binary files a/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png and b/browser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.png differ
diff --git a/browser_tests/tests/rightClickMenu.spec.ts b/browser_tests/tests/rightClickMenu.spec.ts
index db21ecd360..f7718122b7 100644
--- a/browser_tests/tests/rightClickMenu.spec.ts
+++ b/browser_tests/tests/rightClickMenu.spec.ts
@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Canvas Right Click Menu', () => {
   test('Can add node', async ({ comfyPage }) => {
     await comfyPage.rightClickCanvas()
diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index a9a5fc9c20..6b85769826 100644
--- a/browser_tests/tests/selectionToolbox.spec.ts
+++ b/browser_tests/tests/selectionToolbox.spec.ts
@@ -4,6 +4,9 @@ import { comfyPageFixture } from '../fixtures/ComfyPage'
 
 const test = comfyPageFixture
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
diff --git a/browser_tests/tests/selectionToolboxSubmenus.spec.ts b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
index a7311c15a3..db63261528 100644
--- a/browser_tests/tests/selectionToolboxSubmenus.spec.ts
+++ b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Selection Toolbox - More Options Submenus', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
diff --git a/browser_tests/tests/sidebar/queue.spec.ts b/browser_tests/tests/sidebar/queue.spec.ts
index 2d9dd10bae..39e2ced6e1 100644
--- a/browser_tests/tests/sidebar/queue.spec.ts
+++ b/browser_tests/tests/sidebar/queue.spec.ts
@@ -160,7 +160,9 @@ test.describe.skip('Queue sidebar', () => {
       comfyPage
     }) => {
       await comfyPage.nextFrame()
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
     })
 
     test('maintains active gallery item when new tasks are added', async ({
@@ -174,7 +176,9 @@ test.describe.skip('Queue sidebar', () => {
       const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
       await newTask.waitFor({ state: 'visible' })
       // The active gallery item should still be the initial image
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      await expect(
+        comfyPage.menu.queueTab.getGalleryImage(firstImage)
+      ).toBeVisible()
     })
 
     test.describe('Gallery navigation', () => {
@@ -196,7 +200,9 @@ test.describe.skip('Queue sidebar', () => {
               delay: 256
             })
           await comfyPage.nextFrame()
-          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
+          await expect(
+            comfyPage.menu.queueTab.getGalleryImage(end)
+          ).toBeVisible()
         })
       })
     })
diff --git a/browser_tests/tests/templates.spec.ts b/browser_tests/tests/templates.spec.ts
index f2c2e2bb5d..9141e9135b 100644
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -1,4 +1,5 @@
-import { Page, expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
diff --git a/browser_tests/tests/useSettingSearch.spec.ts b/browser_tests/tests/useSettingSearch.spec.ts
index 69a40ced92..a817616f8b 100644
--- a/browser_tests/tests/useSettingSearch.spec.ts
+++ b/browser_tests/tests/useSettingSearch.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Settings Search functionality', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Register test settings to verify hidden/deprecated filtering
diff --git a/browser_tests/tests/versionMismatchWarnings.spec.ts b/browser_tests/tests/versionMismatchWarnings.spec.ts
index d85f187238..eee6fda925 100644
--- a/browser_tests/tests/versionMismatchWarnings.spec.ts
+++ b/browser_tests/tests/versionMismatchWarnings.spec.ts
@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { SystemStats } from '../../src/schemas/apiSchema'
+import type { SystemStats } from '../../src/schemas/apiSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Version Mismatch Warnings', () => {
@@ -106,6 +106,11 @@ test.describe('Version Mismatch Warnings', () => {
     const dismissButton = warningToast.getByRole('button', { name: 'Close' })
     await dismissButton.click()
 
+    // Wait for the dismissed state to be persisted
+    await comfyPage.page.waitForFunction(
+      () => !!localStorage.getItem('comfy.versionMismatch.dismissals')
+    )
+
     // Reload the page, keeping local storage
     await comfyPage.setup({ clearStorage: false })
 
diff --git a/browser_tests/tests/vueNodes/NodeHeader.spec.ts b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
index 7a8ae5dd2b..336e2672de 100644
--- a/browser_tests/tests/vueNodes/NodeHeader.spec.ts
+++ b/browser_tests/tests/vueNodes/NodeHeader.spec.ts
@@ -6,7 +6,7 @@ import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
 
 test.describe('NodeHeader', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
diff --git a/browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts b/browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts
index a00d93eb04..51b52e7ce3 100644
--- a/browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Vue Nodes - Delete Key Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Enable Vue nodes rendering
diff --git a/browser_tests/tests/vueNodes/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/linkInteraction.spec.ts
new file mode 100644
index 0000000000..d6b1bccc18
--- /dev/null
+++ b/browser_tests/tests/vueNodes/linkInteraction.spec.ts
@@ -0,0 +1,221 @@
+import type { Locator } from '@playwright/test'
+
+import { getSlotKey } from '../../../src/renderer/core/layout/slots/slotIdentifier'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../helpers/fitToView'
+
+async function getCenter(locator: Locator): Promise<{ x: number; y: number }> {
+  const box = await locator.boundingBox()
+  if (!box) throw new Error('Slot bounding box not available')
+  return {
+    x: box.x + box.width / 2,
+    y: box.y + box.height / 2
+  }
+}
+
+test.describe('Vue Node Link Interaction', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('vueNodes/simple-triple')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  test('should show a link dragging out from a slot when dragging on a slot', async ({
+    comfyPage,
+    comfyMouse
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+
+    const samplerNode = samplerNodes[0]
+    const outputSlot = await samplerNode.getOutput(0)
+    await outputSlot.removeLinks()
+    await comfyPage.nextFrame()
+
+    const slotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const slotLocator = comfyPage.page.locator(`[data-slot-key="${slotKey}"]`)
+    await expect(slotLocator).toBeVisible()
+
+    const start = await getCenter(slotLocator)
+    const canvasBox = await comfyPage.canvas.boundingBox()
+    if (!canvasBox) throw new Error('Canvas bounding box not available')
+
+    // Arbitrary value
+    const dragTarget = {
+      x: start.x + 180,
+      y: start.y - 140
+    }
+
+    await comfyMouse.move(start)
+    await comfyMouse.drag(dragTarget)
+    await comfyPage.nextFrame()
+
+    try {
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-dragging-link.png'
+      )
+    } finally {
+      await comfyMouse.drop()
+    }
+  })
+
+  test('should create a link when dropping on a compatible slot', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const vaeNodes = await comfyPage.getNodeRefsByType('VAEDecode')
+    expect(vaeNodes.length).toBeGreaterThan(0)
+    const vaeNode = vaeNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const vaeInput = await vaeNode.getInput(0)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(vaeNode.id), 0, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(1)
+    expect(await vaeInput.getLinkCount()).toBe(1)
+
+    const linkDetails = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return null
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return null
+
+      const linkId = source.outputs[0]?.links?.[0]
+      if (linkId == null) return null
+
+      const link = graph.links[linkId]
+      if (!link) return null
+
+      return {
+        originId: link.origin_id,
+        originSlot: link.origin_slot,
+        targetId: link.target_id,
+        targetSlot: link.target_slot
+      }
+    }, samplerNode.id)
+
+    expect(linkDetails).not.toBeNull()
+    expect(linkDetails).toMatchObject({
+      originId: samplerNode.id,
+      originSlot: 0,
+      targetId: vaeNode.id,
+      targetSlot: 0
+    })
+  })
+
+  test('should not create a link when slot types are incompatible', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const clipNodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    expect(clipNodes.length).toBeGreaterThan(0)
+    const clipNode = clipNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const clipInput = await clipNode.getInput(0)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(clipNode.id), 0, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await clipInput.getLinkCount()).toBe(0)
+
+    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return 0
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return 0
+
+      return source.outputs[0]?.links?.length ?? 0
+    }, samplerNode.id)
+
+    expect(graphLinkCount).toBe(0)
+  })
+
+  test('should not create a link when dropping onto a slot on the same node', async ({
+    comfyPage
+  }) => {
+    const samplerNodes = await comfyPage.getNodeRefsByType('KSampler')
+    expect(samplerNodes.length).toBeGreaterThan(0)
+    const samplerNode = samplerNodes[0]
+
+    const samplerOutput = await samplerNode.getOutput(0)
+    const samplerInput = await samplerNode.getInput(3)
+
+    const outputSlotKey = getSlotKey(String(samplerNode.id), 0, false)
+    const inputSlotKey = getSlotKey(String(samplerNode.id), 3, true)
+
+    const outputSlot = comfyPage.page.locator(
+      `[data-slot-key="${outputSlotKey}"]`
+    )
+    const inputSlot = comfyPage.page.locator(
+      `[data-slot-key="${inputSlotKey}"]`
+    )
+
+    await expect(outputSlot).toBeVisible()
+    await expect(inputSlot).toBeVisible()
+
+    await outputSlot.dragTo(inputSlot)
+    await comfyPage.nextFrame()
+
+    expect(await samplerOutput.getLinkCount()).toBe(0)
+    expect(await samplerInput.getLinkCount()).toBe(0)
+
+    const graphLinkCount = await comfyPage.page.evaluate((sourceId) => {
+      const app = window['app']
+      const graph = app?.canvas?.graph ?? app?.graph
+      if (!graph) return 0
+
+      const source = graph.getNodeById(sourceId)
+      if (!source) return 0
+
+      return source.outputs[0]?.links?.length ?? 0
+    }, samplerNode.id)
+
+    expect(graphLinkCount).toBe(0)
+  })
+})
diff --git a/browser_tests/tests/vueNodes/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
new file mode 100644
index 0000000000..78e331b3ca
Binary files /dev/null and b/browser_tests/tests/vueNodes/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/lod.spec.ts b/browser_tests/tests/vueNodes/lod.spec.ts
new file mode 100644
index 0000000000..2ed598ef88
--- /dev/null
+++ b/browser_tests/tests/vueNodes/lod.spec.ts
@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Nodes - LOD', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('default')
+  })
+
+  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
+
+    const vueNodesContainer = comfyPage.vueNodes.nodes
+    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
+    const buttonsInNodes = vueNodesContainer.getByRole('button')
+
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+
+    await comfyPage.zoom(120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
+
+    await expect(textboxesInNodes.first()).toBeHidden()
+    await expect(buttonsInNodes.first()).toBeHidden()
+
+    await comfyPage.zoom(-120, 10)
+    await comfyPage.nextFrame()
+
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'vue-nodes-lod-inactive.png'
+    )
+    await expect(textboxesInNodes.first()).toBeVisible()
+    await expect(buttonsInNodes.first()).toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png
new file mode 100644
index 0000000000..744e405944
Binary files /dev/null and b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png
new file mode 100644
index 0000000000..5dfa61c196
Binary files /dev/null and b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png
new file mode 100644
index 0000000000..8091e5d036
Binary files /dev/null and b/browser_tests/tests/vueNodes/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeInteractions/selectionState.spec.ts b/browser_tests/tests/vueNodes/nodeInteractions/selectionState.spec.ts
new file mode 100644
index 0000000000..591c1d307b
--- /dev/null
+++ b/browser_tests/tests/vueNodes/nodeInteractions/selectionState.spec.ts
@@ -0,0 +1,51 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
+test.describe('Vue Node Selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  const modifiers = [
+    { key: 'Control', name: 'ctrl' },
+    { key: 'Shift', name: 'shift' }
+  ] as const
+
+  for (const { key: modifier, name } of modifiers) {
+    test(`should allow selecting multiple nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Empty Latent Image').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+
+      await comfyPage.page.getByText('KSampler').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(3)
+    })
+
+    test(`should allow de-selecting nodes with ${name}+click`, async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.getByText('Load Checkpoint').click()
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+      await comfyPage.page.getByText('Load Checkpoint').click({
+        modifiers: [modifier]
+      })
+      expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+    })
+  }
+})
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
new file mode 100644
index 0000000000..74ec17cc90
--- /dev/null
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts
@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const BYPASS_HOTKEY = 'Control+b'
+const BYPASS_CLASS = /before:bg-bypass\/60/
+
+test.describe('Vue Node Bypass', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling bypass on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+  })
+
+  test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).toHaveClass(BYPASS_CLASS)
+
+    await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(BYPASS_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(BYPASS_CLASS)
+  })
+})
diff --git a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
new file mode 100644
index 0000000000..f4f8e10fe0
--- /dev/null
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
@@ -0,0 +1,32 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const ERROR_CLASS = /border-error/
+
+test.describe('Vue Node Error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should display error state when node is missing (node from workflow is not installed)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+
+    // Close missing nodes warning dialog
+    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
+    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
+      state: 'hidden'
+    })
+
+    // Expect error state on missing unknown node
+    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'UNKNOWN NODE'
+    })
+    await expect(unknownNode).toHaveClass(ERROR_CLASS)
+  })
+})
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
new file mode 100644
index 0000000000..37dcfd37b5
--- /dev/null
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts
@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const MUTE_HOTKEY = 'Control+m'
+const MUTE_CLASS = /opacity-50/
+
+test.describe('Vue Node Mute', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling mute on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+  })
+
+  test('should allow toggling mute on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+  })
+})
diff --git a/browser_tests/tests/widget.spec.ts b/browser_tests/tests/widget.spec.ts
index 728b5d0285..3b9c057847 100644
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Combo text widget', () => {
   test('Truncates text when resized', async ({ comfyPage }) => {
     await comfyPage.resizeLoadCheckpointNode(0.2, 1)
@@ -318,6 +322,9 @@ test.describe('Animated image widget', () => {
 test.describe('Load audio widget', () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/load_audio_widget')
+    // Wait for the audio widget to be rendered in the DOM
+    await comfyPage.page.waitForSelector('.comfy-audio', { state: 'attached' })
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })
diff --git a/browser_tests/tsconfig.json b/browser_tests/tsconfig.json
new file mode 100644
index 0000000000..391298333b
--- /dev/null
+++ b/browser_tests/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Test files should not be compiled */
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts",
+  ]
+}
diff --git a/build/plugins/comfyAPIPlugin.ts b/build/plugins/comfyAPIPlugin.ts
index 3f795a2194..5b7f4bec42 100644
--- a/build/plugins/comfyAPIPlugin.ts
+++ b/build/plugins/comfyAPIPlugin.ts
@@ -1,5 +1,5 @@
 import path from 'path'
-import { Plugin } from 'vite'
+import type { Plugin } from 'vite'
 
 interface ShimResult {
   code: string
diff --git a/build/plugins/generateImportMapPlugin.ts b/build/plugins/generateImportMapPlugin.ts
index 80ccb6c9f7..bbbf14c2c6 100644
--- a/build/plugins/generateImportMapPlugin.ts
+++ b/build/plugins/generateImportMapPlugin.ts
@@ -1,7 +1,7 @@
 import glob from 'fast-glob'
 import fs from 'fs-extra'
 import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
 
 interface ImportMapSource {
   name: string
diff --git a/build/tsconfig.json b/build/tsconfig.json
new file mode 100644
index 0000000000..1c24810a8e
--- /dev/null
+++ b/build/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Build scripts configuration */
+    "noEmit": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}
\ No newline at end of file
diff --git a/eslint.config.ts b/eslint.config.ts
index 191e07ba96..ab3bf09f54 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -33,7 +33,13 @@ export default defineConfig([
       },
       parserOptions: {
         parser: tseslint.parser,
-        projectService: true,
+        projectService: {
+          allowDefaultProject: [
+            'vite.config.mts',
+            'vite.electron.config.mts',
+            'vite.types.config.mts'
+          ]
+        },
         tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
@@ -75,12 +81,27 @@ export default defineConfig([
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        {
+          allowInterfaces: 'always'
+        }
+      ],
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
+      /* Toggle on to do additional until we can clean up existing violations.
+      'vue/no-unused-emit-declarations': 'error',
+      'vue/no-unused-properties': 'error',
+      'vue/no-unused-refs': 'error',
+      'vue/no-use-v-else-with-v-for': 'error',
+      'vue/no-useless-v-bind': 'error',
+      // */
       'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
       // Restrict deprecated PrimeVue components
@@ -151,5 +172,14 @@ export default defineConfig([
         }
       ]
     }
+  },
+  {
+    files: ['tests-ui/**/*'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { disallowTypeAnnotations: false }
+      ]
+    }
   }
 ])
diff --git a/index.html b/index.html
index de7710c63d..8684af476b 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,8 @@
     <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
-    <!-- Fullscreen mode on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- Fullscreen mode on mobile browsers -->
+    <meta name="mobile-web-app-capable" content="yes">
     <!-- Status bar style (eg. black or transparent) -->
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     
diff --git a/knip.config.ts b/knip.config.ts
index 81911a7361..0dcbf7d500 100644
--- a/knip.config.ts
+++ b/knip.config.ts
@@ -22,7 +22,7 @@ const config: KnipConfig = {
   ],
   ignore: [
     // Auto generated manager types
-    'src/types/generatedManagerTypes.ts',
+    'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'src/types/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
     'src/scripts/ui/components/splitButton.ts',
diff --git a/package.json b/package.json
index 9acc66aa66..b3f3cb8b6b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.5",
+  "version": "1.27.6",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,15 +18,18 @@
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "test:all": "nx run test",
     "test:browser": "npx nx e2e",
-    "test:unit": "nx run test tests-ui/tests",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
+    "test:unit": "nx run test tests-ui/tests",
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
     "lint": "eslint src --cache",
     "lint:fix": "eslint src --cache --fix",
+    "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
+    "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:no-cache": "eslint src",
     "lint:fix:no-cache": "eslint src --fix",
     "knip": "knip --cache",
@@ -94,6 +97,7 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
+    "vue-component-type-helpers": "^3.0.7",
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
@@ -103,6 +107,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -126,7 +131,6 @@
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "chart.js": "^4.5.0",
-    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -144,7 +148,6 @@
     "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
-    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",
diff --git a/packages/tailwind-utils/README.md b/packages/tailwind-utils/README.md
new file mode 100644
index 0000000000..5f315600b2
--- /dev/null
+++ b/packages/tailwind-utils/README.md
@@ -0,0 +1,31 @@
+# @comfyorg/tailwind-utils
+
+Shared Tailwind CSS utility functions for the ComfyUI Frontend monorepo.
+
+## Usage
+
+The `cn` function combines `clsx` and `tailwind-merge` to handle conditional classes and resolve Tailwind conflicts.
+
+```typescript
+import { cn } from '@comfyorg/tailwind-utils'
+
+// Use with conditional classes (object)
+<div :class="cn('transition-opacity', { 'opacity-75': !isHovered })" />
+
+// Use with conditional classes (ternary)
+<button
+  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
+/>
+```
+
+## Installation
+
+This package is part of the ComfyUI Frontend monorepo and is automatically available to all workspace packages.
+
+```json
+{
+  "dependencies": {
+    "@comfyorg/tailwind-utils": "workspace:*"
+  }
+}
+```
diff --git a/packages/tailwind-utils/package.json b/packages/tailwind-utils/package.json
new file mode 100644
index 0000000000..f20d1ea654
--- /dev/null
+++ b/packages/tailwind-utils/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@comfyorg/tailwind-utils",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared Tailwind CSS utilities for ComfyUI Frontend",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:util"
+    ]
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}
\ No newline at end of file
diff --git a/packages/tailwind-utils/src/index.ts b/packages/tailwind-utils/src/index.ts
new file mode 100644
index 0000000000..78e3a3d1ae
--- /dev/null
+++ b/packages/tailwind-utils/src/index.ts
@@ -0,0 +1,8 @@
+import clsx, { type ClassArray } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export type { ClassValue } from 'clsx'
+
+export function cn(...inputs: ClassArray) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/tailwind-utils/tsconfig.json b/packages/tailwind-utils/tsconfig.json
new file mode 100644
index 0000000000..60c7df1811
--- /dev/null
+++ b/packages/tailwind-utils/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"]
+}
diff --git a/playwright.i18n.config.ts b/playwright.i18n.config.ts
index 70c3a0c81c..16c86a18ac 100644
--- a/playwright.i18n.config.ts
+++ b/playwright.i18n.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
     headless: true
   },
   reporter: 'list',
+  workers: 1,
   timeout: 60000,
   testMatch: /collect-i18n-.*\.ts/
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75fc42327e..508abfc178 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@comfyorg/comfyui-electron-types':
         specifier: 0.4.73-0
         version: 0.4.73-0
+      '@comfyorg/tailwind-utils':
+        specifier: workspace:*
+        version: link:packages/tailwind-utils
       '@iconify/json':
         specifier: ^2.2.380
         version: 2.2.380
@@ -86,9 +89,6 @@ importers:
       chart.js:
         specifier: ^4.5.0
         version: 4.5.0
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
       dompurify:
         specifier: ^3.2.5
         version: 3.2.5
@@ -140,9 +140,6 @@ importers:
       semver:
         specifier: ^7.7.2
         version: 7.7.2
-      tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.3.1
       three:
         specifier: ^0.170.0
         version: 0.170.0
@@ -339,6 +336,9 @@ importers:
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/debug@4.1.12)(@types/node@20.14.10)(@vitest/ui@3.2.4)(happy-dom@15.11.0)(jsdom@26.1.0)(lightningcss@1.30.1)(terser@5.39.2)
+      vue-component-type-helpers:
+        specifier: ^3.0.7
+        version: 3.0.7
       vue-eslint-parser:
         specifier: ^10.2.0
         version: 10.2.0(eslint@9.35.0(jiti@2.4.2))
@@ -352,6 +352,19 @@ importers:
         specifier: ^3.24.1
         version: 3.24.1(zod@3.24.1)
 
+  packages/tailwind-utils:
+    dependencies:
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      tailwind-merge:
+        specifier: ^2.2.0
+        version: 2.6.0
+    devDependencies:
+      typescript:
+        specifier: ^5.4.5
+        version: 5.9.2
+
 packages:
 
   '@adobe/css-tools@4.4.3':
@@ -5885,8 +5898,8 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tailwind-merge@3.3.1:
-    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
   tailwindcss-primeui@0.6.1:
     resolution: {integrity: sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==}
@@ -6320,6 +6333,9 @@ packages:
   vue-component-type-helpers@3.0.7:
     resolution: {integrity: sha512-TvyUcFXmjZcXUvU+r1MOyn4/vv4iF+tPwg5Ig33l/FJ3myZkxeQpzzQMLMFWcQAjr6Xs7BRwVy/TwbmNZUA/4w==}
 
+  vue-component-type-helpers@3.0.8:
+    resolution: {integrity: sha512-WyR30Eq15Y/+odrUUMax6FmPbZwAp/HnC7qgR1r3lVFAcqwQ4wUoV79Mbh4SxDy3NiqDa+G4TOKD5xXSgBHo5A==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -8876,7 +8892,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.0.7
+      vue-component-type-helpers: 3.0.8
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -13072,7 +13088,7 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
-  tailwind-merge@3.3.1: {}
+  tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
     dependencies:
@@ -13542,6 +13558,8 @@ snapshots:
 
   vue-component-type-helpers@3.0.7: {}
 
+  vue-component-type-helpers@3.0.8: {}
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
diff --git a/public/assets/images/comfy-brand-mark.svg b/public/assets/images/comfy-brand-mark.svg
new file mode 100644
index 0000000000..9056ae149c
--- /dev/null
+++ b/public/assets/images/comfy-brand-mark.svg
@@ -0,0 +1,3 @@
+<svg width="278" height="78" viewBox="0 0 278 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M232.151 77.1761C230.645 77.1761 229.43 76.6208 228.638 75.5697C227.823 74.4889 227.611 72.9811 228.055 71.4333L230.801 61.8576C231.708 58.6914 235.023 56.1157 238.19 56.1157H244.346C245.078 56.1157 245.721 55.631 245.923 54.9276L246.985 51.2245C247.127 50.7286 247.028 50.1958 246.718 49.784C246.408 49.373 245.923 49.131 245.407 49.131L231.917 49.1334C231.841 49.123 231.771 49.1181 231.694 49.1181H227.149C225.643 49.1181 224.428 48.5629 223.636 47.5118C222.822 46.431 222.609 44.9232 223.053 43.3762L223.583 41.5271C223.725 41.032 223.626 40.4992 223.316 40.0873C223.006 39.6763 222.521 39.4344 222.006 39.4344H220.265C219.532 39.4344 218.889 39.9191 218.687 40.6233L217.898 43.3762C216.991 46.5424 213.676 49.1181 210.509 49.1181H204.369C203.638 49.1181 202.995 49.6013 202.792 50.303L201.047 56.3415C201.04 56.3647 201.02 56.4264 201.013 56.4496L198.522 65.0783C198.511 65.1079 198.496 65.1552 198.487 65.1857L196.685 71.4316C195.777 74.6002 192.462 77.1761 189.295 77.1761H179.72C178.214 77.1761 176.999 76.6208 176.207 75.5697C175.393 74.4897 175.18 72.9819 175.624 71.4341L183.649 43.5966C183.659 43.5677 183.678 43.5101 183.687 43.4804L184.247 41.5288C184.39 41.0337 184.292 40.5001 183.982 40.0883C183.671 39.6764 183.186 39.4345 182.671 39.4345H180.947C180.216 39.4345 179.574 39.9183 179.371 40.6202L175.878 52.7251C175.867 52.7547 175.852 52.8028 175.844 52.8325L174.525 57.4016C173.617 60.571 170.302 63.1476 167.136 63.1476H157.56C156.054 63.1476 154.839 62.5923 154.047 61.5412C153.233 60.4596 153.02 58.9519 153.464 57.4048L159.283 37.2024C159.426 36.7073 159.327 36.1737 159.017 35.7611C158.707 35.3493 158.222 35.1074 157.706 35.1074H155.973C155.241 35.1074 154.597 35.5921 154.395 36.2955L151.915 44.9345C151.905 44.9634 151.889 45.0106 151.881 45.0403L148.311 57.4016C147.401 60.571 144.086 63.1476 140.92 63.1476H131.345C129.839 63.1476 128.624 62.5923 127.832 61.5412C127.017 60.4604 126.805 58.9526 127.249 57.4048L129.995 47.8291C130.005 47.8003 130.02 47.7546 130.028 47.7249L133.072 37.1855C133.215 36.6904 133.117 36.156 132.807 35.7442C132.497 35.3324 132.012 35.0896 131.496 35.0896H129.779C129.048 35.0896 128.405 35.5735 128.202 36.2754L127.954 37.1374C127.945 37.1623 127.926 37.2208 127.919 37.2456L122.32 56.6219C122.312 56.6475 122.291 56.71 122.284 56.7357L122.093 57.4079C121.186 60.5709 117.871 63.1475 114.705 63.1475H105.129C103.623 63.1475 102.408 62.5922 101.616 61.5411C100.802 60.4603 100.59 58.9525 101.033 57.4047L101.561 55.5636C101.703 55.0685 101.604 54.5357 101.294 54.1239C100.984 53.7129 100.499 53.4709 99.9839 53.4709H98.2486C97.518 53.4709 96.875 53.9541 96.6723 54.6567L95.8795 57.4015C94.9706 60.5709 91.6558 63.1475 88.4891 63.1475H82.2836C81.5518 63.1475 80.908 63.6322 80.7065 64.3356L78.6711 71.4332C77.7637 74.6002 74.4489 77.176 71.2819 77.176H61.7067C60.2001 77.176 58.9851 76.6207 58.1932 75.5696C57.3788 74.4888 57.1664 72.981 57.6107 71.4332L59.3861 65.2401C59.5283 64.745 59.4293 64.2123 59.1193 63.8004C58.8093 63.3894 58.3242 63.1475 57.809 63.1475H52.6987C51.1929 63.1475 49.9779 62.5922 49.1852 61.5411C48.3712 60.4603 48.1585 58.9525 48.6024 57.4055L49.1304 55.5636C49.2722 55.0685 49.1732 54.5357 48.8632 54.1239C48.5532 53.7129 48.068 53.4709 47.5528 53.4709H45.8123C45.0804 53.4709 44.437 53.9556 44.2351 54.659L43.4476 57.4047C42.5399 60.5717 39.225 63.1475 36.0584 63.1475L22.9428 63.1707L13.3395 63.1715C11.8334 63.1715 10.6184 62.6163 9.82643 61.5652C9.01243 60.4844 8.7997 58.9766 9.24362 57.4295L11.0266 51.2116C11.1688 50.7157 11.0698 50.1829 10.7598 49.7711C10.4498 49.3601 9.96467 49.1181 9.44946 49.1181H4.32319C2.81702 49.1181 1.60201 48.5629 0.810076 47.5118C-0.003924 46.431 -0.216654 44.9232 0.227265 43.3762L5.00068 26.7879C5.00946 26.7631 5.02915 26.7006 5.03669 26.6758L6.57773 21.3328C6.59176 21.2943 6.60374 21.2566 6.61498 21.2174L7.0292 19.7713C7.93689 16.6051 11.2514 14.0285 14.418 14.0285H20.5514C21.2832 14.0285 21.927 13.5438 22.1285 12.8404L24.1567 5.76766C25.0645 2.60058 28.3793 0.0248581 31.5463 0.0248581L44.6915 0H54.2647C55.7709 0 56.9859 0.555246 57.7778 1.60634C58.5922 2.68714 58.8045 4.19495 58.3606 5.7428L55.615 15.3192C54.7069 18.4855 51.392 21.0612 48.2254 21.0612L35.0802 21.0853H28.9493C28.2178 21.0853 27.5745 21.5699 27.3722 22.2726L24.6678 31.684C24.6578 31.7136 24.6425 31.7609 24.6342 31.7906L22.2615 40.0074C22.1181 40.5033 22.2166 41.0377 22.5274 41.4503C22.8375 41.8613 23.3226 42.1032 23.8378 42.1032C23.839 42.1032 32.5241 42.0864 32.5241 42.0864H42.0973C43.6034 42.0864 44.8184 42.6417 45.6104 43.6928C46.4248 44.7736 46.6371 46.2814 46.1932 47.8292L45.6464 49.7376C45.5042 50.2327 45.6032 50.7655 45.9132 51.1773C46.2232 51.5884 46.7083 51.8303 47.2235 51.8303H48.9641C49.6956 51.8303 50.3389 51.3456 50.5412 50.6429L51.5735 47.0513C51.5835 47.0217 55.4032 33.8032 55.4032 33.8032C56.3117 30.6337 59.6265 28.058 62.7936 28.058H68.9057C69.6376 28.058 70.2813 27.5733 70.4828 26.8691L72.5126 19.7891C73.4211 16.6229 76.7363 14.0463 79.9026 14.0463H89.4774C90.9836 14.0463 92.1986 14.6016 92.9905 15.6526C93.8049 16.7334 94.0176 18.2413 93.5737 19.7883L91.8027 25.9653C91.6606 26.4604 91.7595 26.9932 92.0695 27.405C92.3795 27.8161 92.8647 28.058 93.3799 28.058H98.5843C100.09 28.058 101.305 28.6132 102.097 29.6643C102.912 30.7451 103.124 32.2529 102.68 33.8008L98.0944 49.7361C97.9518 50.2312 98.0503 50.7648 98.3603 51.1766C98.67 51.5884 99.1555 51.8304 99.6711 51.8304H101.395C102.126 51.8304 102.769 51.3465 102.972 50.6438L105.131 43.1545C105.138 43.1321 105.158 43.072 105.164 43.0496L110.763 23.6725C110.774 23.642 110.789 23.5931 110.798 23.5627L111.89 19.7739C112.799 16.6053 116.114 14.0288 119.28 14.0288H141.957C143.463 14.0288 144.678 14.5847 145.47 15.6359C146.285 16.7159 146.498 18.2237 146.054 19.7707L144.278 25.9646C144.135 26.4605 144.234 26.9933 144.544 27.4043C144.854 27.8161 145.339 28.0581 145.855 28.0581H147.643C148.375 28.0581 149.019 27.5734 149.22 26.87L151.251 19.7892C152.159 16.6229 155.474 14.0464 158.64 14.0464H168.215C169.722 14.0464 170.937 14.6016 171.729 15.6527C172.543 16.7335 172.755 18.2413 172.311 19.7892L170.541 25.9654C170.399 26.4605 170.498 26.9933 170.808 27.4051C171.118 27.8161 171.603 28.0581 172.118 28.0581H177.231C178.737 28.0581 179.952 28.6133 180.744 29.6644C181.558 30.7452 181.77 32.253 181.326 33.8001L180.782 35.7012C180.639 36.1964 180.738 36.7291 181.048 37.141C181.358 37.552 181.844 37.7939 182.359 37.7939H184.093C184.824 37.7939 185.467 37.3108 185.67 36.609L190.536 19.7748C191.445 16.6046 194.76 14.0288 197.926 14.0288H204.082C204.814 14.0288 205.457 13.5441 205.659 12.8407L207.695 5.74313C208.603 2.57605 211.918 0.00032816 215.084 0.00032816H224.659C226.166 0.00032816 227.381 0.555575 228.173 1.60667C228.987 2.68746 229.2 4.19528 228.755 5.74313L226.01 15.3196C225.102 18.4858 221.787 21.0615 218.621 21.0615H212.464C211.733 21.0615 211.089 21.5462 210.887 22.2505L209.822 25.9655C209.68 26.4606 209.779 26.9934 210.089 27.4052C210.399 27.8162 210.884 28.0582 211.399 28.0582H216.548C218.054 28.0582 219.269 28.6134 220.061 29.6645C220.876 30.7445 221.088 32.2523 220.644 33.8001L220.099 35.7013C219.957 36.1964 220.056 36.7292 220.366 37.141C220.676 37.5521 221.161 37.794 221.676 37.794H223.417C224.148 37.794 224.791 37.3109 224.994 36.6083L229.853 19.7748C230.763 16.6054 234.078 14.0288 237.244 14.0288H246.819C248.326 14.0288 249.541 14.5841 250.333 15.6352C251.147 16.716 251.359 18.2238 250.915 19.7716L246.593 34.8016C246.582 34.8312 246.567 34.8786 246.558 34.909L246.095 36.517C245.953 37.0129 246.051 37.5465 246.361 37.9582C246.671 38.37 247.156 38.612 247.672 38.612H249.385C250.116 38.612 250.759 38.1282 250.961 37.4263L256.054 19.7749C256.963 16.6055 260.277 14.0289 263.444 14.0289H273.019C274.525 14.0289 275.74 14.5849 276.532 15.6361C277.347 16.7161 277.559 18.2239 277.115 19.7717L266.274 57.4035C265.365 60.5722 262.05 63.148 258.884 63.148H252.728C251.996 63.148 251.352 63.6327 251.151 64.3361L249.115 71.4337C248.208 74.6007 244.893 77.1765 241.726 77.1765L232.151 77.1761ZM77.3264 35.1074C76.5954 35.1074 75.9524 35.5912 75.7497 36.2939L70.641 54.0206C70.4984 54.5157 70.5965 55.0493 70.9066 55.4611C71.2166 55.8737 71.7021 56.1157 72.2177 56.1157H73.951C74.6821 56.1157 75.325 55.6319 75.5277 54.9292L80.6364 37.2025C80.779 36.7074 80.6809 36.1738 80.3709 35.762C80.0608 35.3494 79.5753 35.1074 79.0598 35.1074H77.3264Z" fill="#F0FF41"></path>
+</svg>
\ No newline at end of file
diff --git a/public/assets/images/nvidia-logo-square.jpg b/public/assets/images/nvidia-logo-square.jpg
new file mode 100644
index 0000000000..c57f20b5df
Binary files /dev/null and b/public/assets/images/nvidia-logo-square.jpg differ
diff --git a/scripts/collect-i18n-general.ts b/scripts/collect-i18n-general.ts
index f0b6dde0cc..53c813fb76 100644
--- a/scripts/collect-i18n-general.ts
+++ b/scripts/collect-i18n-general.ts
@@ -2,6 +2,7 @@ import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
+import { DESKTOP_DIALOGS } from '../src/constants/desktopDialogs'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
@@ -131,6 +132,23 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     ])
   )
 
+  // Desktop Dialogs
+  const allDesktopDialogsLocale = Object.fromEntries(
+    Object.values(DESKTOP_DIALOGS).map((dialog) => [
+      normalizeI18nKey(dialog.id),
+      {
+        title: dialog.title,
+        message: dialog.message,
+        buttons: Object.fromEntries(
+          dialog.buttons.map((button) => [
+            normalizeI18nKey(button.label),
+            button.label
+          ])
+        )
+      }
+    ])
+  )
+
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -144,7 +162,8 @@ test('collect-i18n-general', async ({ comfyPage }) => {
           ...allSettingCategoriesLocale
         },
         serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale
+        serverConfigCategories: allServerConfigCategoriesLocale,
+        desktopDialogs: allDesktopDialogsLocale
       },
       null,
       2
diff --git a/scripts/collect-i18n-node-defs.ts b/scripts/collect-i18n-node-defs.ts
index ed443015ae..99ab97a663 100644
--- a/scripts/collect-i18n-node-defs.ts
+++ b/scripts/collect-i18n-node-defs.ts
@@ -1,33 +1,48 @@
 import * as fs from 'fs'
 
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import type { ComfyNodeDef } from '../src/schemas/nodeDefSchema'
-import type { ComfyApi } from '../src/scripts/api'
-import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 import { normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
+interface WidgetInfo {
+  name?: string
+  label?: string
+}
+
+interface WidgetLabels {
+  [key: string]: Record<string, { name: string }>
+}
+
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  comfyPage.page.route('**/view**', async (route) => {
+  await comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })
   })
 
-  const nodeDefs: ComfyNodeDefImpl[] = (
-    Object.values(
-      await comfyPage.page.evaluate(async () => {
-        const api = window['app'].api as ComfyApi
-        return await api.getNodeDefs()
-      })
-    ) as ComfyNodeDef[]
+  // Note: Don't mock the object_info API endpoint - let it hit the actual backend
+
+  const nodeDefs: ComfyNodeDefImpl[] = await comfyPage.page.evaluate(
+    async () => {
+      // @ts-expect-error - app is dynamically added to window
+      const api = window['app'].api
+      const rawNodeDefs = await api.getNodeDefs()
+      const { ComfyNodeDefImpl } = await import('../src/stores/nodeDefStore')
+
+      return (
+        Object.values(rawNodeDefs)
+          // Ignore DevTools nodes (used for internal testing)
+          .filter((def: ComfyNodeDef) => !def.name.startsWith('DevTools'))
+          .map((def: ComfyNodeDef) => new ComfyNodeDefImpl(def))
+      )
+    }
   )
-    // Ignore DevTools nodes (used for internal testing)
-    .filter((def) => !def.name.startsWith('DevTools'))
-    .map((def) => new ComfyNodeDefImpl(def))
 
   console.log(`Collected ${nodeDefs.length} node definitions`)
 
@@ -52,7 +67,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   )
 
   async function extractWidgetLabels() {
-    const nodeLabels = {}
+    const nodeLabels: WidgetLabels = {}
 
     for (const nodeDef of nodeDefs) {
       const inputNames = Object.values(nodeDef.inputs).map(
@@ -65,12 +80,15 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         const widgetsMappings = await comfyPage.page.evaluate(
           (args) => {
             const [nodeName, displayName, inputNames] = args
+            // @ts-expect-error - LiteGraph is dynamically added to window
             const node = window['LiteGraph'].createNode(nodeName, displayName)
             if (!node.widgets?.length) return {}
             return Object.fromEntries(
               node.widgets
-                .filter((w) => w?.name && !inputNames.includes(w.name))
-                .map((w) => [w.name, w.label])
+                .filter(
+                  (w: WidgetInfo) => w?.name && !inputNames.includes(w.name)
+                )
+                .map((w: WidgetInfo) => [w.name, w.label])
             )
           },
           [nodeDef.name, nodeDef.display_name, inputNames]
diff --git a/scripts/diff-i18n.ts b/scripts/diff-i18n.ts
index 3313333675..7b4ff8da11 100644
--- a/scripts/diff-i18n.ts
+++ b/scripts/diff-i18n.ts
@@ -72,7 +72,7 @@ function capture(srcLocaleDir: string, tempBaseDir: string) {
     const relativePath = file.replace(srcLocaleDir, '')
     const targetPath = join(tempBaseDir, relativePath)
     ensureDir(dirname(targetPath))
-    writeFileSync(targetPath, readFileSync(file))
+    writeFileSync(targetPath, readFileSync(file, 'utf8'))
   }
   console.log('Captured current locale files to temp/base/')
 }
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
new file mode 100644
index 0000000000..789e142b8d
--- /dev/null
+++ b/scripts/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    /* Script files configuration */
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 5e183c4305..0a8ec51c37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,8 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { useConflictDetection } from './composables/useConflictDetection'
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 747c3d1f6d..d331541f70 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -66,6 +66,8 @@
   --color-charcoal-700: #202121;
   --color-charcoal-800: #171718;
 
+  --color-neutral-550: #636363;
+
   --color-stone-100: #444444;
   --color-stone-200: #828282;
   --color-stone-300: #bbbbbb;
@@ -87,6 +89,8 @@
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
+  --color-pure-white: #ffffff;
+
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
@@ -103,6 +107,10 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
+  --color-coral-red-600: #973a40;
+  --color-coral-red-500: #c53f49;
+  --color-coral-red-400: #dd424e;
+
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
@@ -923,48 +931,6 @@ audio.comfy-audio.empty-audio-widget {
 }
 /* End of [Desktop] Electron window specific styles */
 
-/* Vue Node LOD (Level of Detail) System */
-/* These classes control rendering detail based on zoom level */
-
-/* Minimal LOD (zoom <= 0.4) - Title only for performance */
-.lg-node--lod-minimal {
-  min-height: 32px;
-  transition: min-height 0.2s ease;
-  /* Performance optimizations */
-  text-shadow: none;
-  backdrop-filter: none;
-}
-
-.lg-node--lod-minimal .lg-node-body {
-  display: none !important;
-}
-
-/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
-.lg-node--lod-reduced {
-  transition: opacity 0.1s ease;
-  /* Performance optimizations */
-  text-shadow: none;
-}
-
-.lg-node--lod-reduced .lg-widget-label,
-.lg-node--lod-reduced .lg-slot-label {
-  display: none;
-}
-
-.lg-node--lod-reduced .lg-slot {
-  opacity: 0.6;
-  font-size: 0.75rem;
-}
-
-.lg-node--lod-reduced .lg-widget {
-  margin: 2px 0;
-  font-size: 0.875rem;
-}
-
-/* Full LOD (zoom > 0.8) - Complete detail rendering */
-.lg-node--lod-full {
-  /* Uses default styling - no overrides needed */
-}
 
 .lg-node {
   /* Disable text selection on all nodes */
@@ -990,23 +956,51 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
-/* Global performance optimizations for LOD */
-.lg-node--lod-minimal,
-.lg-node--lod-reduced {
-  /* Remove ALL expensive paint effects */
-  box-shadow: none !important;
-  filter: none !important;
-  backdrop-filter: none !important;
-  text-shadow: none !important;
-  -webkit-mask-image: none !important;
-  mask-image: none !important;
-  clip-path: none !important;
+/* START LOD specific styles */
+/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
+
+.isLOD .lg-node {
+  box-shadow: none;
+  filter: none;
+  backdrop-filter: none;
+  text-shadow: none;
+  -webkit-mask-image: none;
+  mask-image: none;
+  clip-path: none;
+  background-image: none;
+  text-rendering: optimizeSpeed;
+  border-radius: 0;
+  contain: layout style;
+  transition: none;
+}
+
+.isLOD .lg-node-widgets {
+  pointer-events: none;
+}
+
+.lod-toggle {
+  visibility: visible;
+}
+
+.isLOD .lod-toggle {
+  visibility: hidden;
 }
 
-/* Reduce paint complexity for minimal LOD */
-.lg-node--lod-minimal {
-  /* Skip complex borders */
-  border-radius: 0 !important;
-  /* Use solid colors only */
-  background-image: none !important;
+
+.lod-fallback {
+  display: none;
+}
+
+.isLOD .lod-fallback {
+  display: block;
+}
+
+.isLOD .image-preview img {
+  image-rendering: pixelated;
+}
+
+
+.isLOD .slot-dot {
+  border-radius: 0;
 }
+/* END LOD specific styles */
diff --git a/src/base/common/async.ts b/src/base/common/async.ts
new file mode 100644
index 0000000000..a97f6f1bd0
--- /dev/null
+++ b/src/base/common/async.ts
@@ -0,0 +1,98 @@
+/**
+ * Cross-browser async utilities for scheduling tasks during browser idle time
+ * with proper fallbacks for browsers that don't support requestIdleCallback.
+ *
+ * Implementation based on:
+ * https://github.com/microsoft/vscode/blob/main/src/vs/base/common/async.ts
+ */
+
+interface IdleDeadline {
+  didTimeout: boolean
+  timeRemaining(): number
+}
+
+interface IDisposable {
+  dispose(): void
+}
+
+/**
+ * Internal implementation function that handles the actual scheduling logic.
+ * Uses feature detection to determine whether to use native requestIdleCallback
+ * or fall back to setTimeout-based implementation.
+ */
+let _runWhenIdle: (
+  targetWindow: any,
+  callback: (idle: IdleDeadline) => void,
+  timeout?: number
+) => IDisposable
+
+/**
+ * Execute the callback during the next browser idle period.
+ * Falls back to setTimeout-based scheduling in browsers without native support.
+ */
+export let runWhenGlobalIdle: (
+    callback: (idle: IdleDeadline) => void,
+    timeout?: number
+  ) => IDisposable
+
+  // Self-invoking function to set up the idle callback implementation
+;(function () {
+  const safeGlobal: any = globalThis
+
+  if (
+    typeof safeGlobal.requestIdleCallback !== 'function' ||
+    typeof safeGlobal.cancelIdleCallback !== 'function'
+  ) {
+    // Fallback implementation for browsers without native support (e.g., Safari)
+    _runWhenIdle = (_targetWindow, runner, _timeout?) => {
+      setTimeout(() => {
+        if (disposed) {
+          return
+        }
+
+        // Simulate IdleDeadline - give 15ms window (one frame at ~64fps)
+        const end = Date.now() + 15
+        const deadline: IdleDeadline = {
+          didTimeout: true,
+          timeRemaining() {
+            return Math.max(0, end - Date.now())
+          }
+        }
+
+        runner(Object.freeze(deadline))
+      })
+
+      let disposed = false
+      return {
+        dispose() {
+          if (disposed) {
+            return
+          }
+          disposed = true
+        }
+      }
+    }
+  } else {
+    // Native requestIdleCallback implementation
+    _runWhenIdle = (targetWindow: typeof safeGlobal, runner, timeout?) => {
+      const handle: number = targetWindow.requestIdleCallback(
+        runner,
+        typeof timeout === 'number' ? { timeout } : undefined
+      )
+
+      let disposed = false
+      return {
+        dispose() {
+          if (disposed) {
+            return
+          }
+          disposed = true
+          targetWindow.cancelIdleCallback(handle)
+        }
+      }
+    }
+  }
+
+  runWhenGlobalIdle = (runner, timeout) =>
+    _runWhenIdle(globalThis, runner, timeout)
+})()
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index b46c27e279..d0856362f6 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -21,7 +21,8 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { CSSProperties, computed, watchEffect } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, watchEffect } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 589815dc84..e05a106197 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -22,7 +22,8 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 3d0f0e9b00..ca0dcf34ec 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,5 +1,8 @@
 <template>
-  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
+  <div
+    ref="rootEl"
+    class="relative overflow-hidden h-full w-full bg-neutral-900"
+  >
     <div class="p-terminal rounded-none h-full w-full p-2">
       <div ref="terminalEl" class="h-full terminal-host" />
     </div>
@@ -26,7 +29,8 @@
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
 import Button from 'primevue/button'
-import { Ref, computed, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
@@ -97,12 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow-x: auto;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
-  overflow-y: hidden;
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>
diff --git a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
index c439750f9a..f32357c486 100644
--- a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { IDisposable } from '@xterm/xterm'
-import { Ref, onMounted, onUnmounted } from 'vue'
+import type { IDisposable } from '@xterm/xterm'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
diff --git a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
index 4671227296..68f643218f 100644
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -15,10 +15,11 @@
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
+import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index 5f5671a4d0..a8162b21b6 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -47,7 +47,8 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import Menu, { MenuState } from 'primevue/menu'
+import type { MenuState } from 'primevue/menu'
+import Menu from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
diff --git a/src/components/common/ExtensionSlot.vue b/src/components/common/ExtensionSlot.vue
index e031e1c8d8..6819e494e7 100644
--- a/src/components/common/ExtensionSlot.vue
+++ b/src/components/common/ExtensionSlot.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'
 
-import { CustomExtension, VueExtension } from '@/types/extensionTypes'
+import type { CustomExtension, VueExtension } from '@/types/extensionTypes'
 
 const props = defineProps<{
   extension: VueExtension | CustomExtension
diff --git a/src/components/common/FormItem.vue b/src/components/common/FormItem.vue
index f9da213684..d1b4229647 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -44,7 +44,7 @@ import FormRadioGroup from '@/components/common/FormRadioGroup.vue'
 import InputKnob from '@/components/common/InputKnob.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
-import { FormItem } from '@/platform/settings/types'
+import type { FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index 79c7320f64..36aaa8a2b4 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -10,7 +10,7 @@
       class="absolute inset-0"
     />
     <img
-      v-show="isImageLoaded"
+      v-if="cachedSrc"
       ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
@@ -77,8 +77,8 @@ const shouldLoad = computed(() => isIntersecting.value)
 
 watch(
   shouldLoad,
-  async (shouldLoad) => {
-    if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
+  async (shouldLoadVal) => {
+    if (shouldLoadVal && src && !cachedSrc.value && !hasError.value) {
       try {
         const cachedMedia = await getCachedMedia(src)
         if (cachedMedia.error) {
@@ -93,7 +93,7 @@ watch(
         console.warn('Failed to load cached media:', error)
         cachedSrc.value = src
       }
-    } else if (!shouldLoad) {
+    } else if (!shouldLoadVal) {
       if (cachedSrc.value?.startsWith('blob:')) {
         releaseUrl(src)
       }
diff --git a/src/components/common/RefreshButton.vue b/src/components/common/RefreshButton.vue
index b564ac2781..2569d0fbd0 100644
--- a/src/components/common/RefreshButton.vue
+++ b/src/components/common/RefreshButton.vue
@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 
 const {
   disabled,
diff --git a/src/components/common/StartupDisplay.vue b/src/components/common/StartupDisplay.vue
new file mode 100644
index 0000000000..bd42c14e4f
--- /dev/null
+++ b/src/components/common/StartupDisplay.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="grid grid-rows-2 gap-8">
+      <!-- Top container: Logo -->
+      <div class="flex items-end justify-center">
+        <img
+          src="/assets/images/comfy-brand-mark.svg"
+          :alt="t('g.logoAlt')"
+          class="w-60"
+        />
+      </div>
+      <!-- Bottom container: Progress and text -->
+      <div class="flex flex-col items-center justify-center gap-4">
+        <ProgressBar
+          v-if="!hideProgress"
+          :mode="progressMode"
+          :value="progressPercentage ?? 0"
+          :show-value="false"
+          class="w-90 h-2 mt-8"
+          :pt="{ value: { class: 'bg-brand-yellow' } }"
+        />
+        <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
+          {{ title }}
+        </h1>
+        <p v-if="statusText" class="text-lg text-neutral-400">
+          {{ statusText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+/** Props for the StartupDisplay component */
+interface StartupDisplayProps {
+  /** Progress: 0-100 for determinate, undefined for indeterminate */
+  progressPercentage?: number
+  /** Main title text */
+  title?: string
+  /** Status text shown below the title */
+  statusText?: string
+  /** Hide the progress bar */
+  hideProgress?: boolean
+  /** Use full screen wrapper (default: true) */
+  fullScreen?: boolean
+}
+
+const {
+  progressPercentage,
+  title,
+  statusText,
+  hideProgress = false,
+  fullScreen = true
+} = defineProps<StartupDisplayProps>()
+
+const progressMode = computed(() =>
+  progressPercentage === undefined ? 'indeterminate' : 'determinate'
+)
+
+const wrapperClass = computed(() =>
+  fullScreen
+    ? 'flex items-center justify-center min-h-screen'
+    : 'flex items-center justify-center'
+)
+</script>
diff --git a/src/components/common/TreeExplorerTreeNode.spec.ts b/src/components/common/TreeExplorerTreeNode.spec.ts
index e229a99f57..d00d3e401e 100644
--- a/src/components/common/TreeExplorerTreeNode.spec.ts
+++ b/src/components/common/TreeExplorerTreeNode.spec.ts
@@ -9,10 +9,8 @@ import { createI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import {
-  InjectKeyHandleEditLabelFunction,
-  RenderedTreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance
 const i18n = createI18n({
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index 2698f17e67..17c38c29b6 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -58,15 +58,14 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useManagerState } from '@/composables/useManagerState'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import type { MissingNodeType } from '@/types/comfy'
-import { ManagerTab } from '@/types/comfyManagerTypes'
-
-import PackInstallButton from './manager/button/PackInstallButton.vue'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
@@ -138,7 +137,7 @@ const allMissingNodesInstalled = computed(() => {
 })
 // Watch for completion and close dialog
 watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (allInstalled) {
+  if (allInstalled && showInstallAllButton.value) {
     // Use nextTick to ensure state updates are complete
     await nextTick()
 
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index cf81441f19..10030a9e93 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -43,11 +43,11 @@
 
 <script setup lang="ts">
 import Message from 'primevue/message'
+import { compare } from 'semver'
 import { computed } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { compareVersions } from '@/utils/formatUtil'
 
 const props = defineProps<{
   missingCoreNodes: Record<string, LGraphNode[]>
@@ -68,7 +68,7 @@ const currentComfyUIVersion = computed<string | null>(() => {
 const sortedMissingCoreNodes = computed(() => {
   return Object.entries(props.missingCoreNodes).sort(([a], [b]) => {
     // Sort by version in descending order (newest first)
-    return compareVersions(b, a) // Reversed for descending order
+    return compare(b, a) // Reversed for descending order
   })
 })
 
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index 05303ce69e..3f3a47b7b7 100644
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -148,7 +148,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import { SignInData, SignUpData } from '@/schemas/signInSchema'
+import type { SignInData, SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'
 
 import ApiKeyForm from './signin/ApiKeyForm.vue'
diff --git a/src/components/dialog/content/UpdatePasswordContent.vue b/src/components/dialog/content/UpdatePasswordContent.vue
index 55611c00c5..6ab4b74df7 100644
--- a/src/components/dialog/content/UpdatePasswordContent.vue
+++ b/src/components/dialog/content/UpdatePasswordContent.vue
@@ -17,7 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'
diff --git a/src/components/dialog/content/manager/ManagerHeader.test.ts b/src/components/dialog/content/manager/ManagerHeader.test.ts
deleted file mode 100644
index fa974bbfc5..0000000000
--- a/src/components/dialog/content/manager/ManagerHeader.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-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' with { type: '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)
-  })
-})
diff --git a/src/components/dialog/content/manager/ManagerHeader.vue b/src/components/dialog/content/manager/ManagerHeader.vue
deleted file mode 100644
index 28f86f7e78..0000000000
--- a/src/components/dialog/content/manager/ManagerHeader.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="flex items-center">
-      <h2 class="text-lg font-normal text-left">
-        {{ $t('manager.discoverCommunityContent') }}
-      </h2>
-      <div class="flex justify-end ml-auto pr-4 pl-2">
-        <Tag
-          v-tooltip.left="$t('manager.legacyManagerUIDescription')"
-          severity="info"
-          icon="pi pi-info-circle"
-          :value="$t('manager.legacyManagerUI')"
-          class="cursor-help ml-2"
-          :pt="{
-            root: { class: 'text-xs' }
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Tag from 'primevue/tag'
-</script>
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index 161268b91b..082fb200c7 100644
--- a/src/components/dialog/content/setting/UsageLogsTable.vue
+++ b/src/components/dialog/content/setting/UsageLogsTable.vue
@@ -96,8 +96,8 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import type { AuditLog } from '@/services/customerEventsService'
 import {
-  AuditLog,
   EventType,
   useCustomerEventsService
 } from '@/services/customerEventsService'
diff --git a/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue b/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
index 0947af884a..ded8cb18b0 100644
--- a/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
+++ b/src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue
@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
-import { KeyComboImpl } from '@/stores/keybindingStore'
+import type { KeyComboImpl } from '@/stores/keybindingStore'
 
 const { keyCombo, isModified = false } = defineProps<{
   keyCombo: KeyComboImpl
diff --git a/src/components/dialog/content/signin/ApiKeyForm.vue b/src/components/dialog/content/signin/ApiKeyForm.vue
index 01e2e0a3f3..dc0b196a4e 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -79,7 +79,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
diff --git a/src/components/dialog/content/signin/SignInForm.spec.ts b/src/components/dialog/content/signin/SignInForm.spec.ts
index 62c1fc0f75..d8f3721c13 100644
--- a/src/components/dialog/content/signin/SignInForm.spec.ts
+++ b/src/components/dialog/content/signin/SignInForm.spec.ts
@@ -1,5 +1,6 @@
 import { Form } from '@primevue/forms'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index d37ee612c5..a600428d47 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -71,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index 027a6059fc..0fa7be15db 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -59,7 +59,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormField, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 49f325c0c1..f13b78d7f5 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -33,7 +33,7 @@
 
   <!-- TransformPane for Vue node rendering -->
   <TransformPane
-    v-if="isVueNodesEnabled && comfyApp.canvas && comfyAppReady"
+    v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
     @transform-update="handleTransformUpdate"
     @wheel.capture="canvasInteractions.forwardEventToCanvas"
@@ -43,8 +43,6 @@
       v-for="nodeData in allNodes"
       :key="nodeData.id"
       :node-data="nodeData"
-      :position="nodePositions.get(nodeData.id)"
-      :size="nodeSizes.get(nodeData.id)"
       :readonly="false"
       :error="
         executionStore.lastExecutionError?.node_id === nodeData.id
@@ -53,9 +51,6 @@
       "
       :zoom-level="canvasStore.canvas?.ds?.scale || 1"
       :data-node-id="nodeData.id"
-      @node-click="handleNodeSelect"
-      @update:collapsed="handleNodeCollapse"
-      @update:title="handleNodeTitleUpdate"
     />
   </TransformPane>
 
@@ -76,9 +71,9 @@
 import { useEventListener, whenever } from '@vueuse/core'
 import {
   computed,
+  nextTick,
   onMounted,
   onUnmounted,
-  provide,
   ref,
   shallowRef,
   watch,
@@ -96,7 +91,6 @@ import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vu
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
@@ -117,12 +111,11 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import { attachSlotLinkPreviewRenderer } from '@/renderer/core/canvas/links/slotLinkPreviewRenderer'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
-import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
-import { useExecutionStateProvider } from '@/renderer/extensions/vueNodes/execution/useExecutionStateProvider'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -169,44 +162,34 @@ const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
 // Feature flags
 const { shouldRenderVueNodes } = useVueFeatureFlags()
-const isVueNodesEnabled = computed(() => shouldRenderVueNodes.value)
 
 // Vue node system
-const vueNodeLifecycle = useVueNodeLifecycle(isVueNodesEnabled)
-const viewportCulling = useViewportCulling(
-  isVueNodesEnabled,
-  vueNodeLifecycle.vueNodeData,
-  vueNodeLifecycle.nodeDataTrigger,
-  vueNodeLifecycle.nodeManager
-)
-const nodeEventHandlers = useNodeEventHandlers(vueNodeLifecycle.nodeManager)
-
-const nodePositions = vueNodeLifecycle.nodePositions
-const nodeSizes = vueNodeLifecycle.nodeSizes
-const allNodes = viewportCulling.allNodes
-
-const handleTransformUpdate = () => {
-  viewportCulling.handleTransformUpdate()
-  // TODO: Fix paste position sync in separate PR
-  vueNodeLifecycle.detectChangesInRAF.value()
+const vueNodeLifecycle = useVueNodeLifecycle()
+const { handleTransformUpdate } = useViewportCulling()
+
+const handleVueNodeLifecycleReset = async () => {
+  if (shouldRenderVueNodes.value) {
+    vueNodeLifecycle.disposeNodeManagerAndSyncs()
+    await nextTick()
+    vueNodeLifecycle.initializeNodeManager()
+  }
 }
-const handleNodeSelect = nodeEventHandlers.handleNodeSelect
-const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
-const handleNodeTitleUpdate = nodeEventHandlers.handleNodeTitleUpdate
 
-// Provide selection state to all Vue nodes
-const selectedNodeIds = computed(
-  () =>
-    new Set(
-      canvasStore.selectedItems
-        .filter((item) => item.id !== undefined)
-        .map((item) => String(item.id))
-    )
+watch(() => canvasStore.currentGraph, handleVueNodeLifecycleReset)
+
+watch(
+  () => canvasStore.isInSubgraph,
+  async (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      useWorkflowStore().updateActiveGraph()
+    }
+    await handleVueNodeLifecycleReset()
+  }
 )
-provide(SelectedNodeIdsKey, selectedNodeIds)
 
-// Provide execution state to all Vue nodes
-useExecutionStateProvider()
+const allNodes = computed(() =>
+  Array.from(vueNodeLifecycle.vueNodeData.value.values())
+)
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -325,13 +308,27 @@ watch(
       removeSlotError(node)
       const nodeErrors = lastNodeErrors?.[node.id]
       if (!nodeErrors) continue
-      for (const error of nodeErrors.errors) {
-        if (error.extra_info && error.extra_info.input_name) {
-          const inputIndex = node.findInputSlot(error.extra_info.input_name)
+
+      const validErrors = nodeErrors.errors.filter(
+        (error) => error.extra_info?.input_name !== undefined
+      )
+      const slotErrorsChanged =
+        validErrors.length > 0 &&
+        validErrors.some((error) => {
+          const inputName = error.extra_info!.input_name!
+          const inputIndex = node.findInputSlot(inputName)
           if (inputIndex !== -1) {
             node.inputs[inputIndex].hasErrors = true
+            return true
           }
-        }
+          return false
+        })
+
+      // Trigger Vue node data update if slot errors changed
+      if (slotErrorsChanged && comfyApp.graph.onTrigger) {
+        comfyApp.graph.onTrigger('node:slot-errors:changed', {
+          nodeId: node.id
+        })
       }
     }
 
@@ -404,6 +401,7 @@ onMounted(async () => {
 
   // @ts-expect-error fixme ts strict error
   await comfyApp.setup(canvasRef.value)
+  attachSlotLinkPreviewRenderer(comfyApp.canvas)
   canvasStore.canvas = comfyApp.canvas
   canvasStore.canvas.render_canvas_border = false
   workspaceStore.spinner = false
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index d4ec414d68..c4050d30c2 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -124,11 +124,11 @@ import ButtonGroup from 'primevue/buttongroup'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index f16e4ea3e0..45cbfc9f36 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -33,9 +33,11 @@ const tooltipText = ref('')
 const left = ref<string>()
 const top = ref<string>()
 
-const hideTooltip = () => (tooltipText.value = '')
+function hideTooltip() {
+  return (tooltipText.value = '')
+}
 
-const showTooltip = async (tooltip: string | null | undefined) => {
+async function showTooltip(tooltip: string | null | undefined) {
   if (!tooltip) return
 
   left.value = comfyApp.canvas.mouse[0] + 'px'
@@ -56,9 +58,9 @@ const showTooltip = async (tooltip: string | null | undefined) => {
   }
 }
 
-const onIdle = () => {
+function onIdle() {
   const { canvas } = comfyApp
-  const node = canvas.node_over
+  const node = canvas?.node_over
   if (!node) return
 
   const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
@@ -68,7 +70,7 @@ const onIdle = () => {
     ctor.title_mode !== LiteGraph.NO_TITLE &&
     canvas.graph_mouse[1] < node.pos[1] // If we are over a node, but not within the node then we are on its title
   ) {
-    return showTooltip(nodeDef.description)
+    return showTooltip(nodeDef?.description)
   }
 
   if (node.flags?.collapsed) return
@@ -83,7 +85,7 @@ const onIdle = () => {
     const inputName = node.inputs[inputSlot].name
     const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(inputName)}.tooltip`,
-      nodeDef.inputs[inputName]?.tooltip ?? ''
+      nodeDef?.inputs[inputName]?.tooltip ?? ''
     )
     return showTooltip(translatedTooltip)
   }
@@ -97,7 +99,7 @@ const onIdle = () => {
   if (outputSlot !== -1) {
     const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.outputs.${outputSlot}.tooltip`,
-      nodeDef.outputs[outputSlot]?.tooltip ?? ''
+      nodeDef?.outputs[outputSlot]?.tooltip ?? ''
     )
     return showTooltip(translatedTooltip)
   }
@@ -107,7 +109,7 @@ const onIdle = () => {
   if (widget && !isDOMWidget(widget)) {
     const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(widget.name)}.tooltip`,
-      nodeDef.inputs[widget.name]?.tooltip ?? ''
+      nodeDef?.inputs[widget.name]?.tooltip ?? ''
     )
     // Widget tooltip can be set dynamically, current translation collection does not support this.
     return showTooltip(widget.tooltip ?? translatedTooltip)
diff --git a/src/components/graph/SelectionToolbox.spec.ts b/src/components/graph/SelectionToolbox.spec.ts
index 7b78190e59..00ce74a51b 100644
--- a/src/components/graph/SelectionToolbox.spec.ts
+++ b/src/components/graph/SelectionToolbox.spec.ts
@@ -5,12 +5,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 
 // Mock the composables and services
-vi.mock('@/composables/graph/useCanvasInteractions', () => ({
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
   useCanvasInteractions: vi.fn(() => ({
     handleWheel: vi.fn()
   }))
@@ -450,9 +450,9 @@ describe('SelectionToolbox', () => {
   describe('Event Handling', () => {
     it('should handle wheel events', async () => {
       const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
-      const handleWheelSpy = vi.fn()
+      const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
-        handleWheel: handleWheelSpy
+        forwardEventToCanvas: forwardEventToCanvasSpy
       } as any)
 
       const mockExtensionService = vi.mocked(useExtensionService)
@@ -467,7 +467,7 @@ describe('SelectionToolbox', () => {
       const panel = wrapper.find('.panel')
       await panel.trigger('wheel')
 
-      expect(handleWheelSpy).toHaveBeenCalled()
+      expect(forwardEventToCanvasSpy).toHaveBeenCalled()
     })
   })
 
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index d87083d3da..9970c0b47d 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -11,9 +11,9 @@
         :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',
-          content: 'px-1 py-1 h-10 px-1 flex flex-row gap-1'
+          content: 'p-1 h-10 flex flex-row gap-1'
         }"
-        @wheel="canvasInteractions.handleWheel"
+        @wheel="canvasInteractions.forwardEventToCanvas"
       >
         <DeleteButton v-if="showDelete" />
         <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
@@ -60,9 +60,9 @@ import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButt
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 6ccf84cd64..40dad529df 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -135,7 +135,8 @@
 </template>
 
 <script setup lang="ts">
-import { Button, InputNumber, InputNumberInputEvent } from 'primevue'
+import type { InputNumberInputEvent } from 'primevue'
+import { Button, InputNumber } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index ef68887bd9..9e3024740c 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -50,7 +50,8 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import { Raw, computed, ref, watch } from 'vue'
+import type { Raw } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type {
diff --git a/src/components/graph/selectionToolbox/DeleteButton.vue b/src/components/graph/selectionToolbox/DeleteButton.vue
index 0da29af7b2..d2b1d1acde 100644
--- a/src/components/graph/selectionToolbox/DeleteButton.vue
+++ b/src/components/graph/selectionToolbox/DeleteButton.vue
@@ -20,7 +20,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
 
 const { t } = useI18n()
diff --git a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
index 92cd09e38c..2e89ef7a51 100644
--- a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
+++ b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
@@ -17,7 +17,8 @@
 import Button from 'primevue/button'
 
 import { st } from '@/i18n'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommand } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
diff --git a/src/components/graph/selectionToolbox/MoreOptions.vue b/src/components/graph/selectionToolbox/MoreOptions.vue
index f40a49b603..32729719ca 100644
--- a/src/components/graph/selectionToolbox/MoreOptions.vue
+++ b/src/components/graph/selectionToolbox/MoreOptions.vue
@@ -26,6 +26,7 @@
       :pt="pt"
       @show="onPopoverShow"
       @hide="onPopoverHide"
+      @wheel="canvasInteractions.forwardEventToCanvas"
     >
       <div class="flex flex-col p-2 min-w-48">
         <MenuOptionItem
@@ -49,11 +50,11 @@
 </template>
 
 <script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
 import Button from 'primevue/button'
 import Popover from 'primevue/popover'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import {
   forceCloseMoreOptionsSignal,
   moreOptionsOpen,
@@ -66,6 +67,7 @@ import {
   useMoreOptionsMenu
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 
 import MenuOptionItem from './MenuOptionItem.vue'
@@ -84,7 +86,7 @@ const currentSubmenu = ref<string | null>(null)
 
 const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
 const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
-
+const canvasInteractions = useCanvasInteractions()
 const minimap = useMinimap()
 const containerStyles = minimap.containerStyles
 
@@ -152,9 +154,7 @@ const repositionPopover = () => {
   }
 }
 
-const { startSync, stopSync } = useCanvasTransformSync(repositionPopover, {
-  autoStart: false
-})
+const { resume: startSync, pause: stopSync } = useRafFn(repositionPopover)
 
 function openPopover(triggerEvent?: Event): boolean {
   const el = getButtonEl()
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index 056f0f90bc..2f1e25229a 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -48,9 +48,9 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import {
-  type MenuOption,
-  type SubMenuOption
+import type {
+  MenuOption,
+  SubMenuOption
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
 
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index d3c513a125..8696614d88 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -56,7 +56,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 
 import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
 import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
-import { ComponentWidget } from '@/scripts/domWidget'
+import type { ComponentWidget } from '@/scripts/domWidget'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const { widget, history } = defineProps<{
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 305af06210..6e218d7a1b 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -19,14 +19,15 @@
 
 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
-import { CSSProperties, computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useDomClipping } from '@/composables/element/useDomClipping'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
-import { DomWidgetState } from '@/stores/domWidgetStore'
+import type { DomWidgetState } from '@/stores/domWidgetStore'
 
 const { widgetState } = defineProps<{
   widgetState: DomWidgetState
diff --git a/src/components/graph/widgets/TextPreviewWidget.vue b/src/components/graph/widgets/TextPreviewWidget.vue
index a484af8796..7da01c7744 100644
--- a/src/components/graph/widgets/TextPreviewWidget.vue
+++ b/src/components/graph/widgets/TextPreviewWidget.vue
@@ -15,7 +15,7 @@
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { NodeId } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index f90922e394..708d9f9056 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -141,15 +141,15 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
-import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import { useManagerState } from '@/composables/useManagerState'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { type ReleaseNote } from '@/platform/updates/common/releaseService'
+import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { ManagerTab } from '@/types/comfyManagerTypes'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Types
 interface MenuItem {
@@ -168,7 +168,8 @@ const EXTERNAL_LINKS = {
   DOCS: 'https://docs.comfy.org/',
   DISCORD: 'https://www.comfy.org/discord',
   GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
-  DESKTOP_GUIDE: 'https://comfyorg.notion.site/',
+  DESKTOP_GUIDE_WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
+  DESKTOP_GUIDE_MACOS: 'https://docs.comfy.org/installation/desktop/macos',
   UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
 } as const
 
@@ -222,7 +223,11 @@ const moreItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.desktopUserGuide'),
       visible: isElectron(),
       action: () => {
-        openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
+        const docsUrl =
+          electronAPI().getPlatform() === 'darwin'
+            ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
+            : EXTERNAL_LINKS.DESKTOP_GUIDE_WINDOWS
+        openExternalLink(docsUrl)
         emit('close')
       }
     },
diff --git a/src/components/input/MultiSelect.accessibility.stories.ts b/src/components/input/MultiSelect.accessibility.stories.ts
index 5df8fe5a7e..716bfab0fc 100644
--- a/src/components/input/MultiSelect.accessibility.stories.ts
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 interface ExtendedProps extends Partial<MultiSelectProps> {
diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index 45a1bdbdbf..e6b5d91443 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 // Since we use v-bind="$attrs", all PrimeVue props are available
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index af9f5075fa..d687c583b9 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -106,9 +106,8 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import MultiSelect, {
-  MultiSelectPassThroughMethodOptions
-} from 'primevue/multiselect'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -117,7 +116,7 @@ import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 type Option = SelectOption
 
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 7593ef595f..87e6bc65ac 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -58,13 +58,14 @@
 </template>
 
 <script setup lang="ts">
-import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select from 'primevue/select'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { cn } from '@/utils/tailwindUtil'
 
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 defineOptions({
   inheritAttrs: false
diff --git a/src/components/install/DesktopSettingsConfiguration.vue b/src/components/install/DesktopSettingsConfiguration.vue
index 2868d11a76..f1caa62faa 100644
--- a/src/components/install/DesktopSettingsConfiguration.vue
+++ b/src/components/install/DesktopSettingsConfiguration.vue
@@ -10,14 +10,14 @@
       </p>
     </div>
 
-    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg">
+    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
       <!-- Auto Update Setting -->
       <div class="flex items-center gap-4">
         <div class="flex-1">
           <h3 class="text-lg font-medium text-neutral-100">
             {{ $t('install.settings.autoUpdate') }}
           </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400 mt-1">
             {{ $t('install.settings.autoUpdateDescription') }}
           </p>
         </div>
@@ -32,14 +32,10 @@
           <h3 class="text-lg font-medium text-neutral-100">
             {{ $t('install.settings.allowMetrics') }}
           </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400">
             {{ $t('install.settings.allowMetricsDescription') }}
           </p>
-          <a
-            href="#"
-            class="text-sm text-blue-400 hover:text-blue-300 mt-1 inline-block"
-            @click.prevent="showMetricsInfo"
-          >
+          <a href="#" @click.prevent="showMetricsInfo">
             {{ $t('install.settings.learnMoreAboutData') }}
           </a>
         </div>
@@ -51,7 +47,9 @@
     <Dialog
       v-model:visible="showDialog"
       modal
+      dismissable-mask
       :header="$t('install.settings.dataCollectionDialog.title')"
+      class="select-none"
     >
       <div class="text-neutral-300">
         <h4 class="font-medium mb-2">
@@ -110,11 +108,7 @@
         </ul>
 
         <div class="mt-4">
-          <a
-            href="https://comfy.org/privacy"
-            target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
-          >
+          <a href="https://comfy.org/privacy" target="_blank">
             {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
           </a>
         </div>
diff --git a/src/components/install/GpuPicker.vue b/src/components/install/GpuPicker.vue
index 06275634fb..e95d3204c3 100644
--- a/src/components/install/GpuPicker.vue
+++ b/src/components/install/GpuPicker.vue
@@ -1,130 +1,66 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px] h-[30rem] select-none">
-    <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-4 text-neutral-300">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.gpuSelection.selectGpu') }}
-      </h2>
-
-      <p class="m-1 text-neutral-400">
-        {{ $t('install.gpuSelection.selectGpuDescription') }}:
-      </p>
-
-      <!-- GPU Selection buttons -->
-      <div
-        class="flex gap-2 text-center transition-opacity"
-        :class="{ selected: selected }"
-      >
-        <!-- NVIDIA -->
-        <div
-          v-if="platform !== 'darwin'"
-          class="gpu-button"
-          :class="{ selected: selected === 'nvidia' }"
-          role="button"
-          @click="pickGpu('nvidia')"
-        >
-          <img
-            class="m-12"
-            alt="NVIDIA logo"
-            width="196"
-            height="32"
-            src="/assets/images/nvidia-logo.svg"
-          />
-        </div>
-        <!-- MPS -->
-        <div
-          v-if="platform === 'darwin'"
-          class="gpu-button"
-          :class="{ selected: selected === 'mps' }"
-          role="button"
-          @click="pickGpu('mps')"
-        >
-          <img
-            class="rounded-lg hover-brighten"
-            alt="Apple Metal Performance Shaders Logo"
-            width="292"
-            ratio
-            src="/assets/images/apple-mps-logo.png"
-          />
-        </div>
-        <!-- Manual configuration -->
-        <div
-          class="gpu-button"
-          :class="{ selected: selected === 'unsupported' }"
-          role="button"
-          @click="pickGpu('unsupported')"
-        >
-          <img
-            class="m-12"
-            alt="Manual configuration"
-            width="196"
-            src="/assets/images/manual-configuration.svg"
-          />
-        </div>
-      </div>
-
-      <!-- Details on selected GPU -->
-      <p v-if="selected === 'nvidia'" class="m-1">
-        <Tag icon="pi pi-check" severity="success" :value="'CUDA'" />
-        {{ $t('install.gpuSelection.nvidiaDescription') }}
-      </p>
-
-      <p v-if="selected === 'mps'" class="m-1">
-        <Tag icon="pi pi-check" severity="success" :value="'MPS'" />
-        {{ $t('install.gpuSelection.mpsDescription') }}
-      </p>
-
-      <div v-if="selected === 'unsupported'" class="text-neutral-300">
-        <p class="m-1">
-          <Tag
-            icon="pi pi-exclamation-triangle"
-            severity="warn"
-            :value="t('icon.exclamation-triangle')"
-          />
-          {{ $t('install.gpuSelection.customSkipsPython') }}
-        </p>
-
-        <ul>
-          <li>
-            <strong>
-              {{ $t('install.gpuSelection.customComfyNeedsPython') }}
-            </strong>
-          </li>
-          <li>{{ $t('install.gpuSelection.customManualVenv') }}</li>
-          <li>{{ $t('install.gpuSelection.customInstallRequirements') }}</li>
-          <li>{{ $t('install.gpuSelection.customMayNotWork') }}</li>
-        </ul>
-      </div>
+  <div
+    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
+  >
+    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+      {{ $t('install.gpuPicker.title') }}
+    </h2>
+
+    <!-- GPU Selection buttons - takes up remaining space and centers content -->
+    <div class="flex-1 flex gap-8 justify-center items-center">
+      <!-- Apple Metal / NVIDIA -->
+      <HardwareOption
+        v-if="platform === 'darwin'"
+        :image-path="'/assets/images/apple-mps-logo.png'"
+        placeholder-text="Apple Metal"
+        subtitle="Apple Metal"
+        :value="'mps'"
+        :selected="selected === 'mps'"
+        :recommended="true"
+        @click="pickGpu('mps')"
+      />
+      <HardwareOption
+        v-else
+        :image-path="'/assets/images/nvidia-logo-square.jpg'"
+        placeholder-text="NVIDIA"
+        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+        :value="'nvidia'"
+        :selected="selected === 'nvidia'"
+        :recommended="true"
+        @click="pickGpu('nvidia')"
+      />
+      <!-- CPU -->
+      <HardwareOption
+        placeholder-text="CPU"
+        :subtitle="$t('install.gpuPicker.cpuSubtitle')"
+        :value="'cpu'"
+        :selected="selected === 'cpu'"
+        @click="pickGpu('cpu')"
+      />
+      <!-- Manual Install -->
+      <HardwareOption
+        placeholder-text="Manual Install"
+        :subtitle="$t('install.gpuPicker.manualSubtitle')"
+        :value="'unsupported'"
+        :selected="selected === 'unsupported'"
+        @click="pickGpu('unsupported')"
+      />
+    </div>
 
-      <div v-if="selected === 'cpu'">
-        <p class="m-1">
-          <Tag
-            icon="pi pi-exclamation-triangle"
-            severity="warn"
-            :value="t('icon.exclamation-triangle')"
-          />
-          {{ $t('install.gpuSelection.cpuModeDescription') }}
-        </p>
-        <p class="m-1">
-          {{ $t('install.gpuSelection.cpuModeDescription2') }}
-        </p>
+    <div class="pt-12 px-24 h-16">
+      <div v-show="showRecommendedBadge" class="flex items-center gap-2">
+        <Tag
+          :value="$t('install.gpuPicker.recommended')"
+          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
+        />
+        <i-lucide:badge-check class="text-neutral-300 text-lg" />
       </div>
     </div>
 
-    <div
-      class="transition-opacity flex gap-3 h-0"
-      :class="{
-        'opacity-40': selected && selected !== 'cpu'
-      }"
-    >
-      <ToggleSwitch
-        v-model="cpuMode"
-        input-id="cpu-mode"
-        class="-translate-y-40"
-      />
-      <label for="cpu-mode" class="select-none">
-        {{ $t('install.gpuSelection.enableCpuMode') }}
-      </label>
+    <div class="text-neutral-300 px-24">
+      <p v-show="descriptionText" class="leading-relaxed">
+        {{ descriptionText }}
+      </p>
     </div>
   </div>
 </template>
@@ -132,20 +68,12 @@
 <script setup lang="ts">
 import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import Tag from 'primevue/tag'
-import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
+import HardwareOption from '@/components/install/HardwareOption.vue'
+import { st } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
-const { t } = useI18n()
-
-const cpuMode = computed({
-  get: () => selected.value === 'cpu',
-  set: (value) => {
-    selected.value = value ? 'cpu' : null
-  }
-})
 const selected = defineModel<TorchDeviceType | null>('device', {
   required: true
 })
@@ -153,55 +81,23 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const pickGpu = (value: typeof selected.value) => {
-  const newValue = selected.value === value ? null : value
-  selected.value = newValue
-}
-</script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.p-tag {
-  --p-tag-gap: 0.5rem;
-}
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
+)
 
-.hover-brighten {
-  @apply transition-colors;
-  transition-property: filter, box-shadow;
+const descriptionKeys = {
+  mps: 'appleMetal',
+  nvidia: 'nvidia',
+  cpu: 'cpu',
+  unsupported: 'manual'
+} as const
 
-  &:hover {
-    filter: brightness(107%) contrast(105%);
-    box-shadow: 0 0 0.25rem #ffffff79;
-  }
-}
-.p-accordioncontent-content {
-  @apply bg-neutral-900 rounded-lg transition-colors;
-}
-
-div.selected {
-  .gpu-button:not(.selected) {
-    @apply opacity-50 hover:opacity-100;
-  }
-}
-
-.gpu-button {
-  @apply w-1/2 m-0 cursor-pointer rounded-lg flex flex-col items-center justify-around bg-neutral-800/50 hover:bg-neutral-800/75 transition-colors;
-
-  &.selected {
-    @apply opacity-100 bg-neutral-700/50 hover:bg-neutral-700/60;
-  }
-}
-
-.disabled {
-  @apply pointer-events-none opacity-40;
-}
-
-.p-card-header {
-  @apply text-center grow;
-}
+const descriptionText = computed(() => {
+  const key = selected.value ? descriptionKeys[selected.value] : undefined
+  return st(`install.gpuPicker.${key}Description`, '')
+})
 
-.p-card-body {
-  @apply text-center pt-0;
+const pickGpu = (value: TorchDeviceType) => {
+  selected.value = value
 }
-</style>
+</script>
diff --git a/src/components/install/HardwareOption.stories.ts b/src/components/install/HardwareOption.stories.ts
new file mode 100644
index 0000000000..d830af49fa
--- /dev/null
+++ b/src/components/install/HardwareOption.stories.ts
@@ -0,0 +1,73 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import HardwareOption from './HardwareOption.vue'
+
+const meta: Meta<typeof HardwareOption> = {
+  title: 'Desktop/Components/HardwareOption',
+  component: HardwareOption,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+      values: [{ name: 'dark', value: '#1a1a1a' }]
+    }
+  },
+  argTypes: {
+    selected: { control: 'boolean' },
+    imagePath: { control: 'text' },
+    placeholderText: { control: 'text' },
+    subtitle: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AppleMetalSelected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: true
+  }
+}
+
+export const AppleMetalUnselected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: false
+  }
+}
+
+export const CPUOption: Story = {
+  args: {
+    placeholderText: 'CPU',
+    subtitle: 'Subtitle',
+    value: 'cpu',
+    selected: false
+  }
+}
+
+export const ManualInstall: Story = {
+  args: {
+    placeholderText: 'Manual Install',
+    subtitle: 'Subtitle',
+    value: 'unsupported',
+    selected: false
+  }
+}
+
+export const NvidiaSelected: Story = {
+  args: {
+    imagePath: '/assets/images/nvidia-logo-square.jpg',
+    placeholderText: 'NVIDIA',
+    subtitle: 'NVIDIA',
+    value: 'nvidia',
+    selected: true
+  }
+}
diff --git a/src/components/install/HardwareOption.vue b/src/components/install/HardwareOption.vue
new file mode 100644
index 0000000000..ae254fd8f3
--- /dev/null
+++ b/src/components/install/HardwareOption.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="relative">
+    <!-- Recommended Badge -->
+    <button
+      :class="
+        cn(
+          'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
+          selected ? 'border-solid border-brand-yellow' : 'border-transparent'
+        )
+      "
+      @click="$emit('click')"
+    >
+      <!-- Icon/Logo Area - Rounded square container -->
+      <div
+        class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
+      >
+        <img
+          v-if="imagePath"
+          :src="imagePath"
+          :alt="placeholderText"
+          class="w-full h-full object-cover"
+          style="object-position: 57% center"
+          draggable="false"
+        />
+        <span v-else class="text-xl font-medium text-neutral-400">
+          {{ placeholderText }}
+        </span>
+      </div>
+
+      <!-- Text Content -->
+      <div v-if="subtitle" class="text-center mt-4">
+        <div class="text-sm text-neutral-500">{{ subtitle }}</div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+
+import { cn } from '@/utils/tailwindUtil'
+
+interface Props {
+  imagePath?: string
+  placeholderText: string
+  subtitle?: string
+  value: TorchDeviceType
+  selected?: boolean
+  recommended?: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{ click: [] }>()
+</script>
diff --git a/src/components/install/InstallFooter.vue b/src/components/install/InstallFooter.vue
new file mode 100644
index 0000000000..ef9ab698c9
--- /dev/null
+++ b/src/components/install/InstallFooter.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
+    <!-- Back button -->
+    <Button
+      v-if="currentStep !== '1'"
+      :label="$t('g.back')"
+      severity="secondary"
+      icon="pi pi-arrow-left"
+      class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
+      @click="$emit('previous')"
+    />
+    <div v-else></div>
+
+    <!-- Step indicators in center -->
+    <StepList class="flex justify-center items-center gap-3 select-none">
+      <Step value="1" :pt="stepPassthrough">
+        {{ $t('install.gpu') }}
+      </Step>
+      <Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
+        {{ $t('install.installLocation') }}
+      </Step>
+      <Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
+        {{ $t('install.desktopSettings') }}
+      </Step>
+    </StepList>
+
+    <!-- Next/Install button -->
+    <Button
+      :label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
+      class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
+      :pt="{
+        label: { class: 'text-neutral-900 font-inter font-black' }
+      }"
+      :disabled="!canProceed"
+      @click="currentStep !== '3' ? $emit('next') : $emit('install')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PassThrough } from '@primevue/core'
+import Button from 'primevue/button'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
+import StepList from 'primevue/steplist'
+
+defineProps<{
+  /** Current step index as string ('1', '2', '3', '4') */
+  currentStep: string
+  /** Whether the user can proceed to the next step */
+  canProceed: boolean
+  /** Whether the location step should be disabled */
+  disableLocationStep: boolean
+  /** Whether the migration step should be disabled */
+  disableMigrationStep: boolean
+  /** Whether the settings step should be disabled */
+  disableSettingsStep: boolean
+}>()
+
+defineEmits<{
+  previous: []
+  next: []
+  install: []
+}>()
+
+const stepPassthrough: PassThrough<StepPassThroughOptions> = {
+  root: { class: 'flex-none p-0 m-0' },
+  header: ({ context }) => ({
+    class: [
+      'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
+      context.active
+        ? 'bg-brand-yellow w-8 rounded-sm'
+        : 'bg-neutral-700 w-2.5',
+      context.disabled ? 'opacity-60 cursor-not-allowed' : ''
+    ].join(' ')
+  }),
+  number: { class: 'hidden' },
+  title: { class: 'hidden' }
+}
+</script>
diff --git a/src/components/install/InstallLocationPicker.stories.ts b/src/components/install/InstallLocationPicker.stories.ts
new file mode 100644
index 0000000000..e6ef924ae0
--- /dev/null
+++ b/src/components/install/InstallLocationPicker.stories.ts
@@ -0,0 +1,148 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import InstallLocationPicker from './InstallLocationPicker.vue'
+
+const meta: Meta<typeof InstallLocationPicker> = {
+  title: 'Desktop/Components/InstallLocationPicker',
+  component: InstallLocationPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      // Mock electron API
+      ;(window as any).electronAPI = {
+        getSystemPaths: () =>
+          Promise.resolve({
+            defaultInstallPath: '/Users/username/ComfyUI'
+          }),
+        validateInstallPath: () =>
+          Promise.resolve({
+            isValid: true,
+            exists: false,
+            canWrite: true,
+            freeSpace: 100000000000,
+            requiredSpace: 10000000000,
+            isNonDefaultDrive: false
+          }),
+        validateComfyUISource: () =>
+          Promise.resolve({
+            isValid: true
+          }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story with accordion expanded
+export const Default: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with different background to test transparency
+export const OnNeutral900: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-900 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with debug overlay showing background colors
+export const DebugBackgrounds: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8 relative">
+        <div class="absolute top-4 right-4 text-white text-xs space-y-2 z-50">
+          <div>Parent bg: neutral-950 (#0a0a0a)</div>
+          <div>Accordion content: bg-transparent</div>
+          <div>Migration options: bg-transparent + p-4 rounded-lg</div>
+        </div>
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
diff --git a/src/components/install/InstallLocationPicker.vue b/src/components/install/InstallLocationPicker.vue
index 33b32a5f98..0e22f34a96 100644
--- a/src/components/install/InstallLocationPicker.vue
+++ b/src/components/install/InstallLocationPicker.vue
@@ -1,103 +1,215 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px]">
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
     <!-- Installation Path Section -->
-    <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.chooseInstallationLocation') }}
+    <div class="grow flex flex-col gap-6 text-neutral-300">
+      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+        {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-neutral-400 my-0">
-        {{ $t('install.installLocationDescription') }}
+      <p class="text-center text-neutral-400 px-12">
+        {{ $t('install.locationPicker.subtitle') }}
       </p>
 
-      <div class="flex gap-2">
-        <IconField class="flex-1">
-          <InputText
-            v-model="installPath"
-            class="w-full"
-            :class="{ 'p-invalid': pathError }"
-            @update:model-value="validatePath"
-            @focus="onFocus"
-          />
-          <InputIcon
-            v-tooltip.top="$t('install.installLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </IconField>
-        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+      <!-- Path Input -->
+      <div class="flex gap-2 px-12">
+        <InputText
+          v-model="installPath"
+          :placeholder="$t('install.locationPicker.pathPlaceholder')"
+          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          :class="{ 'p-invalid': pathError }"
+          @update:model-value="validatePath"
+          @focus="onFocus"
+        />
+        <Button
+          icon="pi pi-folder-open"
+          severity="secondary"
+          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          @click="browsePath"
+        />
       </div>
 
-      <Message v-if="pathError" severity="error" class="whitespace-pre-line">
-        {{ pathError }}
-      </Message>
-      <Message v-if="pathExists" severity="warn">
-        {{ $t('install.pathExists') }}
-      </Message>
-      <Message v-if="nonDefaultDrive" severity="warn">
-        {{ $t('install.nonDefaultDrive') }}
-      </Message>
-    </div>
-
-    <!-- System Paths Info -->
-    <div class="bg-neutral-800 p-4 rounded-lg">
-      <h3 class="text-lg font-medium mt-0 mb-3 text-neutral-100">
-        {{ $t('install.systemLocations') }}
-      </h3>
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-2">
-          <i class="pi pi-folder text-neutral-400" />
-          <span class="text-neutral-400">App Data:</span>
-          <span class="text-neutral-200">{{ appData }}</span>
-          <span
-            v-tooltip="$t('install.appDataLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <i class="pi pi-desktop text-neutral-400" />
-          <span class="text-neutral-400">App Path:</span>
-          <span class="text-neutral-200">{{ appPath }}</span>
-          <span
-            v-tooltip="$t('install.appPathLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
+      <!-- Error Messages -->
+      <div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
+        <Message
+          v-if="pathError"
+          severity="error"
+          class="whitespace-pre-line w-full"
+        >
+          {{ pathError }}
+        </Message>
+        <Message v-if="pathExists" severity="warn" class="w-full">
+          {{ $t('install.pathExists') }}
+        </Message>
+        <Message v-if="nonDefaultDrive" severity="warn" class="w-full">
+          {{ $t('install.nonDefaultDrive') }}
+        </Message>
       </div>
+
+      <!-- Collapsible Sections using PrimeVue Accordion -->
+      <Accordion
+        v-model:value="activeAccordionIndex"
+        :multiple="true"
+        class="location-picker-accordion"
+        :pt="{
+          root: 'bg-transparent border-0',
+          panel: {
+            root: 'border-0 mb-0'
+          },
+          header: {
+            root: 'border-0',
+            content:
+              'text-neutral-400 hover:text-neutral-300 px-4 py-2 flex items-center gap-3',
+            toggleicon: 'text-xs order-first mr-0'
+          },
+          content: {
+            root: 'bg-transparent border-0',
+            content: 'text-neutral-500 text-sm pl-11 pb-3 pt-0'
+          }
+        }"
+      >
+        <AccordionPanel value="0">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.migrateFromExisting') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <MigrationPicker
+              v-model:source-path="migrationSourcePath"
+              v-model:migration-item-ids="migrationItemIds"
+            />
+          </AccordionContent>
+        </AccordionPanel>
+
+        <AccordionPanel value="1">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.chooseDownloadServers') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <template
+              v-for="([item, modelValue], index) in mirrors"
+              :key="item.settingId + item.mirror"
+            >
+              <Divider v-if="index > 0" class="my-8" />
+
+              <MirrorItem
+                v-model="modelValue.value"
+                :item="item"
+                @state-change="validationStates[index] = $event"
+              />
+            </template>
+          </AccordionContent>
+        </AccordionPanel>
+      </Accordion>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import Accordion from 'primevue/accordion'
+import AccordionContent from 'primevue/accordioncontent'
+import AccordionHeader from 'primevue/accordionheader'
+import AccordionPanel from 'primevue/accordionpanel'
 import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
+import Divider from 'primevue/divider'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import { onMounted, ref } from 'vue'
+import { type ModelRef, computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
+import {
+  PYPI_MIRROR,
+  PYTHON_MIRROR,
+  type UVMirror
+} from '@/constants/uvMirrors'
 import { electronAPI } from '@/utils/envUtil'
+import { isInChina } from '@/utils/networkUtil'
+import { ValidationState } from '@/utils/validationUtil'
 
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })
 const pathError = defineModel<string>('pathError', { required: true })
+const migrationSourcePath = defineModel<string>('migrationSourcePath')
+const migrationItemIds = defineModel<string[]>('migrationItemIds')
+const pythonMirror = defineModel<string>('pythonMirror', {
+  default: ''
+})
+const pypiMirror = defineModel<string>('pypiMirror', {
+  default: ''
+})
+const torchMirror = defineModel<string>('torchMirror', {
+  default: ''
+})
+
+const { device } = defineProps<{ device: TorchDeviceType | null }>()
+
 const pathExists = ref(false)
 const nonDefaultDrive = ref(false)
-const appData = ref('')
-const appPath = ref('')
 const inputTouched = ref(false)
 
+// Accordion state - array of active panel values
+const activeAccordionIndex = ref<string[] | undefined>(undefined)
+
 const electron = electronAPI()
 
-// Get system paths on component mount
+// Mirror configuration logic
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
+  switch (device) {
+    case 'mps':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.NightlyCpu,
+        fallbackMirror: TorchMirrorUrl.NightlyCpu
+      }
+    case 'nvidia':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.Cuda,
+        fallbackMirror: TorchMirrorUrl.Cuda
+      }
+    case 'cpu':
+    default:
+      return {
+        settingId,
+        mirror: PYPI_MIRROR.mirror,
+        fallbackMirror: PYPI_MIRROR.fallbackMirror
+      }
+  }
+}
+
+const userIsInChina = ref(false)
+const useFallbackMirror = (mirror: UVMirror) => ({
+  ...mirror,
+  mirror: mirror.fallbackMirror
+})
+
+const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
+  (
+    [
+      [PYTHON_MIRROR, pythonMirror],
+      [PYPI_MIRROR, pypiMirror],
+      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
+    ] as [UVMirror, ModelRef<string>][]
+  ).map(([item, modelValue]) => [
+    userIsInChina.value ? useFallbackMirror(item) : item,
+    modelValue
+  ])
+)
+
+const validationStates = ref<ValidationState[]>(
+  mirrors.value.map(() => ValidationState.IDLE)
+)
+
+// Get default install path on component mount
 onMounted(async () => {
   const paths = await electron.getSystemPaths()
-  appData.value = paths.appData
-  appPath.value = paths.appPath
   installPath.value = paths.defaultInstallPath
-
   await validatePath(paths.defaultInstallPath)
+  userIsInChina.value = await isInChina()
 })
 
 const validatePath = async (path: string | undefined) => {
@@ -151,3 +263,52 @@ const onFocus = async () => {
   await validatePath(installPath.value)
 }
 </script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+:deep(.location-picker-accordion) {
+  @apply px-12;
+
+  .p-accordionpanel {
+    @apply border-0 bg-transparent;
+  }
+
+  .p-accordionheader {
+    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    transition:
+      background-color 0.2s ease,
+      border-radius 0.5s ease;
+  }
+
+  /* When panel is expanded, adjust header border radius */
+  .p-accordionpanel-active {
+    .p-accordionheader {
+      @apply rounded-t-xl rounded-b-none;
+    }
+  }
+
+  .p-accordioncontent {
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+  }
+
+  .p-accordioncontent-content {
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
+  }
+
+  /* Override default chevron icons to use up/down */
+  .p-accordionheader-toggle-icon {
+    &::before {
+      content: '\e933';
+    }
+  }
+
+  .p-accordionpanel-active {
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/install/MigrationPicker.stories.ts b/src/components/install/MigrationPicker.stories.ts
new file mode 100644
index 0000000000..ad09e1871b
--- /dev/null
+++ b/src/components/install/MigrationPicker.stories.ts
@@ -0,0 +1,45 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import MigrationPicker from './MigrationPicker.vue'
+
+const meta: Meta<typeof MigrationPicker> = {
+  title: 'Desktop/Components/MigrationPicker',
+  component: MigrationPicker,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      ;(window as any).electronAPI = {
+        validateComfyUISource: () => Promise.resolve({ isValid: true }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { MigrationPicker },
+    setup() {
+      const sourcePath = ref('')
+      const migrationItemIds = ref<string[]>([])
+      return { sourcePath, migrationItemIds }
+    },
+    template:
+      '<MigrationPicker v-model:sourcePath="sourcePath" v-model:migrationItemIds="migrationItemIds" />'
+  })
+}
diff --git a/src/components/install/MigrationPicker.vue b/src/components/install/MigrationPicker.vue
index 934ffc2f32..ba542ca697 100644
--- a/src/components/install/MigrationPicker.vue
+++ b/src/components/install/MigrationPicker.vue
@@ -2,10 +2,6 @@
   <div class="flex flex-col gap-6 w-[600px]">
     <!-- Source Location Section -->
     <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.migrateFromExistingInstallation') }}
-      </h2>
-
       <p class="text-neutral-400 my-0">
         {{ $t('install.migrationSourcePathDescription') }}
       </p>
@@ -13,7 +9,7 @@
       <div class="flex gap-2">
         <InputText
           v-model="sourcePath"
-          placeholder="Select existing ComfyUI installation (optional)"
+          :placeholder="$t('install.locationPicker.migrationPathPlaceholder')"
           class="flex-1"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validateSource"
@@ -27,10 +23,7 @@
     </div>
 
     <!-- Migration Options -->
-    <div
-      v-if="isValidSource"
-      class="flex flex-col gap-4 bg-neutral-800 p-4 rounded-lg"
-    >
+    <div v-if="isValidSource" class="flex flex-col gap-4 p-4 rounded-lg">
       <h3 class="text-lg mt-0 font-medium text-neutral-100">
         {{ $t('install.selectItemsToMigrate') }}
       </h3>
diff --git a/src/components/install/MirrorsConfiguration.vue b/src/components/install/MirrorsConfiguration.vue
deleted file mode 100644
index 0053f973a4..0000000000
--- a/src/components/install/MirrorsConfiguration.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <Panel
-    :header="$t('install.settings.mirrorSettings')"
-    toggleable
-    :collapsed="!showMirrorInputs"
-    pt:root="bg-neutral-800 border-none w-[600px]"
-  >
-    <template
-      v-for="([item, modelValue], index) in mirrors"
-      :key="item.settingId + item.mirror"
-    >
-      <Divider v-if="index > 0" />
-
-      <MirrorItem
-        v-model="modelValue.value"
-        :item="item"
-        @state-change="validationStates[index] = $event"
-      />
-    </template>
-    <template #icons>
-      <i
-        v-tooltip="validationStateTooltip"
-        :class="{
-          'pi pi-spin pi-spinner text-neutral-400':
-            validationState === ValidationState.LOADING,
-          'pi pi-check text-green-500':
-            validationState === ValidationState.VALID,
-          'pi pi-times text-red-500':
-            validationState === ValidationState.INVALID
-        }"
-      />
-    </template>
-  </Panel>
-</template>
-
-<script setup lang="ts">
-import {
-  TorchDeviceType,
-  TorchMirrorUrl
-} from '@comfyorg/comfyui-electron-types'
-import Divider from 'primevue/divider'
-import Panel from 'primevue/panel'
-import { ModelRef, computed, onMounted, ref } from 'vue'
-
-import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import { PYPI_MIRROR, PYTHON_MIRROR, UVMirror } from '@/constants/uvMirrors'
-import { t } from '@/i18n'
-import { isInChina } from '@/utils/networkUtil'
-import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'
-
-const showMirrorInputs = ref(false)
-const { device } = defineProps<{ device: TorchDeviceType | null }>()
-const pythonMirror = defineModel<string>('pythonMirror', { required: true })
-const pypiMirror = defineModel<string>('pypiMirror', { required: true })
-const torchMirror = defineModel<string>('torchMirror', { required: true })
-
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
-  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
-  switch (device) {
-    case 'mps':
-      return {
-        settingId,
-        mirror: TorchMirrorUrl.NightlyCpu,
-        fallbackMirror: TorchMirrorUrl.NightlyCpu
-      }
-    case 'nvidia':
-      return {
-        settingId,
-        mirror: TorchMirrorUrl.Cuda,
-        fallbackMirror: TorchMirrorUrl.Cuda
-      }
-    case 'cpu':
-    default:
-      return {
-        settingId,
-        mirror: PYPI_MIRROR.mirror,
-        fallbackMirror: PYPI_MIRROR.fallbackMirror
-      }
-  }
-}
-
-const userIsInChina = ref(false)
-onMounted(async () => {
-  userIsInChina.value = await isInChina()
-})
-
-const useFallbackMirror = (mirror: UVMirror) => ({
-  ...mirror,
-  mirror: mirror.fallbackMirror
-})
-
-const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
-  (
-    [
-      [PYTHON_MIRROR, pythonMirror],
-      [PYPI_MIRROR, pypiMirror],
-      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
-    ] as [UVMirror, ModelRef<string>][]
-  ).map(([item, modelValue]) => [
-    userIsInChina.value ? useFallbackMirror(item) : item,
-    modelValue
-  ])
-)
-
-const validationStates = ref<ValidationState[]>(
-  mirrors.value.map(() => ValidationState.IDLE)
-)
-const validationState = computed(() => {
-  return mergeValidationStates(validationStates.value)
-})
-const validationStateTooltip = computed(() => {
-  switch (validationState.value) {
-    case ValidationState.INVALID:
-      return t('install.settings.mirrorsUnreachable')
-    case ValidationState.VALID:
-      return t('install.settings.mirrorsReachable')
-    default:
-      return t('install.settings.checkingMirrors')
-  }
-})
-</script>
diff --git a/src/components/install/mirror/MirrorItem.vue b/src/components/install/mirror/MirrorItem.vue
index 3bd83074ef..3665d66c9f 100644
--- a/src/components/install/mirror/MirrorItem.vue
+++ b/src/components/install/mirror/MirrorItem.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center gap-4">
-    <div class="w-full">
-      <h3 class="text-lg font-medium text-neutral-100">
+  <div class="flex flex-col gap-4 text-neutral-400 text-sm">
+    <div>
+      <h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
         {{ $t(`settings.${normalizedSettingId}.name`) }}
       </h3>
-      <p class="text-sm text-neutral-400 mt-1">
+      <p class="my-1">
         {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
       </p>
     </div>
@@ -16,18 +16,61 @@
       "
       @state-change="validationState = $event"
     />
+    <div v-if="secondParagraph" class="mt-2">
+      <a href="#" @click.prevent="showDialog = true">
+        {{ $t('g.learnMore') }}
+      </a>
+
+      <Dialog
+        v-model:visible="showDialog"
+        modal
+        dismissable-mask
+        :header="$t(`settings.${normalizedSettingId}.urlFormatTitle`)"
+        class="select-none max-w-3xl"
+      >
+        <div class="text-neutral-300">
+          <p class="mt-1 whitespace-pre-wrap">{{ secondParagraph }}</p>
+          <div class="mt-2 break-all">
+            <span class="text-neutral-300 font-semibold">
+              {{ EXAMPLE_URL_FIRST_PART }}
+            </span>
+            <span>{{ EXAMPLE_URL_SECOND_PART }}</span>
+          </div>
+          <Divider />
+          <p>
+            {{ $t(`settings.${normalizedSettingId}.fileUrlDescription`) }}
+          </p>
+          <span class="text-neutral-300 font-semibold">
+            {{ FILE_URL_SCHEME }}
+          </span>
+          <span>
+            {{ EXAMPLE_FILE_URL }}
+          </span>
+        </div>
+      </Dialog>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import UrlInput from '@/components/common/UrlInput.vue'
-import { UVMirror } from '@/constants/uvMirrors'
+import type { UVMirror } from '@/constants/uvMirrors'
+import { st } from '@/i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { checkMirrorReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
+const FILE_URL_SCHEME = 'file://'
+const EXAMPLE_FILE_URL = '/C:/MyPythonInstallers/'
+const EXAMPLE_URL_FIRST_PART =
+  'https://github.com/astral-sh/python-build-standalone/releases/download'
+const EXAMPLE_URL_SECOND_PART =
+  '/20250902/cpython-3.12.11+20250902-x86_64-pc-windows-msvc-install_only.tar.gz'
+
 const { item } = defineProps<{
   item: UVMirror
 }>()
@@ -38,11 +81,16 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<string>('modelValue', { required: true })
 const validationState = ref<ValidationState>(ValidationState.IDLE)
+const showDialog = ref(false)
 
 const normalizedSettingId = computed(() => {
   return normalizeI18nKey(item.settingId)
 })
 
+const secondParagraph = computed(() =>
+  st(`settings.${normalizedSettingId.value}.urlDescription`, '')
+)
+
 onMounted(() => {
   modelValue.value = item.mirror
 })
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index 92e23c1eaa..23245edc94 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -95,7 +95,7 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
+import type {
   CameraType,
   Load3DNodeType,
   MaterialMode,
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
index 945436bbb3..9d29c1ed14 100644
--- a/src/components/load3d/Load3DAnimation.vue
+++ b/src/components/load3d/Load3DAnimation.vue
@@ -93,7 +93,7 @@ import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
+import type {
   AnimationItem,
   CameraType,
   Load3DAnimationNodeType,
diff --git a/src/components/load3d/Load3DAnimationScene.vue b/src/components/load3d/Load3DAnimationScene.vue
index c9228f8437..38cbd7169b 100644
--- a/src/components/load3d/Load3DAnimationScene.vue
+++ b/src/components/load3d/Load3DAnimationScene.vue
@@ -27,13 +27,13 @@
 import { ref, watch } from 'vue'
 
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
   CameraType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const props = defineProps<{
   node: any
diff --git a/src/components/load3d/Load3DControls.vue b/src/components/load3d/Load3DControls.vue
index 2c819aea6f..eea5208b32 100644
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -99,7 +99,7 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
-import {
+import type {
   CameraType,
   MaterialMode,
   UpDirection
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index 33461f0cf5..d9c344bec1 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -8,15 +8,15 @@
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import Load3d from '@/extensions/core/load3d/Load3d'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
   CameraType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index 5a6d514c81..fa22865d6a 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -76,7 +76,7 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
diff --git a/src/components/load3d/controls/CameraControls.vue b/src/components/load3d/controls/CameraControls.vue
index 133c992e16..e19683f657 100644
--- a/src/components/load3d/controls/CameraControls.vue
+++ b/src/components/load3d/controls/CameraControls.vue
@@ -40,7 +40,7 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const vTooltip = Tooltip
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index b72311689a..1f00ed3e3e 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -99,7 +99,10 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
diff --git a/src/components/load3d/controls/RecordingControls.vue b/src/components/load3d/controls/RecordingControls.vue
index e7b762a8e0..fdac4abcb8 100644
--- a/src/components/load3d/controls/RecordingControls.vue
+++ b/src/components/load3d/controls/RecordingControls.vue
@@ -79,7 +79,7 @@ import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLoad3dService } from '@/services/load3dService'
 
 const vTooltip = Tooltip
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 96988b9c6e..0f2cea8833 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -20,7 +20,7 @@ import Button from 'primevue/button'
 
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index e2edb8cd53..94dd8b9327 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -23,7 +23,7 @@ import Select from 'primevue/select'
 import Slider from 'primevue/slider'
 import { computed } from 'vue'
 
-import { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const cameras = [
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index 6f1f38bdbd..ca8f26364f 100644
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -26,7 +26,10 @@
 import Select from 'primevue/select'
 import { computed } from 'vue'
 
-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const upDirection = defineModel<UpDirection>('upDirection')
diff --git a/src/components/maintenance/TaskListItem.vue b/src/components/maintenance/TaskListItem.vue
index 99cbf9c45b..0762bbd057 100644
--- a/src/components/maintenance/TaskListItem.vue
+++ b/src/components/maintenance/TaskListItem.vue
@@ -47,7 +47,7 @@ import { computed, ref } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 import TaskListStatusIcon from './TaskListStatusIcon.vue'
diff --git a/src/components/maintenance/TaskListStatusIcon.vue b/src/components/maintenance/TaskListStatusIcon.vue
index 98391cded7..08eb87572d 100644
--- a/src/components/maintenance/TaskListStatusIcon.vue
+++ b/src/components/maintenance/TaskListStatusIcon.vue
@@ -8,7 +8,8 @@
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
-import { MaybeRef, computed } from 'vue'
+import type { MaybeRef } from 'vue'
+import { computed } from 'vue'
 
 import { t } from '@/i18n'
 
diff --git a/src/components/maintenance/TerminalOutputDrawer.vue b/src/components/maintenance/TerminalOutputDrawer.vue
index d68f3d06c9..b3cf67cc50 100644
--- a/src/components/maintenance/TerminalOutputDrawer.vue
+++ b/src/components/maintenance/TerminalOutputDrawer.vue
@@ -10,9 +10,10 @@
 </template>
 
 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
+import type { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
-import { Ref, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted } from 'vue'
 
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index f55c934368..4fffeeaf89 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -1,9 +1,9 @@
 <!-- Reference:
 https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
 -->
-
 <template>
-  <div class="_sb_node_preview">
+  <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
+  <div v-else class="_sb_node_preview">
     <div class="_sb_table">
       <div
         class="node_header text-ellipsis mr-4"
@@ -85,6 +85,8 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 import _ from 'es-toolkit/compat'
 import { computed } from 'vue'
 
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -94,6 +96,8 @@ const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
+const { shouldRenderVueNodes } = useVueFeatureFlags()
+
 const colorPaletteStore = useColorPaletteStore()
 const litegraphColors = computed(
   () => colorPaletteStore.completedActivePalette.colors.litegraph_base
diff --git a/src/components/searchbox/NodeSearchBox.vue b/src/components/searchbox/NodeSearchBox.vue
index ac5bca0a1d..916575ea09 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -88,11 +88,8 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  ComfyNodeDefImpl,
-  useNodeDefStore,
-  useNodeFrequencyStore
-} from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import SearchFilterChip from '../common/SearchFilterChip.vue'
diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 4dbdc5c20d..470853b08c 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -38,21 +38,19 @@ import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
-import { Point } from '@/lib/litegraph/src/interfaces'
-import {
-  LGraphNode,
-  LiteGraph,
-  LiteGraphCanvasEvent
-} from '@/lib/litegraph/src/litegraph'
+import type { Point } from '@/lib/litegraph/src/interfaces'
+import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import { FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBox from './NodeSearchBox.vue'
 
@@ -66,31 +64,29 @@ const litegraphService = useLitegraphService()
 
 const { visible, newSearchBoxEnabled } = storeToRefs(searchBoxStore)
 const dismissable = ref(true)
-const getNewNodeLocation = (): Point => {
+function getNewNodeLocation(): Point {
   return triggerEvent
     ? [triggerEvent.canvasX, triggerEvent.canvasY]
     : litegraphService.getCanvasCenter()
 }
 const nodeFilters = ref<FuseFilterWithValue<ComfyNodeDefImpl, string>[]>([])
-const addFilter = (filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) => {
+function addFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
   nodeFilters.value.push(filter)
 }
-const removeFilter = (
-  filter: FuseFilterWithValue<ComfyNodeDefImpl, string>
-) => {
+function removeFilter(filter: FuseFilterWithValue<ComfyNodeDefImpl, string>) {
   nodeFilters.value = nodeFilters.value.filter(
     (f) => toRaw(f) !== toRaw(filter)
   )
 }
-const clearFilters = () => {
+function clearFilters() {
   nodeFilters.value = []
 }
-const closeDialog = () => {
+function closeDialog() {
   visible.value = false
 }
 const canvasStore = useCanvasStore()
 
-const addNode = (nodeDef: ComfyNodeDefImpl) => {
+function addNode(nodeDef: ComfyNodeDefImpl) {
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
@@ -108,7 +104,7 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
   window.requestAnimationFrame(closeDialog)
 }
 
-const showSearchBox = (e: CanvasPointerEvent | null) => {
+function showSearchBox(e: CanvasPointerEvent | null) {
   if (newSearchBoxEnabled.value) {
     if (e?.pointerType === 'touch') {
       setTimeout(() => {
@@ -122,11 +118,12 @@ const showSearchBox = (e: CanvasPointerEvent | null) => {
   }
 }
 
-const getFirstLink = () =>
-  canvasStore.getCanvas().linkConnector.renderLinks.at(0)
+function getFirstLink() {
+  return canvasStore.getCanvas().linkConnector.renderLinks.at(0)
+}
 
 const nodeDefStore = useNodeDefStore()
-const showNewSearchBox = (e: CanvasPointerEvent | null) => {
+function showNewSearchBox(e: CanvasPointerEvent | null) {
   const firstLink = getFirstLink()
   if (firstLink) {
     const filter =
@@ -151,7 +148,7 @@ const showNewSearchBox = (e: CanvasPointerEvent | null) => {
   }, 300)
 }
 
-const showContextMenu = (e: CanvasPointerEvent) => {
+function showContextMenu(e: CanvasPointerEvent) {
   const firstLink = getFirstLink()
   if (!firstLink) return
 
@@ -228,7 +225,7 @@ watchEffect(() => {
   )
 })
 
-const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
+function canvasEventHandler(e: LiteGraphCanvasEvent) {
   if (e.detail.subType === 'empty-double-click') {
     showSearchBox(e.detail.originalEvent)
   } else if (e.detail.subType === 'group-double-click') {
@@ -251,8 +248,10 @@ const linkReleaseActionShift = computed(() =>
 )
 
 // Prevent normal LinkConnector reset (called by CanvasPointer.finally)
-const preventDefault = (e: Event) => e.preventDefault()
-const cancelNextReset = (e: CustomEvent<CanvasPointerEvent>) => {
+function preventDefault(e: Event) {
+  return e.preventDefault()
+}
+function cancelNextReset(e: CustomEvent<CanvasPointerEvent>) {
   e.preventDefault()
 
   const canvas = canvasStore.getCanvas()
@@ -262,7 +261,7 @@ const cancelNextReset = (e: CustomEvent<CanvasPointerEvent>) => {
   })
 }
 
-const handleDroppedOnCanvas = (e: CustomEvent<CanvasPointerEvent>) => {
+function handleDroppedOnCanvas(e: CustomEvent<CanvasPointerEvent>) {
   disconnectOnReset = true
   const action = e.detail.shiftKey
     ? linkReleaseActionShift.value
@@ -283,7 +282,7 @@ const handleDroppedOnCanvas = (e: CustomEvent<CanvasPointerEvent>) => {
 }
 
 // Resets litegraph state
-const reset = () => {
+function reset() {
   listenerController?.abort()
   listenerController = null
   triggerEvent = null
diff --git a/src/components/searchbox/NodeSearchFilter.vue b/src/components/searchbox/NodeSearchFilter.vue
index 339c1882cd..7b650cebad 100644
--- a/src/components/searchbox/NodeSearchFilter.vue
+++ b/src/components/searchbox/NodeSearchFilter.vue
@@ -27,8 +27,9 @@ import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
 const selectedFilter = ref<FuseFilter<ComfyNodeDefImpl, string>>()
diff --git a/src/components/searchbox/NodeSearchItem.vue b/src/components/searchbox/NodeSearchItem.vue
index 38182df996..406963f222 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -53,7 +53,8 @@ import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
 import { highlightQuery } from '@/utils/formatUtil'
 import { formatNumberWithSuffix } from '@/utils/formatUtil'
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 04589a5519..e723890222 100644
--- a/src/components/sidebar/SidebarHelpCenterIcon.vue
+++ b/src/components/sidebar/SidebarHelpCenterIcon.vue
@@ -62,14 +62,14 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
-import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 import SidebarIcon from './SidebarIcon.vue'
 
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index d0ec2e76d5..ccb105bfe5 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -56,12 +56,8 @@ import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'
-import {
-  ComfyModelDef,
-  ModelFolder,
-  ResourceState,
-  useModelStore
-} from '@/stores/modelStore'
+import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
+import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index d30eb8e812..7cf1465011 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -129,10 +129,11 @@ import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import Popover from 'primevue/popover'
-import { Ref, computed, h, nextTick, ref, render } from 'vue'
+import type { Ref } from 'vue'
+import { computed, h, nextTick, ref, render } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import { SearchFilter } from '@/components/common/SearchFilterChip.vue'
+import type { SearchFilter } from '@/components/common/SearchFilterChip.vue'
 import TreeExplorer from '@/components/common/TreeExplorer.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
@@ -148,7 +149,8 @@ import {
 } from '@/services/nodeOrganizationService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 import type {
   GroupingStrategyId,
@@ -156,7 +158,7 @@ import type {
 } from '@/types/nodeOrganizationTypes'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
-import { FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue'
 
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 8f38687460..9e1219c2fc 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -105,16 +105,13 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
-import {
-  ResultItemImpl,
-  TaskItemImpl,
-  useQueueStore
-} from '@/stores/queueStore'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
+import { useQueueStore } from '@/stores/queueStore'
 
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import ResultGallery from './queue/ResultGallery.vue'
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 5c823a8750..2e0df8b0e7 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -150,7 +150,7 @@ import {
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
-import { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { appendJsonExt } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
 
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index 3afff7c626..ed16819e38 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -20,19 +20,13 @@
 </template>
 
 <script setup lang="ts">
-import {
-  CSSProperties,
-  computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref
-} from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { ComfyModelDef } from '@/stores/modelStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { ComfyModelDef } from '@/stores/modelStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 import ModelPreview from './ModelPreview.vue'
 
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
index 8e88854863..8c15c27d18 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -33,7 +33,7 @@ import NodeTreeLeaf from '@/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type {
   RenderedTreeExplorerNode,
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
index 920b293975..800d07ff9f 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeFolder.vue
@@ -10,7 +10,7 @@ import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import type { BookmarkCustomization } from '@/schemas/apiSchema'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import {
   InjectKeyExpandedKeys,
   type RenderedTreeExplorerNode
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index a302e43b0f..b0f64f196c 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -71,23 +71,17 @@ import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
-import {
-  CSSProperties,
-  computed,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref
-} from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const { t } = useI18n()
 
diff --git a/src/components/sidebar/tabs/queue/ResultAudio.vue b/src/components/sidebar/tabs/queue/ResultAudio.vue
index 60c70673a3..7a55fb8543 100644
--- a/src/components/sidebar/tabs/queue/ResultAudio.vue
+++ b/src/components/sidebar/tabs/queue/ResultAudio.vue
@@ -8,7 +8,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { ResultItemImpl } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 const { result } = defineProps<{
   result: ResultItemImpl
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index 046e09a568..430567da22 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -45,7 +45,7 @@ import Galleria from 'primevue/galleria'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
-import { ResultItemImpl } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'
diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index 70aebd1f4b..f4dad64fa6 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -25,7 +25,7 @@ import { computed, onMounted, ref } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { ResultItemImpl } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
 import ResultVideo from './ResultVideo.vue'
diff --git a/src/components/sidebar/tabs/queue/ResultVideo.vue b/src/components/sidebar/tabs/queue/ResultVideo.vue
index 0b2832c6bc..d8b0764fec 100644
--- a/src/components/sidebar/tabs/queue/ResultVideo.vue
+++ b/src/components/sidebar/tabs/queue/ResultVideo.vue
@@ -10,7 +10,7 @@ import { computed } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { ResultItemImpl } from '@/stores/queueStore'
+import type { ResultItemImpl } from '@/stores/queueStore'
 
 const props = defineProps<{
   result: ResultItemImpl
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 71c94584c7..6f4297d5e1 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -78,7 +78,7 @@ import Button from 'primevue/button'
 import Tag from 'primevue/tag'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
-import { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { api } from '@/scripts/api'
 import { useLitegraphService } from '@/services/litegraphService'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
diff --git a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
index 4674089c42..c1f2078f8c 100644
--- a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
+++ b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
@@ -17,10 +17,8 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import {
-  ComfyWorkflow,
-  useWorkflowBookmarkStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowBookmarkStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const { node } = defineProps<{
diff --git a/src/components/templates/TemplateWorkflowCard.spec.ts b/src/components/templates/TemplateWorkflowCard.spec.ts
index 54d66db06c..733b723d6c 100644
--- a/src/components/templates/TemplateWorkflowCard.spec.ts
+++ b/src/components/templates/TemplateWorkflowCard.spec.ts
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
-import { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('@/components/templates/thumbnails/AudioThumbnail.vue', () => ({
   default: {
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 93bdd8a21c..eb6a930388 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -87,7 +87,7 @@ import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSli
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
-import { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const UPSCALE_ZOOM_SCALE = 16 // for upscale templates, exaggerate the hover zoom
 const DEFAULT_ZOOM_SCALE = 5
diff --git a/src/components/templates/TemplateWorkflowView.spec.ts b/src/components/templates/TemplateWorkflowView.spec.ts
index aaffd4cd0e..d9633a7e09 100644
--- a/src/components/templates/TemplateWorkflowView.spec.ts
+++ b/src/components/templates/TemplateWorkflowView.spec.ts
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
-import { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('primevue/dataview', () => ({
   default: {
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index 9ab70f3a02..e9f33f8123 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/topbar/CommandMenubar.vue
@@ -82,7 +82,6 @@ import { useI18n } from 'vue-i18n'
 
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
-import { useManagerState } from '@/composables/useManagerState'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
@@ -90,10 +89,11 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { ManagerTab } from '@/types/comfyManagerTypes'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
diff --git a/src/components/topbar/CurrentUserButton.spec.ts b/src/components/topbar/CurrentUserButton.spec.ts
index 55e23fa237..60c46ff4a1 100644
--- a/src/components/topbar/CurrentUserButton.spec.ts
+++ b/src/components/topbar/CurrentUserButton.spec.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
diff --git a/src/components/topbar/CurrentUserPopover.spec.ts b/src/components/topbar/CurrentUserPopover.spec.ts
index 174850a0dc..a7e965b213 100644
--- a/src/components/topbar/CurrentUserPopover.spec.ts
+++ b/src/components/topbar/CurrentUserPopover.spec.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
diff --git a/src/components/topbar/WorkflowTab.vue b/src/components/topbar/WorkflowTab.vue
index 887cc3c7df..d427736b8f 100644
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="workflowTabRef"
-    class="flex p-2 gap-2 workflow-tab"
+    class="flex p-2 gap-2 workflow-tab group"
     v-bind="$attrs"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
@@ -11,9 +11,13 @@
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
-      <span v-if="shouldShowStatusIndicator" class="status-indicator">•</span>
+      <span
+        v-if="shouldShowStatusIndicator"
+        class="group-hover:hidden absolute font-bold text-2xl top-1/2 left-1/2 -translate-1/2 z-10 bg-(--comfy-menu-secondary-bg) w-4"
+        >•</span
+      >
       <Button
-        class="close-button p-0 w-auto"
+        class="close-button p-0 w-auto invisible"
         icon="pi pi-times"
         text
         severity="secondary"
@@ -42,7 +46,7 @@ import {
 } from '@/composables/usePragmaticDragAndDrop'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -174,18 +178,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.status-indicator {
-  @apply absolute font-bold;
-  font-size: 1.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>
-
 <style>
 .p-tooltip.workflow-tab-tooltip {
   z-index: 1200 !important;
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 48591f5631..6a4243dde7 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -83,10 +83,8 @@ import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import {
-  ComfyWorkflow,
-  useWorkflowBookmarkStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowBookmarkStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -360,14 +358,6 @@ onUpdated(() => {
   @apply visible;
 }
 
-:deep(.p-togglebutton:hover) .status-indicator {
-  @apply hidden;
-}
-
-:deep(.p-togglebutton) .close-button {
-  @apply invisible;
-}
-
 :deep(.p-scrollpanel-content) {
   @apply h-full;
 }
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 85f05d540d..e33f87aceb 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -143,7 +143,7 @@ import SingleSelect from '@/components/input/SingleSelect.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import RightSidePanel from '@/components/widget/panel/RightSidePanel.vue'
-import { NavGroupData, NavItemData } from '@/types/navTypes'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import { createGridStyle } from '@/utils/gridUtil'
 
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index c455f62eec..6c30d7ddea 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -127,7 +127,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
   'base-widget-layout',
   'rounded-2xl overflow-hidden relative',
-  'bg-zinc-50 dark-theme:bg-zinc-800'
+  'bg-gray-50 dark-theme:bg-gray-800'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -144,7 +144,7 @@ const closeButtonClasses = cn(
 
 const mainContainerClasses = cn(
   'flex-1 flex',
-  'bg-zinc-100 dark-theme:bg-neutral-900'
+  'bg-gray-100 dark-theme:bg-neutral-900'
 )
 
 const headerClasses = cn(
diff --git a/src/components/widget/nav/NavIcon.vue b/src/components/widget/nav/NavIcon.vue
index d261557056..653a6a70ed 100644
--- a/src/components/widget/nav/NavIcon.vue
+++ b/src/components/widget/nav/NavIcon.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { NavItemData } from '@/types/navTypes'
+import type { NavItemData } from '@/types/navTypes'
 
 defineProps<{
   icon: NavItemData['icon']
diff --git a/src/components/widget/nav/NavItem.vue b/src/components/widget/nav/NavItem.vue
index 206c05318c..f5bd09431d 100644
--- a/src/components/widget/nav/NavItem.vue
+++ b/src/components/widget/nav/NavItem.vue
@@ -3,8 +3,8 @@
     class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
     :class="
       active
-        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
-        : 'text-neutral hover:bg-zinc-100 dark-theme:hover:bg-zinc-700/50'
+        ? 'bg-white dark-theme:bg-charcoal-600 text-neutral'
+        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
     "
     role="button"
     @click="onClick"
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { NavItemData } from '@/types/navTypes'
+import type { NavItemData } from '@/types/navTypes'
 
 import NavIcon from './NavIcon.vue'
 
diff --git a/src/components/widget/panel/LeftSidePanel.vue b/src/components/widget/panel/LeftSidePanel.vue
index bcc84ffde0..892e37a0bb 100644
--- a/src/components/widget/panel/LeftSidePanel.vue
+++ b/src/components/widget/panel/LeftSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-charcoal-600">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>
@@ -40,7 +40,7 @@ import { computed } from 'vue'
 
 import NavItem from '@/components/widget/nav/NavItem.vue'
 import NavTitle from '@/components/widget/nav/NavTitle.vue'
-import { NavGroupData, NavItemData } from '@/types/navTypes'
+import type { NavGroupData, NavItemData } from '@/types/navTypes'
 
 import PanelHeader from './PanelHeader.vue'
 
diff --git a/src/components/widget/panel/RightSidePanel.vue b/src/components/widget/panel/RightSidePanel.vue
index 44e6b79793..266f229102 100644
--- a/src/components/widget/panel/RightSidePanel.vue
+++ b/src/components/widget/panel/RightSidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
+  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-charcoal-600">
     <slot></slot>
   </div>
 </template>
diff --git a/src/composables/README.md b/src/composables/README.md
index 34fb011f0f..9bf9a4635b 100644
--- a/src/composables/README.md
+++ b/src/composables/README.md
@@ -103,14 +103,22 @@ Utility composables for common patterns:
 | `useChainCallback` | Chains multiple callbacks together |
 
 ### Manager
-Composables for ComfyUI Manager integration:
+Composables for ComfyUI Manager integration (located in
+`@/workbench/extensions/manager/composables`):
 
 | Composable | Description |
 |------------|-------------|
 | `useManagerStatePersistence` | Persists manager UI state |
+| `useManagerState` | Determines availability of manager UI modes |
+| `useManagerQueue` | Handles manager task queue state |
+| `useConflictAcknowledgment` | Tracks conflict dismissal state |
+| `useConflictDetection` | Orchestrates conflict detection workflow |
+| `useImportFailedDetection` | Handles import-failed conflict dialogs |
+| `useRegistrySearch` | Manages registry search UI state |
 
-### Node Pack
-Composables for node package management:
+#### Node Pack
+Node package helpers live under
+`@/workbench/extensions/manager/composables/nodePack`:
 
 | Composable | Description |
 |------------|-------------|
@@ -118,6 +126,9 @@ Composables for node package management:
 | `useMissingNodes` | Detects and handles missing nodes |
 | `useNodePacks` | Core node package functionality |
 | `usePackUpdateStatus` | Tracks package update availability |
+| `usePacksSelection` | Provides selection helpers for pack lists |
+| `usePacksStatus` | Aggregates status across multiple packs |
+| `useUpdateAvailableNodes` | Detects available updates for nodes |
 | `useWorkflowPacks` | Manages packages used in workflows |
 
 ### Node
@@ -408,4 +419,4 @@ export function useFetchData(url) {
 }
 ```
 
-For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).
\ No newline at end of file
+For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).
diff --git a/src/composables/auth/useCurrentUser.ts b/src/composables/auth/useCurrentUser.ts
index cf89c1069b..37b9e48662 100644
--- a/src/composables/auth/useCurrentUser.ts
+++ b/src/composables/auth/useCurrentUser.ts
@@ -34,14 +34,8 @@ export const useCurrentUser = () => {
     return null
   })
 
-  const onUserResolved = (callback: (user: AuthUserInfo) => void) => {
-    if (resolvedUserInfo.value) {
-      callback(resolvedUserInfo.value)
-    }
-
-    const stop = whenever(resolvedUserInfo, callback)
-    return () => stop()
-  }
+  const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
+    whenever(resolvedUserInfo, callback, { immediate: true })
 
   const userDisplayName = computed(() => {
     if (isApiKeyLogin.value) {
diff --git a/src/composables/bottomPanelTabs/useCommandSubcategories.ts b/src/composables/bottomPanelTabs/useCommandSubcategories.ts
index 0fbf37ebe6..7009af2f60 100644
--- a/src/composables/bottomPanelTabs/useCommandSubcategories.ts
+++ b/src/composables/bottomPanelTabs/useCommandSubcategories.ts
@@ -1,6 +1,6 @@
 import { type ComputedRef, computed } from 'vue'
 
-import { type ComfyCommandImpl } from '@/stores/commandStore'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
 
 type SubcategoryRule = {
   pattern: string | RegExp
diff --git a/src/composables/bottomPanelTabs/useShortcutsTab.ts b/src/composables/bottomPanelTabs/useShortcutsTab.ts
index b4c6992826..e15f86fb43 100644
--- a/src/composables/bottomPanelTabs/useShortcutsTab.ts
+++ b/src/composables/bottomPanelTabs/useShortcutsTab.ts
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
 import ViewControlsPanel from '@/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue'
-import { BottomPanelExtension } from '@/types/extensionTypes'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 export const useShortcutsTab = (): BottomPanelExtension[] => {
   const { t } = useI18n()
diff --git a/src/composables/bottomPanelTabs/useTerminal.ts b/src/composables/bottomPanelTabs/useTerminal.ts
index fc2dec7bad..d353294f09 100644
--- a/src/composables/bottomPanelTabs/useTerminal.ts
+++ b/src/composables/bottomPanelTabs/useTerminal.ts
@@ -2,13 +2,15 @@ import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
 import '@xterm/xterm/css/xterm.css'
 import { debounce } from 'es-toolkit/compat'
-import { Ref, markRaw, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import { markRaw, onMounted, onUnmounted } from 'vue'
 
 export function useTerminal(element: Ref<HTMLElement | undefined>) {
   const fitAddon = new FitAddon()
   const terminal = markRaw(
     new Terminal({
-      convertEol: true
+      convertEol: true,
+      theme: { background: '#171717' }
     })
   )
   terminal.loadAddon(fitAddon)
diff --git a/src/composables/bottomPanelTabs/useTerminalTabs.ts b/src/composables/bottomPanelTabs/useTerminalTabs.ts
index 23b7f2befd..2abc79c938 100644
--- a/src/composables/bottomPanelTabs/useTerminalTabs.ts
+++ b/src/composables/bottomPanelTabs/useTerminalTabs.ts
@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import CommandTerminal from '@/components/bottomPanel/tabs/terminal/CommandTerminal.vue'
 import LogsTerminal from '@/components/bottomPanel/tabs/terminal/LogsTerminal.vue'
-import { BottomPanelExtension } from '@/types/extensionTypes'
+import type { BottomPanelExtension } from '@/types/extensionTypes'
 
 export const useLogsTerminalTab = (): BottomPanelExtension => {
   const { t } = useI18n()
diff --git a/src/composables/canvas/useCanvasTransformSync.ts b/src/composables/canvas/useCanvasTransformSync.ts
deleted file mode 100644
index f2fc480cb3..0000000000
--- a/src/composables/canvas/useCanvasTransformSync.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { onUnmounted, ref } from 'vue'
-
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
-interface CanvasTransformSyncOptions {
-  /**
-   * Whether to automatically start syncing when canvas is available
-   * @default true
-   */
-  autoStart?: boolean
-  /**
-   * Called when sync starts
-   */
-  onStart?: () => void
-  /**
-   * Called when sync stops
-   */
-  onStop?: () => void
-}
-
-interface CanvasTransform {
-  scale: number
-  offsetX: number
-  offsetY: number
-}
-
-/**
- * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
- *
- * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
- * on every frame. It handles RAF lifecycle management, and ensures proper cleanup.
- *
- * The sync function typically reads canvas.ds properties like offset and scale to keep
- * Vue components aligned with the canvas coordinate system.
- *
- * @example
- * ```ts
- * const syncWithCanvas = (canvas: LGraphCanvas) => {
- *   canvas.ds.scale
- *   canvas.ds.offset
- * }
- *
- * const { isActive, startSync, stopSync } = useCanvasTransformSync(
- *   syncWithCanvas,
- *   {
- *     autoStart: false,
- *     onStart: () => emit('rafStatusChange', true),
- *     onStop: () => emit('rafStatusChange', false)
- *   }
- * )
- * ```
- */
-export function useCanvasTransformSync(
-  syncFn: (canvas: LGraphCanvas) => void,
-  options: CanvasTransformSyncOptions = {}
-) {
-  const { onStart, onStop, autoStart = true } = options
-  const { getCanvas } = useCanvasStore()
-
-  const isActive = ref(false)
-  let rafId: number | null = null
-  let lastTransform: CanvasTransform = {
-    scale: 0,
-    offsetX: 0,
-    offsetY: 0
-  }
-
-  const hasTransformChanged = (canvas: LGraphCanvas): boolean => {
-    const ds = canvas.ds
-    return (
-      ds.scale !== lastTransform.scale ||
-      ds.offset[0] !== lastTransform.offsetX ||
-      ds.offset[1] !== lastTransform.offsetY
-    )
-  }
-
-  const sync = () => {
-    if (!isActive.value) return
-
-    const canvas = getCanvas()
-    if (!canvas) return
-
-    try {
-      // Only run sync if transform actually changed
-      if (hasTransformChanged(canvas)) {
-        lastTransform = {
-          scale: canvas.ds.scale,
-          offsetX: canvas.ds.offset[0],
-          offsetY: canvas.ds.offset[1]
-        }
-
-        syncFn(canvas)
-      }
-    } catch (error) {
-      console.error('Canvas transform sync error:', error)
-    }
-
-    rafId = requestAnimationFrame(sync)
-  }
-
-  const startSync = () => {
-    if (isActive.value) return
-
-    isActive.value = true
-    onStart?.()
-
-    // Reset last transform to force initial sync
-    lastTransform = { scale: 0, offsetX: 0, offsetY: 0 }
-
-    sync()
-  }
-
-  const stopSync = () => {
-    isActive.value = false
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
-    onStop?.()
-  }
-
-  onUnmounted(stopSync)
-
-  if (autoStart) {
-    startSync()
-  }
-
-  return {
-    isActive,
-    startSync,
-    stopSync
-  }
-}
diff --git a/src/composables/canvas/useSelectedLiteGraphItems.ts b/src/composables/canvas/useSelectedLiteGraphItems.ts
index 251b65899e..a4a93b9fbc 100644
--- a/src/composables/canvas/useSelectedLiteGraphItems.ts
+++ b/src/composables/canvas/useSelectedLiteGraphItems.ts
@@ -1,9 +1,5 @@
-import {
-  LGraphEventMode,
-  LGraphNode,
-  Positionable,
-  Reroute
-} from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import {
diff --git a/src/composables/canvas/useSelectionToolboxPosition.ts b/src/composables/canvas/useSelectionToolboxPosition.ts
index 963f9c7d2d..4d725dd746 100644
--- a/src/composables/canvas/useSelectionToolboxPosition.ts
+++ b/src/composables/canvas/useSelectionToolboxPosition.ts
@@ -1,7 +1,7 @@
-import { onUnmounted, ref, watch } from 'vue'
+import { useRafFn } from '@vueuse/core'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
@@ -128,9 +128,7 @@ export function useSelectionToolboxPosition(
   }
 
   // Sync with canvas transform
-  const { startSync, stopSync } = useCanvasTransformSync(updateTransform, {
-    autoStart: false
-  })
+  const { resume: startSync, pause: stopSync } = useRafFn(updateTransform)
 
   // Watch for selection changes
   watch(
@@ -170,50 +168,75 @@ export function useSelectionToolboxPosition(
     }
   )
 
-  // Watch for dragging state
-  watch(
-    () => canvasStore.canvas?.state?.draggingItems,
-    (dragging) => {
-      if (dragging) {
-        visible.value = false
-
-        if (moreOptionsOpen.value) {
-          const currentSig = buildSelectionSignature(canvasStore)
-          if (currentSig !== moreOptionsSelectionSignature) {
-            moreOptionsSelectionSignature = null
-          }
-          moreOptionsWasOpenBeforeDrag = true
-          moreOptionsOpen.value = false
-          moreOptionsRestorePending.value = !!moreOptionsSelectionSignature
-          if (moreOptionsRestorePending.value) {
-            forceCloseMoreOptionsSignal.value++
-          } else {
-            moreOptionsWasOpenBeforeDrag = false
-          }
-        } else {
-          moreOptionsRestorePending.value = false
-          moreOptionsWasOpenBeforeDrag = false
-        }
-      } else {
-        requestAnimationFrame(() => {
-          updateSelectionBounds()
-          const selectionMatches = currentSelectionMatchesSignature(canvasStore)
-          const shouldRestore =
-            moreOptionsWasOpenBeforeDrag &&
-            visible.value &&
-            moreOptionsRestorePending.value &&
-            selectionMatches
-
-          if (shouldRestore) {
-            restoreMoreOptionsSignal.value++
-          } else {
-            moreOptionsRestorePending.value = false
-          }
-          moreOptionsWasOpenBeforeDrag = false
-        })
-      }
+  const handleDragStateChange = (dragging: boolean) => {
+    if (dragging) {
+      handleDragStart()
+      return
     }
-  )
+
+    handleDragEnd()
+  }
+
+  const handleDragStart = () => {
+    visible.value = false
+
+    // Early return if more options wasn't open
+    if (!moreOptionsOpen.value) {
+      moreOptionsRestorePending.value = false
+      moreOptionsWasOpenBeforeDrag = false
+      return
+    }
+
+    // Handle more options cleanup
+    const currentSig = buildSelectionSignature(canvasStore)
+    const selectionChanged = currentSig !== moreOptionsSelectionSignature
+
+    if (selectionChanged) {
+      moreOptionsSelectionSignature = null
+    }
+    moreOptionsOpen.value = false
+    moreOptionsWasOpenBeforeDrag = true
+    moreOptionsRestorePending.value = !!moreOptionsSelectionSignature
+
+    if (moreOptionsRestorePending.value) {
+      forceCloseMoreOptionsSignal.value++
+      return
+    }
+
+    moreOptionsWasOpenBeforeDrag = false
+  }
+
+  const handleDragEnd = () => {
+    requestAnimationFrame(() => {
+      updateSelectionBounds()
+
+      const selectionMatches = currentSelectionMatchesSignature(canvasStore)
+      const shouldRestore =
+        moreOptionsWasOpenBeforeDrag &&
+        visible.value &&
+        moreOptionsRestorePending.value &&
+        selectionMatches
+
+      // Single point of assignment for each ref
+      moreOptionsRestorePending.value =
+        shouldRestore && moreOptionsRestorePending.value
+      moreOptionsWasOpenBeforeDrag = false
+
+      if (shouldRestore) {
+        restoreMoreOptionsSignal.value++
+      }
+    })
+  }
+
+  // Unified dragging state - combines both LiteGraph and Vue node dragging
+  const isDragging = computed((): boolean => {
+    const litegraphDragging = canvasStore.canvas?.state?.draggingItems ?? false
+    const vueNodeDragging =
+      shouldRenderVueNodes.value && layoutStore.isDraggingVueNodes.value
+    return litegraphDragging || vueNodeDragging
+  })
+
+  watch(isDragging, handleDragStateChange)
 
   onUnmounted(() => {
     resetMoreOptionsState()
diff --git a/src/composables/element/useAbsolutePosition.ts b/src/composables/element/useAbsolutePosition.ts
index ad4930c590..35b34b702c 100644
--- a/src/composables/element/useAbsolutePosition.ts
+++ b/src/composables/element/useAbsolutePosition.ts
@@ -1,4 +1,5 @@
-import { CSSProperties, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ref, watch } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import type { Size, Vector2 } from '@/lib/litegraph/src/litegraph'
diff --git a/src/composables/element/useDomClipping.ts b/src/composables/element/useDomClipping.ts
index c3d41c998e..7dcc31fb60 100644
--- a/src/composables/element/useDomClipping.ts
+++ b/src/composables/element/useDomClipping.ts
@@ -1,4 +1,5 @@
-import { CSSProperties, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { ref } from 'vue'
 
 interface Rect {
   x: number
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index ae430987a1..96c2d20655 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -2,46 +2,22 @@
  * Vue node lifecycle management for LiteGraph integration
  * Provides event-driven reactivity with performance optimizations
  */
-import { nextTick, reactive } from 'vue'
+import { reactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
+import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import { type Bounds, QuadTree } from '@/renderer/core/spatial/QuadTree'
 import type { WidgetValue } from '@/types/simplifiedWidget'
-import type { SpatialIndexDebugInfo } from '@/types/spatialIndex'
 
 import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
 
-export interface NodeState {
-  visible: boolean
-  dirty: boolean
-  lastUpdate: number
-  culled: boolean
-}
-
-interface NodeMetadata {
-  lastRenderTime: number
-  cachedBounds: DOMRect | null
-  lodLevel: 'high' | 'medium' | 'low'
-  spatialIndex?: QuadTree<string>
-}
-
-interface PerformanceMetrics {
-  fps: number
-  frameTime: number
-  updateTime: number
-  nodeCount: number
-  culledCount: number
-  callbackUpdateCount: number
-  rafUpdateCount: number
-  adaptiveQuality: boolean
-}
-
 export interface SafeWidgetData {
   name: string
   type: string
   value: WidgetValue
+  label?: string
   options?: Record<string, unknown>
   callback?: ((value: unknown) => void) | undefined
 }
@@ -55,117 +31,34 @@ export interface VueNodeData {
   executing: boolean
   subgraphId?: string | null
   widgets?: SafeWidgetData[]
-  inputs?: unknown[]
-  outputs?: unknown[]
+  inputs?: INodeInputSlot[]
+  outputs?: INodeOutputSlot[]
   hasErrors?: boolean
   flags?: {
     collapsed?: boolean
   }
 }
 
-interface SpatialMetrics {
-  queryTime: number
-  nodesInIndex: number
-}
-
-interface GraphNodeManager {
+export interface GraphNodeManager {
   // Reactive state - safe data extracted from LiteGraph nodes
   vueNodeData: ReadonlyMap<string, VueNodeData>
-  nodeState: ReadonlyMap<string, NodeState>
-  nodePositions: ReadonlyMap<string, { x: number; y: number }>
-  nodeSizes: ReadonlyMap<string, { width: number; height: number }>
 
   // Access to original LiteGraph nodes (non-reactive)
   getNode(id: string): LGraphNode | undefined
 
   // Lifecycle methods
-  setupEventListeners(): () => void
   cleanup(): void
-
-  // Update methods
-  scheduleUpdate(
-    nodeId?: string,
-    priority?: 'critical' | 'normal' | 'low'
-  ): void
-  forceSync(): void
-  detectChangesInRAF(): void
-
-  // Spatial queries
-  getVisibleNodeIds(viewportBounds: Bounds): Set<string>
-
-  // Performance
-  performanceMetrics: PerformanceMetrics
-  spatialMetrics: SpatialMetrics
-
-  // Debug
-  getSpatialIndexDebugInfo(): SpatialIndexDebugInfo | null
 }
 
-export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Get layout mutations composable
-  const { moveNode, resizeNode, createNode, deleteNode, setSource } =
-    useLayoutMutations()
+  const { createNode, deleteNode, setSource } = useLayoutMutations()
   // Safe reactive data extracted from LiteGraph nodes
   const vueNodeData = reactive(new Map<string, VueNodeData>())
-  const nodeState = reactive(new Map<string, NodeState>())
-  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
-  const nodeSizes = reactive(
-    new Map<string, { width: number; height: number }>()
-  )
 
   // Non-reactive storage for original LiteGraph nodes
   const nodeRefs = new Map<string, LGraphNode>()
 
-  // WeakMap for heavy data that auto-GCs when nodes are removed
-  const nodeMetadata = new WeakMap<LGraphNode, NodeMetadata>()
-
-  // Performance tracking
-  const performanceMetrics = reactive<PerformanceMetrics>({
-    fps: 0,
-    frameTime: 0,
-    updateTime: 0,
-    nodeCount: 0,
-    culledCount: 0,
-    callbackUpdateCount: 0,
-    rafUpdateCount: 0,
-    adaptiveQuality: false
-  })
-
-  // Spatial indexing using QuadTree
-  const spatialIndex = new QuadTree<string>(
-    { x: -10000, y: -10000, width: 20000, height: 20000 },
-    { maxDepth: 6, maxItemsPerNode: 4 }
-  )
-  let lastSpatialQueryTime = 0
-
-  // Spatial metrics
-  const spatialMetrics = reactive<SpatialMetrics>({
-    queryTime: 0,
-    nodesInIndex: 0
-  })
-
-  // Update batching
-  const pendingUpdates = new Set<string>()
-  const criticalUpdates = new Set<string>()
-  const lowPriorityUpdates = new Set<string>()
-  let updateScheduled = false
-  let batchTimeoutId: number | null = null
-
-  // Change detection state
-  const lastNodesSnapshot = new Map<
-    string,
-    { pos: [number, number]; size: [number, number] }
-  >()
-
-  const attachMetadata = (node: LGraphNode) => {
-    nodeMetadata.set(node, {
-      lastRenderTime: performance.now(),
-      cachedBounds: null,
-      lodLevel: 'high',
-      spatialIndex: undefined
-    })
-  }
-
   // Extract safe data from LiteGraph node for Vue consumption
   const extractVueNodeData = (node: LGraphNode): VueNodeData => {
     // Determine subgraph ID - null for root graph, string for subgraphs
@@ -194,6 +87,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
           name: widget.name,
           type: widget.type,
           value: value,
+          label: widget.label,
           options: widget.options ? { ...widget.options } : undefined,
           callback: widget.callback
         }
@@ -286,7 +180,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
         ...currentData,
         widgets: updatedWidgets
       })
-      performanceMetrics.callbackUpdateCount++
     } catch (error) {
       // Ignore widget update errors to prevent cascade failures
     }
@@ -356,71 +249,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     })
   }
 
-  // Uncomment when needed for future features
-  // const getNodeMetadata = (node: LGraphNode): NodeMetadata => {
-  //   let metadata = nodeMetadata.get(node)
-  //   if (!metadata) {
-  //     attachMetadata(node)
-  //     metadata = nodeMetadata.get(node)!
-  //   }
-  //   return metadata
-  // }
-
-  const scheduleUpdate = (
-    nodeId?: string,
-    priority: 'critical' | 'normal' | 'low' = 'normal'
-  ) => {
-    if (nodeId) {
-      const state = nodeState.get(nodeId)
-      if (state) state.dirty = true
-
-      // Priority queuing
-      if (priority === 'critical') {
-        criticalUpdates.add(nodeId)
-        flush() // Immediate flush for critical updates
-        return
-      } else if (priority === 'low') {
-        lowPriorityUpdates.add(nodeId)
-      } else {
-        pendingUpdates.add(nodeId)
-      }
-    }
-
-    if (!updateScheduled) {
-      updateScheduled = true
-
-      // Adaptive batching strategy
-      if (pendingUpdates.size > 10) {
-        // Many updates - batch in nextTick
-        void nextTick(() => flush())
-      } else {
-        // Few updates - small delay for more batching
-        batchTimeoutId = window.setTimeout(() => flush(), 4)
-      }
-    }
-  }
-
-  const flush = () => {
-    const startTime = performance.now()
-
-    if (batchTimeoutId !== null) {
-      clearTimeout(batchTimeoutId)
-      batchTimeoutId = null
-    }
-
-    // Clear all pending updates
-    criticalUpdates.clear()
-    pendingUpdates.clear()
-    lowPriorityUpdates.clear()
-    updateScheduled = false
-
-    // Sync with graph state
-    syncWithGraph()
-
-    const endTime = performance.now()
-    performanceMetrics.updateTime = endTime - startTime
-  }
-
   const syncWithGraph = () => {
     if (!graph?._nodes) return
 
@@ -431,11 +259,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       if (!currentNodes.has(id)) {
         nodeRefs.delete(id)
         vueNodeData.delete(id)
-        nodeState.delete(id)
-        nodePositions.delete(id)
-        nodeSizes.delete(id)
-        lastNodesSnapshot.delete(id)
-        spatialIndex.remove(id)
       }
     }
 
@@ -451,163 +274,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
 
       // Extract and store safe data for Vue
       vueNodeData.set(id, extractVueNodeData(node))
-
-      if (!nodeState.has(id)) {
-        nodeState.set(id, {
-          visible: true,
-          dirty: false,
-          lastUpdate: performance.now(),
-          culled: false
-        })
-        nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
-        nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
-        attachMetadata(node)
-
-        // Add to spatial index
-        const bounds: Bounds = {
-          x: node.pos[0],
-          y: node.pos[1],
-          width: node.size[0],
-          height: node.size[1]
-        }
-        spatialIndex.insert(id, bounds, id)
-      }
     })
-
-    // Update performance metrics
-    performanceMetrics.nodeCount = vueNodeData.size
-    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
-      (s) => s.culled
-    ).length
-  }
-
-  // Most performant: Direct position sync without re-setting entire node
-  // Query visible nodes using QuadTree spatial index
-  const getVisibleNodeIds = (viewportBounds: Bounds): Set<string> => {
-    const startTime = performance.now()
-
-    // Use QuadTree for fast spatial query
-    const results: string[] = spatialIndex.query(viewportBounds)
-    const visibleIds = new Set(results)
-
-    lastSpatialQueryTime = performance.now() - startTime
-    spatialMetrics.queryTime = lastSpatialQueryTime
-
-    return visibleIds
-  }
-
-  /**
-   * Detects position changes for a single node and updates reactive state
-   */
-  const detectPositionChanges = (node: LGraphNode, id: string): boolean => {
-    const currentPos = nodePositions.get(id)
-
-    if (
-      !currentPos ||
-      currentPos.x !== node.pos[0] ||
-      currentPos.y !== node.pos[1]
-    ) {
-      nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
-
-      // Push position change to layout store
-      // Source is already set to 'canvas' in detectChangesInRAF
-      void moveNode(id, { x: node.pos[0], y: node.pos[1] })
-
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Detects size changes for a single node and updates reactive state
-   */
-  const detectSizeChanges = (node: LGraphNode, id: string): boolean => {
-    const currentSize = nodeSizes.get(id)
-
-    if (
-      !currentSize ||
-      currentSize.width !== node.size[0] ||
-      currentSize.height !== node.size[1]
-    ) {
-      nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
-
-      // Push size change to layout store
-      // Source is already set to 'canvas' in detectChangesInRAF
-      void resizeNode(id, {
-        width: node.size[0],
-        height: node.size[1]
-      })
-
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Updates spatial index for a node if bounds changed
-   */
-  const updateSpatialIndex = (node: LGraphNode, id: string): void => {
-    const bounds: Bounds = {
-      x: node.pos[0],
-      y: node.pos[1],
-      width: node.size[0],
-      height: node.size[1]
-    }
-    spatialIndex.update(id, bounds)
-  }
-
-  /**
-   * Updates performance metrics after change detection
-   */
-  const updatePerformanceMetrics = (
-    startTime: number,
-    positionUpdates: number,
-    sizeUpdates: number
-  ): void => {
-    const endTime = performance.now()
-    performanceMetrics.updateTime = endTime - startTime
-    performanceMetrics.nodeCount = vueNodeData.size
-    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
-      (state) => state.culled
-    ).length
-    spatialMetrics.nodesInIndex = spatialIndex.size
-
-    if (positionUpdates > 0 || sizeUpdates > 0) {
-      performanceMetrics.rafUpdateCount++
-    }
-  }
-
-  /**
-   * Main RAF change detection function
-   */
-  const detectChangesInRAF = () => {
-    const startTime = performance.now()
-
-    if (!graph?._nodes) return
-
-    let positionUpdates = 0
-    let sizeUpdates = 0
-
-    // Set source for all canvas-driven updates
-    setSource(LayoutSource.Canvas)
-
-    // Process each node for changes
-    for (const node of graph._nodes) {
-      const id = String(node.id)
-
-      const posChanged = detectPositionChanges(node, id)
-      const sizeChanged = detectSizeChanges(node, id)
-
-      if (posChanged) positionUpdates++
-      if (sizeChanged) sizeUpdates++
-
-      // Update spatial index if geometry changed
-      if (posChanged || sizeChanged) {
-        updateSpatialIndex(node, id)
-      }
-    }
-
-    updatePerformanceMetrics(startTime, positionUpdates, sizeUpdates)
   }
 
   /**
@@ -629,32 +296,11 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     // Extract initial data for Vue (may be incomplete during graph configure)
     vueNodeData.set(id, extractVueNodeData(node))
 
-    // Set up reactive tracking state
-    nodeState.set(id, {
-      visible: true,
-      dirty: false,
-      lastUpdate: performance.now(),
-      culled: false
-    })
-
     const initializeVueNodeLayout = () => {
       // Extract actual positions after configure() has potentially updated them
       const nodePosition = { x: node.pos[0], y: node.pos[1] }
       const nodeSize = { width: node.size[0], height: node.size[1] }
 
-      nodePositions.set(id, nodePosition)
-      nodeSizes.set(id, nodeSize)
-      attachMetadata(node)
-
-      // Add to spatial index for viewport culling with final positions
-      const nodeBounds: Bounds = {
-        x: nodePosition.x,
-        y: nodePosition.y,
-        width: nodeSize.width,
-        height: nodeSize.height
-      }
-      spatialIndex.insert(id, nodeBounds, id)
-
       // Add node to layout store with final positions
       setSource(LayoutSource.Canvas)
       void createNode(id, {
@@ -698,9 +344,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
   ) => {
     const id = String(node.id)
 
-    // Remove from spatial index
-    spatialIndex.remove(id)
-
     // Remove node from layout store
     setSource(LayoutSource.Canvas)
     void deleteNode(id)
@@ -708,10 +351,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     // Clean up all tracking references
     nodeRefs.delete(id)
     vueNodeData.delete(id)
-    nodeState.delete(id)
-    nodePositions.delete(id)
-    nodeSizes.delete(id)
-    lastNodesSnapshot.delete(id)
 
     // Call original callback if provided
     if (originalCallback) {
@@ -733,23 +372,9 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       graph.onNodeRemoved = originalOnNodeRemoved || undefined
       graph.onTrigger = originalOnTrigger || undefined
 
-      // Clear pending updates
-      if (batchTimeoutId !== null) {
-        clearTimeout(batchTimeoutId)
-        batchTimeoutId = null
-      }
-
       // Clear all state maps
       nodeRefs.clear()
       vueNodeData.clear()
-      nodeState.clear()
-      nodePositions.clear()
-      nodeSizes.clear()
-      lastNodesSnapshot.clear()
-      pendingUpdates.clear()
-      criticalUpdates.clear()
-      lowPriorityUpdates.clear()
-      spatialIndex.clear()
     }
   }
 
@@ -812,6 +437,28 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
               })
           }
         }
+      } else if (
+        action === 'node:slot-errors:changed' &&
+        param &&
+        typeof param === 'object'
+      ) {
+        const event = param as { nodeId: string | number }
+        const nodeId = String(event.nodeId)
+        const litegraphNode = nodeRefs.get(nodeId)
+        const currentData = vueNodeData.get(nodeId)
+
+        if (litegraphNode && currentData) {
+          // Re-extract slot data with updated hasErrors properties
+          vueNodeData.set(nodeId, {
+            ...currentData,
+            inputs: litegraphNode.inputs
+              ? [...litegraphNode.inputs]
+              : undefined,
+            outputs: litegraphNode.outputs
+              ? [...litegraphNode.outputs]
+              : undefined
+          })
+        }
       }
 
       // Call original trigger handler if it exists
@@ -845,18 +492,7 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
 
   return {
     vueNodeData,
-    nodeState,
-    nodePositions,
-    nodeSizes,
     getNode,
-    setupEventListeners,
-    cleanup,
-    scheduleUpdate,
-    forceSync: syncWithGraph,
-    detectChangesInRAF,
-    getVisibleNodeIds,
-    performanceMetrics,
-    spatialMetrics,
-    getSpatialIndexDebugInfo: () => spatialIndex.getDebugInfo()
+    cleanup
   }
 }
diff --git a/src/composables/graph/useMoreOptionsMenu.ts b/src/composables/graph/useMoreOptionsMenu.ts
index 71c4a92545..d668bfaf9c 100644
--- a/src/composables/graph/useMoreOptionsMenu.ts
+++ b/src/composables/graph/useMoreOptionsMenu.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 
-import { type LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import type { LGraphGroup } from '@/lib/litegraph/src/litegraph'
 import { isLGraphGroup } from '@/utils/litegraphUtil'
 
 import { useGroupMenuOptions } from './useGroupMenuOptions'
diff --git a/src/composables/graph/useSelectionState.ts b/src/composables/graph/useSelectionState.ts
index 0b85833baf..23268ba2a6 100644
--- a/src/composables/graph/useSelectionState.ts
+++ b/src/composables/graph/useSelectionState.ts
@@ -2,11 +2,8 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
-import {
-  LGraphEventMode,
-  LGraphNode,
-  SubgraphNode
-} from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
diff --git a/src/composables/graph/useViewportCulling.ts b/src/composables/graph/useViewportCulling.ts
index 6fc835e7e7..30cf82e569 100644
--- a/src/composables/graph/useViewportCulling.ts
+++ b/src/composables/graph/useViewportCulling.ts
@@ -6,101 +6,98 @@
  * 2. Set display none on element to avoid cascade resolution overhead
  * 3. Only run when transform changes (event driven)
  */
-import { type Ref, computed } from 'vue'
+import { createSharedComposable, useThrottleFn } from '@vueuse/core'
+import { computed } from 'vue'
 
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { app as comfyApp } from '@/scripts/app'
+import { app } from '@/scripts/app'
 
-interface NodeManager {
-  getNode: (id: string) => any
+type Bounds = [left: number, right: number, top: number, bottom: number]
+
+function getNodeBounds(node: LGraphNode): Bounds {
+  const [nodeLeft, nodeTop] = node.pos
+  const nodeRight = nodeLeft + node.size[0]
+  const nodeBottom = nodeTop + node.size[1]
+  return [nodeLeft, nodeRight, nodeTop, nodeBottom]
+}
+
+function viewportEdges(
+  canvas: ReturnType<typeof useCanvasStore>['canvas']
+): Bounds | undefined {
+  if (!canvas) {
+    return
+  }
+  const ds = canvas.ds
+  const viewport_width = canvas.canvas.width
+  const viewport_height = canvas.canvas.height
+  const margin = 500 * ds.scale
+
+  const [xOffset, yOffset] = ds.offset
+
+  const leftEdge = -margin / ds.scale - xOffset
+  const rightEdge = (viewport_width + margin) / ds.scale - xOffset
+  const topEdge = -margin / ds.scale - yOffset
+  const bottomEdge = (viewport_height + margin) / ds.scale - yOffset
+  return [leftEdge, rightEdge, topEdge, bottomEdge]
 }
 
-export function useViewportCulling(
-  isVueNodesEnabled: Ref<boolean>,
-  vueNodeData: Ref<ReadonlyMap<string, VueNodeData>>,
-  nodeDataTrigger: Ref<number>,
-  nodeManager: Ref<NodeManager | null>
-) {
+function boundsIntersect(boxA: Bounds, boxB: Bounds): boolean {
+  const [aLeft, aRight, aTop, aBottom] = boxA
+  const [bLeft, bRight, bTop, bBottom] = boxB
+
+  const leftOf = aRight < bLeft
+  const rightOf = aLeft > bRight
+  const above = aBottom < bTop
+  const below = aTop > bBottom
+  return !(leftOf || rightOf || above || below)
+}
+
+function useViewportCullingIndividual() {
   const canvasStore = useCanvasStore()
+  const { nodeManager } = useVueNodeLifecycle()
 
-  const allNodes = computed(() => {
-    if (!isVueNodesEnabled.value) return []
-    void nodeDataTrigger.value // Force re-evaluation when nodeManager initializes
-    return Array.from(vueNodeData.value.values())
-  })
+  const viewport = computed(() => viewportEdges(canvasStore.canvas))
+
+  function inViewport(node: LGraphNode | undefined): boolean {
+    if (!viewport.value || !node) {
+      return true
+    }
+    const nodeBounds = getNodeBounds(node)
+    return boundsIntersect(nodeBounds, viewport.value)
+  }
 
   /**
    * Update visibility of all nodes based on viewport
    * Queries DOM directly - no cache maintenance needed
    */
-  const updateVisibility = () => {
-    if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) return
-
-    const canvas = canvasStore.canvas
-    const manager = nodeManager.value
-    const ds = canvas.ds
+  function updateVisibility() {
+    if (!nodeManager.value || !app.canvas) return // load bearing app.canvas check for workflows being loaded.
 
-    // Viewport bounds
-    const viewport_width = canvas.canvas.width
-    const viewport_height = canvas.canvas.height
-    const margin = 500 * ds.scale
-
-    // Get all node elements at once
     const nodeElements = document.querySelectorAll('[data-node-id]')
-
-    // Update each element's visibility
     for (const element of nodeElements) {
       const nodeId = element.getAttribute('data-node-id')
       if (!nodeId) continue
 
-      const node = manager.getNode(nodeId)
+      const node = nodeManager.value.getNode(nodeId)
       if (!node) continue
 
-      // Calculate if node is outside viewport
-      const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
-      const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
-      const screen_width = node.size[0] * ds.scale
-      const screen_height = node.size[1] * ds.scale
-
-      const isNodeOutsideViewport =
-        screen_x + screen_width < -margin ||
-        screen_x > viewport_width + margin ||
-        screen_y + screen_height < -margin ||
-        screen_y > viewport_height + margin
-
-      // Setting display none directly avoid potential cascade resolution
-      if (element instanceof HTMLElement) {
-        element.style.display = isNodeOutsideViewport ? 'none' : ''
+      const displayValue = inViewport(node) ? '' : 'none'
+      if (
+        element instanceof HTMLElement &&
+        element.style.display !== displayValue
+      ) {
+        element.style.display = displayValue
       }
     }
   }
 
-  // RAF throttling for smooth updates during continuous panning
-  let rafId: number | null = null
-
-  /**
-   * Handle transform update - called by TransformPane event
-   * Uses RAF to batch updates for smooth performance
-   */
-  const handleTransformUpdate = () => {
-    if (!isVueNodesEnabled.value) return
+  const handleTransformUpdate = useThrottleFn(() => updateVisibility, 100, true)
 
-    // Cancel previous RAF if still pending
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-    }
-
-    // Schedule update in next animation frame
-    rafId = requestAnimationFrame(() => {
-      updateVisibility()
-      rafId = null
-    })
-  }
-
-  return {
-    allNodes,
-    handleTransformUpdate,
-    updateVisibility
-  }
+  return { handleTransformUpdate }
 }
+
+export const useViewportCulling = createSharedComposable(
+  useViewportCullingIndividual
+)
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index 54296b900a..84e095b5fc 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -1,20 +1,12 @@
-/**
- * Vue Node Lifecycle Management Composable
- *
- * Handles the complete lifecycle of Vue node rendering system including:
- * - Node manager initialization and cleanup
- * - Layout store synchronization
- * - Slot and link sync management
- * - Reactive state management for node data, positions, and sizes
- * - Memory management and proper cleanup
- */
-import { type Ref, computed, readonly, ref, shallowRef, watch } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+import { readonly, ref, shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type {
-  NodeState,
+  GraphNodeManager,
   VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
@@ -24,13 +16,12 @@ import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync
 import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
 import { app as comfyApp } from '@/scripts/app'
 
-export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
+function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
   const layoutMutations = useLayoutMutations()
+  const { shouldRenderVueNodes } = useVueFeatureFlags()
 
-  const nodeManager = shallowRef<ReturnType<typeof useGraphNodeManager> | null>(
-    null
-  )
+  const nodeManager = shallowRef<GraphNodeManager | null>(null)
   const cleanupNodeManager = shallowRef<(() => void) | null>(null)
 
   // Sync management
@@ -40,39 +31,25 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
 
   // Vue node data state
   const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
-  const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
-  const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
-    new Map()
-  )
-  const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
-    new Map()
-  )
-
-  // Change detection function
-  const detectChangesInRAF = ref<() => void>(() => {})
 
   // Trigger for forcing computed re-evaluation
   const nodeDataTrigger = ref(0)
 
-  const isNodeManagerReady = computed(() => nodeManager.value !== null)
-
   const initializeNodeManager = () => {
-    if (!comfyApp.graph || nodeManager.value) return
+    // Use canvas graph if available (handles subgraph contexts), fallback to app graph
+    const activeGraph = comfyApp.canvas?.graph || comfyApp.graph
+    if (!activeGraph || nodeManager.value) return
 
     // Initialize the core node manager
-    const manager = useGraphNodeManager(comfyApp.graph)
+    const manager = useGraphNodeManager(activeGraph)
     nodeManager.value = manager
     cleanupNodeManager.value = manager.cleanup
 
     // Use the manager's data maps
     vueNodeData.value = manager.vueNodeData
-    nodeState.value = manager.nodeState
-    nodePositions.value = manager.nodePositions
-    nodeSizes.value = manager.nodeSizes
-    detectChangesInRAF.value = manager.detectChangesInRAF
 
-    // Initialize layout system with existing nodes
-    const nodes = comfyApp.graph._nodes.map((node: LGraphNode) => ({
+    // Initialize layout system with existing nodes from active graph
+    const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
       id: node.id.toString(),
       pos: [node.pos[0], node.pos[1]] as [number, number],
       size: [node.size[0], node.size[1]] as [number, number]
@@ -80,7 +57,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
     layoutStore.initializeFromLiteGraph(nodes)
 
     // Seed reroutes into the Layout Store so hit-testing uses the new path
-    for (const reroute of comfyApp.graph.reroutes.values()) {
+    for (const reroute of activeGraph.reroutes.values()) {
       const [x, y] = reroute.pos
       const parent = reroute.parentId ?? undefined
       const linkIds = Array.from(reroute.linkIds)
@@ -88,7 +65,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
     }
 
     // Seed existing links into the Layout Store (topology only)
-    for (const link of comfyApp.graph._links.values()) {
+    for (const link of activeGraph._links.values()) {
       layoutMutations.createLink(
         link.id,
         link.origin_id,
@@ -132,17 +109,13 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
 
     // Reset reactive maps to clean state
     vueNodeData.value = new Map()
-    nodeState.value = new Map()
-    nodePositions.value = new Map()
-    nodeSizes.value = new Map()
-
-    // Reset change detection function
-    detectChangesInRAF.value = () => {}
   }
 
   // Watch for Vue nodes enabled state changes
   watch(
-    () => isVueNodesEnabled.value && Boolean(comfyApp.graph),
+    () =>
+      shouldRenderVueNodes.value &&
+      Boolean(comfyApp.canvas?.graph || comfyApp.graph),
     (enabled) => {
       if (enabled) {
         initializeNodeManager()
@@ -155,7 +128,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
 
   // Consolidated watch for slot layout sync management
   watch(
-    [() => canvasStore.canvas, () => isVueNodesEnabled.value],
+    [() => canvasStore.canvas, () => shouldRenderVueNodes.value],
     ([canvas, vueMode], [, oldVueMode]) => {
       const modeChanged = vueMode !== oldVueMode
 
@@ -187,7 +160,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
   // Handle case where Vue nodes are enabled but graph starts empty
   const setupEmptyGraphListener = () => {
     if (
-      isVueNodesEnabled.value &&
+      shouldRenderVueNodes.value &&
       comfyApp.graph &&
       !nodeManager.value &&
       comfyApp.graph._nodes.length === 0
@@ -198,7 +171,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
         comfyApp.graph.onNodeAdded = originalOnNodeAdded
 
         // Initialize node manager if needed
-        if (isVueNodesEnabled.value && !nodeManager.value) {
+        if (shouldRenderVueNodes.value && !nodeManager.value) {
           initializeNodeManager()
         }
 
@@ -229,13 +202,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
 
   return {
     vueNodeData,
-    nodeState,
-    nodePositions,
-    nodeSizes,
-    nodeDataTrigger: readonly(nodeDataTrigger),
     nodeManager: readonly(nodeManager),
-    detectChangesInRAF: readonly(detectChangesInRAF),
-    isNodeManagerReady,
 
     // Lifecycle methods
     initializeNodeManager,
@@ -244,3 +211,7 @@ export function useVueNodeLifecycle(isVueNodesEnabled: Ref<boolean>) {
     cleanup
   }
 }
+
+export const useVueNodeLifecycle = createSharedComposable(
+  useVueNodeLifecycleIndividual
+)
diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts
index 33f31ff8ac..41a06b851a 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -11,7 +11,8 @@ import {
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { adjustColor } from '@/utils/colorUtil'
diff --git a/src/composables/node/useNodeChatHistory.ts b/src/composables/node/useNodeChatHistory.ts
index a1fa3ad3aa..f299d22151 100644
--- a/src/composables/node/useNodeChatHistory.ts
+++ b/src/composables/node/useNodeChatHistory.ts
@@ -1,5 +1,5 @@
 import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useChatHistoryWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget'
 
 const CHAT_HISTORY_WIDGET_NAME = '$$node-chat-history'
diff --git a/src/composables/node/useNodeImage.ts b/src/composables/node/useNodeImage.ts
index 83600aec2f..ad0a041787 100644
--- a/src/composables/node/useNodeImage.ts
+++ b/src/composables/node/useNodeImage.ts
@@ -1,5 +1,5 @@
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index e85e6adb60..91f9574639 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -1548,6 +1548,71 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     ByteDanceImageReferenceNode: {
       displayPrice: byteDanceVideoPricingCalculator
+    },
+    WanTextToVideoApi: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'size'
+        ) as IComboWidget
+
+        if (!durationWidget || !resolutionWidget) return '$0.05-0.15/second'
+
+        const seconds = parseFloat(String(durationWidget.value))
+        const resolutionStr = String(resolutionWidget.value).toLowerCase()
+
+        const resKey = resolutionStr.includes('1080')
+          ? '1080p'
+          : resolutionStr.includes('720')
+            ? '720p'
+            : resolutionStr.includes('480')
+              ? '480p'
+              : resolutionStr.match(/^\s*(\d{3,4}p)/)?.[1] ?? ''
+
+        const pricePerSecond: Record<string, number> = {
+          '480p': 0.05,
+          '720p': 0.1,
+          '1080p': 0.15
+        }
+
+        const pps = pricePerSecond[resKey]
+        if (isNaN(seconds) || !pps) return '$0.05-0.15/second'
+
+        const cost = (pps * seconds).toFixed(2)
+        return `$${cost}/Run`
+      }
+    },
+    WanImageToVideoApi: {
+      displayPrice: (node: LGraphNode): string => {
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+        const resolutionWidget = node.widgets?.find(
+          (w) => w.name === 'resolution'
+        ) as IComboWidget
+
+        if (!durationWidget || !resolutionWidget) return '$0.05-0.15/second'
+
+        const seconds = parseFloat(String(durationWidget.value))
+        const resolution = String(resolutionWidget.value).trim().toLowerCase()
+
+        const pricePerSecond: Record<string, number> = {
+          '480p': 0.05,
+          '720p': 0.1,
+          '1080p': 0.15
+        }
+
+        const pps = pricePerSecond[resolution]
+        if (isNaN(seconds) || !pps) return '$0.05-0.15/second'
+
+        const cost = (pps * seconds).toFixed(2)
+        return `$${cost}/Run`
+      }
+    },
+    WanTextToImageApi: {
+      displayPrice: '$0.03/Run'
     }
   }
 
@@ -1647,7 +1712,9 @@ export const useNodePricing = () => {
       ByteDanceTextToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceImageToVideoNode: ['model', 'duration', 'resolution'],
       ByteDanceFirstLastFrameNode: ['model', 'duration', 'resolution'],
-      ByteDanceImageReferenceNode: ['model', 'duration', 'resolution']
+      ByteDanceImageReferenceNode: ['model', 'duration', 'resolution'],
+      WanTextToVideoApi: ['duration', 'size'],
+      WanImageToVideoApi: ['duration', 'resolution']
     }
     return widgetMap[nodeType] || []
   }
diff --git a/src/composables/node/useNodeProgressText.ts b/src/composables/node/useNodeProgressText.ts
index 07e7488eae..184258ba2c 100644
--- a/src/composables/node/useNodeProgressText.ts
+++ b/src/composables/node/useNodeProgressText.ts
@@ -1,4 +1,4 @@
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useTextPreviewWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useProgressTextWidget'
 
 const TEXT_PREVIEW_WIDGET_NAME = '$$node-text-preview'
diff --git a/src/composables/useCanvasDrop.ts b/src/composables/useCanvasDrop.ts
index cb09207d1a..76db7e5135 100644
--- a/src/composables/useCanvasDrop.ts
+++ b/src/composables/useCanvasDrop.ts
@@ -1,18 +1,18 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { usePragmaticDroppable } from '@/composables/usePragmaticDragAndDrop'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { app as comfyApp } from '@/scripts/app'
 import { useLitegraphService } from '@/services/litegraphService'
 import { ComfyModelDef } from '@/stores/modelStore'
-import { ModelNodeProvider } from '@/stores/modelToNodeStore'
+import type { ModelNodeProvider } from '@/stores/modelToNodeStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
   const modelToNodeStore = useModelToNodeStore()
diff --git a/src/composables/useConflictDetection.ts b/src/composables/useConflictDetection.ts
deleted file mode 100644
index abf4d94987..0000000000
--- a/src/composables/useConflictDetection.ts
+++ /dev/null
@@ -1,1372 +0,0 @@
-import { until } from '@vueuse/core'
-import { uniqBy } from 'es-toolkit/compat'
-import { computed, getCurrentInstance, onUnmounted, readonly, ref } from 'vue'
-
-import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
-import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import config from '@/config'
-import { useComfyManagerService } from '@/services/comfyManagerService'
-import { useComfyRegistryService } from '@/services/comfyRegistryService'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import type { SystemStats } from '@/types'
-import type { components } from '@/types/comfyRegistryTypes'
-import type {
-  ConflictDetail,
-  ConflictDetectionResponse,
-  ConflictDetectionResult,
-  ConflictDetectionSummary,
-  ConflictType,
-  Node,
-  NodePackRequirements,
-  SystemEnvironment
-} from '@/types/conflictDetectionTypes'
-import { normalizePackId } from '@/utils/packUtils'
-import {
-  cleanVersion,
-  satisfiesVersion,
-  utilCheckVersionCompatibility
-} from '@/utils/versionUtil'
-
-/**
- * Composable for conflict detection system.
- * Error-resilient and asynchronous to avoid affecting other components.
- */
-export function useConflictDetection() {
-  const managerStore = useComfyManagerStore()
-
-  const {
-    startFetchInstalled,
-    installedPacks,
-    installedPacksWithVersions,
-    isReady: installedPacksReady
-  } = useInstalledPacks()
-
-  const isDetecting = ref(false)
-  const lastDetectionTime = ref<string | null>(null)
-  const detectionError = ref<string | null>(null)
-
-  const systemEnvironment = ref<SystemEnvironment | null>(null)
-
-  const detectionResults = ref<ConflictDetectionResult[]>([])
-  // Store merged conflicts separately for testing
-  const storedMergedConflicts = ref<ConflictDetectionResult[]>([])
-  const detectionSummary = ref<ConflictDetectionSummary | null>(null)
-
-  // Registry API request cancellation
-  const abortController = ref<AbortController | null>(null)
-
-  const acknowledgment = useConflictAcknowledgment()
-
-  const conflictStore = useConflictDetectionStore()
-
-  const hasConflicts = computed(() => conflictStore.hasConflicts)
-  const conflictedPackages = computed(() => {
-    return conflictStore.conflictedPackages
-  })
-
-  const bannedPackages = computed(() => conflictStore.bannedPackages)
-  const securityPendingPackages = computed(
-    () => conflictStore.securityPendingPackages
-  )
-
-  /**
-   * Collects current system environment information.
-   * Continues with default values even if errors occur.
-   * @returns Promise that resolves to system environment information
-   */
-  async function detectSystemEnvironment(): Promise<SystemEnvironment> {
-    try {
-      // Get system stats from store (primary source of system information)
-      const systemStatsStore = useSystemStatsStore()
-      // Wait for systemStats to be initialized if not already
-      await until(systemStatsStore.isInitialized)
-
-      // Fetch version information from backend (with error resilience)
-      const [frontendVersion] = await Promise.allSettled([
-        fetchFrontendVersion()
-      ])
-
-      // Extract system information from system stats
-      const systemStats = systemStatsStore.systemStats
-      const comfyuiVersion = systemStats?.system?.comfyui_version || 'unknown'
-
-      // Use system stats for OS detection (more accurate than browser detection)
-      const systemOS = systemStats?.system?.os || 'unknown'
-
-      // Extract architecture from system stats device information
-      const architecture = extractArchitectureFromSystemStats(systemStats)
-
-      // Detect GPU/accelerator information from system stats
-      const acceleratorInfo = extractAcceleratorInfo(systemStats)
-
-      // Enhanced OS detection using multiple sources
-      const detectedOS = detectOSFromSystemStats(systemOS, systemStats)
-
-      const environment: SystemEnvironment = {
-        // Version information (use 'unknown' on failure)
-        comfyui_version: comfyuiVersion,
-        frontend_version:
-          frontendVersion.status === 'fulfilled'
-            ? frontendVersion.value
-            : 'unknown',
-
-        // Platform information (from system stats)
-        os: detectedOS,
-        platform_details: systemOS,
-        architecture: architecture,
-
-        // GPU/accelerator information
-        available_accelerators: acceleratorInfo.available,
-        primary_accelerator: acceleratorInfo.primary,
-        gpu_memory_mb: acceleratorInfo.memory_mb,
-
-        // Runtime information
-        node_env: import.meta.env.MODE as 'development' | 'production',
-        user_agent: navigator.userAgent
-      }
-
-      systemEnvironment.value = environment
-      console.debug(
-        '[ConflictDetection] System environment detection completed:',
-        environment
-      )
-      return environment
-    } catch (error) {
-      console.warn(
-        '[ConflictDetection] Error during system environment detection:',
-        error
-      )
-
-      // Try to get frontend version even in fallback mode
-      let frontendVersion = 'unknown'
-      try {
-        frontendVersion = await fetchFrontendVersion()
-      } catch {
-        frontendVersion = 'unknown'
-      }
-
-      // Provide basic environment information even on error
-      const fallbackEnvironment: SystemEnvironment = {
-        comfyui_version: 'unknown',
-        frontend_version: frontendVersion,
-        os: detectOSFromSystemStats(navigator.platform),
-        platform_details: navigator.platform,
-        architecture: getArchitecture(),
-        available_accelerators: ['CPU'],
-        primary_accelerator: 'CPU',
-        node_env: import.meta.env.MODE as 'development' | 'production',
-        user_agent: navigator.userAgent
-      }
-
-      systemEnvironment.value = fallbackEnvironment
-      return fallbackEnvironment
-    }
-  }
-
-  /**
-   * Fetches requirement information for installed packages using Registry Store.
-   *
-   * This function combines local installation data with Registry API compatibility metadata
-   * using the established store layer pattern with caching and batch requests.
-   *
-   * Process
-   * 1. Get locally installed packages
-   * 2. Batch fetch Registry data using store layer
-   * 3. Combine local + Registry data
-   * 4. Extract compatibility requirements
-   *
-   * @returns Promise that resolves to array of node pack requirements
-   */
-  async function fetchPackageRequirements(): Promise<NodePackRequirements[]> {
-    try {
-      // Step 1: Use installed packs composable instead of direct API calls
-      await startFetchInstalled() // Ensure data is loaded
-
-      if (
-        !installedPacksReady.value ||
-        !installedPacks.value ||
-        installedPacks.value.length === 0
-      ) {
-        console.warn(
-          '[ConflictDetection] No installed packages available from useInstalledPacks'
-        )
-        return []
-      }
-
-      // Step 2: Get Registry service for bulk API calls
-      const registryService = useComfyRegistryService()
-
-      // Step 3: Setup abort controller for request cancellation
-      abortController.value = new AbortController()
-
-      // Step 4: Use bulk API to fetch all version data in a single request
-      const versionDataMap = new Map<
-        string,
-        components['schemas']['NodeVersion']
-      >()
-
-      // Prepare bulk request with actual installed versions from Manager API
-      const nodeVersions = installedPacksWithVersions.value.map((pack) => ({
-        node_id: pack.id,
-        version: pack.version
-      }))
-
-      if (nodeVersions.length > 0) {
-        try {
-          const bulkResponse = await registryService.getBulkNodeVersions(
-            nodeVersions,
-            abortController.value?.signal
-          )
-
-          if (bulkResponse && bulkResponse.node_versions) {
-            // Process bulk response
-            bulkResponse.node_versions.forEach((result) => {
-              if (result.status === 'success' && result.node_version) {
-                versionDataMap.set(
-                  result.identifier.node_id,
-                  result.node_version
-                )
-              } else if (result.status === 'error') {
-                console.warn(
-                  `[ConflictDetection] Failed to fetch version data for ${result.identifier.node_id}@${result.identifier.version}:`,
-                  result.error_message
-                )
-              }
-            })
-          }
-        } catch (error) {
-          console.warn(
-            '[ConflictDetection] Failed to fetch bulk version data:',
-            error
-          )
-        }
-      }
-
-      // Step 5: Combine local installation data with Registry version data
-      const requirements: NodePackRequirements[] = []
-
-      // IMPORTANT: Use installedPacksWithVersions to check ALL installed packages
-      // not just the ones that exist in Registry (installedPacks)
-      for (const installedPack of installedPacksWithVersions.value) {
-        const packageId = installedPack.id
-        const versionData = versionDataMap.get(packageId)
-        const installedVersion = installedPack.version || 'unknown'
-
-        // Check if package is enabled using store method
-        const isEnabled = managerStore.isPackEnabled(packageId)
-
-        // Find the pack info from Registry if available
-        const packInfo = installedPacks.value.find((p) => p.id === packageId)
-
-        if (versionData) {
-          // Combine local installation data with version-specific Registry data
-          const requirement: NodePackRequirements = {
-            // Basic package info
-            id: packageId,
-            name: packInfo?.name || packageId,
-            installed_version: installedVersion,
-            is_enabled: isEnabled,
-
-            // Version-specific compatibility data
-            supported_comfyui_version: versionData.supported_comfyui_version,
-            supported_comfyui_frontend_version:
-              versionData.supported_comfyui_frontend_version,
-            supported_os: normalizeOSValues(versionData.supported_os),
-            supported_accelerators: versionData.supported_accelerators,
-
-            // Status information
-            version_status: versionData.status,
-            is_banned: versionData.status === 'NodeVersionStatusBanned',
-            is_pending: versionData.status === 'NodeVersionStatusPending'
-          }
-
-          requirements.push(requirement)
-        } else {
-          console.warn(
-            `[ConflictDetection] No Registry data found for ${packageId}, using fallback`
-          )
-
-          // Create fallback requirement without Registry data
-          const fallbackRequirement: NodePackRequirements = {
-            id: packageId,
-            name: packInfo?.name || packageId,
-            installed_version: installedVersion,
-            is_enabled: isEnabled,
-            is_banned: false,
-            is_pending: false
-          }
-
-          requirements.push(fallbackRequirement)
-        }
-      }
-
-      return requirements
-    } catch (error) {
-      console.warn(
-        '[ConflictDetection] Failed to fetch package requirements:',
-        error
-      )
-      return []
-    }
-  }
-
-  /**
-   * Detects conflicts for an individual package using Registry API data.
-   *
-   * @param packageReq Package requirements from Registry
-   * @param sysEnv Current system environment
-   * @returns Conflict detection result for the package
-   */
-  function detectPackageConflicts(
-    packageReq: NodePackRequirements,
-    sysEnv: SystemEnvironment
-  ): ConflictDetectionResult {
-    const conflicts: ConflictDetail[] = []
-
-    // Helper function to check if a value indicates "compatible with all"
-    const isCompatibleWithAll = (value: any): boolean => {
-      if (value === null || value === undefined) return true
-      if (typeof value === 'string' && value.trim() === '') return true
-      if (Array.isArray(value) && value.length === 0) return true
-      return false
-    }
-
-    // 1. ComfyUI version conflict check
-    if (!isCompatibleWithAll(packageReq.supported_comfyui_version)) {
-      const versionConflict = checkVersionConflict(
-        'comfyui_version',
-        sysEnv.comfyui_version,
-        packageReq.supported_comfyui_version!
-      )
-      if (versionConflict) conflicts.push(versionConflict)
-    }
-
-    // 2. Frontend version conflict check
-    if (!isCompatibleWithAll(packageReq.supported_comfyui_frontend_version)) {
-      const versionConflict = checkVersionConflict(
-        'frontend_version',
-        sysEnv.frontend_version,
-        packageReq.supported_comfyui_frontend_version!
-      )
-      if (versionConflict) conflicts.push(versionConflict)
-    }
-
-    // 3. OS compatibility check
-    if (!isCompatibleWithAll(packageReq.supported_os)) {
-      const osConflict = checkOSConflict(packageReq.supported_os!, sysEnv.os)
-      if (osConflict) conflicts.push(osConflict)
-    }
-
-    // 4. Accelerator compatibility check
-    if (!isCompatibleWithAll(packageReq.supported_accelerators)) {
-      const acceleratorConflict = checkAcceleratorConflict(
-        packageReq.supported_accelerators!,
-        sysEnv.available_accelerators
-      )
-      if (acceleratorConflict) conflicts.push(acceleratorConflict)
-    }
-
-    // 5. Banned package check using shared logic
-    const bannedConflict = checkBannedStatus(packageReq.is_banned)
-    if (bannedConflict) {
-      conflicts.push(bannedConflict)
-    }
-
-    // 6. Registry data availability check using shared logic
-    const pendingConflict = checkPendingStatus(packageReq.is_pending)
-    if (pendingConflict) {
-      conflicts.push(pendingConflict)
-    }
-
-    // Generate result
-    const hasConflict = conflicts.length > 0
-
-    return {
-      package_id: packageReq.id ?? '',
-      package_name: packageReq.name ?? '',
-      has_conflict: hasConflict,
-      conflicts,
-      is_compatible: !hasConflict
-    }
-  }
-
-  /**
-   * Fetches Python import failure information from ComfyUI Manager.
-   * Gets installed packages and checks each one for import failures using bulk API.
-   * @returns Promise that resolves to import failure data
-   */
-  async function fetchImportFailInfo(): Promise<Record<string, any>> {
-    try {
-      const comfyManagerService = useComfyManagerService()
-
-      // Use installedPacksWithVersions to match what versions bulk API uses
-      // This ensures both APIs check the same set of packages
-      if (
-        !installedPacksWithVersions.value ||
-        installedPacksWithVersions.value.length === 0
-      ) {
-        console.warn(
-          '[ConflictDetection] No installed packages available for import failure check'
-        )
-        return {}
-      }
-
-      const packageIds = installedPacksWithVersions.value.map((pack) => pack.id)
-
-      // Use bulk API to get import failure info for all packages at once
-      const bulkResult = await comfyManagerService.getImportFailInfoBulk(
-        { cnr_ids: packageIds },
-        abortController.value?.signal
-      )
-
-      if (bulkResult) {
-        // Filter out null values (packages without import failures)
-        const importFailures: Record<string, any> = {}
-
-        Object.entries(bulkResult).forEach(([packageId, failInfo]) => {
-          if (failInfo !== null) {
-            importFailures[packageId] = failInfo
-            console.debug(
-              `[ConflictDetection] Import failure found for ${packageId}:`,
-              failInfo
-            )
-          }
-        })
-
-        return importFailures
-      }
-
-      return {}
-    } catch (error) {
-      console.warn(
-        '[ConflictDetection] Failed to fetch import failure information:',
-        error
-      )
-      return {}
-    }
-  }
-
-  /**
-   * Detects runtime conflicts from Python import failures.
-   * @param importFailInfo Import failure data from Manager API
-   * @returns Array of conflict detection results for failed imports
-   */
-  function detectImportFailConflicts(
-    importFailInfo: Record<string, { msg: string; name: string; path: string }>
-  ): ConflictDetectionResult[] {
-    const results: ConflictDetectionResult[] = []
-    if (!importFailInfo || typeof importFailInfo !== 'object') {
-      return results
-    }
-
-    // Process import failures
-    for (const [packageId, failureInfo] of Object.entries(importFailInfo)) {
-      if (failureInfo && typeof failureInfo === 'object') {
-        // Extract error information from Manager API response
-        const errorMsg = failureInfo.msg || 'Unknown import error'
-        const modulePath = failureInfo.path || ''
-
-        results.push({
-          package_id: packageId,
-          package_name: packageId,
-          has_conflict: true,
-          conflicts: [
-            {
-              type: 'import_failed',
-              current_value: 'installed',
-              required_value: failureInfo.msg
-            }
-          ],
-          is_compatible: false
-        })
-
-        console.warn(
-          `[ConflictDetection] Python import failure detected for ${packageId}:`,
-          {
-            path: modulePath,
-            error: errorMsg
-          }
-        )
-      }
-    }
-
-    return results
-  }
-
-  /**
-   * Performs complete conflict detection.
-   * @returns Promise that resolves to conflict detection response
-   */
-  async function performConflictDetection(): Promise<ConflictDetectionResponse> {
-    if (isDetecting.value) {
-      console.debug('[ConflictDetection] Already detecting, skipping')
-      return {
-        success: false,
-        error_message: 'Already detecting conflicts',
-        summary: detectionSummary.value!,
-        results: detectionResults.value
-      }
-    }
-
-    isDetecting.value = true
-    detectionError.value = null
-    const startTime = Date.now()
-
-    try {
-      // 1. Collect system environment information
-      const sysEnv = await detectSystemEnvironment()
-
-      // 2. Collect package requirement information
-      const packageRequirements = await fetchPackageRequirements()
-
-      // 3. Detect conflicts for each package (parallel processing)
-      const conflictDetectionTasks = packageRequirements.map(
-        async (packageReq) => {
-          try {
-            return detectPackageConflicts(packageReq, sysEnv)
-          } catch (error) {
-            console.warn(
-              `[ConflictDetection] Failed to detect conflicts for package ${packageReq.name}:`,
-              error
-            )
-            // Return null for failed packages, will be filtered out
-            return null
-          }
-        }
-      )
-
-      const conflictResults = await Promise.allSettled(conflictDetectionTasks)
-      const packageResults: ConflictDetectionResult[] = conflictResults
-        .map((result) => (result.status === 'fulfilled' ? result.value : null))
-        .filter((result): result is ConflictDetectionResult => result !== null)
-
-      // 4. Detect Python import failures
-      const importFailInfo = await fetchImportFailInfo()
-      const importFailResults = detectImportFailConflicts(importFailInfo)
-
-      // 5. Combine all results
-      const allResults = [...packageResults, ...importFailResults]
-
-      // 6. Generate summary information
-      const summary = generateSummary(allResults, Date.now() - startTime)
-
-      // 7. Update state
-      detectionResults.value = allResults
-      detectionSummary.value = summary
-      lastDetectionTime.value = new Date().toISOString()
-
-      console.debug(
-        '[ConflictDetection] Conflict detection completed:',
-        summary
-      )
-
-      // Store conflict results for later UI display
-      // Dialog will be shown based on specific events, not on app mount
-      if (allResults.some((result) => result.has_conflict)) {
-        const conflictedResults = allResults.filter(
-          (result) => result.has_conflict
-        )
-
-        // Merge conflicts for packages with the same name
-        const mergedConflicts = mergeConflictsByPackageName(conflictedResults)
-
-        console.debug(
-          '[ConflictDetection] Conflicts detected (stored for UI):',
-          mergedConflicts
-        )
-
-        // Store merged conflicts in Pinia store for UI usage
-        conflictStore.setConflictedPackages(mergedConflicts)
-
-        // Also update local state for backward compatibility
-        detectionResults.value.splice(
-          0,
-          detectionResults.value.length,
-          ...mergedConflicts
-        )
-        storedMergedConflicts.value = [...mergedConflicts]
-
-        // Use merged conflicts in response as well
-        const response: ConflictDetectionResponse = {
-          success: true,
-          summary,
-          results: mergedConflicts,
-          detected_system_environment: sysEnv
-        }
-        return response
-      } else {
-        // No conflicts detected, clear the results
-        conflictStore.clearConflicts()
-        detectionResults.value = []
-      }
-
-      const response: ConflictDetectionResponse = {
-        success: true,
-        summary,
-        results: allResults,
-        detected_system_environment: sysEnv
-      }
-
-      return response
-    } catch (error) {
-      console.error(
-        '[ConflictDetection] Error during conflict detection:',
-        error
-      )
-      detectionError.value =
-        error instanceof Error ? error.message : String(error)
-
-      return {
-        success: false,
-        error_message: detectionError.value,
-        summary: detectionSummary.value || getEmptySummary(),
-        results: []
-      }
-    } finally {
-      isDetecting.value = false
-      // Clear abort controller to prevent memory leaks
-      if (abortController.value) {
-        abortController.value = null
-      }
-    }
-  }
-
-  /**
-   * Error-resilient initialization (called on app mount).
-   * Async function that doesn't block UI setup.
-   * Ensures proper order: system_stats -> manager state -> installed -> versions bulk -> import_fail_info_bulk
-   */
-  async function initializeConflictDetection(): Promise<void> {
-    try {
-      // Check if manager is new Manager before proceeding
-      const { useManagerState } = await import('@/composables/useManagerState')
-      const managerState = useManagerState()
-
-      if (!managerState.isNewManagerUI.value) {
-        console.debug(
-          '[ConflictDetection] Manager is not new Manager, skipping conflict detection'
-        )
-        return
-      }
-
-      // Manager is new Manager, perform conflict detection
-      // The useInstalledPacks will handle fetching installed list if needed
-      await performConflictDetection()
-    } catch (error) {
-      console.warn(
-        '[ConflictDetection] Error during initialization (ignored):',
-        error
-      )
-      // Errors do not affect other parts of the app
-    }
-  }
-
-  // Cleanup function for request cancellation
-  function cancelRequests(): void {
-    if (abortController.value) {
-      abortController.value.abort()
-      abortController.value = null
-    }
-  }
-
-  // Auto-cleanup on component unmount
-  // Only register lifecycle hooks if we're in a Vue component context
-  const instance = getCurrentInstance()
-  if (instance) {
-    onUnmounted(() => {
-      cancelRequests()
-    })
-  }
-
-  // Helper functions (implementations at the bottom of the file)
-
-  /**
-   * Check if conflicts should trigger modal display after "What's New" dismissal
-   */
-  async function shouldShowConflictModalAfterUpdate(): Promise<boolean> {
-    console.debug(
-      '[ConflictDetection] Checking if conflict modal should show after update...'
-    )
-
-    // Ensure conflict detection has run
-    if (detectionResults.value.length === 0) {
-      console.debug(
-        '[ConflictDetection] No detection results, running conflict detection...'
-      )
-      await performConflictDetection()
-    }
-
-    // Check if this is a version update scenario
-    // In a real scenario, this would check actual version change
-    // For now, we'll assume it's an update if we have conflicts and modal hasn't been dismissed
-    const hasActualConflicts = hasConflicts.value
-    const canShowModal = acknowledgment.shouldShowConflictModal.value
-
-    console.debug('[ConflictDetection] Modal check:', {
-      hasConflicts: hasActualConflicts,
-      canShowModal: canShowModal,
-      conflictedPackagesCount: conflictedPackages.value.length
-    })
-
-    return hasActualConflicts && canShowModal
-  }
-
-  /**
-   * Check compatibility for a node.
-   * Used by components like PackVersionSelectorPopover.
-   */
-  function checkNodeCompatibility(
-    node: Node | components['schemas']['NodeVersion']
-  ) {
-    const systemStatsStore = useSystemStatsStore()
-    const systemStats = systemStatsStore.systemStats
-    if (!systemStats) return { hasConflict: false, conflicts: [] }
-
-    const conflicts: ConflictDetail[] = []
-
-    // Check OS compatibility using centralized function
-    // First try latest_version (most accurate), then fallback to top level
-    const supportedOS =
-      ('latest_version' in node ? node.latest_version?.supported_os : null) ||
-      node.supported_os
-
-    if (supportedOS && supportedOS.length > 0) {
-      const currentOS = systemStats.system?.os || 'unknown'
-      const osConflict = checkOSConflict(supportedOS, currentOS)
-      if (osConflict) {
-        conflicts.push(osConflict)
-      }
-    }
-
-    // Check accelerator compatibility using centralized function
-    // First try latest_version (most accurate), then fallback to top level
-    const supportedAccelerators =
-      ('latest_version' in node
-        ? node.latest_version?.supported_accelerators
-        : null) || node.supported_accelerators
-
-    if (supportedAccelerators && supportedAccelerators.length > 0) {
-      // Extract available accelerators from system stats
-      const acceleratorInfo = extractAcceleratorInfo(systemStats)
-      const availableAccelerators: Node['supported_accelerators'] = []
-
-      acceleratorInfo.available?.forEach((accel) => {
-        if (accel === 'CUDA') availableAccelerators.push('CUDA')
-        if (accel === 'Metal') availableAccelerators.push('Metal')
-        if (accel === 'CPU') availableAccelerators.push('CPU')
-      })
-
-      const acceleratorConflict = checkAcceleratorConflict(
-        supportedAccelerators,
-        availableAccelerators
-      )
-      if (acceleratorConflict) {
-        conflicts.push(acceleratorConflict)
-      }
-    }
-
-    // Check ComfyUI version compatibility
-    // First try latest_version (most accurate), then fallback to top level
-    const comfyuiVersionRequirement =
-      ('latest_version' in node
-        ? node.latest_version?.supported_comfyui_version
-        : null) || node.supported_comfyui_version
-
-    if (comfyuiVersionRequirement) {
-      const currentComfyUIVersion = systemStats.system?.comfyui_version
-      if (currentComfyUIVersion && currentComfyUIVersion !== 'unknown') {
-        const versionConflict = utilCheckVersionCompatibility(
-          'comfyui_version',
-          currentComfyUIVersion,
-          comfyuiVersionRequirement
-        )
-        if (versionConflict) {
-          conflicts.push(versionConflict)
-        }
-      }
-    }
-
-    // Check ComfyUI Frontend version compatibility
-    // First try latest_version (most accurate), then fallback to top level
-    const frontendVersionRequirement =
-      ('latest_version' in node
-        ? node.latest_version?.supported_comfyui_frontend_version
-        : null) || node.supported_comfyui_frontend_version
-
-    if (frontendVersionRequirement) {
-      const currentFrontendVersion = config.app_version
-      if (currentFrontendVersion && currentFrontendVersion !== 'unknown') {
-        const versionConflict = utilCheckVersionCompatibility(
-          'frontend_version',
-          currentFrontendVersion,
-          frontendVersionRequirement
-        )
-        if (versionConflict) {
-          conflicts.push(versionConflict)
-        }
-      }
-    }
-
-    // Check banned package status using shared logic
-    const bannedConflict = checkBannedStatus(
-      node.status === 'NodeStatusBanned' ||
-        node.status === 'NodeVersionStatusBanned'
-    )
-    if (bannedConflict) {
-      conflicts.push(bannedConflict)
-    }
-
-    // Check pending status using shared logic
-    const pendingConflict = checkPendingStatus(
-      node.status === 'NodeVersionStatusPending'
-    )
-    if (pendingConflict) {
-      conflicts.push(pendingConflict)
-    }
-
-    return {
-      hasConflict: conflicts.length > 0,
-      conflicts
-    }
-  }
-
-  return {
-    // State
-    isDetecting: readonly(isDetecting),
-    lastDetectionTime: readonly(lastDetectionTime),
-    detectionError: readonly(detectionError),
-    systemEnvironment: readonly(systemEnvironment),
-    detectionResults: readonly(detectionResults),
-    detectionSummary: readonly(detectionSummary),
-
-    // Computed
-    hasConflicts,
-    conflictedPackages,
-    bannedPackages,
-    securityPendingPackages,
-
-    // Methods
-    performConflictDetection,
-    detectSystemEnvironment,
-    initializeConflictDetection,
-    cancelRequests,
-    shouldShowConflictModalAfterUpdate,
-
-    // Helper functions for other components
-    checkNodeCompatibility
-  }
-}
-
-// Helper Functions Implementation
-
-/**
- * Merges conflict results for packages with the same name.
- * Combines all conflicts from different detection sources (registry, python, extension)
- * into a single result per package name.
- * @param conflicts Array of conflict detection results
- * @returns Array of merged conflict detection results
- */
-function mergeConflictsByPackageName(
-  conflicts: ConflictDetectionResult[]
-): ConflictDetectionResult[] {
-  const mergedMap = new Map<string, ConflictDetectionResult>()
-
-  conflicts.forEach((conflict) => {
-    // Normalize package name by removing version suffix (@1_0_3) for consistent merging
-    const normalizedPackageName = normalizePackId(conflict.package_name)
-
-    if (mergedMap.has(normalizedPackageName)) {
-      // Package already exists, merge conflicts
-      const existing = mergedMap.get(normalizedPackageName)!
-
-      // Combine all conflicts, avoiding duplicates using es-toolkit uniqBy for O(n) performance
-      const allConflicts = [...existing.conflicts, ...conflict.conflicts]
-      const uniqueConflicts = uniqBy(
-        allConflicts,
-        (conflict) =>
-          `${conflict.type}|${conflict.current_value}|${conflict.required_value}`
-      )
-
-      // Update the existing entry with normalized package name
-      mergedMap.set(normalizedPackageName, {
-        ...existing,
-        package_name: normalizedPackageName,
-        conflicts: uniqueConflicts,
-        has_conflict: uniqueConflicts.length > 0,
-        is_compatible: uniqueConflicts.length === 0
-      })
-    } else {
-      // New package, add with normalized package name
-      mergedMap.set(normalizedPackageName, {
-        ...conflict,
-        package_name: normalizedPackageName
-      })
-    }
-  })
-
-  return Array.from(mergedMap.values())
-}
-
-/**
- * Fetches frontend version from config.
- * @returns Promise that resolves to frontend version string
- */
-async function fetchFrontendVersion(): Promise<string> {
-  try {
-    // Get frontend version from vite build-time constant or fallback to config
-    return config.app_version || import.meta.env.VITE_APP_VERSION || 'unknown'
-  } catch {
-    return 'unknown'
-  }
-}
-
-/**
- * Detects system architecture from user agent.
- * Note: Browser architecture detection has limitations and may not be 100% accurate.
- * @returns Architecture string
- */
-function getArchitecture(): string {
-  const ua = navigator.userAgent.toLowerCase()
-  if (ua.includes('arm64') || ua.includes('aarch64')) return 'arm64'
-  if (ua.includes('arm')) return 'arm'
-  if (ua.includes('x86_64') || ua.includes('x64')) return 'x64'
-  if (ua.includes('x86')) return 'x86'
-  return 'unknown'
-}
-
-/**
- * Normalizes OS values from Registry API to match our SupportedOS type.
- * Registry Admin guide specifies: Windows, macOS, Linux
- * @param osValues OS values from Registry API
- * @returns Normalized OS values
- */
-function normalizeOSValues(
-  osValues: string[] | undefined
-): Node['supported_os'] {
-  if (!osValues || osValues.length === 0) {
-    return []
-  }
-
-  return osValues.map((os) => {
-    // Map to standard Registry values (case-sensitive)
-    if (os === 'Windows' || os.toLowerCase().includes('win')) {
-      return 'Windows'
-    }
-    if (os === 'macOS' || os.toLowerCase().includes('mac') || os === 'darwin') {
-      return 'macOS'
-    }
-    if (os === 'Linux' || os.toLowerCase().includes('linux')) {
-      return 'Linux'
-    }
-    if (os.toLowerCase() === 'any') {
-      return 'any'
-    }
-
-    // Return as-is if it matches standard format
-    return os
-  })
-}
-
-/**
- * Detects operating system from system stats OS string and additional system information.
- * @param systemOS OS string from system stats API
- * @param systemStats Full system stats object for additional context
- * @returns Operating system type
- */
-function detectOSFromSystemStats(
-  systemOS: string,
-  systemStats?: SystemStats | null
-): string {
-  const os = systemOS.toLowerCase()
-
-  // Handle specific OS strings (return Registry standard format)
-  if (os.includes('darwin') || os.includes('mac')) return 'macOS'
-  if (os.includes('linux')) return 'Linux'
-  if (os.includes('win') || os === 'nt') return 'Windows'
-
-  // Handle Python's os.name values
-  if (os === 'posix') {
-    // posix could be macOS or Linux, need additional detection
-
-    // Method 1: Check for MPS device (Metal Performance Shaders = macOS)
-    if (systemStats?.devices) {
-      const hasMpsDevice = systemStats.devices.some(
-        (device) => device.type === 'mps'
-      )
-      if (hasMpsDevice) {
-        return 'macOS' // Registry standard format
-      }
-    }
-
-    // Method 2: Check user agent as fallback
-    const userAgent = navigator.userAgent.toLowerCase()
-    if (userAgent.includes('mac')) return 'macOS'
-    if (userAgent.includes('linux')) return 'Linux'
-
-    // Default to 'any' if we can't determine
-    return 'any'
-  }
-
-  return 'any'
-}
-
-/**
- * Extracts architecture information from system stats.
- * @param systemStats System stats data from API
- * @returns Architecture string
- */
-function extractArchitectureFromSystemStats(
-  systemStats: SystemStats | null
-): string {
-  try {
-    if (systemStats?.devices && systemStats.devices.length > 0) {
-      // Check if we have MPS device (indicates Apple Silicon)
-      const hasMpsDevice = systemStats.devices.some(
-        (device) => device.type === 'mps'
-      )
-
-      if (hasMpsDevice) {
-        // MPS is only available on Apple Silicon Macs
-        return 'arm64'
-      }
-
-      // Check device names for architecture hints (fallback)
-      for (const device of systemStats.devices) {
-        if (!device?.name || typeof device.name !== 'string') {
-          continue
-        }
-
-        const deviceName = device.name.toLowerCase()
-
-        // Apple Silicon detection
-        if (
-          deviceName.includes('apple m1') ||
-          deviceName.includes('apple m2') ||
-          deviceName.includes('apple m3') ||
-          deviceName.includes('apple m4')
-        ) {
-          return 'arm64'
-        }
-
-        // Intel/AMD detection
-        if (
-          deviceName.includes('intel') ||
-          deviceName.includes('amd') ||
-          deviceName.includes('nvidia') ||
-          deviceName.includes('geforce') ||
-          deviceName.includes('radeon')
-        ) {
-          return 'x64'
-        }
-      }
-    }
-
-    // Fallback to basic User-Agent detection if system stats don't provide clear info
-    return getArchitecture()
-  } catch (error) {
-    console.warn(
-      '[ConflictDetection] Failed to extract architecture from system stats:',
-      error
-    )
-    return getArchitecture()
-  }
-}
-
-/**
- * Extracts accelerator information from system stats.
- * @param systemStats System stats data from store
- * @returns Accelerator information object
- */
-function extractAcceleratorInfo(systemStats: SystemStats | null): {
-  available: Node['supported_accelerators']
-  primary: string
-  memory_mb?: number
-} {
-  try {
-    if (systemStats?.devices && systemStats.devices.length > 0) {
-      const accelerators = new Set<string>()
-      let primaryDevice: string = 'CPU'
-      let totalMemory = 0
-      let maxDevicePriority = 0
-
-      // Device type priority (higher = better)
-      const getDevicePriority = (type: string): number => {
-        switch (type.toLowerCase()) {
-          case 'cuda':
-            return 5
-          case 'mps':
-            return 4
-          case 'rocm':
-            return 3
-          case 'xpu':
-            return 2 // Intel GPU
-          case 'npu':
-            return 1 // Neural Processing Unit
-          case 'mlu':
-            return 1 // Cambricon MLU
-          case 'cpu':
-            return 0
-          default:
-            return 0
-        }
-      }
-
-      // Process all devices
-      for (const device of systemStats.devices) {
-        const deviceType = device.type.toLowerCase()
-        const priority = getDevicePriority(deviceType)
-
-        // Map device type to SupportedAccelerator (Registry standard format)
-        let acceleratorType: string = 'CPU'
-        if (deviceType === 'cuda') {
-          acceleratorType = 'CUDA'
-        } else if (deviceType === 'mps') {
-          acceleratorType = 'Metal' // MPS = Metal Performance Shaders
-        } else if (deviceType === 'rocm') {
-          acceleratorType = 'ROCm'
-        }
-
-        accelerators.add(acceleratorType)
-
-        // Update primary device if this one has higher priority
-        if (priority > maxDevicePriority) {
-          primaryDevice = acceleratorType
-          maxDevicePriority = priority
-        }
-
-        // Accumulate memory from all devices
-        if (device.vram_total) {
-          totalMemory += device.vram_total
-        }
-      }
-
-      accelerators.add('CPU') // CPU is always available
-
-      return {
-        available: Array.from(accelerators),
-        primary: primaryDevice,
-        memory_mb:
-          totalMemory > 0 ? Math.round(totalMemory / 1024 / 1024) : undefined
-      }
-    }
-  } catch (error) {
-    console.warn(
-      '[ConflictDetection] Failed to extract GPU information:',
-      error
-    )
-  }
-
-  // Default values
-  return {
-    available: ['CPU'],
-    primary: 'CPU',
-    memory_mb: undefined
-  }
-}
-
-/**
- * Unified version conflict check using Registry API version strings.
- * Uses shared versionUtil functions for consistent version handling.
- * @param type Type of version being checked
- * @param currentVersion Current version string
- * @param supportedVersion Supported version from Registry
- * @returns Conflict detail if conflict exists, null otherwise
- */
-function checkVersionConflict(
-  type: ConflictType,
-  currentVersion: string,
-  supportedVersion: string
-): ConflictDetail | null {
-  // If current version is unknown, assume compatible (no conflict)
-  if (currentVersion === 'unknown') {
-    return null
-  }
-
-  // If Registry doesn't specify version requirements, assume compatible
-  if (!supportedVersion || supportedVersion.trim() === '') {
-    return null
-  }
-
-  try {
-    // Clean the current version using shared utility
-    const cleanCurrent = cleanVersion(currentVersion)
-
-    // Check version compatibility using shared utility
-    const isCompatible = satisfiesVersion(cleanCurrent, supportedVersion)
-
-    if (!isCompatible) {
-      return {
-        type,
-        current_value: currentVersion,
-        required_value: supportedVersion
-      }
-    }
-
-    return null
-  } catch (error) {
-    console.warn(
-      `[ConflictDetection] Failed to parse version requirement: ${supportedVersion}`,
-      error
-    )
-    return {
-      type,
-      current_value: currentVersion,
-      required_value: supportedVersion
-    }
-  }
-}
-
-/**
- * Checks for OS compatibility conflicts.
- */
-function checkOSConflict(
-  supportedOS: Node['supported_os'],
-  currentOS: string
-): ConflictDetail | null {
-  if (supportedOS?.includes('any') || supportedOS?.includes(currentOS)) {
-    return null
-  }
-
-  return {
-    type: 'os',
-    current_value: currentOS,
-    required_value: supportedOS ? supportedOS?.join(', ') : ''
-  }
-}
-
-/**
- * Checks for accelerator compatibility conflicts.
- */
-function checkAcceleratorConflict(
-  supportedAccelerators: Node['supported_accelerators'],
-  availableAccelerators: Node['supported_accelerators']
-): ConflictDetail | null {
-  if (
-    supportedAccelerators?.includes('any') ||
-    supportedAccelerators?.some((acc) => availableAccelerators?.includes(acc))
-  ) {
-    return null
-  }
-
-  return {
-    type: 'accelerator',
-    current_value: availableAccelerators
-      ? availableAccelerators.join(', ')
-      : '',
-    required_value: supportedAccelerators
-      ? supportedAccelerators.join(', ')
-      : ''
-  }
-}
-
-/**
- * Checks for banned package status conflicts.
- */
-function checkBannedStatus(isBanned?: boolean): ConflictDetail | null {
-  if (isBanned === true) {
-    return {
-      type: 'banned',
-      current_value: 'installed',
-      required_value: 'not_banned'
-    }
-  }
-  return null
-}
-
-/**
- * Checks for pending package status conflicts.
- */
-function checkPendingStatus(isPending?: boolean): ConflictDetail | null {
-  if (isPending === true) {
-    return {
-      type: 'pending',
-      current_value: 'installed',
-      required_value: 'not_pending'
-    }
-  }
-  return null
-}
-
-/**
- * Generates summary of conflict detection results.
- */
-function generateSummary(
-  results: ConflictDetectionResult[],
-  durationMs: number
-): ConflictDetectionSummary {
-  const conflictsByType: Record<ConflictType, number> = {
-    comfyui_version: 0,
-    frontend_version: 0,
-    import_failed: 0,
-    os: 0,
-    accelerator: 0,
-    banned: 0,
-    pending: 0
-    // python_version: 0
-  }
-
-  const conflictsByTypeDetails: Record<ConflictType, string[]> = {
-    comfyui_version: [],
-    frontend_version: [],
-    import_failed: [],
-    os: [],
-    accelerator: [],
-    banned: [],
-    pending: []
-    // python_version: [],
-  }
-
-  let bannedCount = 0
-  let securityPendingCount = 0
-
-  results.forEach((result) => {
-    result.conflicts.forEach((conflict) => {
-      conflictsByType[conflict.type]++
-
-      if (!conflictsByTypeDetails[conflict.type].includes(result.package_id)) {
-        conflictsByTypeDetails[conflict.type].push(result.package_id)
-      }
-
-      if (conflict.type === 'banned') bannedCount++
-      if (conflict.type === 'pending') securityPendingCount++
-    })
-  })
-
-  return {
-    total_packages: results.length,
-    compatible_packages: results.filter((r) => r.is_compatible).length,
-    conflicted_packages: results.filter((r) => r.has_conflict).length,
-    banned_packages: bannedCount,
-    pending_packages: securityPendingCount,
-    conflicts_by_type_details: conflictsByTypeDetails,
-    last_check_timestamp: new Date().toISOString(),
-    check_duration_ms: durationMs
-  }
-}
-
-/**
- * Creates an empty summary for error cases.
- */
-function getEmptySummary(): ConflictDetectionSummary {
-  return {
-    total_packages: 0,
-    compatible_packages: 0,
-    conflicted_packages: 0,
-    banned_packages: 0,
-    pending_packages: 0,
-    conflicts_by_type_details: {
-      comfyui_version: [],
-      frontend_version: [],
-      import_failed: [],
-      os: [],
-      accelerator: [],
-      banned: [],
-      pending: []
-      // python_version: [],
-    },
-    last_check_timestamp: new Date().toISOString(),
-    check_duration_ms: 0
-  }
-}
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index cd368221b5..6f01d9a29b 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,6 +1,5 @@
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import { ManagerUIState, useManagerState } from '@/composables/useManagerState'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
@@ -14,7 +13,7 @@ import {
   LiteGraph,
   SubgraphNode
 } from '@/lib/litegraph/src/litegraph'
-import { Point } from '@/lib/litegraph/src/litegraph'
+import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
@@ -41,12 +40,16 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { ManagerTab } from '@/types/comfyManagerTypes'
 import {
   getAllNonIoNodesInSubgraph,
   getExecutionIdsForSelectedNodes
 } from '@/utils/graphTraversalUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+import {
+  ManagerUIState,
+  useManagerState
+} from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const moveSelectedNodesVersionAdded = '1.22.2'
 
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index 9477f8dd31..203db8f1be 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -2,13 +2,13 @@ import { ref, toRaw, watch } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
+import type {
   CameraType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useLoad3dService } from '@/services/load3dService'
 
diff --git a/src/composables/usePaste.ts b/src/composables/usePaste.ts
index e483ee0c2d..c04901951a 100644
--- a/src/composables/usePaste.ts
+++ b/src/composables/usePaste.ts
@@ -2,7 +2,7 @@ import { useEventListener } from '@vueuse/core'
 
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
diff --git a/src/composables/useServerLogs.ts b/src/composables/useServerLogs.ts
index e15bd975f0..8398f5542f 100644
--- a/src/composables/useServerLogs.ts
+++ b/src/composables/useServerLogs.ts
@@ -1,9 +1,9 @@
 import { useEventListener } from '@vueuse/core'
 import { onUnmounted, ref } from 'vue'
 
-import { LogsWsMessage } from '@/schemas/apiSchema'
+import type { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
-import { components } from '@/types/generatedManagerTypes'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 const LOGS_MESSAGE_TYPE = 'logs'
 const MANAGER_WS_TASK_DONE_NAME = 'cm-task-completed'
diff --git a/src/composables/useTreeExpansion.ts b/src/composables/useTreeExpansion.ts
index 16f1151c5a..b232c63f83 100644
--- a/src/composables/useTreeExpansion.ts
+++ b/src/composables/useTreeExpansion.ts
@@ -1,4 +1,4 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 import type { TreeNode } from '@/types/treeExplorerTypes'
 
diff --git a/src/composables/useVueFeatureFlags.ts b/src/composables/useVueFeatureFlags.ts
index 87836c221a..f863fc1873 100644
--- a/src/composables/useVueFeatureFlags.ts
+++ b/src/composables/useVueFeatureFlags.ts
@@ -2,16 +2,17 @@
  * Vue-related feature flags composable
  * Manages local settings-driven flags and LiteGraph integration
  */
+import { createSharedComposable } from '@vueuse/core'
 import { computed, watch } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 
 import { LiteGraph } from '../lib/litegraph/src/litegraph'
 
-export const useVueFeatureFlags = () => {
+function useVueFeatureFlagsIndividual() {
   const settingStore = useSettingStore()
 
-  const isVueNodesEnabled = computed(() => {
+  const shouldRenderVueNodes = computed(() => {
     try {
       return settingStore.get('Comfy.VueNodes.Enabled') ?? false
     } catch {
@@ -19,20 +20,20 @@ export const useVueFeatureFlags = () => {
     }
   })
 
-  // Whether Vue nodes should render
-  const shouldRenderVueNodes = computed(() => isVueNodesEnabled.value)
-
-  // Sync the Vue nodes flag with LiteGraph global settings
-  const syncVueNodesFlag = () => {
-    LiteGraph.vueNodesMode = isVueNodesEnabled.value
-  }
-
   // Watch for changes and update LiteGraph immediately
-  watch(isVueNodesEnabled, syncVueNodesFlag, { immediate: true })
+  watch(
+    shouldRenderVueNodes,
+    () => {
+      LiteGraph.vueNodesMode = shouldRenderVueNodes.value
+    },
+    { immediate: true }
+  )
 
   return {
-    isVueNodesEnabled,
-    shouldRenderVueNodes,
-    syncVueNodesFlag
+    shouldRenderVueNodes
   }
 }
+
+export const useVueFeatureFlags = createSharedComposable(
+  useVueFeatureFlagsIndividual
+)
diff --git a/src/config/firebase.ts b/src/config/firebase.ts
index c3dc718a1a..e5fbd2af7f 100644
--- a/src/config/firebase.ts
+++ b/src/config/firebase.ts
@@ -1,4 +1,4 @@
-import { FirebaseOptions } from 'firebase/app'
+import type { FirebaseOptions } from 'firebase/app'
 
 const DEV_CONFIG: FirebaseOptions = {
   apiKey: 'AIzaSyDa_YMeyzV0SkVe92vBZ1tVikWBmOU5KVE',
diff --git a/src/constants/coreKeybindings.ts b/src/constants/coreKeybindings.ts
index b4245f789e..fe2bde835d 100644
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -122,14 +122,14 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: '.'
     },
     commandId: 'Comfy.Canvas.FitView',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
   },
   {
     combo: {
       key: 'p'
     },
     commandId: 'Comfy.Canvas.ToggleSelected.Pin',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
   },
   {
     combo: {
@@ -137,7 +137,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       alt: true
     },
     commandId: 'Comfy.Canvas.ToggleSelectedNodes.Collapse',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
   },
   {
     combo: {
@@ -145,7 +145,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       ctrl: true
     },
     commandId: 'Comfy.Canvas.ToggleSelectedNodes.Bypass',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
   },
   {
     combo: {
@@ -153,7 +153,7 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       ctrl: true
     },
     commandId: 'Comfy.Canvas.ToggleSelectedNodes.Mute',
-    targetElementId: 'graph-canvas'
+    targetElementId: 'graph-canvas-container'
   },
   {
     combo: {
diff --git a/src/constants/desktopDialogs.ts b/src/constants/desktopDialogs.ts
new file mode 100644
index 0000000000..d43e80de29
--- /dev/null
+++ b/src/constants/desktopDialogs.ts
@@ -0,0 +1,75 @@
+export interface DialogAction {
+  readonly label: string
+  readonly action: 'openUrl' | 'close' | 'cancel'
+  readonly url?: string
+  readonly severity?: 'danger' | 'primary' | 'secondary' | 'warn'
+  readonly returnValue: string
+}
+
+interface DesktopDialog {
+  readonly title: string
+  readonly message: string
+  readonly buttons: DialogAction[]
+}
+
+export const DESKTOP_DIALOGS = {
+  /** Shown when a corrupt venv is detected. */
+  reinstallVenv: {
+    title: 'Reinstall ComfyUI (Fresh Start)?',
+    message: `Sorry, we can't launch ComfyUI because some installed packages aren't compatible.
+
+Click Reinstall to restore ComfyUI and get back up and running.
+
+Please note: if you've added custom nodes, you'll need to reinstall them after this process.`,
+    buttons: [
+      {
+        label: 'Learn More',
+        action: 'openUrl',
+        url: 'https://docs.comfy.org',
+        returnValue: 'openDocs'
+      },
+      {
+        label: 'Reinstall',
+        action: 'close',
+        severity: 'danger',
+        returnValue: 'resetVenv'
+      }
+    ]
+  },
+  /** A dialog that is shown when an invalid dialog ID is provided. */
+  invalidDialog: {
+    title: 'Invalid Dialog',
+    message: `Invalid dialog ID was provided.`,
+    buttons: [
+      {
+        label: 'Close',
+        action: 'cancel',
+        returnValue: 'cancel'
+      }
+    ]
+  }
+} as const satisfies { [K: string]: DesktopDialog }
+
+/** The ID of a desktop dialog. */
+type DesktopDialogId = keyof typeof DESKTOP_DIALOGS
+
+/**
+ * Checks if {@link id} is a valid dialog ID.
+ * @param id The string to check
+ * @returns `true` if the ID is a valid dialog ID, otherwise `false`
+ */
+function isDialogId(id: unknown): id is DesktopDialogId {
+  return typeof id === 'string' && id in DESKTOP_DIALOGS
+}
+
+/**
+ * Gets the dialog with the given ID.
+ * @param dialogId The ID of the dialog to get
+ * @returns The dialog with the given ID
+ */
+export function getDialog(
+  dialogId: string | string[]
+): DesktopDialog & { id: DesktopDialogId } {
+  const id = isDialogId(dialogId) ? dialogId : 'invalidDialog'
+  return { id, ...structuredClone(DESKTOP_DIALOGS[id]) }
+}
diff --git a/src/constants/serverConfig.ts b/src/constants/serverConfig.ts
index 9de008df1d..2ec27d1808 100644
--- a/src/constants/serverConfig.ts
+++ b/src/constants/serverConfig.ts
@@ -1,4 +1,4 @@
-import { FormItem } from '@/platform/settings/types'
+import type { FormItem } from '@/platform/settings/types'
 import {
   CrossAttentionMethod,
   CudaMalloc,
diff --git a/src/extensions/core/electronAdapter.ts b/src/extensions/core/electronAdapter.ts
index a1ade628aa..718639b475 100644
--- a/src/extensions/core/electronAdapter.ts
+++ b/src/extensions/core/electronAdapter.ts
@@ -9,6 +9,12 @@ import { useDialogService } from '@/services/dialogService'
 import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 import { checkMirrorReachable } from '@/utils/networkUtil'
 
+// Desktop documentation URLs
+const DESKTOP_DOCS = {
+  WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
+  MACOS: 'https://docs.comfy.org/installation/desktop/macos'
+} as const
+
 ;(async () => {
   if (!isElectron()) return
 
@@ -159,7 +165,11 @@ import { checkMirrorReachable } from '@/utils/networkUtil'
         label: 'Desktop User Guide',
         icon: 'pi pi-book',
         function() {
-          window.open('https://comfyorg.notion.site/', '_blank')
+          const docsUrl =
+            electronAPI.getPlatform() === 'darwin'
+              ? DESKTOP_DOCS.MACOS
+              : DESKTOP_DOCS.WINDOWS
+          window.open(docsUrl, '_blank')
         }
       },
       {
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index eab82634a9..4b3ce78bca 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -11,16 +11,16 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import {
-  ComfyLink,
-  ComfyNode,
-  ComfyWorkflowJSON
+  type ComfyLink,
+  type ComfyNode,
+  type ComfyWorkflowJSON
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { useDialogService } from '@/services/dialogService'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { ComfyExtension } from '@/types/comfy'
+import { type ComfyExtension } from '@/types/comfy'
 import { ExecutableGroupNodeChildDTO } from '@/utils/executableGroupNodeChildDTO'
 import { GROUP } from '@/utils/executableGroupNodeDto'
 import { deserialiseAndCreate, serialise } from '@/utils/vintageClipboard'
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index 698be00dd6..c2d8b5d69b 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -9,7 +9,7 @@ import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { t } from '@/i18n'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { api } from '@/scripts/api'
 import { ComfyApp, app } from '@/scripts/app'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
diff --git a/src/extensions/core/load3d/AnimationManager.ts b/src/extensions/core/load3d/AnimationManager.ts
index f3efd220e1..542edfdc27 100644
--- a/src/extensions/core/load3d/AnimationManager.ts
+++ b/src/extensions/core/load3d/AnimationManager.ts
@@ -1,9 +1,9 @@
 import * as THREE from 'three'
 
 import {
-  AnimationItem,
-  AnimationManagerInterface,
-  EventManagerInterface
+  type AnimationItem,
+  type AnimationManagerInterface,
+  type EventManagerInterface
 } from '@/extensions/core/load3d/interfaces'
 
 export class AnimationManager implements AnimationManagerInterface {
diff --git a/src/extensions/core/load3d/CameraManager.ts b/src/extensions/core/load3d/CameraManager.ts
index 2b6b568c94..624ce6882a 100644
--- a/src/extensions/core/load3d/CameraManager.ts
+++ b/src/extensions/core/load3d/CameraManager.ts
@@ -2,11 +2,11 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
 import {
-  CameraManagerInterface,
-  CameraState,
-  CameraType,
-  EventManagerInterface,
-  NodeStorageInterface
+  type CameraManagerInterface,
+  type CameraState,
+  type CameraType,
+  type EventManagerInterface,
+  type NodeStorageInterface
 } from './interfaces'
 
 export class CameraManager implements CameraManagerInterface {
diff --git a/src/extensions/core/load3d/ControlsManager.ts b/src/extensions/core/load3d/ControlsManager.ts
index d19160b53d..ab28b7698f 100644
--- a/src/extensions/core/load3d/ControlsManager.ts
+++ b/src/extensions/core/load3d/ControlsManager.ts
@@ -2,9 +2,9 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
 import {
-  ControlsManagerInterface,
-  EventManagerInterface,
-  NodeStorageInterface
+  type ControlsManagerInterface,
+  type EventManagerInterface,
+  type NodeStorageInterface
 } from './interfaces'
 
 export class ControlsManager implements ControlsManagerInterface {
diff --git a/src/extensions/core/load3d/EventManager.ts b/src/extensions/core/load3d/EventManager.ts
index e06669ce25..64b87eb9b6 100644
--- a/src/extensions/core/load3d/EventManager.ts
+++ b/src/extensions/core/load3d/EventManager.ts
@@ -1,4 +1,4 @@
-import { EventCallback, EventManagerInterface } from './interfaces'
+import { type EventCallback, type EventManagerInterface } from './interfaces'
 
 export class EventManager implements EventManagerInterface {
   private listeners: { [key: string]: EventCallback[] } = {}
diff --git a/src/extensions/core/load3d/LightingManager.ts b/src/extensions/core/load3d/LightingManager.ts
index 20212dbdcc..384df3110e 100644
--- a/src/extensions/core/load3d/LightingManager.ts
+++ b/src/extensions/core/load3d/LightingManager.ts
@@ -1,6 +1,9 @@
 import * as THREE from 'three'
 
-import { EventManagerInterface, LightingManagerInterface } from './interfaces'
+import {
+  type EventManagerInterface,
+  type LightingManagerInterface
+} from './interfaces'
 
 export class LightingManager implements LightingManagerInterface {
   lights: THREE.Light[] = []
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 37121ba6ba..0b4c4f307f 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 import { CameraManager } from './CameraManager'
 import { ControlsManager } from './ControlsManager'
@@ -16,11 +16,11 @@ import { SceneManager } from './SceneManager'
 import { SceneModelManager } from './SceneModelManager'
 import { ViewHelperManager } from './ViewHelperManager'
 import {
-  CameraState,
-  CaptureResult,
-  Load3DOptions,
-  MaterialMode,
-  UpDirection
+  type CameraState,
+  type CaptureResult,
+  type Load3DOptions,
+  type MaterialMode,
+  type UpDirection
 } from './interfaces'
 
 class Load3d {
diff --git a/src/extensions/core/load3d/Load3dAnimation.ts b/src/extensions/core/load3d/Load3dAnimation.ts
index 78a9dfae81..82ff2c099b 100644
--- a/src/extensions/core/load3d/Load3dAnimation.ts
+++ b/src/extensions/core/load3d/Load3dAnimation.ts
@@ -4,7 +4,7 @@ import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 import { AnimationManager } from './AnimationManager'
 import Load3d from './Load3d'
-import { Load3DOptions } from './interfaces'
+import { type Load3DOptions } from './interfaces'
 
 class Load3dAnimation extends Load3d {
   private animationManager: AnimationManager
diff --git a/src/extensions/core/load3d/LoaderManager.ts b/src/extensions/core/load3d/LoaderManager.ts
index ccf06787b6..2c753e6fce 100644
--- a/src/extensions/core/load3d/LoaderManager.ts
+++ b/src/extensions/core/load3d/LoaderManager.ts
@@ -9,9 +9,9 @@ import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import {
-  EventManagerInterface,
-  LoaderManagerInterface,
-  ModelManagerInterface
+  type EventManagerInterface,
+  type LoaderManagerInterface,
+  type ModelManagerInterface
 } from './interfaces'
 
 export class LoaderManager implements LoaderManagerInterface {
diff --git a/src/extensions/core/load3d/NodeStorage.ts b/src/extensions/core/load3d/NodeStorage.ts
index 44417fbc65..09aac60d4b 100644
--- a/src/extensions/core/load3d/NodeStorage.ts
+++ b/src/extensions/core/load3d/NodeStorage.ts
@@ -1,6 +1,6 @@
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-import { NodeStorageInterface } from './interfaces'
+import { type NodeStorageInterface } from './interfaces'
 
 export class NodeStorage implements NodeStorageInterface {
   private node: LGraphNode
diff --git a/src/extensions/core/load3d/PreviewManager.ts b/src/extensions/core/load3d/PreviewManager.ts
index 514fd3726d..36cd2b3254 100644
--- a/src/extensions/core/load3d/PreviewManager.ts
+++ b/src/extensions/core/load3d/PreviewManager.ts
@@ -1,7 +1,10 @@
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
-import { EventManagerInterface, PreviewManagerInterface } from './interfaces'
+import {
+  type EventManagerInterface,
+  type PreviewManagerInterface
+} from './interfaces'
 
 export class PreviewManager implements PreviewManagerInterface {
   previewCamera: THREE.Camera
diff --git a/src/extensions/core/load3d/RecordingManager.ts b/src/extensions/core/load3d/RecordingManager.ts
index 252e6b58b9..679fa9c5d0 100644
--- a/src/extensions/core/load3d/RecordingManager.ts
+++ b/src/extensions/core/load3d/RecordingManager.ts
@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 
-import { EventManagerInterface } from './interfaces'
+import { type EventManagerInterface } from './interfaces'
 
 export class RecordingManager {
   private mediaRecorder: MediaRecorder | null = null
diff --git a/src/extensions/core/load3d/SceneManager.ts b/src/extensions/core/load3d/SceneManager.ts
index 4f46dda4bf..722e4f4395 100644
--- a/src/extensions/core/load3d/SceneManager.ts
+++ b/src/extensions/core/load3d/SceneManager.ts
@@ -2,7 +2,10 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 
 import Load3dUtils from './Load3dUtils'
-import { EventManagerInterface, SceneManagerInterface } from './interfaces'
+import {
+  type EventManagerInterface,
+  type SceneManagerInterface
+} from './interfaces'
 
 export class SceneManager implements SceneManagerInterface {
   scene: THREE.Scene
diff --git a/src/extensions/core/load3d/SceneModelManager.ts b/src/extensions/core/load3d/SceneModelManager.ts
index d4cd6f795b..94f597bf21 100644
--- a/src/extensions/core/load3d/SceneModelManager.ts
+++ b/src/extensions/core/load3d/SceneModelManager.ts
@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
 import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry'
-import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+import { type GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils'
 
 import { ColoredShadowMaterial } from './conditional-lines/ColoredShadowMaterial'
@@ -11,11 +11,11 @@ import { ConditionalEdgesShader } from './conditional-lines/ConditionalEdgesShad
 import { ConditionalLineMaterial } from './conditional-lines/Lines2/ConditionalLineMaterial'
 import { ConditionalLineSegmentsGeometry } from './conditional-lines/Lines2/ConditionalLineSegmentsGeometry'
 import {
-  EventManagerInterface,
-  Load3DOptions,
-  MaterialMode,
-  ModelManagerInterface,
-  UpDirection
+  type EventManagerInterface,
+  type Load3DOptions,
+  type MaterialMode,
+  type ModelManagerInterface,
+  type UpDirection
 } from './interfaces'
 
 export class SceneModelManager implements ModelManagerInterface {
diff --git a/src/extensions/core/load3d/ViewHelperManager.ts b/src/extensions/core/load3d/ViewHelperManager.ts
index eeb8f9ad2f..f68e5e0cb5 100644
--- a/src/extensions/core/load3d/ViewHelperManager.ts
+++ b/src/extensions/core/load3d/ViewHelperManager.ts
@@ -2,7 +2,10 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
 
-import { NodeStorageInterface, ViewHelperManagerInterface } from './interfaces'
+import {
+  type NodeStorageInterface,
+  type ViewHelperManagerInterface
+} from './interfaces'
 
 export class ViewHelperManager implements ViewHelperManagerInterface {
   viewHelper: ViewHelper = {} as ViewHelper
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 86d33edc9c..967465a9d8 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -2,13 +2,13 @@ import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
-import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { type GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 export type Load3DNodeType = 'Load3D' | 'Preview3D'
 
diff --git a/src/extensions/core/maskeditor.ts b/src/extensions/core/maskeditor.ts
index 238056f74a..2497fd2872 100644
--- a/src/extensions/core/maskeditor.ts
+++ b/src/extensions/core/maskeditor.ts
@@ -3901,6 +3901,19 @@ class UIManager {
         this.paintBucketSettingsHTML.style.display = 'none'
       }
     }
+    if (tool === Tools.MaskColorFill) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'flex'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    } else if (tool === Tools.MaskBucket) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'flex'
+    } else {
+      this.brushSettingsHTML.style.display = 'flex'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    }
     this.messageBroker.publish('setTool', tool)
     this.onToolChange()
     const newActiveLayer = this.toolSettings[tool].newActiveLayerOnSet
diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts
index 9931ddaa15..5266f9af9b 100644
--- a/src/extensions/core/previewAny.ts
+++ b/src/extensions/core/previewAny.ts
@@ -4,7 +4,7 @@ https://github.com/rgthree/rgthree-comfy/blob/main/py/display_any.py
 upstream requested in https://github.com/Kosinkadink/rfcs/blob/main/rfcs/0000-corenodes.md#preview-nodes
  */
 import { app } from '@/scripts/app'
-import { DOMWidget } from '@/scripts/domWidget'
+import { type DOMWidget } from '@/scripts/domWidget'
 import { ComfyWidgets } from '@/scripts/widgets'
 import { useExtensionService } from '@/services/extensionService'
 
diff --git a/src/extensions/core/saveMesh.ts b/src/extensions/core/saveMesh.ts
index 2c6f0857c5..3c84cf9420 100644
--- a/src/extensions/core/saveMesh.ts
+++ b/src/extensions/core/saveMesh.ts
@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 
 import Load3D from '@/components/load3d/Load3D.vue'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index 1b858b240a..4c0e25b2cb 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -15,7 +15,7 @@ import type { ResultItemType } from '@/schemas/apiSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useAudioService } from '@/services/audioService'
-import { NodeLocatorId } from '@/types'
+import { type NodeLocatorId } from '@/types'
 import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 
 import { api } from '../../scripts/api'
diff --git a/src/extensions/core/uploadImage.ts b/src/extensions/core/uploadImage.ts
index 4ed7130eeb..4cb910dae1 100644
--- a/src/extensions/core/uploadImage.ts
+++ b/src/extensions/core/uploadImage.ts
@@ -1,6 +1,6 @@
 import {
-  ComfyNodeDef,
-  InputSpec,
+  type ComfyNodeDef,
+  type InputSpec,
   isComboInputSpecV1
 } from '@/schemas/nodeDefSchema'
 
diff --git a/src/i18n.ts b/src/i18n.ts
index 2544fc7eb6..38a8dfe951 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -28,6 +28,10 @@ import ruCommands from './locales/ru/commands.json' with { type: 'json' }
 import ru from './locales/ru/main.json' with { type: 'json' }
 import ruNodes from './locales/ru/nodeDefs.json' with { type: 'json' }
 import ruSettings from './locales/ru/settings.json' with { type: 'json' }
+import trCommands from './locales/tr/commands.json' with { type: 'json' }
+import tr from './locales/tr/main.json' with { type: 'json' }
+import trNodes from './locales/tr/nodeDefs.json' with { type: 'json' }
+import trSettings from './locales/tr/settings.json' with { type: 'json' }
 import zhTWCommands from './locales/zh-TW/commands.json' with { type: 'json' }
 import zhTW from './locales/zh-TW/main.json' with { type: 'json' }
 import zhTWNodes from './locales/zh-TW/nodeDefs.json' with { type: 'json' }
@@ -55,7 +59,8 @@ const messages = {
   ko: buildLocale(ko, koNodes, koCommands, koSettings),
   fr: buildLocale(fr, frNodes, frCommands, frSettings),
   es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings)
+  ar: buildLocale(ar, arNodes, arCommands, arSettings),
+  tr: buildLocale(tr, trNodes, trCommands, trSettings)
 }
 
 export const i18n = createI18n({
@@ -71,7 +76,7 @@ export const i18n = createI18n({
 })
 
 /** Convenience shorthand: i18n.global */
-export const { t, te } = i18n.global
+export const { t, te, d } = i18n.global
 
 /**
  * Safe translation function that returns the fallback message if the key is not found.
diff --git a/src/lib/litegraph/src/CurveEditor.ts b/src/lib/litegraph/src/CurveEditor.ts
index 830e4b076a..4a536ce0ac 100644
--- a/src/lib/litegraph/src/CurveEditor.ts
+++ b/src/lib/litegraph/src/CurveEditor.ts
@@ -1,7 +1,7 @@
 import { clamp } from 'es-toolkit/compat'
 
 import type { Point, Rect } from './interfaces'
-import { LGraphCanvas } from './litegraph'
+import type { LGraphCanvas } from './litegraph'
 import { distance } from './measure'
 
 // used by some widgets to render a curve editor
diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts
index e351ce722b..0cf68e3f79 100644
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -64,10 +64,10 @@ import {
   snapPoint
 } from './measure'
 import { NodeInputSlot } from './node/NodeInputSlot'
-import { Subgraph } from './subgraph/Subgraph'
+import type { Subgraph } from './subgraph/Subgraph'
 import { SubgraphIONodeBase } from './subgraph/SubgraphIONodeBase'
-import { SubgraphInputNode } from './subgraph/SubgraphInputNode'
-import { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
+import type { SubgraphInputNode } from './subgraph/SubgraphInputNode'
+import type { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
 import type {
   CanvasPointerEvent,
   CanvasPointerExtensions
@@ -87,6 +87,7 @@ import type { PickNevers } from './types/utility'
 import type { IBaseWidget } from './types/widgets'
 import { alignNodes, distributeNodes, getBoundaryNodes } from './utils/arrange'
 import { findFirstNode, getAllNestedItems } from './utils/collections'
+import { resolveConnectingLinkColor } from './utils/linkColors'
 import type { UUID } from './utils/uuid'
 import { BaseWidget } from './widgets/BaseWidget'
 import { toConcreteWidget } from './widgets/widgetMap'
@@ -4031,6 +4032,18 @@ export class LGraphCanvas
 
     // TODO: Report failures, i.e. `failedNodes`
 
+    const newPositions = created.map((node) => ({
+      nodeId: String(node.id),
+      bounds: {
+        x: node.pos[0],
+        y: node.pos[1],
+        width: node.size?.[0] ?? 100,
+        height: node.size?.[1] ?? 200
+      }
+    }))
+
+    layoutStore.batchUpdateNodeBounds(newPositions)
+
     this.selectItems(created)
 
     graph.afterChange()
@@ -4716,29 +4729,20 @@ export class LGraphCanvas
           const connShape = fromSlot.shape
           const connType = fromSlot.type
 
-          const colour =
-            connType === LiteGraph.EVENT
-              ? LiteGraph.EVENT_LINK_COLOR
-              : LiteGraph.CONNECTING_LINK_COLOR
+          const colour = resolveConnectingLinkColor(connType)
 
           // the connection being dragged by the mouse
           if (this.linkRenderer) {
-            this.linkRenderer.renderLinkDirect(
+            this.linkRenderer.renderDraggingLink(
               ctx,
               pos,
               highlightPos,
-              null,
-              false,
-              null,
               colour,
               fromDirection,
               dragDirection,
               {
                 ...this.buildLinkRenderContext(),
                 linkMarkerShape: LinkMarkerShape.None
-              },
-              {
-                disabled: false
               }
             )
           }
diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts
index 58ae4e0902..71b41f23d0 100644
--- a/src/lib/litegraph/src/LLink.ts
+++ b/src/lib/litegraph/src/LLink.ts
@@ -205,7 +205,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     network: Pick<ReadonlyLinkNetwork, 'reroutes'>,
     linkSegment: LinkSegment
   ): Reroute[] {
-    if (!linkSegment.parentId) return []
+    if (linkSegment.parentId === undefined) return []
     return network.reroutes.get(linkSegment.parentId)?.getReroutes() ?? []
   }
 
@@ -229,7 +229,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     linkSegment: LinkSegment,
     rerouteId: RerouteId
   ): Reroute | null | undefined {
-    if (!linkSegment.parentId) return
+    if (linkSegment.parentId === undefined) return
     return network.reroutes
       .get(linkSegment.parentId)
       ?.findNextReroute(rerouteId)
@@ -498,7 +498,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
       target_slot: this.target_slot,
       type: this.type
     }
-    if (this.parentId) copy.parentId = this.parentId
+    if (this.parentId !== undefined) copy.parentId = this.parentId
     return copy
   }
 }
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
index f48a7f141a..d8f6237123 100644
--- a/src/lib/litegraph/src/interfaces.ts
+++ b/src/lib/litegraph/src/interfaces.ts
@@ -5,7 +5,7 @@ import type { ContextMenu } from './ContextMenu'
 import type { LGraphNode, NodeId } from './LGraphNode'
 import type { LLink, LinkId } from './LLink'
 import type { Reroute, RerouteId } from './Reroute'
-import { SubgraphInput } from './subgraph/SubgraphInput'
+import type { SubgraphInput } from './subgraph/SubgraphInput'
 import type { SubgraphInputNode } from './subgraph/SubgraphInputNode'
 import type { SubgraphOutputNode } from './subgraph/SubgraphOutputNode'
 import type { LinkDirection, RenderShape } from './types/globalEnums'
@@ -82,6 +82,7 @@ export interface Positionable extends Parent<Positionable>, HasBoundingRect {
    * @default 0,0
    */
   readonly pos: Point
+  readonly size?: Size
   /** true if this object is part of the selection, otherwise false. */
   selected?: boolean
 
diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts
index 46202a2190..098c30e7a9 100644
--- a/src/lib/litegraph/src/litegraph.ts
+++ b/src/lib/litegraph/src/litegraph.ts
@@ -48,7 +48,6 @@ export interface LinkReleaseContextExtended {
   links: ConnectingLink[]
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface LiteGraphCanvasEvent extends CustomEvent<CanvasEventDetail> {}
 
 export interface LGraphNodeConstructor<T extends LGraphNode = LGraphNode> {
@@ -140,7 +139,7 @@ export { BaseWidget } from './widgets/BaseWidget'
 
 export { LegacyWidget } from './widgets/LegacyWidget'
 
-export { isComboWidget } from './widgets/widgetMap'
+export { isComboWidget, isAssetWidget } from './widgets/widgetMap'
 // Additional test-specific exports
 export { LGraphButton } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'
diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts
index 0419b18d3a..50fde9c521 100644
--- a/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts
+++ b/src/lib/litegraph/src/subgraph/EmptySubgraphInput.ts
@@ -1,5 +1,5 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { LLink } from '@/lib/litegraph/src/LLink'
+import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { RerouteId } from '@/lib/litegraph/src/Reroute'
 import type { INodeInputSlot, Point } from '@/lib/litegraph/src/interfaces'
 import { nextUniqueName } from '@/lib/litegraph/src/strings'
diff --git a/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts
index afb52b1209..b4e54cada3 100644
--- a/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts
+++ b/src/lib/litegraph/src/subgraph/EmptySubgraphOutput.ts
@@ -1,5 +1,5 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { LLink } from '@/lib/litegraph/src/LLink'
+import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { RerouteId } from '@/lib/litegraph/src/Reroute'
 import type { INodeOutputSlot, Point } from '@/lib/litegraph/src/interfaces'
 import { nextUniqueName } from '@/lib/litegraph/src/strings'
diff --git a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
index ed41f3a837..06da1a8d9c 100644
--- a/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
+++ b/src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts
@@ -11,7 +11,7 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import { LGraphEventMode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 
-import { Subgraph } from './Subgraph'
+import type { Subgraph } from './Subgraph'
 import type { SubgraphNode } from './SubgraphNode'
 
 export type ExecutionId = string
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
index dc47f477e9..c10a343adb 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -1,14 +1,17 @@
 import type { BaseLGraph, LGraph } from '@/lib/litegraph/src/LGraph'
-import { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
-import { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LLink, type ResolvedConnection } from '@/lib/litegraph/src/LLink'
 import { RecursionError } from '@/lib/litegraph/src/infrastructure/RecursionError'
-import type { ISubgraphInput } from '@/lib/litegraph/src/interfaces'
-import {
-  type INodeInputSlot,
-  type ISlotType,
-  type NodeId
+import type {
+  ISubgraphInput,
+  IWidgetLocator
+} from '@/lib/litegraph/src/interfaces'
+import type {
+  INodeInputSlot,
+  ISlotType,
+  NodeId
 } from '@/lib/litegraph/src/litegraph'
 import { NodeInputSlot } from '@/lib/litegraph/src/node/NodeInputSlot'
 import { NodeOutputSlot } from '@/lib/litegraph/src/node/NodeOutputSlot'
@@ -78,9 +81,10 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         const existingInput = this.inputs.find((i) => i.name == name)
         if (existingInput) {
           const linkId = subgraphInput.linkIds[0]
-          const { inputNode } = subgraph.links[linkId].resolve(subgraph)
+          const { inputNode, input } = subgraph.links[linkId].resolve(subgraph)
           const widget = inputNode?.widgets?.find?.((w) => w.name == name)
-          if (widget) this.#setWidget(subgraphInput, existingInput, widget)
+          if (widget)
+            this.#setWidget(subgraphInput, existingInput, widget, input?.widget)
           return
         }
         const input = this.addInput(name, type)
@@ -185,13 +189,14 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
     subgraphInput.events.addEventListener(
       'input-connected',
-      () => {
+      (e) => {
         if (input._widget) return
 
         const widget = subgraphInput._widget
         if (!widget) return
 
-        this.#setWidget(subgraphInput, input, widget)
+        const widgetLocator = e.detail.input.widget
+        this.#setWidget(subgraphInput, input, widget, widgetLocator)
       },
       { signal }
     )
@@ -301,7 +306,7 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
         const widget = resolved.inputNode.getWidgetFromSlot(resolved.input)
         if (!widget) continue
 
-        this.#setWidget(subgraphInput, input, widget)
+        this.#setWidget(subgraphInput, input, widget, resolved.input.widget)
         break
       }
     }
@@ -310,11 +315,13 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   #setWidget(
     subgraphInput: Readonly<SubgraphInput>,
     input: INodeInputSlot,
-    widget: Readonly<IBaseWidget>
+    widget: Readonly<IBaseWidget>,
+    inputWidget: IWidgetLocator | undefined
   ) {
     // Use the first matching widget
-    const targetWidget = toConcreteWidget(widget, this)
-    const promotedWidget = targetWidget.createCopyForNode(this)
+    const promotedWidget = toConcreteWidget(widget, this).createCopyForNode(
+      this
+    )
 
     Object.assign(promotedWidget, {
       get name() {
@@ -372,11 +379,9 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     // NOTE: This code creates linked chains of prototypes for passing across
     // multiple levels of subgraphs. As part of this, it intentionally avoids
     // creating new objects. Have care when making changes.
-    const backingInput =
-      targetWidget.node.findInputSlot(widget.name, true)?.widget ?? {}
     input.widget ??= { name: subgraphInput.name }
     input.widget.name = subgraphInput.name
-    Object.setPrototypeOf(input.widget, backingInput)
+    if (inputWidget) Object.setPrototypeOf(input.widget, inputWidget)
 
     input._widget = promotedWidget
   }
diff --git a/src/lib/litegraph/src/utils/linkColors.ts b/src/lib/litegraph/src/utils/linkColors.ts
new file mode 100644
index 0000000000..e6e966133d
--- /dev/null
+++ b/src/lib/litegraph/src/utils/linkColors.ts
@@ -0,0 +1,13 @@
+import type { CanvasColour, ISlotType } from '../interfaces'
+import { LiteGraph } from '../litegraph'
+
+/**
+ * Resolve the colour used while rendering or previewing a connection of a given slot type.
+ */
+export function resolveConnectingLinkColor(
+  type: ISlotType | undefined
+): CanvasColour {
+  return type === LiteGraph.EVENT
+    ? LiteGraph.EVENT_LINK_COLOR
+    : LiteGraph.CONNECTING_LINK_COLOR
+}
diff --git a/src/lib/litegraph/src/widgets/AssetWidget.ts b/src/lib/litegraph/src/widgets/AssetWidget.ts
index f8a8e12090..1a5047bebd 100644
--- a/src/lib/litegraph/src/widgets/AssetWidget.ts
+++ b/src/lib/litegraph/src/widgets/AssetWidget.ts
@@ -13,6 +13,22 @@ export class AssetWidget
     this.value = widget.value?.toString() ?? ''
   }
 
+  override set value(value: IAssetWidget['value']) {
+    const oldValue = this.value
+    super.value = value
+
+    // Force canvas redraw when value changes to show update immediately
+    if (oldValue !== value && this.node.graph?.list_of_graphcanvas) {
+      for (const canvas of this.node.graph.list_of_graphcanvas) {
+        canvas.setDirty(true)
+      }
+    }
+  }
+
+  override get value(): IAssetWidget['value'] {
+    return super.value
+  }
+
   override get _displayValue(): string {
     return String(this.value) //FIXME: Resolve asset name
   }
diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts
index 02cdb55971..0e6a34fe51 100644
--- a/src/lib/litegraph/src/widgets/widgetMap.ts
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type {
+  IAssetWidget,
   IBaseWidget,
   IComboWidget,
   IWidget,
@@ -132,4 +133,9 @@ export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
 }
 
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}. */
+export function isAssetWidget(widget: IBaseWidget): widget is IAssetWidget {
+  return widget.type === 'asset'
+}
+
 // #endregion Type Guards
diff --git a/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts b/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts
index 42990a3fd9..51bdf257c2 100644
--- a/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts
+++ b/src/lib/litegraph/test/LGraphNode.titleButtons.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
-import { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 
 describe('LGraphNode Title Buttons', () => {
diff --git a/src/lib/litegraph/test/LinkConnector.integration.test.ts b/src/lib/litegraph/test/LinkConnector.integration.test.ts
index ecbfc26ea9..5fed192d25 100644
--- a/src/lib/litegraph/test/LinkConnector.integration.test.ts
+++ b/src/lib/litegraph/test/LinkConnector.integration.test.ts
@@ -1,10 +1,9 @@
 import { afterEach, describe, expect, vi } from 'vitest'
 
+import type { LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
 import {
-  LGraph,
   LGraphNode,
   LLink,
-  Reroute,
   type RerouteId
 } from '@/lib/litegraph/src/litegraph'
 import { LinkConnector } from '@/lib/litegraph/src/litegraph'
diff --git a/src/lib/litegraph/test/NodeSlot.test.ts b/src/lib/litegraph/test/NodeSlot.test.ts
index c9d7343500..9a9dff2f62 100644
--- a/src/lib/litegraph/test/NodeSlot.test.ts
+++ b/src/lib/litegraph/test/NodeSlot.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
-import { INodeInputSlot, INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/interfaces'
 import {
   inputAsSerialisable,
   outputAsSerialisable
diff --git a/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts b/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts
index d9951656e2..7d7ad90939 100644
--- a/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts
+++ b/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts
@@ -4,7 +4,7 @@ import { LinkConnector } from '@/lib/litegraph/src/canvas/LinkConnector'
 import { MovingOutputLink } from '@/lib/litegraph/src/canvas/MovingOutputLink'
 import { ToOutputRenderLink } from '@/lib/litegraph/src/canvas/ToOutputRenderLink'
 import { LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/node/NodeInputSlot'
+import type { NodeInputSlot } from '@/lib/litegraph/src/node/NodeInputSlot'
 
 import { createTestSubgraph } from '../subgraph/fixtures/subgraphHelpers'
 
diff --git a/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts b/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
index 7ba3749fd1..16cf40a555 100644
--- a/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
+++ b/src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts
@@ -1,8 +1,7 @@
 import { assert, describe, expect, it } from 'vitest'
 
+import type { ISlotType, LGraph } from '@/lib/litegraph/src/litegraph'
 import {
-  ISlotType,
-  LGraph,
   LGraphGroup,
   LGraphNode,
   LiteGraph
diff --git a/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts b/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts
index 51ef2f5bde..5711c3d4b5 100644
--- a/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts
+++ b/src/lib/litegraph/test/subgraph/SubgraphNode.titleButton.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/LGraphButton'
-import { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 
 import {
   createTestSubgraph,
diff --git a/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts b/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts
index 05cf543a23..e094812e17 100644
--- a/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts
+++ b/src/lib/litegraph/test/subgraph/SubgraphSlotConnections.test.ts
@@ -4,8 +4,8 @@ import { LinkConnector } from '@/lib/litegraph/src/canvas/LinkConnector'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/canvas/ToInputFromIoNodeLink'
 import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/constants'
 import { LGraphNode, type LinkNetwork } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/node/NodeInputSlot'
-import { NodeOutputSlot } from '@/lib/litegraph/src/node/NodeOutputSlot'
+import type { NodeInputSlot } from '@/lib/litegraph/src/node/NodeInputSlot'
+import type { NodeOutputSlot } from '@/lib/litegraph/src/node/NodeOutputSlot'
 import {
   isSubgraphInput,
   isSubgraphOutput
diff --git a/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts b/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts
index 05421f6165..970b88d064 100644
--- a/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts
+++ b/src/lib/litegraph/test/subgraph/SubgraphWidgetPromotion.test.ts
@@ -1,7 +1,8 @@
 import { describe, expect, it } from 'vitest'
 
 import type { ISlotType } from '@/lib/litegraph/src/interfaces'
-import { LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { TWidgetType } from '@/lib/litegraph/src/types/widgets'
 import { BaseWidget } from '@/lib/litegraph/src/widgets/BaseWidget'
 
diff --git a/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
index a83ef5e5f2..54ed77a00a 100644
--- a/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
+++ b/src/lib/litegraph/test/subgraph/fixtures/subgraphFixtures.ts
@@ -5,8 +5,9 @@
  * in their test files. Each fixture provides a clean, pre-configured subgraph
  * setup for different testing scenarios.
  */
-import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 
 import { test } from '../../testExtensions'
 import {
diff --git a/src/locales/CONTRIBUTING.md b/src/locales/CONTRIBUTING.md
index 99b149a083..3e05c10bce 100644
--- a/src/locales/CONTRIBUTING.md
+++ b/src/locales/CONTRIBUTING.md
@@ -24,7 +24,7 @@ Add your language code to the `outputLocales` array:
 ```javascript
 module.exports = defineConfig({
   // ... existing config
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es'], // Add your language here
+  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'tr'], // Add your language here
   reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
diff --git a/src/locales/README.md b/src/locales/README.md
index 50bec9eb98..047eed5656 100644
--- a/src/locales/README.md
+++ b/src/locales/README.md
@@ -11,6 +11,7 @@ Our project supports multiple languages using `vue-i18n`. This allows users arou
 - ko (한국어)
 - fr (Français)
 - es (Español)
+- tr (Türkçe)
 
 ## How to Add a New Language
 
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index e70301ce79..3e407d0f88 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -18,6 +18,7 @@
     "calculatingDimensions": "Calculating dimensions",
     "import": "Import",
     "loadAllFolders": "Load All Folders",
+    "logoAlt": "ComfyUI Logo",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
     "terminal": "Terminal",
@@ -406,6 +407,27 @@
     "migration": "Migration",
     "desktopSettings": "Desktop Settings",
     "chooseInstallationLocation": "Choose Installation Location",
+    "gpuPicker": {
+      "title": "Choose your hardware setup",
+      "recommended": "RECOMMENDED",
+      "nvidiaSubtitle": "NVIDIA CUDA",
+      "cpuSubtitle": "CPU Mode",
+      "manualSubtitle": "Manual Setup",
+      "appleMetalDescription": "Leverages your Mac's GPU for faster speed and a better overall experience",
+      "nvidiaDescription": "Use your NVIDIA GPU with CUDA acceleration for the best performance.",
+      "cpuDescription": "Use CPU mode for compatibility when GPU acceleration is not available",
+      "manualDescription": "Configure ComfyUI manually for advanced setups or unsupported hardware"
+    },
+    "locationPicker": {
+      "title": "Choose where to install ComfyUI",
+      "subtitle": "Pick a folder for ComfyUI's files. We'll also set up Python there automatically.",
+      "pathPlaceholder": "/Users/username/Documents/ComfyUI",
+      "migrationPathPlaceholder": "Select existing ComfyUI installation (optional)",
+      "migrateFromExisting": "Migrate from existing installation",
+      "migrateDescription": "Copy or link your existing models, custom nodes, and configurations from a previous ComfyUI installation.",
+      "chooseDownloadServers": "Choose download servers manually",
+      "downloadServersDescription": "Select specific mirror servers for downloading Python, PyPI packages, and PyTorch based on your location."
+    },
     "systemLocations": "System Locations",
     "failedToSelectDirectory": "Failed to select directory",
     "pathValidationFailed": "Failed to validate path",
@@ -490,18 +512,26 @@
     "metricsDisabled": "Metrics Disabled",
     "updateConsent": "You previously opted in to reporting crashes. We are now tracking event-based metrics to help identify bugs and improve the app. No personal identifiable information is collected."
   },
+  "desktopStart": {
+    "initialising": "Initialising..."
+  },
   "serverStart": {
+    "title": "Starting ComfyUI",
     "troubleshoot": "Troubleshoot",
     "reportIssue": "Report Issue",
     "openLogs": "Open Logs",
     "showTerminal": "Show Terminal",
     "copySelectionTooltip": "Copy selection",
     "copyAllTooltip": "Copy all",
+    "errorMessage": "Unable to start ComfyUI Desktop",
+    "installation": {
+      "title": "Installing ComfyUI"
+    },
     "process": {
       "initial-state": "Loading...",
       "python-setup": "Setting up Python Environment...",
       "starting-server": "Starting ComfyUI server...",
-      "ready": "Finishing...",
+      "ready": "Loading Human Interface",
       "error": "Unable to start ComfyUI Desktop"
     }
   },
@@ -1862,5 +1892,24 @@
     "showGroups": "Show Frames/Groups",
     "renderBypassState": "Render Bypass State",
     "renderErrorState": "Render Error State"
+  },
+  "assetBrowser": {
+    "assets": "Assets",
+    "browseAssets": "Browse Assets",
+    "noAssetsFound": "No assets found",
+    "tryAdjustingFilters": "Try adjusting your search or filters",
+    "loadingModels": "Loading {type}...",
+    "connectionError": "Please check your connection and try again",
+    "noModelsInFolder": "No {type} available in this folder",
+    "searchAssetsPlaceholder": "Search assets...",
+    "allModels": "All Models",
+    "unknown": "Unknown",
+    "fileFormats": "File formats",
+    "baseModels": "Base models",
+    "sortBy": "Sort by",
+    "sortAZ": "A-Z",
+    "sortZA": "Z-A",
+    "sortRecent": "Recent",
+    "sortPopular": "Popular"
   }
 }
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 09335e18a8..ae0ce02049 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -6,12 +6,15 @@
     "name": "Send anonymous usage metrics"
   },
   "Comfy-Desktop_UV_PypiInstallMirror": {
-    "name": "Pypi Install Mirror",
+    "name": "PyPI Install Mirror",
     "tooltip": "Default pip install mirror"
   },
   "Comfy-Desktop_UV_PythonInstallMirror": {
     "name": "Python Install Mirror",
-    "tooltip": "Managed Python installations are downloaded from the Astral python-build-standalone project. This variable can be set to a mirror URL to use a different source for Python installations. The provided URL will replace https://github.com/astral-sh/python-build-standalone/releases/download in, e.g., https://github.com/astral-sh/python-build-standalone/releases/download/20240713/cpython-3.12.4%2B20240713-aarch64-apple-darwin-install_only.tar.gz. Distributions can be read from a local directory by using the file:// URL scheme."
+    "tooltip": "Managed Python installations are downloaded from the Astral python-build-standalone project. To use a different source for Python installations, enter a mirror URL.",
+    "urlFormatTitle": "Mirror URL Format",
+    "urlDescription": "This is an example python download URL.\n\nThe mirror URL is the first half, including everything before the date (20250902):",
+    "fileUrlDescription": "To install from a file you downloaded earlier, you may use a file URL:"
   },
   "Comfy-Desktop_UV_TorchInstallMirror": {
     "name": "Torch Install Mirror",
@@ -421,4 +424,4 @@
   "pysssss_SnapToGrid": {
     "name": "Always snap to grid"
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/tr/commands.json b/src/locales/tr/commands.json
new file mode 100644
index 0000000000..36cc9592bd
--- /dev/null
+++ b/src/locales/tr/commands.json
@@ -0,0 +1,312 @@
+{
+  "Comfy-Desktop_CheckForUpdates": {
+    "label": "Güncellemeleri Kontrol Et"
+  },
+  "Comfy-Desktop_Folders_OpenCustomNodesFolder": {
+    "label": "Özel Düğümler Klasörünü Aç"
+  },
+  "Comfy-Desktop_Folders_OpenInputsFolder": {
+    "label": "Girişler Klasörünü Aç"
+  },
+  "Comfy-Desktop_Folders_OpenLogsFolder": {
+    "label": "Kayıtlar Klasörünü Aç"
+  },
+  "Comfy-Desktop_Folders_OpenModelConfig": {
+    "label": "extra_model_paths.yaml dosyasını aç"
+  },
+  "Comfy-Desktop_Folders_OpenModelsFolder": {
+    "label": "Modeller Klasörünü Aç"
+  },
+  "Comfy-Desktop_Folders_OpenOutputsFolder": {
+    "label": "Çıktılar Klasörünü Aç"
+  },
+  "Comfy-Desktop_OpenDevTools": {
+    "label": "Geliştirici Araçlarını Aç"
+  },
+  "Comfy-Desktop_OpenUserGuide": {
+    "label": "Masaüstü Kullanıcı Kılavuzu"
+  },
+  "Comfy-Desktop_Quit": {
+    "label": "Çık"
+  },
+  "Comfy-Desktop_Reinstall": {
+    "label": "Yeniden Yükle"
+  },
+  "Comfy-Desktop_Restart": {
+    "label": "Yeniden Başlat"
+  },
+  "Comfy_3DViewer_Open3DViewer": {
+    "label": "Seçili Düğüm için 3D Görüntüleyiciyi (Beta) Aç"
+  },
+  "Comfy_BrowseTemplates": {
+    "label": "Şablonlara Gözat"
+  },
+  "Comfy_Canvas_DeleteSelectedItems": {
+    "label": "Seçili Öğeleri Sil"
+  },
+  "Comfy_Canvas_FitView": {
+    "label": "Görünümü seçili düğümlere sığdır"
+  },
+  "Comfy_Canvas_Lock": {
+    "label": "Tuvali Kilitle"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Down": {
+    "label": "Seçili Düğümleri Aşağı Taşı"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Left": {
+    "label": "Seçili Düğümleri Sola Taşı"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Right": {
+    "label": "Seçili Düğümleri Sağa Taşı"
+  },
+  "Comfy_Canvas_MoveSelectedNodes_Up": {
+    "label": "Seçili Düğümleri Yukarı Taşı"
+  },
+  "Comfy_Canvas_ResetView": {
+    "label": "Görünümü Sıfırla"
+  },
+  "Comfy_Canvas_Resize": {
+    "label": "Seçili Düğümleri Yeniden Boyutlandır"
+  },
+  "Comfy_Canvas_ToggleLinkVisibility": {
+    "label": "Tuval Bağlantı Görünürlüğünü Aç/Kapat"
+  },
+  "Comfy_Canvas_ToggleLock": {
+    "label": "Tuval Kilidini Aç/Kapat"
+  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "Mini Haritayı Aç/Kapat"
+  },
+  "Comfy_Canvas_ToggleSelected_Pin": {
+    "label": "Seçili Öğeleri Sabitle/Sabitlemeyi Kaldır"
+  },
+  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
+    "label": "Seçili Düğümleri Atla/Geri Al"
+  },
+  "Comfy_Canvas_ToggleSelectedNodes_Collapse": {
+    "label": "Seçili Düğümleri Daralt/Genişlet"
+  },
+  "Comfy_Canvas_ToggleSelectedNodes_Mute": {
+    "label": "Seçili Düğümleri Sessize Al/Sesi Aç"
+  },
+  "Comfy_Canvas_ToggleSelectedNodes_Pin": {
+    "label": "Seçili Düğümleri Sabitle/Sabitlemeyi Kaldır"
+  },
+  "Comfy_Canvas_Unlock": {
+    "label": "Tuvalin Kilidini Aç"
+  },
+  "Comfy_Canvas_ZoomIn": {
+    "label": "Yakınlaştır"
+  },
+  "Comfy_Canvas_ZoomOut": {
+    "label": "Uzaklaştır"
+  },
+  "Comfy_ClearPendingTasks": {
+    "label": "Bekleyen Görevleri Temizle"
+  },
+  "Comfy_ClearWorkflow": {
+    "label": "İş Akışını Temizle"
+  },
+  "Comfy_ContactSupport": {
+    "label": "Destekle İletişime Geç"
+  },
+  "Comfy_Dev_ShowModelSelector": {
+    "label": "Model Seçiciyi Göster (Geliştirici)"
+  },
+  "Comfy_DuplicateWorkflow": {
+    "label": "Mevcut İş Akışını Çoğalt"
+  },
+  "Comfy_ExportWorkflow": {
+    "label": "İş Akışını Dışa Aktar"
+  },
+  "Comfy_ExportWorkflowAPI": {
+    "label": "İş Akışını Dışa Aktar (API Formatı)"
+  },
+  "Comfy_Feedback": {
+    "label": "Geri Bildirim Ver"
+  },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Seçimi Alt Grafiğe Dönüştür"
+  },
+  "Comfy_Graph_ExitSubgraph": {
+    "label": "Alt Grafikten Çık"
+  },
+  "Comfy_Graph_FitGroupToContents": {
+    "label": "Grubu İçeriğe Sığdır"
+  },
+  "Comfy_Graph_GroupSelectedNodes": {
+    "label": "Seçili Düğümleri Gruplandır"
+  },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Seçili Alt Grafiği Aç"
+  },
+  "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
+    "label": "Seçili düğümleri grup düğümüne dönüştür"
+  },
+  "Comfy_GroupNode_ManageGroupNodes": {
+    "label": "Grup düğümlerini yönet"
+  },
+  "Comfy_GroupNode_UngroupSelectedGroupNodes": {
+    "label": "Seçili grup düğümlerinin grubunu çöz"
+  },
+  "Comfy_Help_AboutComfyUI": {
+    "label": "ComfyUI Hakkında'yı Aç"
+  },
+  "Comfy_Help_OpenComfyOrgDiscord": {
+    "label": "Comfy-Org Discord'unu Aç"
+  },
+  "Comfy_Help_OpenComfyUIDocs": {
+    "label": "ComfyUI Belgelerini Aç"
+  },
+  "Comfy_Help_OpenComfyUIForum": {
+    "label": "ComfyUI Forumunu Aç"
+  },
+  "Comfy_Help_OpenComfyUIIssues": {
+    "label": "ComfyUI Sorunlarını Aç"
+  },
+  "Comfy_Interrupt": {
+    "label": "Kes"
+  },
+  "Comfy_LoadDefaultWorkflow": {
+    "label": "Varsayılan İş Akışını Yükle"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Özel Düğüm Yöneticisi"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Özel Düğümler (Eski)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Yönetici Menüsü (Eski)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Eksik Özel Düğümleri Yükle"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Özel Düğüm Güncellemelerini Kontrol Et"
+  },
+  "Comfy_Manager_ToggleManagerProgressDialog": {
+    "label": "Özel Düğüm Yöneticisi İlerleme Çubuğunu Aç/Kapat"
+  },
+  "Comfy_MaskEditor_BrushSize_Decrease": {
+    "label": "Maske Düzenleyicide Fırça Boyutunu Azalt"
+  },
+  "Comfy_MaskEditor_BrushSize_Increase": {
+    "label": "Maske Düzenleyicide Fırça Boyutunu Artır"
+  },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Seçili Düğüm için Maske Düzenleyiciyi Aç"
+  },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Modelleri Boşalt"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Modelleri ve Yürütme Önbelleğini Boşalt"
+  },
+  "Comfy_NewBlankWorkflow": {
+    "label": "Yeni Boş İş Akışı"
+  },
+  "Comfy_OpenClipspace": {
+    "label": "Clipspace"
+  },
+  "Comfy_OpenManagerDialog": {
+    "label": "Yönetici"
+  },
+  "Comfy_OpenWorkflow": {
+    "label": "İş Akışını Aç"
+  },
+  "Comfy_PublishSubgraph": {
+    "label": "Alt Grafiği Yayınla"
+  },
+  "Comfy_QueuePrompt": {
+    "label": "İstemi Kuyruğa Al"
+  },
+  "Comfy_QueuePromptFront": {
+    "label": "İstemi Kuyruğa Al (Ön)"
+  },
+  "Comfy_QueueSelectedOutputNodes": {
+    "label": "Seçili Çıktı Düğümlerini Kuyruğa Al"
+  },
+  "Comfy_Redo": {
+    "label": "Yinele"
+  },
+  "Comfy_RefreshNodeDefinitions": {
+    "label": "Düğüm Tanımlarını Yenile"
+  },
+  "Comfy_SaveWorkflow": {
+    "label": "İş Akışını Kaydet"
+  },
+  "Comfy_SaveWorkflowAs": {
+    "label": "İş Akışını Farklı Kaydet"
+  },
+  "Comfy_ShowSettingsDialog": {
+    "label": "Ayarlar İletişim Kutusunu Göster"
+  },
+  "Comfy_ToggleCanvasInfo": {
+    "label": "Tuval Performansı"
+  },
+  "Comfy_ToggleHelpCenter": {
+    "label": "Yardım Merkezi"
+  },
+  "Comfy_ToggleTheme": {
+    "label": "Temayı Değiştir (Karanlık/Açık)"
+  },
+  "Comfy_Undo": {
+    "label": "Geri Al"
+  },
+  "Comfy_User_OpenSignInDialog": {
+    "label": "Giriş Yapma İletişim Kutusunu Aç"
+  },
+  "Comfy_User_SignOut": {
+    "label": "Çıkış Yap"
+  },
+  "Workspace_CloseWorkflow": {
+    "label": "Mevcut İş Akışını Kapat"
+  },
+  "Workspace_NextOpenedWorkflow": {
+    "label": "Sonraki Açılan İş Akışı"
+  },
+  "Workspace_PreviousOpenedWorkflow": {
+    "label": "Önceki Açılan İş Akışı"
+  },
+  "Workspace_SearchBox_Toggle": {
+    "label": "Arama Kutusunu Aç/Kapat"
+  },
+  "Workspace_ToggleBottomPanel": {
+    "label": "Alt Paneli Aç/Kapat"
+  },
+  "Workspace_ToggleBottomPanel_Shortcuts": {
+    "label": "Tuş Atamaları İletişim Kutusunu Göster"
+  },
+  "Workspace_ToggleBottomPanelTab_command-terminal": {
+    "label": "Terminal Alt Panelini Aç/Kapat"
+  },
+  "Workspace_ToggleBottomPanelTab_logs-terminal": {
+    "label": "Kayıtlar Alt Panelini Aç/Kapat"
+  },
+  "Workspace_ToggleBottomPanelTab_shortcuts-essentials": {
+    "label": "Temel Alt Paneli Aç/Kapat"
+  },
+  "Workspace_ToggleBottomPanelTab_shortcuts-view-controls": {
+    "label": "Görünüm Kontrolleri Alt Panelini Aç/Kapat"
+  },
+  "Workspace_ToggleFocusMode": {
+    "label": "Odak Modunu Aç/Kapat"
+  },
+  "Workspace_ToggleSidebarTab_model-library": {
+    "label": "Model Kütüphanesi Kenar Çubuğunu Aç/Kapat",
+    "tooltip": "Model Kütüphanesi"
+  },
+  "Workspace_ToggleSidebarTab_node-library": {
+    "label": "Düğüm Kütüphanesi Kenar Çubuğunu Aç/Kapat",
+    "tooltip": "Düğüm Kütüphanesi"
+  },
+  "Workspace_ToggleSidebarTab_queue": {
+    "label": "Kuyruk Kenar Çubuğunu Aç/Kapat",
+    "tooltip": "Kuyruk"
+  },
+  "Workspace_ToggleSidebarTab_workflows": {
+    "label": "İş Akışları Kenar Çubuğunu Aç/Kapat",
+    "tooltip": "İş Akışları"
+  }
+}
\ No newline at end of file
diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json
new file mode 100644
index 0000000000..bc1b31f5a2
--- /dev/null
+++ b/src/locales/tr/main.json
@@ -0,0 +1,1800 @@
+{
+  "g": {
+    "user": "Kullanıcı",
+    "currentUser": "Mevcut Kullanıcı",
+    "empty": "Boş",
+    "noWorkflowsFound": "İş akışı bulunamadı.",
+    "comingSoon": "Çok Yakında",
+    "download": "İndir",
+    "import": "İçe Aktar",
+    "loadAllFolders": "Tüm Klasörleri Yükle",
+    "refresh": "Yenile",
+    "terminal": "Terminal",
+    "logs": "Kayıtlar",
+    "videoFailedToLoad": "Video yüklenemedi",
+    "audioFailedToLoad": "Ses yüklenemedi",
+    "extensionName": "Uzantı Adı",
+    "reloadToApplyChanges": "Değişiklikleri uygulamak için yeniden yükleyin",
+    "insert": "Ekle",
+    "systemInfo": "Sistem Bilgisi",
+    "devices": "Cihazlar",
+    "about": "Hakkında",
+    "add": "Ekle",
+    "confirm": "Onayla",
+    "confirmed": "Onaylandı",
+    "reset": "Sıfırla",
+    "resetAll": "Tümünü Sıfırla",
+    "clearFilters": "Filtreleri Temizle",
+    "resetAllKeybindingsTooltip": "Tüm tuş atamalarını varsayılana sıfırla",
+    "customizeFolder": "Klasörü Özelleştir",
+    "icon": "Simge",
+    "color": "Renk",
+    "error": "Hata",
+    "help": "Yardım",
+    "loading": "Yükleniyor",
+    "loadingPanel": "{panel} paneli yükleniyor...",
+    "preview": "ÖNİZLEME",
+    "addNodeFilterCondition": "Düğüm filtresi koşulu ekle",
+    "architecture": "Mimari",
+    "author": "Yazar",
+    "usageHint": "Kullanım ipucu",
+    "triggerPhrase": "Tetikleyici ifade",
+    "findIssues": "Sorunları Bul",
+    "reportIssue": "Rapor Gönder",
+    "reportIssueTooltip": "Hata raporunu Comfy Org'a gönderin",
+    "reportSent": "Rapor Gönderildi",
+    "copyToClipboard": "Panoya Kopyala",
+    "openNewIssue": "Yeni Sorun Aç",
+    "showReport": "Raporu Göster",
+    "imageFailedToLoad": "Görsel yüklenemedi",
+    "reconnecting": "Yeniden bağlanılıyor",
+    "reconnected": "Yeniden bağlandı",
+    "delete": "Sil",
+    "rename": "Yeniden Adlandır",
+    "save": "Kaydet",
+    "saving": "Kaydediliyor",
+    "no": "Hayır",
+    "cancel": "İptal",
+    "close": "Kapat",
+    "dropYourFileOr": "Dosyanızı buraya sürükleyin veya",
+    "back": "Geri",
+    "next": "İleri",
+    "install": "Yükle",
+    "installing": "Yükleniyor",
+    "overwrite": "Üzerine Yaz",
+    "customize": "Özelleştir",
+    "experimental": "BETA",
+    "deprecated": "ESKİ",
+    "loadWorkflow": "İş Akışını Yükle",
+    "goToNode": "Düğüme Git",
+    "setAsBackground": "Arka Plan Olarak Ayarla",
+    "customBackground": "Özel Arka Plan",
+    "settings": "Ayarlar",
+    "searchWorkflows": "İş Akışlarını Ara",
+    "searchSettings": "Ayarları Ara",
+    "searchNodes": "Düğümleri Ara",
+    "searchModels": "Modelleri Ara",
+    "searchKeybindings": "Tuş Atamalarını Ara",
+    "searchExtensions": "Uzantıları Ara",
+    "noResultsFound": "Sonuç Bulunamadı",
+    "searchFailedMessage": "Aramanızla eşleşen herhangi bir ayar bulamadık. Arama terimlerinizi değiştirmeyi deneyin.",
+    "noTasksFound": "Görev Bulunamadı",
+    "noTasksFoundMessage": "Kuyrukta görev yok.",
+    "newFolder": "Yeni Klasör",
+    "enableAll": "Tümünü Etkinleştir",
+    "disableAll": "Tümünü Devre Dışı Bırak",
+    "command": "Komut",
+    "keybinding": "Tuş Ataması",
+    "upload": "Yükle",
+    "export": "Dışa Aktar",
+    "workflow": "İş Akışı",
+    "success": "Başarılı",
+    "ok": "Tamam",
+    "feedback": "Geri Bildirim",
+    "continue": "Devam Et",
+    "control_after_generate": "oluşturduktan sonra kontrol et",
+    "control_before_generate": "oluşturmadan önce kontrol et",
+    "choose_file_to_upload": "yüklenecek dosyayı seçin",
+    "capture": "yakala",
+    "nodes": "Düğümler",
+    "community": "Topluluk",
+    "all": "Tümü",
+    "versionMismatchWarning": "Sürüm Uyumluluk Uyarısı",
+    "versionMismatchWarningMessage": "{warning}: {detail} Güncelleme talimatları için https://docs.comfy.org/installation/update_comfyui#common-update-issues adresini ziyaret edin.",
+    "frontendOutdated": "Ön uç sürümü {frontendVersion} güncel değil. Arka uç {requiredVersion} veya daha yüksek bir sürüm gerektiriyor.",
+    "frontendNewer": "Ön uç sürümü {frontendVersion}, arka uç sürümü {backendVersion} ile uyumlu olmayabilir.",
+    "updateFrontend": "Ön Ucu Güncelle",
+    "dismiss": "Kapat",
+    "update": "Güncelle",
+    "updated": "Güncellendi",
+    "resultsCount": "{count} Sonuç Bulundu",
+    "status": "Durum",
+    "description": "Açıklama",
+    "warning": "Uyarı",
+    "name": "Ad",
+    "category": "Kategori",
+    "sort": "Sırala",
+    "source": "Kaynak",
+    "filter": "Filtrele",
+    "apply": "Uygula",
+    "enabled": "Etkin",
+    "installed": "Yüklendi",
+    "restart": "Yeniden Başlat",
+    "missing": "Eksik",
+    "inProgress": "Devam ediyor",
+    "completed": "Tamamlandı",
+    "interrupted": "Kesintiye uğradı",
+    "enabling": "{id} etkinleştiriliyor",
+    "disabling": "{id} devre dışı bırakılıyor",
+    "updating": "{id} güncelleniyor",
+    "migrate": "Taşı",
+    "updateAvailable": "Güncelleme Mevcut",
+    "login": "Giriş Yap",
+    "learnMore": "Daha fazla bilgi edinin",
+    "amount": "Miktar",
+    "unknownError": "Bilinmeyen hata",
+    "title": "Başlık",
+    "edit": "Düzenle",
+    "copy": "Kopyala",
+    "imageUrl": "Görsel URL'si",
+    "clear": "Temizle",
+    "clearAll": "Tümünü temizle",
+    "copyURL": "URL'yi Kopyala",
+    "releaseTitle": "{package} {version} Sürümü",
+    "itemSelected": "{selectedCount} öğe seçildi",
+    "itemsSelected": "{selectedCount} öğe seçildi",
+    "progressCountOf": "/",
+    "keybindingAlreadyExists": "Tuş ataması zaten mevcut:",
+    "commandProhibited": "{command} komutu yasak. Daha fazla bilgi için bir yöneticiyle iletişime geçin.",
+    "startRecording": "Kaydı Başlat",
+    "stopRecording": "Kaydı Durdur",
+    "micPermissionDenied": "Mikrofon izni reddedildi",
+    "noAudioRecorded": "Ses kaydedilmedi",
+    "nodesRunning": "düğüm çalışıyor",
+    "duplicate": "Çoğalt",
+    "moreWorkflows": "Daha fazla iş akışı",
+    "nodeRenderError": "Düğüm Oluşturma Hatası",
+    "nodeContentError": "Düğüm İçerik Hatası",
+    "nodeHeaderError": "Düğüm Başlık Hatası",
+    "nodeSlotsError": "Düğüm Yuva Hatası",
+    "nodeWidgetsError": "Düğüm Widget Hatası"
+  },
+  "manager": {
+    "title": "Özel Düğüm Yöneticisi",
+    "legacyMenuNotAvailable": "Eski yönetici menüsü mevcut değil, yeni yönetici menüsüne varsayılan olarak geçiliyor.",
+    "legacyManagerUI": "Eski Arayüzü Kullan",
+    "legacyManagerUIDescription": "Eski Yönetici Arayüzünü kullanmak için ComfyUI'yi --enable-manager-legacy-ui ile başlatın",
+    "failed": "Başarısız",
+    "failedToInstall": "Yüklenemedi",
+    "installError": "Yükleme Hatası",
+    "importFailedGenericError": "Paket içe aktarılamadı. Daha fazla ayrıntı için konsolu kontrol edin.",
+    "noNodesFound": "Düğüm bulunamadı",
+    "noNodesFoundDescription": "Paketin düğümleri ya ayrıştırılamadı ya da paket yalnızca bir ön uç uzantısı ve herhangi bir düğüme sahip değil.",
+    "installationQueue": "Yükleme Kuyruğu",
+    "changingVersion": "Sürüm {from} sürümünden {to} sürümüne değiştiriliyor",
+    "dependencies": "Bağımlılıklar",
+    "inWorkflow": "İş Akışında",
+    "infoPanelEmpty": "Bilgileri görmek için bir öğeye tıklayın",
+    "applyChanges": "Değişiklikleri Uygula",
+    "restartToApplyChanges": "Değişiklikleri uygulamak için lütfen ComfyUI'yi yeniden başlatın",
+    "clickToFinishSetup": "Kurulumu tamamlamak için tıklayın",
+    "toFinishSetup": "kurulumu tamamlamak için",
+    "restartingBackend": "Değişiklikleri uygulamak için arka uç yeniden başlatılıyor...",
+    "extensionsSuccessfullyInstalled": "Uzantı(lar) başarıyla yüklendi ve kullanıma hazır!",
+    "installingDependencies": "Bağımlılıklar yükleniyor...",
+    "loadingVersions": "Sürümler yükleniyor...",
+    "selectVersion": "Sürüm Seç",
+    "downloads": "İndirmeler",
+    "repository": "Depo",
+    "uninstall": "Kaldır",
+    "uninstalling": "{id} kaldırılıyor",
+    "update": "Güncelle",
+    "uninstallSelected": "Seçilenleri Kaldır",
+    "updateSelected": "Seçilenleri Güncelle",
+    "updateAll": "Tümünü Güncelle",
+    "updatingAllPacks": "Tüm paketler güncelleniyor",
+    "license": "Lisans",
+    "nightlyVersion": "Gecelik",
+    "latestVersion": "En Son",
+    "createdBy": "Oluşturan",
+    "totalNodes": "Toplam Düğüm",
+    "discoverCommunityContent": "Topluluk tarafından yapılmış Düğüm Paketlerini, Uzantıları ve daha fazlasını keşfedin...",
+    "errorConnecting": "Comfy Düğüm Kayıt Defteri'ne bağlanırken hata oluştu.",
+    "noResultsFound": "Aramanızla eşleşen sonuç bulunamadı.",
+    "tryDifferentSearch": "Lütfen farklı bir arama sorgusu deneyin.",
+    "tryAgainLater": "Lütfen daha sonra tekrar deneyin.",
+    "gettingInfo": "Bilgi alınıyor...",
+    "nodePack": "Düğüm Paketi",
+    "searchPlaceholder": "Ara",
+    "version": "Sürüm",
+    "lastUpdated": "Son Güncelleme",
+    "noDescription": "Açıklama yok",
+    "installSelected": "Seçilenleri Yükle",
+    "installAllMissingNodes": "Tüm Eksik Düğümleri Yükle",
+    "packsSelected": "paket seçildi",
+    "mixedSelectionMessage": "Karışık seçim üzerinde toplu işlem yapılamaz",
+    "notAvailable": "Mevcut Değil",
+    "status": {
+      "active": "Aktif",
+      "pending": "Beklemede",
+      "flagged": "İşaretlendi",
+      "deleted": "Silindi",
+      "banned": "Yasaklandı",
+      "unknown": "Bilinmiyor",
+      "conflicting": "Çakışan",
+      "importFailed": "Yükleme Hatası"
+    },
+    "sort": {
+      "downloads": "En Popüler",
+      "publisher": "Yayıncı",
+      "created": "En Yeni",
+      "updated": "Son Güncellenen"
+    },
+    "filter": {
+      "nodePack": "Düğüm Paketi",
+      "enabled": "Etkin",
+      "disabled": "Devre Dışı"
+    },
+    "conflicts": {
+      "title": "Düğüm Paketi Sorunları Tespit Edildi!",
+      "description": "Bazı uzantılarınız ile ComfyUI'nin yeni sürümü arasında çakışmalar tespit ettik. Güncelleyerek bu uzantılara dayanan iş akışlarını bozma riskiyle karşı karşıya kalırsınız.",
+      "info": "Güncellemeye devam ederseniz, çakışan uzantılar otomatik olarak devre dışı bırakılacaktır. Bunları istediğiniz zaman ComfyUI Yöneticisi'nde inceleyebilir ve yönetebilirsiniz.",
+      "extensionAtRisk": "Risk Altındaki Uzantı",
+      "conflicts": "Çakışmalar",
+      "importFailedExtensions": "İçe Aktarılamayan Uzantılar",
+      "conflictInfoTitle": "Bu neden oluyor?",
+      "installAnyway": "Yine de Yükle",
+      "enableAnyway": "Yine de Etkinleştir",
+      "understood": "Anlaşıldı",
+      "warningBanner": {
+        "title": "Mevcut kurulumunuzla uyumsuzluk nedeniyle bazı uzantılar devre dışı bırakıldı",
+        "message": "Bu uzantılar, mevcut kurulumunuzdan farklı sistem paketi sürümleri gerektirir. Bunları yüklemek, çekirdek bağımlılıkları geçersiz kılabilir ve diğer uzantıları veya iş akışlarını etkileyebilir.",
+        "button": "Daha Fazla Bilgi Edinin..."
+      },
+      "conflictMessages": {
+        "comfyui_version": "ComfyUI sürüm uyuşmazlığı (mevcut: {current}, gerekli: {required})",
+        "frontend_version": "Ön uç sürüm uyuşmazlığı (mevcut: {current}, gerekli: {required})",
+        "os": "İşletim sistemi desteklenmiyor (mevcut: {current}, gerekli: {required})",
+        "accelerator": "GPU/Hızlandırıcı desteklenmiyor (mevcut: {current}, gerekli: {required})",
+        "generic": "Uyumluluk sorunu (mevcut: {current}, gerekli: {required})",
+        "banned": "Bu paket güvenlik nedenleriyle yasaklandı",
+        "pending": "Güvenlik doğrulaması bekleniyor - uyumluluk doğrulanamıyor",
+        "import_failed": "İçe Aktarılamadı"
+      },
+      "warningTooltip": "Bu paket, mevcut ortamınızla uyumluluk sorunları yaşayabilir"
+    }
+  },
+  "issueReport": {
+    "helpFix": "Bunu Düzeltmeye Yardım Et"
+  },
+  "color": {
+    "noColor": "Renk Yok",
+    "default": "Varsayılan",
+    "blue": "Mavi",
+    "green": "Yeşil",
+    "red": "Kırmızı",
+    "pink": "Pembe",
+    "yellow": "Sarı",
+    "brown": "Kahverengi",
+    "pale_blue": "Soluk Mavi",
+    "cyan": "Camgöbeği",
+    "purple": "Mor",
+    "black": "Siyah",
+    "custom": "Özel"
+  },
+  "contextMenu": {
+    "Inputs": "Girdiler",
+    "Outputs": "Çıktılar",
+    "Properties": "Özellikler",
+    "Properties Panel": "Özellikler Paneli",
+    "Title": "Başlık",
+    "Mode": "Mod",
+    "Resize": "Yeniden Boyutlandır",
+    "Collapse": "Daralt",
+    "Expand": "Genişlet",
+    "Pin": "Sabitle",
+    "Unpin": "Sabitlemeyi Kaldır",
+    "Clone": "Klonla",
+    "Remove": "Kaldır",
+    "Colors": "Renkler",
+    "Shapes": "Şekiller",
+    "Bypass": "Atla",
+    "Copy (Clipspace)": "Kopyala (Clipspace)",
+    "Add Node": "Düğüm Ekle",
+    "Add Group": "Grup Ekle",
+    "Convert to Group Node": "Grup Düğümüne Dönüştür",
+    "Manage Group Nodes": "Grup Düğümlerini Yönet",
+    "Add Group For Selected Nodes": "Seçili Düğümler İçin Grup Ekle",
+    "Save Selected as Template": "Seçileni Şablon Olarak Kaydet",
+    "Node Templates": "Düğüm Şablonları",
+    "Manage": "Yönet",
+    "Search": "Ara"
+  },
+  "icon": {
+    "bookmark": "Yer İmi",
+    "folder": "Klasör",
+    "star": "Yıldız",
+    "heart": "Kalp",
+    "file": "Dosya",
+    "inbox": "Gelen Kutusu",
+    "box": "Kutu",
+    "briefcase": "Evrak Çantası",
+    "exclamation-triangle": "Uyarı"
+  },
+  "welcome": {
+    "title": "ComfyUI'ye Hoş Geldiniz",
+    "getStarted": "Başlayın"
+  },
+  "userSelect": {
+    "newUser": "Yeni kullanıcı",
+    "enterUsername": "Bir kullanıcı adı girin",
+    "existingUser": "Mevcut kullanıcı",
+    "selectUser": "Bir kullanıcı seçin",
+    "next": "İleri"
+  },
+  "notSupported": {
+    "title": "Cihazınız desteklenmiyor",
+    "message": "Yalnızca aşağıdaki cihazlar desteklenmektedir:",
+    "learnMore": "Daha Fazla Bilgi Edinin",
+    "reportIssue": "Sorun Bildir",
+    "supportedDevices": {
+      "macos": "MacOS (M1 veya üstü)",
+      "windows": "Windows (CUDA destekli Nvidia GPU)"
+    },
+    "continue": "Devam Et",
+    "continueTooltip": "Cihazımın desteklendiğinden eminim"
+  },
+  "downloadGit": {
+    "title": "Git'i indir",
+    "message": "Git bulunamadı. Normal çalışma için çalışan bir git kopyası gereklidir.",
+    "instructions": "Lütfen işletim sisteminiz için en son sürümü indirip yükleyin. Aşağıdaki Git'i İndir düğmesi git-scm.com indirme sayfasını açar.",
+    "warning": "Git'in kurulu olmasına ihtiyacınız olmadığından veya bir hata olduğundan eminseniz, bu kontrolü atlamak için Atla'yı tıklayabilirsiniz. ComfyUI'yi çalışan bir git kopyası olmadan çalıştırmak şu anda desteklenmemektedir.",
+    "gitWebsite": "Git'i indir",
+    "skip": "Atla"
+  },
+  "install": {
+    "installLocation": "Kurulum Yeri",
+    "migration": "Taşıma",
+    "desktopSettings": "Masaüstü Ayarları",
+    "chooseInstallationLocation": "Kurulum Konumunu Seçin",
+    "systemLocations": "Sistem Konumları",
+    "failedToSelectDirectory": "Dizin seçilemedi",
+    "pathValidationFailed": "Yol doğrulanamadı",
+    "pathExists": "Dizin zaten mevcut - lütfen tüm verileri yedeklediğinizden emin olun",
+    "cannotWrite": "Seçilen yola yazılamıyor",
+    "insufficientFreeSpace": "Yetersiz alan - minimum boş alan",
+    "isOneDrive": "OneDrive desteklenmiyor. Lütfen ComfyUI'yi başka bir konuma yükleyin.",
+    "nonDefaultDrive": "Lütfen ComfyUI'yi sistem sürücünüze (ör. C:\\) yükleyin. Farklı dosya sistemlerine sahip sürücüler öngörülemeyen sorunlara neden olabilir. Modeller ve diğer dosyalar kurulumdan sonra diğer sürücülerde saklanabilir.",
+    "parentMissing": "Yol mevcut değil - önce içeren dizini oluşturun",
+    "unhandledError": "Bilinmeyen hata",
+    "installLocationDescription": "ComfyUI'nin kullanıcı verileri için dizini seçin. Seçilen konuma bir python ortamı yüklenecektir.",
+    "installLocationTooltip": "ComfyUI'nin kullanıcı veri dizini. Saklar:\n- Python Ortamı\n- Modeller\n- Özel düğümler\n",
+    "appDataLocationTooltip": "ComfyUI'nin uygulama veri dizini. Saklar:\n- Kayıtlar\n- Sunucu yapılandırmaları",
+    "appPathLocationTooltip": "ComfyUI'nin uygulama varlık dizini. ComfyUI kodunu ve varlıklarını saklar",
+    "migrateFromExistingInstallation": "Mevcut Kurulumdan Taşı",
+    "migrationSourcePathDescription": "Mevcut bir ComfyUI kurulumunuz varsa, mevcut kullanıcı dosyalarınızı ve modellerinizi yeni kuruluma kopyalayabilir/bağlayabiliriz. Mevcut ComfyUI kurulumunuz etkilenmeyecektir.",
+    "selectItemsToMigrate": "Taşınacak Öğeleri Seçin",
+    "migrationOptional": "Taşıma isteğe bağlıdır. Mevcut bir kurulumunuz yoksa bu adımı atlayabilirsiniz.",
+    "desktopAppSettings": "Masaüstü Uygulama Ayarları",
+    "desktopAppSettingsDescription": "ComfyUI'nin masaüstünüzde nasıl davranacağını yapılandırın. Bu ayarları daha sonra değiştirebilirsiniz.",
+    "gpu": "GPU",
+    "gpuSelection": {
+      "selectGpu": "GPU Seç",
+      "selectGpuDescription": "Sahip olduğunuz GPU türünü seçin",
+      "cpuMode": "CPU Modu",
+      "cpuModeDescription": "CPU modu yalnızca geliştiriciler ve nadir uç durumlar için tasarlanmıştır.",
+      "cpuModeDescription2": "Buna kesinlikle ihtiyacınız olduğundan emin değilseniz, lütfen bu kutuyu yoksayın ve yukarıdan GPU'nuzu seçin.",
+      "enableCpuMode": "CPU Modunu Etkinleştir",
+      "nvidiaDescription": "NVIDIA cihazları, pytorch CUDA yapıları kullanılarak doğrudan desteklenir.",
+      "mpsDescription": "Apple Metal Performans Gölgelendiricileri, pytorch gecelik kullanılarak desteklenir.",
+      "customSkipsPython": "Bu seçenek normal python kurulumunu atlar.",
+      "customComfyNeedsPython": "Python kurulana kadar ComfyUI çalışmayacaktır",
+      "customManualVenv": "Python venv'i manuel olarak yapılandırın",
+      "customInstallRequirements": "Tüm gereksinimleri ve bağımlılıkları yükleyin (ör. özel torch)",
+      "customMayNotWork": "Bu tamamen desteklenmemektedir ve basitçe çalışmayabilir"
+    },
+    "manualConfiguration": {
+      "title": "Manuel Yapılandırma",
+      "requirements": "Gereksinimler",
+      "createVenv": "Aşağıdaki dizinde bir sanal ortam oluşturmanız gerekecektir",
+      "virtualEnvironmentPath": "Sanal ortam yolu",
+      "restartWhenFinished": "Sanal ortamı yapılandırmayı bitirdiğinizde, lütfen ComfyUI'yi yeniden başlatın."
+    },
+    "settings": {
+      "autoUpdate": "Otomatik Güncellemeler",
+      "allowMetrics": "Kullanım Metrikleri",
+      "errorUpdatingConsent": "Onay Güncellenirken Hata Oluştu",
+      "errorUpdatingConsentDetail": "Metrik onay ayarları güncellenemedi",
+      "autoUpdateDescription": "Güncellemeler mevcut olduğunda otomatik olarak indirin. Güncellemeler yüklenmeden önce size bildirilecektir.",
+      "allowMetricsDescription": "Anonim kullanım metrikleri göndererek ComfyUI'yi geliştirmeye yardımcı olun. Kişisel bilgi veya iş akışı içeriği toplanmayacaktır.",
+      "learnMoreAboutData": "Veri toplama hakkında daha fazla bilgi edinin",
+      "dataCollectionDialog": {
+        "title": "Veri Toplama Hakkında",
+        "whatWeCollect": "Ne topluyoruz:",
+        "whatWeDoNotCollect": "Ne toplamıyoruz:",
+        "collect": {
+          "errorReports": "Hata mesajı ve yığın izi",
+          "systemInfo": "Donanım, işletim sistemi türü ve uygulama sürümü",
+          "userJourneyEvents": "Kullanıcı yolculuğu olayları"
+        },
+        "doNotCollect": {
+          "personalInformation": "Kişisel bilgi",
+          "fileSystemInformation": "Dosya sistemi bilgileri",
+          "workflowContents": "İş akışı içerikleri",
+          "customNodeConfigurations": "Özel düğüm yapılandırmaları"
+        },
+        "viewFullPolicy": "Tam politikayı görüntüle"
+      },
+      "pythonMirrorPlaceholder": "Python yansıtma URL'sini girin",
+      "pypiMirrorPlaceholder": "PyPI yansıtma URL'sini girin",
+      "checkingMirrors": "Python yansıtmalarına ağ erişimi kontrol ediliyor...",
+      "mirrorsReachable": "Python yansıtmalarına ağ erişimi iyi",
+      "mirrorsUnreachable": "Bazı python yansıtmalarına ağ erişimi kötü",
+      "mirrorSettings": "Yansıtma Ayarları"
+    },
+    "customNodes": "Özel Düğümler",
+    "customNodesDescription": "Mevcut ComfyUI kurulumlarından özel düğümleri yeniden yükleyin.",
+    "helpImprove": "Lütfen ComfyUI'yi geliştirmeye yardımcı olun",
+    "moreInfo": "Daha fazla bilgi için lütfen okuyun",
+    "privacyPolicy": "gizlilik politikası",
+    "metricsEnabled": "Metrikler Etkin",
+    "metricsDisabled": "Metrikler Devre Dışı",
+    "updateConsent": "Daha önce çökmeleri bildirmeyi seçmiştiniz. Hataları belirlemeye ve uygulamayı iyileştirmeye yardımcı olmak için şimdi olay tabanlı metrikleri izliyoruz. Kişisel olarak tanımlanabilir hiçbir bilgi toplanmamaktadır."
+  },
+  "serverStart": {
+    "troubleshoot": "Sorun Giderme",
+    "reportIssue": "Sorun Bildir",
+    "openLogs": "Kayıtları Aç",
+    "showTerminal": "Terminali Göster",
+    "process": {
+      "initial-state": "Yükleniyor...",
+      "python-setup": "Python Ortamı Kuruluyor...",
+      "starting-server": "ComfyUI sunucusu başlatılıyor...",
+      "ready": "Bitiriliyor...",
+      "error": "ComfyUI Desktop başlatılamıyor"
+    }
+  },
+  "serverConfig": {
+    "modifiedConfigs": "Aşağıdaki sunucu yapılandırmalarını değiştirdiniz. Değişiklikleri uygulamak için yeniden başlatın.",
+    "revertChanges": "Değişiklikleri Geri Al",
+    "restart": "Yeniden Başlat"
+  },
+  "sideToolbar": {
+    "themeToggle": "Temayı Değiştir",
+    "helpCenter": "Yardım Merkezi",
+    "logout": "Çıkış Yap",
+    "queue": "Kuyruk",
+    "nodeLibrary": "Düğüm Kütüphanesi",
+    "workflows": "İş Akışları",
+    "templates": "Şablonlar",
+    "labels": {
+      "queue": "Kuyruk",
+      "nodes": "Düğümler",
+      "models": "Modeller",
+      "workflows": "İş Akışları",
+      "templates": "Şablonlar"
+    },
+    "browseTemplates": "Örnek şablonlara göz atın",
+    "openWorkflow": "Yerel dosya sisteminde iş akışını aç",
+    "newBlankWorkflow": "Yeni bir boş iş akışı oluştur",
+    "nodeLibraryTab": {
+      "groupBy": "Gruplandır",
+      "sortMode": "Sıralama Modu",
+      "resetView": "Görünümü Varsayılana Sıfırla",
+      "groupStrategies": {
+        "category": "Kategori",
+        "categoryDesc": "Düğüm kategorisine göre gruplandır",
+        "module": "Modül",
+        "moduleDesc": "Modül kaynağına göre gruplandır",
+        "source": "Kaynak",
+        "sourceDesc": "Kaynak türüne göre gruplandır (Çekirdek, Özel, API)"
+      },
+      "sortBy": {
+        "original": "Orijinal",
+        "originalDesc": "Orijinal sırayı koru",
+        "alphabetical": "Alfabetik",
+        "alphabeticalDesc": "Gruplar içinde alfabetik olarak sırala"
+      }
+    },
+    "modelLibrary": "Model Kütüphanesi",
+    "downloads": "İndirmeler",
+    "queueTab": {
+      "showFlatList": "Düz Listeyi Göster",
+      "backToAllTasks": "Tüm Görevlere Geri Dön",
+      "containImagePreview": "Resim Önizlemesini Doldur",
+      "coverImagePreview": "Resim Önizlemesine Sığdır",
+      "clearPendingTasks": "Bekleyen Görevleri Temizle",
+      "filter": "Çıktıları Filtrele",
+      "filters": {
+        "hideCached": "Önbelleğe Alınanları Gizle",
+        "hideCanceled": "İptal Edilenleri Gizle"
+      }
+    },
+    "workflowTab": {
+      "confirmDeleteTitle": "İş akışı silinsin mi?",
+      "confirmDelete": "Bu iş akışını silmek istediğinizden emin misiniz?",
+      "deleted": "İş akışı silindi",
+      "deleteFailedTitle": "Silme başarısız oldu",
+      "deleteFailed": "İş akışını silme denemesi başarısız oldu.",
+      "dirtyCloseTitle": "Değişiklikler Kaydedilsin mi?",
+      "dirtyClose": "Aşağıdaki dosyalar değiştirildi. Kapatmadan önce bunları kaydetmek ister misiniz?",
+      "dirtyCloseHint": "Sormadan kapatmak için Shift tuşunu basılı tutun",
+      "confirmOverwriteTitle": "Mevcut dosyanın üzerine yazılsın mı?",
+      "confirmOverwrite": "Aşağıdaki dosya zaten mevcut. Üzerine yazmak ister misiniz?",
+      "workflowTreeType": {
+        "browse": "Gözat",
+        "bookmarks": "Yer İmleri",
+        "open": "Açık"
+      }
+    }
+  },
+  "helpCenter": {
+    "docs": "Belgeler",
+    "github": "Github",
+    "helpFeedback": "Yardım ve Geri Bildirim",
+    "managerExtension": "Yönetici Uzantısı",
+    "more": "Daha Fazla...",
+    "whatsNew": "Yenilikler Neler?",
+    "clickToLearnMore": "Daha fazla bilgi için tıklayın →",
+    "loadingReleases": "Sürümler yükleniyor...",
+    "noRecentReleases": "Son sürüm yok",
+    "updateAvailable": "Güncelle",
+    "desktopUserGuide": "Masaüstü Kullanıcı Kılavuzu",
+    "openDevTools": "Geliştirici Araçlarını Aç",
+    "reinstall": "Yeniden Yükle"
+  },
+  "releaseToast": {
+    "newVersionAvailable": "Yeni Sürüm Mevcut!",
+    "whatsNew": "Yenilikler Neler?",
+    "skip": "Atla",
+    "update": "Güncelle"
+  },
+  "menu": {
+    "hideMenu": "Menüyü Gizle",
+    "showMenu": "Menüyü Göster",
+    "batchCount": "Toplu İşlem Sayısı",
+    "batchCountTooltip": "İş akışı oluşturma işleminin kaç kez kuyruğa alınması gerektiği",
+    "autoQueue": "Otomatik Kuyruk",
+    "disabled": "Devre Dışı",
+    "disabledTooltip": "İş akışı otomatik olarak kuyruğa alınmayacak",
+    "instant": "Anında",
+    "instantTooltip": "İş akışı, bir oluşturma işlemi bittikten sonra anında kuyruğa alınacak",
+    "onChange": "Değişiklikte",
+    "onChangeTooltip": "Bir değişiklik yapıldığında iş akışı kuyruğa alınacak",
+    "runWorkflow": "İş akışını çalıştır (Öne kuyruklamak için Shift)",
+    "runWorkflowFront": "İş akışını çalıştır (Öne kuyrukla)",
+    "run": "Çalıştır",
+    "execute": "Yürüt",
+    "interrupt": "Mevcut çalışmayı iptal et",
+    "refresh": "Düğüm tanımlarını yenile",
+    "clipspace": "Clipspace'i Aç",
+    "resetView": "Tuval görünümünü sıfırla",
+    "clear": "İş akışını temizle",
+    "toggleBottomPanel": "Alt Paneli Aç/Kapat",
+    "theme": "Tema",
+    "dark": "Karanlık",
+    "light": "Açık",
+    "manageExtensions": "Uzantıları Yönet",
+    "settings": "Ayarlar",
+    "help": "Yardım",
+    "queue": "Kuyruk Paneli"
+  },
+  "tabMenu": {
+    "duplicateTab": "Sekmeyi Çoğalt",
+    "closeTab": "Sekmeyi Kapat",
+    "closeTabsToLeft": "Soldaki Sekmeleri Kapat",
+    "closeTabsToRight": "Sağdaki Sekmeleri Kapat",
+    "closeOtherTabs": "Diğer Sekmeleri Kapat",
+    "addToBookmarks": "Yer İmlerine Ekle",
+    "removeFromBookmarks": "Yer İmlerinden Kaldır"
+  },
+  "templateWorkflows": {
+    "title": "Bir Şablonla Başlayın",
+    "loadingMore": "Daha fazla şablon yükleniyor...",
+    "searchPlaceholder": "Şablonları ara...",
+    "category": {
+      "ComfyUI Examples": "ComfyUI Örnekleri",
+      "Custom Nodes": "Özel Düğümler",
+      "Basics": "Temel Bilgiler",
+      "Flux": "Flux",
+      "ControlNet": "ControlNet",
+      "Upscaling": "Yükseltme",
+      "Video": "Video",
+      "Image": "Görsel",
+      "Area Composition": "Alan Kompozisyonu",
+      "3D": "3D",
+      "Audio": "Ses",
+      "Image API": "Görsel API",
+      "Video API": "Video API",
+      "LLM API": "LLM API",
+      "All": "Tüm Şablonlar"
+    },
+    "templateDescription": {
+      "Basics": {
+        "default": "Metin istemlerinden görüntüler oluşturun.",
+        "image2image": "Mevcut görüntüleri metin istemleri kullanarak dönüştürün.",
+        "lora": "Özelleştirilmiş stiller veya konular için LoRA modelleriyle görüntüler oluşturun.",
+        "lora_multiple": "Birden fazla LoRA modelini birleştirerek görüntüler oluşturun.",
+        "inpaint_example": "Görüntülerin belirli kısımlarını sorunsuz bir şekilde düzenleyin.",
+        "inpaint_model_outpainting": "Görüntüleri orijinal sınırlarının ötesine genişletin.",
+        "embedding_example": "Tutarlı stiller için metinsel ters çevirme kullanarak görüntüler oluşturun.",
+        "gligen_textbox_example": "Metin kutuları kullanarak hassas nesne yerleşimi ile görüntüler oluşturun."
+      },
+      "Flux": {
+        "flux_kontext_dev_basic": "İş akışını öğrenmek için mükemmel olan tam düğüm görünürlüğü ile Flux Kontext kullanarak görüntüyü düzenleyin.",
+        "flux_kontext_dev_grouped": "Daha temiz bir çalışma alanı için gruplandırılmış düğümlerle Flux Kontext'in basitleştirilmiş sürümü.",
+        "flux_dev_checkpoint_example": "Flux Dev fp8 nicelenmiş sürümünü kullanarak görüntüler oluşturun. Sınırlı VRAM'e sahip cihazlar için uygundur, yalnızca bir model dosyası gerektirir, ancak görüntü kalitesi tam sürümden biraz daha düşüktür.",
+        "flux_schnell": "Flux Schnell fp8 nicelenmiş sürümüyle hızlı bir şekilde görüntüler oluşturun. Düşük donanımlar için idealdir, görüntü oluşturmak için yalnızca 4 adım gerektirir.",
+        "flux_dev_full_text_to_image": "Flux Dev tam sürümüyle yüksek kaliteli görüntüler oluşturun. Daha büyük VRAM ve birden fazla model dosyası gerektirir, ancak en iyi istem takip yeteneğini ve görüntü kalitesini sağlar.",
+        "flux_schnell_full_text_to_image": "Flux Schnell tam sürümüyle hızlı bir şekilde görüntüler oluşturun. Apache2.0 lisansını kullanır, iyi görüntü kalitesini korurken görüntü oluşturmak için yalnızca 4 adım gerektirir.",
+        "flux_fill_inpaint_example": "Flux inpainting kullanarak görüntülerin eksik kısımlarını doldurun.",
+        "flux_fill_outpaint_example": "Flux outpainting kullanarak görüntüleri sınırların ötesine genişletin.",
+        "flux_canny_model_example": "Flux Canny kullanarak kenar algılama ile yönlendirilen görüntüler oluşturun.",
+        "flux_depth_lora_example": "Flux LoRA kullanarak derinlik bilgisi ile yönlendirilen görüntüler oluşturun.",
+        "flux_redux_model_example": "Flux Redux kullanarak referans görüntülerden stil aktararak görüntüler oluşturun."
+      },
+      "Image": {
+        "image_omnigen2_t2i": "OmniGen2'nin çift yollu mimariye sahip birleşik 7B çok modlu modeliyle metin istemlerinden yüksek kaliteli görüntüler oluşturun.",
+        "image_omnigen2_image_edit": "OmniGen2'nin gelişmiş görüntü düzenleme yetenekleri ve metin oluşturma desteğiyle doğal dil talimatlarıyla görüntüleri düzenleyin.",
+        "image_cosmos_predict2_2B_t2i": "Fiziksel olarak doğru, yüksek sadakatli ve ayrıntı zengini görüntü oluşturma sağlayan Cosmos-Predict2 2B T2I ile görüntüler oluşturun.",
+        "image_chroma_text_to_image": "Chroma, flux'tan değiştirilmiştir ve mimaride bazı değişiklikler vardır.",
+        "hidream_i1_dev": "HiDream I1 Dev ile görüntüler oluşturun - orta sınıf donanımlar için uygun olan 28 çıkarım adımlı dengeli sürüm.",
+        "hidream_i1_fast": "HiDream I1 Fast ile hızlı bir şekilde görüntüler oluşturun - düşük donanımlarda hızlı önizlemeler için ideal olan 16 çıkarım adımlı hafif sürüm.",
+        "hidream_i1_full": "HiDream I1 Full ile görüntüler oluşturun - en yüksek kalitede çıktı için 50 çıkarım adımlı tam sürüm.",
+        "hidream_e1_full": "HiDream E1 ile görüntüleri düzenleyin - profesyonel doğal dil görüntü düzenleme modeli.",
+        "sd3_5_simple_example": "SD 3.5 kullanarak görüntüler oluşturun.",
+        "sd3_5_large_canny_controlnet_example": "SD 3.5 Canny ControlNet kullanarak kenar algılama ile yönlendirilen görüntüler oluşturun.",
+        "sd3_5_large_depth": "SD 3.5 kullanarak derinlik bilgisi ile yönlendirilen görüntüler oluşturun.",
+        "sd3_5_large_blur": "SD 3.5 kullanarak bulanık referans görüntülerle yönlendirilen görüntüler oluşturun.",
+        "sdxl_simple_example": "SDXL kullanarak yüksek kaliteli görüntüler oluşturun.",
+        "sdxl_refiner_prompt_example": "İyileştirici modeller kullanarak SDXL görüntülerini geliştirin.",
+        "sdxl_revision_text_prompts": "SDXL Revision kullanarak referans görüntülerden kavramlar aktararak görüntüler oluşturun.",
+        "sdxl_revision_zero_positive": "SDXL Revision ile hem metin istemleri hem de referans görüntüleri kullanarak görüntüler oluşturun.",
+        "sdxlturbo_example": "SDXL Turbo kullanarak tek adımda görüntüler oluşturun.",
+        "image_lotus_depth_v1_1": "Yüksek ayrıntı koruması ile sıfır atışlı, verimli tek gözlü derinlik tahmini için ComfyUI'de Lotus Depth'i çalıştırın."
+      },
+      "Video": {
+        "video_cosmos_predict2_2B_video2world_480p_16fps": "Fiziksel olarak doğru, yüksek sadakatli ve tutarlı video simülasyonları oluşturan Cosmos-Predict2 2B Video2World ile videolar oluşturun.",
+        "video_wan_vace_14B_t2v": "Metin açıklamalarını yüksek kaliteli videolara dönüştürün. VACE-14B modeliyle hem 480p hem de 720p'yi destekler.",
+        "video_wan_vace_14B_ref2v": "Bir referans görüntünün stili ve içeriğiyle eşleşen videolar oluşturun. Stil tutarlı video oluşturma için mükemmel.",
+        "video_wan_vace_14B_v2v": "Wan VACE kullanarak giriş videolarını ve referans görüntülerini kontrol ederek videolar oluşturun.",
+        "video_wan_vace_outpainting": "Wan VACE outpainting kullanarak video boyutunu genişleterek uzatılmış videolar oluşturun.",
+        "video_wan_vace_flf2v": "Başlangıç ve bitiş karelerini tanımlayarak pürüzsüz video geçişleri oluşturun. Özel anahtar kare dizilerini destekler.",
+        "video_wan_vace_inpainting": "Çevredeki içeriği korurken videolardaki belirli bölgeleri düzenleyin. Nesne kaldırma veya değiştirme için harika.",
+        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B modelini kullanarak sinematik kamera hareketleriyle dinamik videolar oluşturun.",
+        "video_wan2_1_fun_camera_v1_1_14B": "Tam 14B modelini kullanarak gelişmiş kamera kontrolü ile yüksek kaliteli videolar oluşturun",
+        "text_to_video_wan": "Wan 2.1 kullanarak metin istemlerinden videolar oluşturun.",
+        "image_to_video_wan": "Wan 2.1 kullanarak görüntülerden videolar oluşturun.",
+        "wan2_1_fun_inp": "Wan 2.1 inpainting kullanarak başlangıç ve bitiş karelerinden videolar oluşturun.",
+        "wan2_1_fun_control": "Wan 2.1 ControlNet kullanarak poz, derinlik ve kenar kontrolleriyle yönlendirilen videolar oluşturun.",
+        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V kullanarak ilk ve son kareleri kontrol ederek videolar oluşturun.",
+        "ltxv_text_to_video": "Metin istemlerinden videolar oluşturun.",
+        "ltxv_image_to_video": "Hareketsiz görüntülerden videolar oluşturun.",
+        "mochi_text_to_video_example": "Mochi modelini kullanarak metin istemlerinden videolar oluşturun.",
+        "hunyuan_video_text_to_video": "Hunyuan modelini kullanarak metin istemlerinden videolar oluşturun.",
+        "image_to_video": "Hareketsiz görüntülerden videolar oluşturun.",
+        "txt_to_image_to_video": "Önce metin istemlerinden görüntüler oluşturarak videolar oluşturun."
+      },
+      "Image API": {
+        "api_bfl_flux_1_kontext_multiple_images_input": "Birden fazla görüntü girin ve bunları Flux.1 Kontext ile düzenleyin.",
+        "api_bfl_flux_1_kontext_pro_image": "Görüntüleri Flux.1 Kontext pro görüntü ile düzenleyin.",
+        "api_bfl_flux_1_kontext_max_image": "Görüntüleri Flux.1 Kontext max görüntü ile düzenleyin.",
+        "api_bfl_flux_pro_t2i": "FLUX.1 Pro kullanarak mükemmel istem takibi ve görsel kalite ile görüntüler oluşturun.",
+        "api_luma_photon_i2i": "Görüntüleri ve istemleri bir arada kullanarak görüntü oluşturmayı yönlendirin.",
+        "api_luma_photon_style_ref": "Luma Photon kullanarak stil referanslarını hassas kontrolle birleştirerek görüntüler oluşturun.",
+        "api_recraft_image_gen_with_color_control": "Recraft kullanarak özel renk paletleri ve markaya özgü görsellerle görüntüler oluşturun.",
+        "api_recraft_image_gen_with_style_control": "Görsel örneklerle stili kontrol edin, konumu hizalayın ve nesneleri ince ayar yapın. Mükemmel marka tutarlılığı için stilleri saklayın ve paylaşın.",
+        "api_recraft_vector_gen": "Recraft'ın yapay zeka vektör oluşturucusunu kullanarak metin istemlerinden yüksek kaliteli vektör görüntüler oluşturun.",
+        "api_runway_text_to_image": "Runway'in yapay zeka modelini kullanarak metin istemlerinden yüksek kaliteli görüntüler oluşturun.",
+        "api_runway_reference_to_image": "Runway'in yapay zekası ile referans stillere ve kompozisyonlara dayalı yeni görüntüler oluşturun.",
+        "api_stability_ai_stable_image_ultra_t2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel.",
+        "api_stability_ai_i2i": "Stability AI kullanarak yüksek kaliteli üretimle görüntüleri dönüştürün, profesyonel düzenleme ve stil aktarımı için mükemmel.",
+        "api_stability_ai_sd3_5_t2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel.",
+        "api_stability_ai_sd3_5_i2i": "Mükemmel istem uyumu ile yüksek kaliteli görüntüler oluşturun. 1 megapiksel çözünürlükte profesyonel kullanım durumları için mükemmel.",
+        "api_ideogram_v3_t2i": "Ideogram V3 kullanarak mükemmel istem hizalaması, fotogerçekçilik ve metin oluşturma ile profesyonel kalitede görüntüler oluşturun.",
+        "api_openai_image_1_t2i": "OpenAI GPT Image 1 API'sini kullanarak metin istemlerinden görüntüler oluşturun.",
+        "api_openai_image_1_i2i": "OpenAI GPT Image 1 API'sini kullanarak giriş görüntülerinden görüntüler oluşturun.",
+        "api_openai_image_1_inpaint": "OpenAI GPT Image 1 API'si ile inpainting kullanarak görüntüleri düzenleyin.",
+        "api_openai_image_1_multi_inputs": "OpenAI GPT Image 1 API'sini kullanarak birden fazla girişten görüntüler oluşturun.",
+        "api_openai_dall_e_2_t2i": "OpenAI Dall-E 2 API'sini kullanarak metin istemlerinden görüntüler oluşturun.",
+        "api_openai_dall_e_2_inpaint": "OpenAI Dall-E 2 API'si ile inpainting kullanarak görüntüleri düzenleyin.",
+        "api_openai_dall_e_3_t2i": "OpenAI Dall-E 3 API'sini kullanarak metin istemlerinden görüntüler oluşturun."
+      },
+      "Video API": {
+        "api_moonvalley_text_to_video": "Yalnızca lisanslı veriler üzerinde eğitilmiş bir model aracılığıyla metin istemlerinden sinematik, 1080p videolar oluşturun.",
+        "api_moonvalley_image_to_video": "Yalnızca lisanslı veriler üzerinde eğitilmiş bir model aracılığıyla bir görüntü ile sinematik, 1080p videolar oluşturun.",
+        "api_kling_i2v": "Kling kullanarak eylemler, ifadeler ve kamera hareketleri için mükemmel istem uyumu ile videolar oluşturun.",
+        "api_kling_effects": "Kling kullanarak görüntülere görsel efektler uygulayarak dinamik videolar oluşturun.",
+        "api_kling_flf": "İlk ve son kareleri kontrol ederek videolar oluşturun.",
+        "api_luma_i2v": "Statik görüntüleri alın ve anında sihirli yüksek kaliteli animasyonlar oluşturun.",
+        "api_luma_t2v": "Basit istemler kullanılarak yüksek kaliteli videolar oluşturulabilir.",
+        "api_hailuo_minimax_t2v": "Doğrudan metin istemlerinden yüksek kaliteli videolar oluşturun. Açıklamalarınızı hayata geçirmek için profesyonel CGI efektleri ve stilistik unsurlarla çeşitli görsel anlatılar oluşturmak için MiniMax'in gelişmiş yapay zeka yeteneklerini keşfedin.",
+        "api_hailuo_minimax_i2v": "MiniMax kullanarak CGI entegrasyonu ile görüntülerden ve metinden rafine videolar oluşturun.",
+        "api_pixverse_i2v": "PixVerse kullanarak hareket ve efektlerle statik görüntülerden dinamik videolar oluşturun.",
+        "api_pixverse_template_i2v": "PixVerse kullanarak hareket ve efektlerle statik görüntülerden dinamik videolar oluşturun.",
+        "api_pixverse_t2v": "Doğru istem yorumlaması ve çarpıcı video dinamikleri ile videolar oluşturun.",
+        "api_runway_gen3a_turbo_image_to_video": "Runway Gen3a Turbo kullanarak statik görüntülerden sinematik videolar oluşturun.",
+        "api_runway_gen4_turo_image_to_video": "Runway Gen4 Turbo kullanarak görüntülerden dinamik videolar oluşturun.",
+        "api_runway_first_last_frame": "Runway'in hassasiyeti ile iki anahtar kare arasında pürüzsüz video geçişleri oluşturun.",
+        "api_pika_i2v": "Pika AI kullanarak tek bir statik görüntüden pürüzsüz animasyonlu videolar oluşturun.",
+        "api_pika_scene": "Pika Scenes kullanarak birden fazla giriş görüntüsü içeren videolar oluşturun.",
+        "api_veo2_i2v": "Google Veo2 API'sini kullanarak görüntülerden videolar oluşturun."
+      },
+      "3D API": {
+        "api_rodin_image_to_model": "Rodin AI kullanarak tek fotoğraflardan ayrıntılı 3D modeller oluşturun.",
+        "api_rodin_multiview_to_model": "Rodin'in çok açılı yeniden yapılandırmasını kullanarak kapsamlı 3D modeller oluşturun.",
+        "api_tripo_text_to_model": "Tripo'nun metin odaklı modellemesi ile açıklamalardan 3D nesneler oluşturun.",
+        "api_tripo_image_to_model": "Tripo motorunu kullanarak 2D görüntülerden profesyonel 3D varlıklar oluşturun.",
+        "api_tripo_multiview_to_model": "Tripo'nun gelişmiş tarayıcısı ile birden fazla açıdan 3D modeller oluşturun."
+      },
+      "LLM API": {
+        "api_openai_chat": "Akıllı konuşmalar için OpenAI'nin gelişmiş dil modelleriyle etkileşime geçin.",
+        "api_google_gemini": "Gemini'nin akıl yürütme yetenekleriyle Google'ın çok modlu yapay zekasını deneyimleyin."
+      },
+      "Upscaling": {
+        "hiresfix_latent_workflow": "Gizli alanda kaliteyi artırarak görüntüleri yükseltin.",
+        "esrgan_example": "Kaliteyi artırmak için ESRGAN modellerini kullanarak görüntüleri yükseltin.",
+        "hiresfix_esrgan_workflow": "Ara üretim adımları sırasında ESRGAN modellerini kullanarak görüntüleri yükseltin.",
+        "latent_upscale_different_prompt_model": "Üretim geçişleri boyunca istemleri değiştirirken görüntüleri yükseltin."
+      },
+      "ControlNet": {
+        "controlnet_example": "ControlNet kullanarak karalama referans görüntüleriyle yönlendirilen görüntüler oluşturun.",
+        "2_pass_pose_worship": "ControlNet kullanarak poz referanslarıyla yönlendirilen görüntüler oluşturun.",
+        "depth_controlnet": "ControlNet kullanarak derinlik bilgisiyle yönlendirilen görüntüler oluşturun.",
+        "depth_t2i_adapter": "T2I adaptörü kullanarak derinlik bilgisiyle yönlendirilen görüntüler oluşturun.",
+        "mixing_controlnets": "Birden fazla ControlNet modelini birleştirerek görüntüler oluşturun."
+      },
+      "Area Composition": {
+        "area_composition": "Tanımlanmış alanlarla kompozisyonu kontrol ederek görüntüler oluşturun.",
+        "area_composition_square_area_for_subject": "Alan kompozisyonu kullanarak tutarlı konu yerleşimi ile görüntüler oluşturun."
+      },
+      "3D": {
+        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0 kullanarak tek görüntülerden 3D modeller oluşturun.",
+        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV kullanarak birden fazla görünümden 3D modeller oluşturun.",
+        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo kullanarak birden fazla görünümden 3D modeller oluşturun.",
+        "stable_zero123_example": "Stable Zero123 kullanarak tek görüntülerden 3D görünümler oluşturun."
+      },
+      "Audio": {
+        "audio_stable_audio_example": "Stable Audio kullanarak metin istemlerinden ses oluşturun.",
+        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 kullanarak metin istemlerinden enstrümantal müzik oluşturun.",
+        "audio_ace_step_1_t2a_song": "ACE-Step v1 kullanarak metin istemlerinden vokalli şarkılar oluşturun, çok dilli ve stil özelleştirmesini destekler.",
+        "audio_ace_step_1_m2m_editing": "ACE-Step v1 M2M kullanarak mevcut şarkıları stil ve şarkı sözlerini değiştirmek için düzenleyin."
+      }
+    },
+    "template": {
+      "Basics": {
+        "default": "Görüntü Oluşturma",
+        "image2image": "Görüntüden Görüntüye",
+        "lora": "LoRA",
+        "lora_multiple": "Çoklu LoRA",
+        "inpaint_example": "Inpaint",
+        "inpaint_model_outpainting": "Outpaint",
+        "embedding_example": "Gömme",
+        "gligen_textbox_example": "Gligen Metin Kutusu"
+      },
+      "Flux": {
+        "flux_kontext_dev_basic": "Flux Kontext Dev(Temel)",
+        "flux_kontext_dev_grouped": "Flux Kontext Dev(Gruplandırılmış)",
+        "flux_dev_checkpoint_example": "Flux Dev fp8",
+        "flux_schnell": "Flux Schnell fp8",
+        "flux_dev_full_text_to_image": "Flux Dev metinden görüntüye tam",
+        "flux_schnell_full_text_to_image": "Flux Schnell metinden görüntüye tam",
+        "flux_fill_inpaint_example": "Flux Inpaint",
+        "flux_fill_outpaint_example": "Flux Outpaint",
+        "flux_canny_model_example": "Flux Canny Modeli",
+        "flux_depth_lora_example": "Flux Derinlik LoRA",
+        "flux_redux_model_example": "Flux Redux Modeli"
+      },
+      "Image": {
+        "image_omnigen2_t2i": "OmniGen2 Metinden Görüntüye",
+        "image_omnigen2_image_edit": "OmniGen2 Görüntü Düzenleme",
+        "image_cosmos_predict2_2B_t2i": "Cosmos Predict2 2B T2I",
+        "image_chroma_text_to_image": "Chroma metinden görüntüye",
+        "hidream_i1_dev": "HiDream I1 Dev",
+        "hidream_i1_fast": "HiDream I1 Hızlı",
+        "hidream_i1_full": "HiDream I1 Tam",
+        "hidream_e1_full": "HiDream E1 Tam",
+        "sd3_5_simple_example": "SD3.5 Basit",
+        "sd3_5_large_canny_controlnet_example": "SD3.5 Büyük Canny ControlNet",
+        "sd3_5_large_depth": "SD3.5 Büyük Derinlik",
+        "sd3_5_large_blur": "SD3.5 Büyük Bulanıklık",
+        "sdxl_simple_example": "SDXL Basit",
+        "sdxl_refiner_prompt_example": "SDXL İyileştirici İstem",
+        "sdxl_revision_text_prompts": "SDXL Revizyon Metin İstemleri",
+        "sdxl_revision_zero_positive": "SDXL Revizyon Sıfır Pozitif",
+        "sdxlturbo_example": "SDXL Turbo",
+        "image_lotus_depth_v1_1": "Lotus Derinlik"
+      },
+      "Video": {
+        "video_cosmos_predict2_2B_video2world_480p_16fps": "Cosmos Predict2 2B Video2World 480p 16fps",
+        "video_wan_vace_14B_t2v": "Wan VACE Metinden Videoya",
+        "video_wan_vace_14B_ref2v": "Wan VACE Referanstan Videoya",
+        "video_wan_vace_14B_v2v": "Wan VACE Kontrol Videosu",
+        "video_wan_vace_outpainting": "Wan VACE Outpainting",
+        "video_wan_vace_flf2v": "Wan VACE İlk-Son Kare",
+        "video_wan_vace_inpainting": "Wan VACE Inpainting",
+        "video_wan2_1_fun_camera_v1_1_1_3B": "Wan 2.1 Fun Camera 1.3B",
+        "video_wan2_1_fun_camera_v1_1_14B": "Wan 2.1 Fun Camera 14B",
+        "text_to_video_wan": "Wan 2.1 Metinden Videoya",
+        "image_to_video_wan": "Wan 2.1 Görüntüden Videoya",
+        "wan2_1_fun_inp": "Wan 2.1 Inpainting",
+        "wan2_1_fun_control": "Wan 2.1 ControlNet",
+        "wan2_1_flf2v_720_f16": "Wan 2.1 FLF2V 720p F16",
+        "ltxv_text_to_video": "LTXV Metinden Videoya",
+        "ltxv_image_to_video": "LTXV Görüntüden Videoya",
+        "mochi_text_to_video_example": "Mochi Metinden Videoya",
+        "hunyuan_video_text_to_video": "Hunyuan Video Metinden Videoya",
+        "image_to_video": "SVD Görüntüden Videoya",
+        "txt_to_image_to_video": "SVD Metinden Görüntüye, Görüntüden Videoya"
+      },
+      "Image API": {
+        "api_bfl_flux_1_kontext_multiple_images_input": "BFL Flux.1 Kontext Çoklu Görüntü Girişi",
+        "api_bfl_flux_1_kontext_pro_image": "BFL Flux.1 Kontext Pro",
+        "api_bfl_flux_1_kontext_max_image": "BFL Flux.1 Kontext Max",
+        "api_bfl_flux_pro_t2i": "BFL Flux[Pro]: Metinden Görüntüye",
+        "api_luma_photon_i2i": "Luma Photon: Görüntüden Görüntüye",
+        "api_luma_photon_style_ref": "Luma Photon: Stil Referansı",
+        "api_recraft_image_gen_with_color_control": "Recraft: Renk Kontrollü Görüntü Oluşturma",
+        "api_recraft_image_gen_with_style_control": "Recraft: Stil Kontrollü Görüntü Oluşturma",
+        "api_recraft_vector_gen": "Recraft: Vektör Oluşturma",
+        "api_runway_text_to_image": "Runway: Metinden Görüntüye",
+        "api_runway_reference_to_image": "Runway: Referanstan Görüntüye",
+        "api_stability_ai_stable_image_ultra_t2i": "Stability AI: Stable Image Ultra Metinden Görüntüye",
+        "api_stability_ai_i2i": "Stability AI: Görüntüden Görüntüye",
+        "api_stability_ai_sd3_5_t2i": "Stability AI: SD3.5 Metinden Görüntüye",
+        "api_stability_ai_sd3_5_i2i": "Stability AI: SD3.5 Görüntüden Görüntüye",
+        "api_ideogram_v3_t2i": "Ideogram V3: Metinden Görüntüye",
+        "api_openai_image_1_t2i": "OpenAI: GPT-Image-1 Metinden Görüntüye",
+        "api_openai_image_1_i2i": "OpenAI: GPT-Image-1 Görüntüden Görüntüye",
+        "api_openai_image_1_inpaint": "OpenAI: GPT-Image-1 Inpaint",
+        "api_openai_image_1_multi_inputs": "OpenAI: GPT-Image-1 Çoklu Girişler",
+        "api_openai_dall_e_2_t2i": "OpenAI: Dall-E 2 Metinden Görüntüye",
+        "api_openai_dall_e_2_inpaint": "OpenAI: Dall-E 2 Inpaint",
+        "api_openai_dall_e_3_t2i": "OpenAI: Dall-E 3 Metinden Görüntüye"
+      },
+      "Video API": {
+        "api_moonvalley_text_to_video": "Moonvalley: Metinden Videoya",
+        "api_moonvalley_image_to_video": "Moonvalley: Görüntüden Videoya",
+        "api_kling_i2v": "Kling: Görüntüden Videoya",
+        "api_kling_effects": "Kling: Video Efektleri",
+        "api_kling_flf": "Kling: FLF2V",
+        "api_luma_i2v": "Luma: Görüntüden Videoya",
+        "api_luma_t2v": "Luma: Metinden Videoya",
+        "api_hailuo_minimax_t2v": "MiniMax: Metinden Videoya",
+        "api_hailuo_minimax_i2v": "MiniMax: Görüntüden Videoya",
+        "api_pixverse_i2v": "PixVerse: Görüntüden Videoya",
+        "api_pixverse_template_i2v": "PixVerse Şablonları: Görüntüden Videoya",
+        "api_pixverse_t2v": "PixVerse: Metinden Videoya",
+        "api_runway_gen3a_turbo_image_to_video": "Runway: Gen3a Turbo Görüntüden Videoya",
+        "api_runway_gen4_turo_image_to_video": "Runway: Gen4 Turbo Görüntüden Videoya",
+        "api_runway_first_last_frame": "Runway: İlk Son Kareden Videoya",
+        "api_pika_i2v": "Pika: Görüntüden Videoya",
+        "api_pika_scene": "Pika Sahneleri: Görüntülerden Videoya",
+        "api_veo2_i2v": "Veo2: Görüntüden Videoya"
+      },
+      "3D API": {
+        "api_rodin_image_to_model": "Rodin: Görüntüden Modele",
+        "api_rodin_multiview_to_model": "Rodin: Çoklu Görüntüden Modele",
+        "api_tripo_text_to_model": "Tripo: Metinden Modele",
+        "api_tripo_image_to_model": "Tripo: Görüntüden Modele",
+        "api_tripo_multiview_to_model": "Tripo: Çoklu Görüntüden Modele"
+      },
+      "LLM API": {
+        "api_openai_chat": "OpenAI: Sohbet",
+        "api_google_gemini": "Google Gemini: Sohbet"
+      },
+      "Upscaling": {
+        "hiresfix_latent_workflow": "Yükseltme",
+        "esrgan_example": "ESRGAN",
+        "hiresfix_esrgan_workflow": "HiresFix ESRGAN İş Akışı",
+        "latent_upscale_different_prompt_model": "Farklı İstem Modeliyle Gizli Yükseltme"
+      },
+      "ControlNet": {
+        "controlnet_example": "Karalama ControlNet",
+        "2_pass_pose_worship": "Poz ControlNet 2 Geçiş",
+        "depth_controlnet": "Derinlik ControlNet",
+        "depth_t2i_adapter": "Derinlik T2I Adaptörü",
+        "mixing_controlnets": "ControlNet'leri Karıştırma"
+      },
+      "Area Composition": {
+        "area_composition": "Alan Kompozisyonu",
+        "area_composition_square_area_for_subject": "Konu İçin Kare Alan Kompozisyonu"
+      },
+      "3D": {
+        "3d_hunyuan3d_image_to_model": "Hunyuan3D 2.0",
+        "3d_hunyuan3d_multiview_to_model": "Hunyuan3D 2.0 MV",
+        "3d_hunyuan3d_multiview_to_model_turbo": "Hunyuan3D 2.0 MV Turbo",
+        "stable_zero123_example": "Stable Zero123"
+      },
+      "Audio": {
+        "audio_stable_audio_example": "Stable Audio",
+        "audio_ace_step_1_t2a_instrumentals": "ACE-Step v1 Metinden Enstrümantal Müziğe",
+        "audio_ace_step_1_t2a_song": "ACE Step v1 Metinden Şarkıya",
+        "audio_ace_step_1_m2m_editing": "ACE Step v1 M2M Düzenleme"
+      }
+    }
+  },
+  "graphCanvasMenu": {
+    "zoomIn": "Yakınlaştır",
+    "zoomOut": "Uzaklaştır",
+    "resetView": "Görünümü Sıfırla",
+    "fitView": "Görünüme Sığdır",
+    "selectMode": "Seçim Modu",
+    "panMode": "Kaydırma Modu",
+    "toggleMinimap": "Mini Haritayı Aç/Kapat",
+    "select": "Seç",
+    "hand": "El",
+    "zoomOptions": "Yakınlaştırma Seçenekleri",
+    "focusMode": "Odak Modu",
+    "hideLinks": "Bağlantıları Gizle",
+    "showLinks": "Bağlantıları Göster",
+    "toggleLinkVisibility": "Bağlantı Görünürlüğünü Aç/Kapat"
+  },
+  "zoomControls": {
+    "label": "Yakınlaştırma Kontrolleri",
+    "zoomToFit": "Sığdırmak İçin Yakınlaştır",
+    "showMinimap": "Mini Haritayı Göster",
+    "hideMinimap": "Mini Haritayı Gizle"
+  },
+  "groupNode": {
+    "create": "Grup düğümü oluştur",
+    "enterName": "İsim girin"
+  },
+  "nodeTemplates": {
+    "saveAsTemplate": "Şablon olarak kaydet",
+    "enterName": "İsim girin"
+  },
+  "workflowService": {
+    "exportWorkflow": "İş Akışını Dışa Aktar",
+    "enterFilename": "Dosya adını girin",
+    "saveWorkflow": "İş akışını kaydet"
+  },
+  "subgraphStore": {
+    "confirmDeleteTitle": "Taslak silinsin mi?",
+    "confirmDelete": "Bu işlem taslağı kütüphanenizden kalıcı olarak kaldıracaktır",
+    "saveBlueprint": "Alt Grafiği Kütüphaneye Kaydet",
+    "overwriteBlueprintTitle": "Mevcut taslağın üzerine yazılsın mı?",
+    "overwriteBlueprint": "Kaydetmek, mevcut taslağın üzerine değişikliklerinizi yazacaktır",
+    "blueprintName": "Alt Grafik adı",
+    "publish": "Alt Grafiği Yayınla",
+    "publishSuccess": "Düğüm Kütüphanesine Kaydedildi",
+    "publishSuccessMessage": "Alt grafik taslağınızı düğüm kütüphanesinde \"Alt Grafik Taslakları\" altında bulabilirsiniz",
+    "loadFailure": "Alt grafik taslakları yüklenemedi"
+  },
+  "electronFileDownload": {
+    "inProgress": "Devam Ediyor",
+    "pause": "İndirmeyi Duraklat",
+    "paused": "Duraklatıldı",
+    "resume": "İndirmeye Devam Et",
+    "cancel": "İndirmeyi İptal Et",
+    "cancelled": "İptal Edildi"
+  },
+  "maskEditor": {
+    "Invert": "Ters Çevir",
+    "Clear": "Temizle",
+    "Brush Settings": "Fırça Ayarları",
+    "Brush Shape": "Fırça Şekli",
+    "Thickness": "Kalınlık",
+    "Opacity": "Opaklık",
+    "Hardness": "Sertlik",
+    "Smoothing Precision": "Yumuşatma Hassasiyeti",
+    "Reset to Default": "Varsayılana Sıfırla",
+    "Paint Bucket Settings": "Boya Kovası Ayarları",
+    "Tolerance": "Tolerans",
+    "Fill Opacity": "Dolgu Opaklığı",
+    "Color Select Settings": "Renk Seçim Ayarları",
+    "Selection Opacity": "Seçim Opaklığı",
+    "Live Preview": "Canlı Önizleme",
+    "Apply to Whole Image": "Tüm Görüntüye Uygula",
+    "Method": "Yöntem",
+    "Stop at mask": "Maskede dur",
+    "Mask Tolerance": "Maske Toleransı",
+    "Layers": "Katmanlar",
+    "Mask Layer": "Maske Katmanı",
+    "Mask Opacity": "Maske Opaklığı",
+    "Image Layer": "Görüntü Katmanı"
+  },
+  "commands": {
+    "runWorkflow": "İş akışını çalıştır",
+    "runWorkflowFront": "İş akışını çalıştır (Öne kuyrukla)",
+    "run": "Çalıştır",
+    "execute": "Yürüt",
+    "interrupt": "Mevcut çalışmayı iptal et",
+    "refresh": "Düğüm tanımlarını yenile",
+    "clipspace": "Clipspace'i Aç",
+    "resetView": "Tuval görünümünü sıfırla",
+    "clear": "İş akışını temizle",
+    "toggleBottomPanel": "Alt Paneli Aç/Kapat",
+    "theme": "Tema",
+    "dark": "Karanlık",
+    "light": "Açık",
+    "manageExtensions": "Uzantıları Yönet",
+    "settings": "Ayarlar",
+    "help": "Yardım",
+    "queue": "Kuyruk Paneli"
+  },
+  "menuLabels": {
+    "Workflow": "İş Akışı",
+    "Edit": "Düzenle",
+    "View": "Görünüm",
+    "Manager": "Yönetici",
+    "Help": "Yardım",
+    "Check for Updates": "Güncellemeleri Kontrol Et",
+    "Open Custom Nodes Folder": "Özel Düğümler Klasörünü Aç",
+    "Open Inputs Folder": "Girişler Klasörünü Aç",
+    "Open Logs Folder": "Kayıtlar Klasörünü Aç",
+    "Open extra_model_paths_yaml": "extra_model_paths.yaml dosyasını aç",
+    "Open Models Folder": "Modeller Klasörünü Aç",
+    "Open Outputs Folder": "Çıktılar Klasörünü Aç",
+    "Open DevTools": "Geliştirici Araçlarını Aç",
+    "Desktop User Guide": "Masaüstü Kullanıcı Kılavuzu",
+    "Quit": "Çık",
+    "Reinstall": "Yeniden Yükle",
+    "Restart": "Yeniden Başlat",
+    "Open 3D Viewer (Beta) for Selected Node": "Seçili Düğüm için 3D Görüntüleyiciyi (Beta) Aç",
+    "Browse Templates": "Şablonlara Gözat",
+    "Delete Selected Items": "Seçili Öğeleri Sil",
+    "Fit view to selected nodes": "Görünümü seçili düğümlere sığdır",
+    "Zoom to fit": "Sığdırmak için yakınlaştır",
+    "Lock Canvas": "Tuvali Kilitle",
+    "Move Selected Nodes Down": "Seçili Düğümleri Aşağı Taşı",
+    "Move Selected Nodes Left": "Seçili Düğümleri Sola Taşı",
+    "Move Selected Nodes Right": "Seçili Düğümleri Sağa Taşı",
+    "Move Selected Nodes Up": "Seçili Düğümleri Yukarı Taşı",
+    "Reset View": "Görünümü Sıfırla",
+    "Resize Selected Nodes": "Seçili Düğümleri Yeniden Boyutlandır",
+    "Canvas Toggle Link Visibility": "Tuval Bağlantı Görünürlüğünü Aç/Kapat",
+    "Canvas Toggle Lock": "Tuval Kilidini Aç/Kapat",
+    "Pin/Unpin Selected Items": "Seçili Öğeleri Sabitle/Kaldır",
+    "Bypass/Unbypass Selected Nodes": "Seçili Düğümleri Atla/Geri Al",
+    "Collapse/Expand Selected Nodes": "Seçili Düğümleri Daralt/Genişlet",
+    "Mute/Unmute Selected Nodes": "Seçili Düğümleri Sessize Al/Aç",
+    "Pin/Unpin Selected Nodes": "Seçili Düğümleri Sabitle/Kaldır",
+    "Unlock Canvas": "Tuvalin Kilidini Aç",
+    "Zoom In": "Yakınlaştır",
+    "Zoom Out": "Uzaklaştır",
+    "Clear Pending Tasks": "Bekleyen Görevleri Temizle",
+    "Clear Workflow": "İş Akışını Temizle",
+    "Contact Support": "Destekle İletişime Geç",
+    "Show Model Selector (Dev)": "Model Seçiciyi Göster (Geliştirici)",
+    "Duplicate Current Workflow": "Mevcut İş Akışını Çoğalt",
+    "Export": "Dışa Aktar",
+    "Export (API)": "Dışa Aktar (API)",
+    "Give Feedback": "Geri Bildirim Ver",
+    "Convert Selection to Subgraph": "Seçimi Alt Grafiğe Dönüştür",
+    "Exit Subgraph": "Alt Grafikten Çık",
+    "Fit Group To Contents": "Grubu İçeriğe Sığdır",
+    "Group Selected Nodes": "Seçili Düğümleri Gruplandır",
+    "Unpack the selected Subgraph": "Seçili Alt Grafiği Aç",
+    "Convert selected nodes to group node": "Seçili düğümleri grup düğümüne dönüştür",
+    "Manage group nodes": "Grup düğümlerini yönet",
+    "Ungroup selected group nodes": "Seçili grup düğümlerinin grubunu çöz",
+    "About ComfyUI": "ComfyUI Hakkında",
+    "Comfy-Org Discord": "Comfy-Org Discord",
+    "ComfyUI Docs": "ComfyUI Belgeleri",
+    "ComfyUI Forum": "ComfyUI Forumu",
+    "ComfyUI Issues": "ComfyUI Sorunları",
+    "Interrupt": "Kes",
+    "Load Default Workflow": "Varsayılan İş Akışını Yükle",
+    "Custom Nodes Manager": "Özel Düğüm Yöneticisi",
+    "Custom Nodes (Legacy)": "Özel Düğümler (Eski)",
+    "Manager Menu (Legacy)": "Yönetici Menüsü (Eski)",
+    "Install Missing": "Eksikleri Yükle",
+    "Install Missing Custom Nodes": "Eksik Özel Düğümleri Yükle",
+    "Check for Custom Node Updates": "Özel Düğüm Güncellemelerini Kontrol Et",
+    "Toggle the Custom Nodes Manager Progress Bar": "Özel Düğüm Yöneticisi İlerleme Çubuğunu Aç/Kapat",
+    "Open Mask Editor for Selected Node": "Seçili Düğüm için Maske Düzenleyiciyi Aç",
+    "Unload Models": "Modelleri Boşalt",
+    "Unload Models and Execution Cache": "Modelleri ve Yürütme Önbelleğini Boşalt",
+    "New": "Yeni",
+    "Clipspace": "Clipspace",
+    "Manager": "Yönetici",
+    "Open": "Aç",
+    "Publish": "Yayınla",
+    "Queue Prompt": "İstemi Kuyruğa Al",
+    "Queue Prompt (Front)": "İstemi Kuyruğa Al (Ön)",
+    "Queue Selected Output Nodes": "Seçili Çıktı Düğümlerini Kuyruğa Al",
+    "Redo": "Yinele",
+    "Refresh Node Definitions": "Düğüm Tanımlarını Yenile",
+    "Save": "Kaydet",
+    "Save As": "Farklı Kaydet",
+    "Show Settings Dialog": "Ayarlar İletişim Kutusunu Göster",
+    "Canvas Performance": "Tuval Performansı",
+    "Help Center": "Yardım Merkezi",
+    "Toggle Theme (Dark/Light)": "Temayı Değiştir (Karanlık/Açık)",
+    "Undo": "Geri Al",
+    "Open Sign In Dialog": "Giriş Yapma İletişim Kutusunu Aç",
+    "Sign Out": "Çıkış Yap",
+    "Close Current Workflow": "Mevcut İş Akışını Kapat",
+    "Next Opened Workflow": "Sonraki Açılan İş Akışı",
+    "Previous Opened Workflow": "Önceki Açılan İş Akışı",
+    "Toggle Search Box": "Arama Kutusunu Aç/Kapat",
+    "Bottom Panel": "Alt Panel",
+    "Toggle Bottom Panel": "Alt Paneli Aç/Kapat",
+    "Show Keybindings Dialog": "Tuş Atamaları İletişim Kutusunu Göster",
+    "Toggle Terminal Bottom Panel": "Terminal Alt Panelini Aç/Kapat",
+    "Toggle Logs Bottom Panel": "Kayıtlar Alt Panelini Aç/Kapat",
+    "Toggle Essential Bottom Panel": "Temel Alt Paneli Aç/Kapat",
+    "Toggle View Controls Bottom Panel": "Görünüm Kontrolleri Alt Panelini Aç/Kapat",
+    "Toggle Focus Mode": "Odak Modunu Aç/Kapat",
+    "Focus Mode": "Odak Modu",
+    "Model Library": "Model Kütüphanesi",
+    "Node Library": "Düğüm Kütüphanesi",
+    "Queue Panel": "Kuyruk Paneli",
+    "Workflows": "İş Akışları",
+    "Toggle Model Library Sidebar": "Model Kütüphanesi Kenar Çubuğunu Aç/Kapat",
+    "Toggle Node Library Sidebar": "Düğüm Kütüphanesi Kenar Çubuğunu Aç/Kapat",
+    "Toggle Queue Sidebar": "Kuyruk Kenar Çubuğunu Aç/Kapat",
+    "Toggle Workflows Sidebar": "İş Akışları Kenar Çubuğunu Aç/Kapat",
+    "sideToolbar_modelLibrary": "yanAraçÇubuğu.modelKütüphanesi",
+    "sideToolbar_nodeLibrary": "yanAraçÇubuğu.düğümKütüphanesi",
+    "sideToolbar_queue": "yanAraçÇubuğu.kuyruk",
+    "sideToolbar_workflows": "yanAraçÇubuğu.işAkışları"
+  },
+  "desktopMenu": {
+    "reinstall": "Yeniden Yükle",
+    "confirmReinstall": "Bu işlem extra_models_config.yaml dosyanızı temizleyecek,\nve kurulumu yeniden başlatacaktır.\n\nEmin misiniz?",
+    "quit": "Çık",
+    "confirmQuit": "Kaydedilmemiş iş akışları açık; kaydedilmemiş değişiklikler kaybolacaktır. Bunu yoksayıp çıkılsın mı?"
+  },
+  "settingsCategories": {
+    "Comfy-Desktop": "Comfy-Masaüstü",
+    "General": "Genel",
+    "Appearance": "Görünüm",
+    "ColorPalette": "Renk Paleti",
+    "Comfy": "Comfy",
+    "Workflow": "İş Akışı",
+    "DevMode": "Geliştirici Modu",
+    "LiteGraph": "Lite Graph",
+    "Node Widget": "Düğüm Widget'ı",
+    "Node": "Düğüm",
+    "Extension": "Uzantı",
+    "Canvas": "Tuval",
+    "Link": "Bağlantı",
+    "Group": "Grup",
+    "Menu": "Menü",
+    "Keybinding": "Tuş Ataması",
+    "LinkRelease": "Bağlantı Sürümü",
+    "Graph": "Grafik",
+    "Locale": "Yerel Ayar",
+    "Mask Editor": "Maske Düzenleyici",
+    "BrushAdjustment": "Fırça Ayarı",
+    "NewEditor": "Yeni Düzenleyici",
+    "ModelLibrary": "Model Kütüphanesi",
+    "NodeLibrary": "Düğüm Kütüphanesi",
+    "Node Search Box": "Düğüm Arama Kutusu",
+    "Pointer": "İşaretçi",
+    "Queue": "Kuyruk",
+    "QueueButton": "Kuyruk Düğmesi",
+    "RerouteBeta": "Yeniden Yönlendirme Beta",
+    "Server": "Sunucu",
+    "Settings": "Ayarlar",
+    "Sidebar": "Kenar Çubuğu",
+    "Tree Explorer": "Ağaç Gezgini",
+    "Validation": "Doğrulama",
+    "Window": "Pencere",
+    "Server-Config": "Sunucu-Yapılandırma",
+    "About": "Hakkında",
+    "EditTokenWeight": "Jeton Ağırlığını Düzenle",
+    "CustomColorPalettes": "Özel Renk Paletleri",
+    "UV": "UV",
+    "ContextMenu": "Bağlam Menüsü",
+    "Reroute": "Yeniden Yönlendir",
+    "Load 3D": "3D Yükle",
+    "Camera": "Kamera",
+    "Scene": "Sahne",
+    "3D": "3D",
+    "Light": "Işık",
+    "User": "Kullanıcı",
+    "Credits": "Krediler",
+    "API Nodes": "API Düğümleri",
+    "Notification Preferences": "Bildirim Tercihleri",
+    "3DViewer": "3D Görüntüleyici",
+    "Vue Nodes": "Vue Düğümleri"
+  },
+  "serverConfigItems": {
+    "listen": {
+      "name": "Ana Bilgisayar: Dinlenecek IP adresi"
+    },
+    "port": {
+      "name": "Port: Dinlenecek port"
+    },
+    "tls-keyfile": {
+      "name": "TLS Anahtar Dosyası: HTTPS için TLS anahtar dosyasının yolu"
+    },
+    "tls-certfile": {
+      "name": "TLS Sertifika Dosyası: HTTPS için TLS sertifika dosyasının yolu"
+    },
+    "enable-cors-header": {
+      "name": "CORS başlığını etkinleştir: Tüm kaynaklar için \"*\" kullanın veya alan adı belirtin"
+    },
+    "max-upload-size": {
+      "name": "Maksimum yükleme boyutu (MB)"
+    },
+    "cuda-device": {
+      "name": "Kullanılacak CUDA cihaz indeksi"
+    },
+    "cuda-malloc": {
+      "name": "Bellek tahsisi için CUDA malloc kullan"
+    },
+    "global-precision": {
+      "name": "Genel kayan nokta hassasiyeti",
+      "tooltip": "Genel kayan nokta hassasiyeti"
+    },
+    "unet-precision": {
+      "name": "UNET hassasiyeti",
+      "tooltip": "UNET hassasiyeti"
+    },
+    "vae-precision": {
+      "name": "VAE hassasiyeti",
+      "tooltip": "VAE hassasiyeti"
+    },
+    "cpu-vae": {
+      "name": "VAE'yi CPU'da çalıştır"
+    },
+    "text-encoder-precision": {
+      "name": "Metin Kodlayıcı hassasiyeti",
+      "tooltip": "Metin Kodlayıcı hassasiyeti"
+    },
+    "force-channels-last": {
+      "name": "Kanalları en sona zorla bellek biçimi"
+    },
+    "directml": {
+      "name": "DirectML cihaz indeksi"
+    },
+    "disable-ipex-optimize": {
+      "name": "IPEX optimizasyonunu devre dışı bırak"
+    },
+    "preview-method": {
+      "name": "Gizli önizlemeler için kullanılan yöntem"
+    },
+    "preview-size": {
+      "name": "Önizleme görüntülerinin boyutu"
+    },
+    "cache-classic": {
+      "name": "Klasik önbellek sistemini kullan"
+    },
+    "cache-lru": {
+      "name": "Maksimum N düğüm sonucu önbelleğe alınmış LRU önbellekleme kullan.",
+      "tooltip": "Daha fazla RAM/VRAM kullanabilir."
+    },
+    "cross-attention-method": {
+      "name": "Çapraz dikkat yöntemi"
+    },
+    "disable-xformers": {
+      "name": "xFormers optimizasyonunu devre dışı bırak"
+    },
+    "force-upcast-attention": {
+      "name": "Dikkat yukarı yayılımını zorla"
+    },
+    "dont-upcast-attention": {
+      "name": "Dikkat yukarı yayılımını önle"
+    },
+    "vram-management": {
+      "name": "VRAM yönetim modu"
+    },
+    "reserve-vram": {
+      "name": "Ayrılmış VRAM (GB)",
+      "tooltip": "İşletim sisteminiz/diğer yazılımlar tarafından kullanılmak üzere ayırmak istediğiniz vram miktarını GB cinsinden ayarlayın. Varsayılan olarak işletim sisteminize bağlı olarak bir miktar ayrılır."
+    },
+    "default-hashing-function": {
+      "name": "Model dosyaları için varsayılan karma işlevi"
+    },
+    "disable-smart-memory": {
+      "name": "Akıllı bellek yönetimini devre dışı bırak",
+      "tooltip": "ComfyUI'yi, modelleri VRAM'de tutmak yerine agresif bir şekilde normal RAM'e boşaltmaya zorlayın."
+    },
+    "deterministic": {
+      "name": "Pytorch'un mümkün olduğunda daha yavaş deterministik algoritmalar kullanmasını sağlayın.",
+      "tooltip": "Bunun görüntüleri her durumda deterministik yapmayabileceğini unutmayın."
+    },
+    "fast": {
+      "name": "Test edilmemiş ve potansiyel olarak kaliteyi düşüren bazı optimizasyonları etkinleştirin."
+    },
+    "dont-print-server": {
+      "name": "Sunucu çıktısını konsola yazdırma."
+    },
+    "disable-metadata": {
+      "name": "Dosyalarda istem meta verilerinin kaydedilmesini devre dışı bırak."
+    },
+    "disable-all-custom-nodes": {
+      "name": "Tüm özel düğümlerin yüklenmesini devre dışı bırak."
+    },
+    "log-level": {
+      "name": "Günlükleme ayrıntı düzeyi"
+    },
+    "input-directory": {
+      "name": "Giriş dizini"
+    },
+    "output-directory": {
+      "name": "Çıktı dizini"
+    }
+  },
+  "serverConfigCategories": {
+    "Network": "Ağ",
+    "CUDA": "CUDA",
+    "Inference": "Çıkarım",
+    "Memory": "Bellek",
+    "Preview": "Önizleme",
+    "Cache": "Önbellek",
+    "Attention": "Dikkat",
+    "General": "Genel",
+    "Directories": "Dizinler"
+  },
+  "nodeCategories": {
+    "_for_testing": "_test_için",
+    "custom_sampling": "özel_örnekleme",
+    "noise": "gürültü",
+    "sampling": "örnekleme",
+    "schedulers": "zamanlayıcılar",
+    "guiders": "rehberler",
+    "image": "görüntü",
+    "preprocessors": "ön işlemciler",
+    "advanced": "gelişmiş",
+    "guidance": "rehberlik",
+    "loaders": "yükleyiciler",
+    "model_merging": "model_birleştirme",
+    "attention_experiments": "dikkat_deneyleri",
+    "conditioning": "koşullandırma",
+    "flux": "flux",
+    "hooks": "kancalar",
+    "combine": "birleştir",
+    "cond single": "tek koşul",
+    "controlnet": "controlnet",
+    "inpaint": "inpaint",
+    "scheduling": "zamanlama",
+    "create": "oluştur",
+    "video": "video",
+    "mask": "maske",
+    "deprecated": "kullanımdan kaldırılmış",
+    "latent": "gizli",
+    "audio": "ses",
+    "3d": "3d",
+    "ltxv": "ltxv",
+    "sd3": "sd3",
+    "sigmas": "sigmalar",
+    "api node": "api düğümü",
+    "BFL": "BFL",
+    "model_patches": "model_yamaları",
+    "unet": "unet",
+    "gligen": "gligen",
+    "video_models": "video_modelleri",
+    "Ideogram": "Ideogram",
+    "v1": "v1",
+    "v2": "v2",
+    "v3": "v3",
+    "postprocessing": "son işleme",
+    "transform": "dönüştür",
+    "batch": "toplu",
+    "upscaling": "yükseltme",
+    "instructpix2pix": "instructpix2pix",
+    "compositing": "birleştirme",
+    "Kling": "Kling",
+    "samplers": "örnekleyiciler",
+    "operations": "işlemler",
+    "lotus": "lotus",
+    "Luma": "Luma",
+    "MiniMax": "MiniMax",
+    "debug": "hata ayıklama",
+    "model": "model",
+    "model_specific": "modele_özgü",
+    "OpenAI": "OpenAI",
+    "cond pair": "çift koşul",
+    "photomaker": "photomaker",
+    "Pika": "Pika",
+    "PixVerse": "PixVerse",
+    "utils": "yardımcı programlar",
+    "primitive": "ilkel",
+    "Recraft": "Recraft",
+    "animation": "animasyon",
+    "api": "api",
+    "upscale_diffusion": "yükseltme_difüzyonu",
+    "clip": "klip",
+    "Stability AI": "Stability AI",
+    "stable_cascade": "stabil_çağlayan",
+    "3d_models": "3d_modeller",
+    "style_model": "stil_modeli",
+    "sd": "sd",
+    "Veo": "Veo"
+  },
+  "dataTypes": {
+    "*": "*",
+    "AUDIO": "SES",
+    "BOOLEAN": "BOOLEAN",
+    "CAMERA_CONTROL": "KAMERA_KONTROL",
+    "CLIP": "CLIP",
+    "CLIP_VISION": "CLIP_VISION",
+    "CLIP_VISION_OUTPUT": "CLIP_VISION_ÇIKTISI",
+    "COMBO": "COMBO",
+    "CONDITIONING": "KOŞULLANDIRMA",
+    "CONTROL_NET": "KONTROL_AĞI",
+    "FLOAT": "FLOAT",
+    "FLOATS": "FLOATS",
+    "GLIGEN": "GLIGEN",
+    "GUIDER": "REHBER",
+    "HOOK_KEYFRAMES": "Kanca_anahtar_kareleri",
+    "HOOKS": "Kancalar",
+    "IMAGE": "GÖRÜNTÜ",
+    "INT": "TAMSAYI",
+    "LATENT": "GİZLİ",
+    "LATENT_OPERATION": "GİZLİ_İŞLEM",
+    "LOAD_3D": "3D_YÜKLE",
+    "LOAD_3D_ANIMATION": "3D_ANİMASYON_YÜKLE",
+    "LOAD3D_CAMERA": "YÜKLE3D_KAMERA",
+    "LUMA_CONCEPTS": "LUMA_KAVRAMLARI",
+    "LUMA_REF": "LUMA_REF",
+    "MASK": "MASKE",
+    "MESH": "MESH",
+    "MODEL": "MODEL",
+    "NOISE": "GÜRÜLTÜ",
+    "PHOTOMAKER": "PHOTOMAKER",
+    "PIXVERSE_TEMPLATE": "PIXVERSE_ŞABLONU",
+    "RECRAFT_COLOR": "RECRAFT_RENK",
+    "RECRAFT_CONTROLS": "RECRAFT_KONTROLLERİ",
+    "RECRAFT_V3_STYLE": "RECRAFT_V3_STİLİ",
+    "SAMPLER": "ÖRNEKLEYİCİ",
+    "SIGMAS": "SİGMALAR",
+    "STRING": "METİN",
+    "STYLE_MODEL": "STİL_MODELİ",
+    "SVG": "SVG",
+    "TIMESTEPS_RANGE": "ZAMAN_ADIMLARI_ARALIĞI",
+    "UPSCALE_MODEL": "YÜKSELTME_MODELİ",
+    "VAE": "VAE",
+    "VIDEO": "VİDEO",
+    "VOXEL": "VOXEL",
+    "WEBCAM": "WEBCAM"
+  },
+  "maintenance": {
+    "title": "Bakım",
+    "allOk": "Herhangi bir sorun tespit edilmedi.",
+    "status": "Durum",
+    "detected": "Tespit Edildi",
+    "refreshing": "Yenileniyor",
+    "None": "Yok",
+    "OK": "Tamam",
+    "Skipped": "Atlandı",
+    "showManual": "Bakım görevlerini göster",
+    "confirmTitle": "Emin misiniz?",
+    "terminalDefaultMessage": "Bir sorun giderme komutu çalıştırdığınızda, herhangi bir çıktı burada gösterilecektir.",
+    "consoleLogs": "Konsol Kayıtları",
+    "error": {
+      "toastTitle": "Görev hatası",
+      "taskFailed": "Görev çalıştırılamadı.",
+      "cannotContinue": "Devam edilemiyor - hatalar devam ediyor",
+      "defaultDescription": "Bir bakım görevi çalıştırılırken bir hata oluştu."
+    }
+  },
+  "missingModelsDialog": {
+    "doNotAskAgain": "Bunu bir daha gösterme",
+    "missingModels": "Eksik Modeller",
+    "missingModelsMessage": "Grafik yüklenirken aşağıdaki modeller bulunamadı"
+  },
+  "loadWorkflowWarning": {
+    "outdatedVersion": "Bazı düğümler ComfyUI'nin daha yeni bir sürümünü gerektirir (mevcut: {version}). Tüm düğümleri kullanmak için lütfen güncelleyin.",
+    "outdatedVersionGeneric": "Bazı düğümler ComfyUI'nin daha yeni bir sürümünü gerektirir. Tüm düğümleri kullanmak için lütfen güncelleyin.",
+    "coreNodesFromVersion": "ComfyUI {version} gerektirir:"
+  },
+  "versionMismatchWarning": {
+    "title": "Sürüm Uyumluluk Uyarısı",
+    "frontendOutdated": "Ön uç sürümü {frontendVersion} güncel değil. Arka uç {requiredVersion} veya daha yüksek bir sürüm gerektiriyor.",
+    "frontendNewer": "Ön uç sürümü {frontendVersion}, arka uç sürümü {backendVersion} ile uyumlu olmayabilir.",
+    "updateFrontend": "Ön Ucu Güncelle",
+    "dismiss": "Kapat"
+  },
+  "errorDialog": {
+    "defaultTitle": "Bir hata oluştu",
+    "loadWorkflowTitle": "İş akışı verileri yeniden yüklenirken hata nedeniyle yükleme iptal edildi",
+    "noStackTrace": "Yığın izi mevcut değil",
+    "extensionFileHint": "Bu, aşağıdaki komut dosyasından kaynaklanıyor olabilir",
+    "promptExecutionError": "İstem yürütmesi başarısız oldu"
+  },
+  "apiNodesSignInDialog": {
+    "title": "API Düğümlerini Kullanmak İçin Giriş Yapılması Gerekiyor",
+    "message": "Bu iş akışı, çalıştırmak için hesabınıza giriş yapmanızı gerektiren API Düğümleri içerir."
+  },
+  "apiNodesCostBreakdown": {
+    "title": "API Düğüm(ler)i",
+    "costPerRun": "Çalıştırma başına maliyet",
+    "totalCost": "Toplam Maliyet"
+  },
+  "desktopUpdate": {
+    "title": "ComfyUI Masaüstü Güncelleniyor",
+    "description": "ComfyUI Masaüstü yeni bağımlılıkları yüklüyor. Bu birkaç dakika sürebilir.",
+    "terminalDefaultMessage": "Güncellemeden gelen herhangi bir konsol çıktısı burada gösterilecektir.",
+    "updateFoundTitle": "Güncelleme Bulundu (v{version})",
+    "updateAvailableMessage": "Bir güncelleme mevcut. Şimdi yeniden başlatıp güncellemek ister misiniz?",
+    "noUpdateFound": "Güncelleme bulunamadı",
+    "errorCheckingUpdate": "Güncellemeler kontrol edilirken hata oluştu",
+    "errorInstallingUpdate": "Güncelleme yüklenirken hata oluştu"
+  },
+  "clipboard": {
+    "successMessage": "Panoya kopyalandı",
+    "errorMessage": "Panoya kopyalanamadı",
+    "errorNotSupported": "Pano API'si tarayıcınızda desteklenmiyor"
+  },
+  "load3d": {
+    "switchCamera": "Kamerayı Değiştir",
+    "showGrid": "Izgarayı Göster",
+    "backgroundColor": "Arka Plan Rengi",
+    "lightIntensity": "Işık Yoğunluğu",
+    "fov": "FOV",
+    "previewOutput": "Çıktıyı Önizle",
+    "uploadBackgroundImage": "Arka Plan Resmi Yükle",
+    "removeBackgroundImage": "Arka Plan Resmini Kaldır",
+    "loadingModel": "3D Model Yükleniyor...",
+    "upDirection": "Yukarı Yön",
+    "materialMode": "Malzeme Modu",
+    "scene": "Sahne",
+    "model": "Model",
+    "camera": "Kamera",
+    "light": "Işık",
+    "switchingMaterialMode": "Malzeme Modu Değiştiriliyor...",
+    "edgeThreshold": "Kenar Eşiği",
+    "export": "Dışa Aktar",
+    "exportModel": "Modeli Dışa Aktar",
+    "exportingModel": "Model dışa aktarılıyor...",
+    "uploadTexture": "Doku Yükle",
+    "applyingTexture": "Doku uygulanıyor...",
+    "materialModes": {
+      "normal": "Normal",
+      "wireframe": "Tel Kafes",
+      "original": "Orijinal",
+      "depth": "Derinlik",
+      "lineart": "Çizgi Sanatı"
+    },
+    "upDirections": {
+      "original": "Orijinal"
+    },
+    "startRecording": "Kaydı Başlat",
+    "stopRecording": "Kaydı Durdur",
+    "exportRecording": "Kaydı Dışa Aktar",
+    "clearRecording": "Kaydı Temizle",
+    "resizeNodeMatchOutput": "Düğümü çıktıya uyacak şekilde yeniden boyutlandır",
+    "loadingBackgroundImage": "Arka Plan Resmi Yükleniyor",
+    "cameraType": {
+      "perspective": "Perspektif",
+      "orthographic": "Ortografik"
+    },
+    "viewer": {
+      "title": "3D Görüntüleyici (Beta)",
+      "apply": "Uygula",
+      "cancel": "İptal",
+      "cameraType": "Kamera Tipi",
+      "sceneSettings": "Sahne Ayarları",
+      "cameraSettings": "Kamera Ayarları",
+      "lightSettings": "Işık Ayarları",
+      "exportSettings": "Dışa Aktarma Ayarları",
+      "modelSettings": "Model Ayarları"
+    },
+    "openIn3DViewer": "3D Görüntüleyicide Aç"
+  },
+  "toastMessages": {
+    "nothingToQueue": "Kuyruğa alınacak bir şey yok",
+    "pleaseSelectOutputNodes": "Lütfen çıktı düğümlerini seçin",
+    "no3dScene": "Doku uygulanacak 3D sahne yok",
+    "failedToApplyTexture": "Doku uygulanamadı",
+    "no3dSceneToExport": "Dışa aktarılacak 3D sahne yok",
+    "failedToExportModel": "Model {format} olarak dışa aktarılamadı",
+    "fileLoadError": "{fileName} içinde iş akışı bulunamıyor",
+    "dropFileError": "Sürüklenen öğe işlenemiyor: {error}",
+    "interrupted": "Yürütme kesintiye uğradı",
+    "pendingTasksDeleted": "Bekleyen görevler silindi",
+    "nothingToGroup": "Gruplandırılacak bir şey yok",
+    "pleaseSelectNodesToGroup": "Lütfen bir grup oluşturmak için düğümleri (veya diğer grupları) seçin",
+    "emptyCanvas": "Boş tuval",
+    "fileUploadFailed": "Dosya yükleme başarısız oldu",
+    "unableToGetModelFilePath": "Model dosyası yolu alınamıyor",
+    "couldNotDetermineFileType": "Dosya türü belirlenemedi",
+    "errorLoadingModel": "Model yüklenirken hata oluştu",
+    "failedToDownloadFile": "Dosya indirilemedi",
+    "updateRequested": "Güncelleme istendi",
+    "nodeDefinitionsUpdated": "Düğüm tanımları güncellendi",
+    "errorSaveSetting": "{id} ayarı kaydedilirken hata oluştu: {err}",
+    "errorCopyImage": "Görüntü kopyalanırken hata oluştu: {error}",
+    "noTemplatesToExport": "Dışa aktarılacak şablon yok",
+    "failedToFetchLogs": "Sunucu günlükleri alınamadı",
+    "migrateToLitegraphReroute": "Yeniden yönlendirme düğümleri gelecekteki sürümlerde kaldırılacaktır. Litegraph yerel yeniden yönlendirmeye geçmek için tıklayın.",
+    "userNotAuthenticated": "Kullanıcı doğrulanmadı",
+    "failedToFetchBalance": "Bakiye alınamadı: {error}",
+    "failedToCreateCustomer": "Müşteri oluşturulamadı: {error}",
+    "failedToInitiateCreditPurchase": "Kredi satın alma başlatılamadı: {error}",
+    "failedToAccessBillingPortal": "Faturalandırma portalına erişilemedi: {error}",
+    "failedToPurchaseCredits": "Kredi satın alınamadı: {error}",
+    "unauthorizedDomain": "{domain} alan adınız bu hizmeti kullanma yetkisine sahip değil. Alan adınızı beyaz listeye eklemek için lütfen {email} ile iletişime geçin.",
+    "useApiKeyTip": "İpucu: Normal girişe erişemiyor musunuz? Comfy API Anahtarı seçeneğini kullanın.",
+    "nothingSelected": "Hiçbir şey seçilmedi",
+    "cannotCreateSubgraph": "Alt grafik oluşturulamıyor",
+    "failedToConvertToSubgraph": "Öğeler alt grafiğe dönüştürülemedi",
+    "failedToInitializeLoad3dViewer": "3D Görüntüleyici başlatılamadı"
+  },
+  "auth": {
+    "apiKey": {
+      "title": "API Anahtarı",
+      "label": "API Anahtarı",
+      "description": "API Düğümlerini etkinleştirmek için Comfy API anahtarınızı kullanın",
+      "placeholder": "API Anahtarınızı girin",
+      "error": "Geçersiz API Anahtarı",
+      "storageFailed": "API Anahtarı saklanamadı",
+      "storageFailedDetail": "Lütfen tekrar deneyin.",
+      "stored": "API Anahtarı saklandı",
+      "storedDetail": "API Anahtarınız başarıyla saklandı",
+      "cleared": "API Anahtarı temizlendi",
+      "clearedDetail": "API Anahtarınız başarıyla temizlendi",
+      "invalid": "Geçersiz API Anahtarı",
+      "invalidDetail": "Lütfen geçerli bir API Anahtarı girin",
+      "helpText": "Bir API anahtarına mı ihtiyacınız var?",
+      "generateKey": "Buradan bir tane alın",
+      "whitelistInfo": "Beyaz listede olmayan siteler hakkında"
+    },
+    "login": {
+      "title": "Hesabınıza giriş yapın",
+      "useApiKey": "Comfy API Anahtarı",
+      "signInOrSignUp": "Giriş Yap / Kaydol",
+      "forgotPasswordError": "Şifre sıfırlama e-postası gönderilemedi",
+      "passwordResetSent": "Şifre sıfırlama e-postası gönderildi",
+      "passwordResetSentDetail": "Şifrenizi sıfırlamak için bir bağlantı içeren e-postanızı kontrol edin.",
+      "newUser": "Buralarda yeni misiniz?",
+      "userAvatar": "Kullanıcı Avatarı",
+      "signUp": "Kaydol",
+      "emailLabel": "E-posta",
+      "emailPlaceholder": "E-postanızı girin",
+      "passwordLabel": "Şifre",
+      "passwordPlaceholder": "Şifrenizi girin",
+      "confirmPasswordLabel": "Şifreyi Onayla",
+      "confirmPasswordPlaceholder": "Aynı şifreyi tekrar girin",
+      "forgotPassword": "Şifrenizi mi unuttunuz?",
+      "loginButton": "Giriş Yap",
+      "orContinueWith": "Veya şununla devam et",
+      "loginWithGoogle": "Google ile giriş yap",
+      "loginWithGithub": "Github ile giriş yap",
+      "termsText": "\"İleri\" veya \"Kaydol\" düğmesine tıklayarak,",
+      "termsLink": "Kullanım Koşullarımızı",
+      "andText": "ve",
+      "privacyLink": "Gizlilik Politikamızı",
+      "success": "Giriş başarılı",
+      "failed": "Giriş başarısız",
+      "insecureContextWarning": "Bu bağlantı güvensiz (HTTP) - giriş yapmaya devam ederseniz kimlik bilgileriniz saldırganlar tarafından ele geçirilebilir.",
+      "questionsContactPrefix": "Sorularınız mı var? Bize ulaşın:",
+      "noAssociatedUser": "Sağlanan API anahtarıyla ilişkili Comfy kullanıcısı yok"
+    },
+    "signup": {
+      "title": "Hesap oluşturun",
+      "alreadyHaveAccount": "Zaten bir hesabınız var mı?",
+      "emailLabel": "E-posta",
+      "emailPlaceholder": "E-postanızı girin",
+      "passwordLabel": "Şifre",
+      "passwordPlaceholder": "Yeni şifre girin",
+      "signUpButton": "Kaydol",
+      "signIn": "Giriş yap",
+      "signUpWithGoogle": "Google ile kaydol",
+      "signUpWithGithub": "Github ile kaydol",
+      "regionRestrictionChina": "Yerel düzenleyici gereklilikler uyarınca, hizmetlerimiz geçici olarak Çin'de bulunan kullanıcılara sunulmamaktadır.",
+      "personalDataConsentLabel": "Kişisel verilerimin işlenmesini kabul ediyorum."
+    },
+    "signOut": {
+      "signOut": "Çıkış Yap",
+      "success": "Başarıyla çıkış yapıldı",
+      "successDetail": "Hesabınızdan başarıyla çıkış yaptınız."
+    },
+    "passwordUpdate": {
+      "success": "Şifre Güncellendi",
+      "successDetail": "Şifreniz başarıyla güncellendi"
+    },
+    "deleteAccount": {
+      "deleteAccount": "Hesabı Sil",
+      "confirmTitle": "Hesabı Sil",
+      "confirmMessage": "Hesabınızı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz ve tüm verilerinizi kalıcı olarak silecektir.",
+      "confirm": "Hesabı Sil",
+      "cancel": "İptal",
+      "success": "Hesap Silindi",
+      "successDetail": "Hesabınız başarıyla silindi."
+    }
+  },
+  "validation": {
+    "invalidEmail": "Geçersiz e-posta adresi",
+    "required": "Gerekli",
+    "minLength": "En az {length} karakter olmalı",
+    "maxLength": "En fazla {length} karakter olmalı",
+    "prefix": "{prefix} ile başlamalı",
+    "descriptionRequired": "Açıklama gerekli",
+    "length": "{length} karakter olmalı",
+    "password": {
+      "requirements": "Şifre gereksinimleri",
+      "minLength": "8 ila 32 karakter arasında olmalı",
+      "uppercase": "En az bir büyük harf içermeli",
+      "lowercase": "En az bir küçük harf içermeli",
+      "number": "En az bir rakam içermeli",
+      "special": "En az bir özel karakter içermeli",
+      "match": "Şifreler eşleşmeli"
+    },
+    "personalDataConsentRequired": "Kişisel verilerinizin işlenmesini kabul etmelisiniz."
+  },
+  "credits": {
+    "activity": "Aktivite",
+    "credits": "Krediler",
+    "yourCreditBalance": "Kredi bakiyeniz",
+    "purchaseCredits": "Kredi Satın Al",
+    "invoiceHistory": "Fatura Geçmişi",
+    "apiPricing": "API Fiyatlandırması",
+    "faqs": "SSS",
+    "messageSupport": "Destek Mesajı",
+    "lastUpdated": "Son güncellenme",
+    "topUp": {
+      "insufficientTitle": "Yetersiz Kredi",
+      "insufficientMessage": "Bu iş akışını çalıştırmak için yeterli krediniz yok.",
+      "quickPurchase": "Hızlı Satın Alma",
+      "maxAmount": "(Maks. 1.000 USD)",
+      "buyNow": "Şimdi al",
+      "seeDetails": "Detayları gör",
+      "topUp": "Yükleme Yap"
+    },
+    "eventType": "Etkinlik Türü",
+    "details": "Detaylar",
+    "time": "Zaman",
+    "additionalInfo": "Ek Bilgi",
+    "model": "Model",
+    "added": "Eklendi",
+    "accountInitialized": "Hesap başlatıldı"
+  },
+  "userSettings": {
+    "title": "Kullanıcı Ayarları",
+    "name": "İsim",
+    "email": "E-posta",
+    "provider": "Giriş Sağlayıcı",
+    "notSet": "Ayarlanmadı",
+    "updatePassword": "Şifreyi Güncelle"
+  },
+  "selectionToolbox": {
+    "executeButton": {
+      "tooltip": "Seçili çıktı düğümlerine yürüt (Turuncu kenarlıkla vurgulanmış)",
+      "disabledTooltip": "Çıktı düğümü seçilmedi"
+    }
+  },
+  "chatHistory": {
+    "cancelEdit": "İptal",
+    "editTooltip": "Mesajı düzenle",
+    "cancelEditTooltip": "Düzenlemeyi iptal et",
+    "copiedTooltip": "Kopyalandı",
+    "copyTooltip": "Mesajı panoya kopyala"
+  },
+  "nodeHelpPage": {
+    "inputs": "Girdiler",
+    "outputs": "Çıktılar",
+    "type": "Tür",
+    "moreHelp": "Daha fazla yardım için ziyaret edin",
+    "documentationPage": "belgelendirme sayfası",
+    "loadError": "Yardım yüklenemedi: {error}"
+  },
+  "whatsNewPopup": {
+    "learnMore": "Daha fazla bilgi edinin",
+    "noReleaseNotes": "Sürüm notu yok."
+  },
+  "breadcrumbsMenu": {
+    "duplicate": "Çoğalt",
+    "clearWorkflow": "İş Akışını Temizle",
+    "deleteWorkflow": "İş Akışını Sil",
+    "deleteBlueprint": "Taslağı Sil",
+    "enterNewName": "Yeni isim girin"
+  },
+  "shortcuts": {
+    "essentials": "Temel",
+    "viewControls": "Görünüm Kontrolleri",
+    "manageShortcuts": "Kısayolları Yönet",
+    "noKeybinding": "Tuş ataması yok",
+    "keyboardShortcuts": "Klavye Kısayolları",
+    "subcategories": {
+      "workflow": "İş Akışı",
+      "node": "Düğüm",
+      "queue": "Kuyruk",
+      "view": "Görünüm",
+      "panelControls": "Panel Kontrolleri"
+    }
+  },
+  "minimap": {
+    "nodeColors": "Düğüm Renkleri",
+    "showLinks": "Bağlantıları Göster",
+    "showGroups": "Çerçeveleri/Grupları Göster",
+    "renderBypassState": "Atlama Durumunu Oluştur",
+    "renderErrorState": "Hata Durumunu Oluştur"
+  }
+}
\ No newline at end of file
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
new file mode 100644
index 0000000000..40c8d3ea61
--- /dev/null
+++ b/src/locales/tr/nodeDefs.json
@@ -0,0 +1,8653 @@
+{
+  "AddNoise": {
+    "display_name": "Gürültü Ekle",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "noise": {
+        "name": "gürültü"
+      },
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "latent_image": {
+        "name": "gizli_görüntü"
+      }
+    }
+  },
+  "AlignYourStepsScheduler": {
+    "display_name": "AdımlarınıHizalaZamanlayıcı",
+    "inputs": {
+      "model_type": {
+        "name": "model_türü"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    }
+  },
+  "BasicGuider": {
+    "display_name": "Temel Rehber",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "conditioning": {
+        "name": "koşullandırma"
+      }
+    }
+  },
+  "BasicScheduler": {
+    "display_name": "Temel Zamanlayıcı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "scheduler": {
+        "name": "zamanlayıcı"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    }
+  },
+  "BetaSamplingScheduler": {
+    "display_name": "BetaÖrneklemeZamanlayıcısı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "alpha": {
+        "name": "alfa"
+      },
+      "beta": {
+        "name": "beta"
+      }
+    }
+  },
+  "Canny": {
+    "display_name": "Canny",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "low_threshold": {
+        "name": "düşük_eşik"
+      },
+      "high_threshold": {
+        "name": "yüksek_eşik"
+      }
+    }
+  },
+  "CFGGuider": {
+    "display_name": "CFG Rehberi",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "cfg": {
+        "name": "cfg"
+      }
+    }
+  },
+  "CFGZeroStar": {
+    "display_name": "CFGSıfırYıldız",
+    "inputs": {
+      "model": {
+        "name": "model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "yamalı_model"
+      }
+    }
+  },
+  "CheckpointLoader": {
+    "display_name": "Yapılandırmayla Kontrol Noktası Yükle (ESKİ)",
+    "inputs": {
+      "config_name": {
+        "name": "yapılandırma_adı"
+      },
+      "ckpt_name": {
+        "name": "ckpt_adı"
+      }
+    }
+  },
+  "CheckpointLoaderSimple": {
+    "display_name": "Kontrol Noktası Yükle",
+    "description": "Bir difüzyon modeli kontrol noktası yükler, difüzyon modelleri gizli değişkenlerin gürültüsünü azaltmak için kullanılır.",
+    "inputs": {
+      "ckpt_name": {
+        "name": "ckpt_adı",
+        "tooltip": "Yüklenecek kontrol noktasının (modelin) adı."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Gizli değişkenlerin gürültüsünü azaltmak için kullanılan model."
+      },
+      "1": {
+        "tooltip": "Metin istemlerini kodlamak için kullanılan CLIP modeli."
+      },
+      "2": {
+        "tooltip": "Görüntüleri gizli uzaya ve gizli uzaydan kodlamak ve kodunu çözmek için kullanılan VAE modeli."
+      }
+    }
+  },
+  "CheckpointSave": {
+    "display_name": "Kontrol Noktasını Kaydet",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "CLIPAttentionMultiply": {
+    "display_name": "CLIP Dikkat Çarpımı",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "q": {
+        "name": "q"
+      },
+      "k": {
+        "name": "k"
+      },
+      "v": {
+        "name": "v"
+      },
+      "out": {
+        "name": "çıktı"
+      }
+    }
+  },
+  "CLIPLoader": {
+    "display_name": "CLIP Yükle",
+    "description": "[Tarifler]\n\nstable_diffusion: clip-l\nstable_cascade: clip-g\nsd3: t5 xxl/ clip-g / clip-l\nstable_audio: t5 base\nmochi: t5 xxl\ncosmos: eski t5 xxl\nlumina2: gemma 2 2B\nwan: umt5 xxl\n hidream: llama-3.1 (Önerilir) veya t5",
+    "inputs": {
+      "clip_name": {
+        "name": "clip_adı"
+      },
+      "type": {
+        "name": "tür"
+      },
+      "device": {
+        "name": "cihaz"
+      }
+    }
+  },
+  "CLIPMergeAdd": {
+    "display_name": "CLIP Birleştirme Ekle",
+    "inputs": {
+      "clip1": {
+        "name": "clip1"
+      },
+      "clip2": {
+        "name": "clip2"
+      }
+    }
+  },
+  "CLIPMergeSimple": {
+    "display_name": "Basit CLIP Birleştirme",
+    "inputs": {
+      "clip1": {
+        "name": "clip1"
+      },
+      "clip2": {
+        "name": "clip2"
+      },
+      "ratio": {
+        "name": "oran"
+      }
+    }
+  },
+  "CLIPMergeSubtract": {
+    "display_name": "CLIP Birleştirme Çıkar",
+    "inputs": {
+      "clip1": {
+        "name": "clip1"
+      },
+      "clip2": {
+        "name": "clip2"
+      },
+      "multiplier": {
+        "name": "çarpan"
+      }
+    }
+  },
+  "CLIPSave": {
+    "display_name": "CLIP Kaydet",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "CLIPSetLastLayer": {
+    "display_name": "CLIP Son Katmanı Ayarla",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "stop_at_clip_layer": {
+        "name": "clip_katmanında_dur"
+      }
+    }
+  },
+  "CLIPTextEncode": {
+    "display_name": "CLIP Metin Kodlama (İstem)",
+    "description": "Bir metin istemini bir CLIP modeli kullanarak, belirli görüntülerin oluşturulmasına yönelik difüzyon modelini yönlendirmek için kullanılabilecek bir gömme içine kodlar.",
+    "inputs": {
+      "text": {
+        "name": "metin",
+        "tooltip": "Kodlanacak metin."
+      },
+      "clip": {
+        "name": "clip",
+        "tooltip": "Metni kodlamak için kullanılan CLIP modeli."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Difüzyon modelini yönlendirmek için kullanılan gömülü metni içeren bir koşullandırma."
+      }
+    }
+  },
+  "CLIPTextEncodeControlnet": {
+    "display_name": "CLIPMetinKodlamaControlnet",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "text": {
+        "name": "metin"
+      }
+    }
+  },
+  "CLIPTextEncodeFlux": {
+    "display_name": "CLIPMetinKodlamaFlux",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "clip_l": {
+        "name": "clip_l"
+      },
+      "t5xxl": {
+        "name": "t5xxl"
+      },
+      "guidance": {
+        "name": "rehberlik"
+      }
+    }
+  },
+  "CLIPTextEncodeHiDream": {
+    "display_name": "CLIPMetinKodlamaHiDream",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "clip_l": {
+        "name": "clip_l"
+      },
+      "clip_g": {
+        "name": "clip_g"
+      },
+      "t5xxl": {
+        "name": "t5xxl"
+      },
+      "llama": {
+        "name": "llama"
+      }
+    }
+  },
+  "CLIPTextEncodeHunyuanDiT": {
+    "display_name": "CLIPMetinKodlamaHunyuanDiT",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "bert": {
+        "name": "bert"
+      },
+      "mt5xl": {
+        "name": "mt5xl"
+      }
+    }
+  },
+  "CLIPTextEncodeLumina2": {
+    "display_name": "Lumina2 için CLIP Metin Kodlama",
+    "description": "Bir sistem istemini ve bir kullanıcı istemini bir CLIP modeli kullanarak, belirli görüntülerin oluşturulmasına yönelik difüzyon modelini yönlendirmek için kullanılabilecek bir gömme içine kodlar.",
+    "inputs": {
+      "system_prompt": {
+        "name": "sistem_istemi",
+        "tooltip": "Lumina2 iki tür sistem istemi sağlar: Üstün: Metinsel istemlere veya kullanıcı istemlerine dayalı olarak üstün derecede görüntü-metin hizalamasına sahip üstün görüntüler oluşturmak için tasarlanmış bir asistansınız. Hizalama: Metinsel istemlere dayalı olarak en yüksek derecede görüntü-metin hizalamasına sahip yüksek kaliteli görüntüler oluşturmak için tasarlanmış bir asistansınız."
+      },
+      "user_prompt": {
+        "name": "kullanıcı_istemi",
+        "tooltip": "Kodlanacak metin."
+      },
+      "clip": {
+        "name": "clip",
+        "tooltip": "Metni kodlamak için kullanılan CLIP modeli."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Difüzyon modelini yönlendirmek için kullanılan gömülü metni içeren bir koşullandırma."
+      }
+    }
+  },
+  "CLIPTextEncodePixArtAlpha": {
+    "display_name": "CLIPMetinKodlamaPixArtAlpha",
+    "description": "Metni kodlar ve PixArt Alpha için çözünürlük koşullandırmasını ayarlar. PixArt Sigma için geçerli değildir.",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "text": {
+        "name": "metin"
+      },
+      "clip": {
+        "name": "clip"
+      }
+    }
+  },
+  "CLIPTextEncodeSD3": {
+    "display_name": "CLIPMetinKodlamaSD3",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "clip_l": {
+        "name": "clip_l"
+      },
+      "clip_g": {
+        "name": "clip_g"
+      },
+      "t5xxl": {
+        "name": "t5xxl"
+      },
+      "empty_padding": {
+        "name": "boş_dolgu"
+      }
+    }
+  },
+  "CLIPTextEncodeSDXL": {
+    "display_name": "CLIPMetinKodlamaSDXL",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "crop_w": {
+        "name": "kırpma_g"
+      },
+      "crop_h": {
+        "name": "kırpma_y"
+      },
+      "target_width": {
+        "name": "hedef_genişlik"
+      },
+      "target_height": {
+        "name": "hedef_yükseklik"
+      },
+      "text_g": {
+        "name": "metin_g"
+      },
+      "text_l": {
+        "name": "metin_l"
+      }
+    }
+  },
+  "CLIPTextEncodeSDXLRefiner": {
+    "display_name": "CLIPMetinKodlamaSDXLRefiner",
+    "inputs": {
+      "ascore": {
+        "name": "askor"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "text": {
+        "name": "metin"
+      },
+      "clip": {
+        "name": "clip"
+      }
+    }
+  },
+  "CLIPVisionEncode": {
+    "display_name": "CLIP Görü Kodlama",
+    "inputs": {
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "crop": {
+        "name": "kırp"
+      }
+    }
+  },
+  "CLIPVisionLoader": {
+    "display_name": "CLIP Görü Yükle",
+    "inputs": {
+      "clip_name": {
+        "name": "clip_adı"
+      }
+    }
+  },
+  "CombineHooks2": {
+    "display_name": "Kancaları Birleştir [2]",
+    "inputs": {
+      "hooks_A": {
+        "name": "kancalar_A"
+      },
+      "hooks_B": {
+        "name": "kancalar_B"
+      }
+    }
+  },
+  "CombineHooks4": {
+    "display_name": "Kancaları Birleştir [4]",
+    "inputs": {
+      "hooks_A": {
+        "name": "kancalar_A"
+      },
+      "hooks_B": {
+        "name": "kancalar_B"
+      },
+      "hooks_C": {
+        "name": "kancalar_C"
+      },
+      "hooks_D": {
+        "name": "kancalar_D"
+      }
+    }
+  },
+  "CombineHooks8": {
+    "display_name": "Kancaları Birleştir [8]",
+    "inputs": {
+      "hooks_A": {
+        "name": "kancalar_A"
+      },
+      "hooks_B": {
+        "name": "kancalar_B"
+      },
+      "hooks_C": {
+        "name": "kancalar_C"
+      },
+      "hooks_D": {
+        "name": "kancalar_D"
+      },
+      "hooks_E": {
+        "name": "kancalar_E"
+      },
+      "hooks_F": {
+        "name": "kancalar_F"
+      },
+      "hooks_G": {
+        "name": "kancalar_G"
+      },
+      "hooks_H": {
+        "name": "kancalar_H"
+      }
+    }
+  },
+  "ConditioningAverage": {
+    "display_name": "KoşullandırmaOrtalaması",
+    "inputs": {
+      "conditioning_to": {
+        "name": "hedef_koşullandırma"
+      },
+      "conditioning_from": {
+        "name": "kaynak_koşullandırma"
+      },
+      "conditioning_to_strength": {
+        "name": "hedef_koşullandırma_gücü"
+      }
+    }
+  },
+  "ConditioningCombine": {
+    "display_name": "Koşullandırma (Birleştir)",
+    "inputs": {
+      "conditioning_1": {
+        "name": "koşullandırma_1"
+      },
+      "conditioning_2": {
+        "name": "koşullandırma_2"
+      }
+    }
+  },
+  "ConditioningConcat": {
+    "display_name": "Koşullandırma (Birleştir)",
+    "inputs": {
+      "conditioning_to": {
+        "name": "hedef_koşullandırma"
+      },
+      "conditioning_from": {
+        "name": "kaynak_koşullandırma"
+      }
+    }
+  },
+  "ConditioningSetArea": {
+    "display_name": "Koşullandırma (Alan Ayarla)",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "ConditioningSetAreaPercentage": {
+    "display_name": "Koşullandırma (Yüzde ile Alan Ayarla)",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "ConditioningSetAreaPercentageVideo": {
+    "display_name": "KoşullandırmaAlanYüzdesiVideo",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "temporal": {
+        "name": "zamansal"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "z": {
+        "name": "z"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "ConditioningSetAreaStrength": {
+    "display_name": "KoşullandırmaAlanGücüAyarla",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "ConditioningSetDefaultCombine": {
+    "display_name": "Koşul Varsayılan Birleştirmeyi Ayarla",
+    "inputs": {
+      "cond": {
+        "name": "koşul"
+      },
+      "cond_DEFAULT": {
+        "name": "koşul_VARSAYILAN"
+      },
+      "hooks": {
+        "name": "kancalar"
+      }
+    }
+  },
+  "ConditioningSetMask": {
+    "display_name": "Koşullandırma (Maske Ayarla)",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "set_cond_area": {
+        "name": "koşul_alanı_ayarla"
+      }
+    }
+  },
+  "ConditioningSetProperties": {
+    "display_name": "Koşul Özelliklerini Ayarla",
+    "inputs": {
+      "cond_NEW": {
+        "name": "yeni_koşul"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "set_cond_area": {
+        "name": "koşul_alanı_ayarla"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "hooks": {
+        "name": "kancalar"
+      },
+      "timesteps": {
+        "name": "zaman_adımları"
+      }
+    }
+  },
+  "ConditioningSetPropertiesAndCombine": {
+    "display_name": "Koşul Özelliklerini Ayarla ve Birleştir",
+    "inputs": {
+      "cond": {
+        "name": "koşul"
+      },
+      "cond_NEW": {
+        "name": "yeni_koşul"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "set_cond_area": {
+        "name": "koşul_alanı_ayarla"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "hooks": {
+        "name": "kancalar"
+      },
+      "timesteps": {
+        "name": "zaman_adımları"
+      }
+    }
+  },
+  "ConditioningSetTimestepRange": {
+    "display_name": "KoşullandırmaZamanAdımıAralığıAyarla",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "start": {
+        "name": "başlangıç"
+      },
+      "end": {
+        "name": "bitiş"
+      }
+    }
+  },
+  "ConditioningStableAudio": {
+    "display_name": "KoşullandırmaKararlıSes",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "seconds_start": {
+        "name": "saniye_başlangıç"
+      },
+      "seconds_total": {
+        "name": "saniye_toplam"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "ConditioningTimestepsRange": {
+    "display_name": "Zaman Adımları Aralığı",
+    "inputs": {
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "ARALIK_ÖNCESİ"
+      },
+      "2": {
+        "name": "ARALIK_SONRASI"
+      }
+    }
+  },
+  "ConditioningZeroOut": {
+    "display_name": "KoşullandırmaSıfırla",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      }
+    }
+  },
+  "ControlNetApply": {
+    "display_name": "ControlNet Uygula (ESKİ)",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "control_net": {
+        "name": "kontrol_ağı"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "ControlNetApplyAdvanced": {
+    "display_name": "ControlNet Uygula",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "control_net": {
+        "name": "kontrol_ağı"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "ControlNetApplySD3": {
+    "display_name": "VAE ile Controlnet Uygula",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "control_net": {
+        "name": "kontrol_ağı"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "ControlNetInpaintingAliMamaApply": {
+    "display_name": "ControlNetInpaintingAliMamaUygula",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "control_net": {
+        "name": "kontrol_ağı"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "ControlNetLoader": {
+    "display_name": "ControlNet Modelini Yükle",
+    "inputs": {
+      "control_net_name": {
+        "name": "kontrol_ağı_adı"
+      }
+    }
+  },
+  "CosmosImageToVideoLatent": {
+    "display_name": "CosmosGörüntüdenVideoyaGizli",
+    "inputs": {
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "end_image": {
+        "name": "bitiş_görüntüsü"
+      }
+    }
+  },
+  "CreateHookKeyframe": {
+    "display_name": "Kanca Anahtar Karesi Oluştur",
+    "inputs": {
+      "strength_mult": {
+        "name": "güç_çarpanı"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "prev_hook_kf": {
+        "name": "önceki_kanca_kf"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "Kanca_KF"
+      }
+    }
+  },
+  "CreateHookKeyframesFromFloats": {
+    "display_name": "Ondalıklardan Kanca Anahtar Kareleri Oluştur",
+    "inputs": {
+      "floats_strength": {
+        "name": "ondalık_güç"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      },
+      "print_keyframes": {
+        "name": "anahtar_kareleri_yazdır"
+      },
+      "prev_hook_kf": {
+        "name": "önceki_kanca_kf"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "Kanca_KF"
+      }
+    }
+  },
+  "CreateHookKeyframesInterpolated": {
+    "display_name": "Ara Değerlenmiş Kanca Anahtar Kareleri Oluştur",
+    "inputs": {
+      "strength_start": {
+        "name": "başlangıç_gücü"
+      },
+      "strength_end": {
+        "name": "bitiş_gücü"
+      },
+      "interpolation": {
+        "name": "enterpolasyon"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      },
+      "keyframes_count": {
+        "name": "anahtar_kare_sayısı"
+      },
+      "print_keyframes": {
+        "name": "anahtar_kareleri_yazdır"
+      },
+      "prev_hook_kf": {
+        "name": "önceki_kanca_kf"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "Kanca_KF"
+      }
+    }
+  },
+  "CreateHookLora": {
+    "display_name": "Kanca LoRA Oluştur",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_adı"
+      },
+      "strength_model": {
+        "name": "model_gücü"
+      },
+      "strength_clip": {
+        "name": "clip_gücü"
+      },
+      "prev_hooks": {
+        "name": "önceki_kancalar"
+      }
+    }
+  },
+  "CreateHookLoraModelOnly": {
+    "display_name": "Kanca LoRA Oluştur (Sadece Model)",
+    "inputs": {
+      "lora_name": {
+        "name": "lora_adı"
+      },
+      "strength_model": {
+        "name": "model_gücü"
+      },
+      "prev_hooks": {
+        "name": "önceki_kancalar"
+      }
+    }
+  },
+  "CreateHookModelAsLora": {
+    "display_name": "Modeli LoRA Olarak Kanca Oluştur",
+    "inputs": {
+      "ckpt_name": {
+        "name": "ckpt_adı"
+      },
+      "strength_model": {
+        "name": "model_gücü"
+      },
+      "strength_clip": {
+        "name": "clip_gücü"
+      },
+      "prev_hooks": {
+        "name": "önceki_kancalar"
+      }
+    }
+  },
+  "CreateHookModelAsLoraModelOnly": {
+    "display_name": "Modeli LoRA Olarak Kanca Oluştur (Sadece Model)",
+    "inputs": {
+      "ckpt_name": {
+        "name": "ckpt_adı"
+      },
+      "strength_model": {
+        "name": "model_gücü"
+      },
+      "prev_hooks": {
+        "name": "önceki_kancalar"
+      }
+    }
+  },
+  "CreateVideo": {
+    "display_name": "Video Oluştur",
+    "description": "Görüntülerden bir video oluşturun.",
+    "inputs": {
+      "images": {
+        "name": "görüntüler",
+        "tooltip": "Video oluşturulacak görüntüler."
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "audio": {
+        "name": "ses",
+        "tooltip": "Videoya eklenecek ses."
+      }
+    }
+  },
+  "CropMask": {
+    "display_name": "Maskeyi Kırp",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      }
+    }
+  },
+  "DiffControlNetLoader": {
+    "display_name": "ControlNet Modelini Yükle (fark)",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "control_net_name": {
+        "name": "kontrol_ağı_adı"
+      }
+    }
+  },
+  "DifferentialDiffusion": {
+    "display_name": "Diferansiyel Difüzyon",
+    "inputs": {
+      "model": {
+        "name": "model"
+      }
+    }
+  },
+  "DiffusersLoader": {
+    "display_name": "Diffusers Yükleyici",
+    "inputs": {
+      "model_path": {
+        "name": "model_yolu"
+      }
+    }
+  },
+  "DisableNoise": {
+    "display_name": "Gürültüyü Devre Dışı Bırak"
+  },
+  "DualCFGGuider": {
+    "display_name": "İkili CFG Rehberi",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "cond1": {
+        "name": "koşul1"
+      },
+      "cond2": {
+        "name": "koşul2"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "cfg_conds": {
+        "name": "cfg_koşulları"
+      },
+      "cfg_cond2_negative": {
+        "name": "cfg_koşul2_negatif"
+      }
+    }
+  },
+  "DualCLIPLoader": {
+    "display_name": "İkili CLIP Yükleyici",
+    "description": "[Tarifler]\n\nsdxl: clip-l, clip-g\nsd3: clip-l, clip-g / clip-l, t5 / clip-g, t5\nflux: clip-l, t5\nhidream: t5 veya llama'dan en az biri, t5 ve llama önerilir",
+    "inputs": {
+      "clip_name1": {
+        "name": "clip_adı1"
+      },
+      "clip_name2": {
+        "name": "clip_adı2"
+      },
+      "type": {
+        "name": "tür"
+      },
+      "device": {
+        "name": "cihaz"
+      }
+    }
+  },
+  "EmptyCosmosLatentVideo": {
+    "display_name": "BoşCosmosGizliVideo",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "EmptyHunyuanLatentVideo": {
+    "display_name": "BoşHunyuanGizliVideo",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "EmptyImage": {
+    "display_name": "Boş Görüntü",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "color": {
+        "name": "renk"
+      }
+    }
+  },
+  "EmptyLatentAudio": {
+    "display_name": "Boş Gizli Ses",
+    "inputs": {
+      "seconds": {
+        "name": "saniye"
+      },
+      "batch_size": {
+        "name": "toplu_boyut",
+        "tooltip": "Toplu işlemdeki gizli görüntülerin sayısı."
+      }
+    }
+  },
+  "EmptyLatentHunyuan3Dv2": {
+    "display_name": "BoşGizliHunyuan3Dv2",
+    "inputs": {
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "batch_size": {
+        "name": "toplu_boyut",
+        "tooltip": "Toplu işlemdeki gizli görüntülerin sayısı."
+      }
+    }
+  },
+  "EmptyLatentImage": {
+    "display_name": "Boş Gizli Görüntü",
+    "description": "Örnekleme yoluyla gürültüsü giderilecek yeni bir boş gizli görüntü grubu oluşturun.",
+    "inputs": {
+      "width": {
+        "name": "genişlik",
+        "tooltip": "Gizli görüntülerin piksel cinsinden genişliği."
+      },
+      "height": {
+        "name": "yükseklik",
+        "tooltip": "Gizli görüntülerin piksel cinsinden yüksekliği."
+      },
+      "batch_size": {
+        "name": "toplu_boyut",
+        "tooltip": "Toplu işlemdeki gizli görüntülerin sayısı."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Boş gizli görüntü grubu."
+      }
+    }
+  },
+  "EmptyLTXVLatentVideo": {
+    "display_name": "BoşLTXVGizliVideo",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "EmptyMochiLatentVideo": {
+    "display_name": "BoşMochiGizliVideo",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "EmptySD3LatentImage": {
+    "display_name": "BoşSD3GizliGörüntü",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "ExponentialScheduler": {
+    "display_name": "Üstel Zamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      }
+    }
+  },
+  "ExtendIntermediateSigmas": {
+    "display_name": "AraSigmalarıGenişlet",
+    "inputs": {
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "start_at_sigma": {
+        "name": "sigma_başlangıcı"
+      },
+      "end_at_sigma": {
+        "name": "sigma_bitişi"
+      },
+      "spacing": {
+        "name": "aralık"
+      }
+    }
+  },
+  "FeatherMask": {
+    "display_name": "Maskeyi Yumuşat",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      },
+      "left": {
+        "name": "sol"
+      },
+      "top": {
+        "name": "üst"
+      },
+      "right": {
+        "name": "sağ"
+      },
+      "bottom": {
+        "name": "alt"
+      }
+    }
+  },
+  "FlipSigmas": {
+    "display_name": "Sigmaları Çevir",
+    "inputs": {
+      "sigmas": {
+        "name": "sigmalar"
+      }
+    }
+  },
+  "FluxDisableGuidance": {
+    "display_name": "FluxRehberliğiDevreDışıBırak",
+    "description": "Bu düğüm, Flux ve Flux benzeri modellerdeki rehberlik gömmesini tamamen devre dışı bırakır",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      }
+    }
+  },
+  "FluxGuidance": {
+    "display_name": "FluxRehberliği",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "guidance": {
+        "name": "rehberlik"
+      }
+    }
+  },
+  "FluxProCannyNode": {
+    "display_name": "Flux.1 Canny Kontrol Görüntüsü",
+    "description": "Bir kontrol görüntüsü (canny) kullanarak görüntü oluşturun.",
+    "inputs": {
+      "control_image": {
+        "name": "kontrol_görüntüsü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "prompt_upsampling": {
+        "name": "istem_yükseltme",
+        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
+      },
+      "canny_low_threshold": {
+        "name": "canny_düşük_eşik",
+        "tooltip": "Canny kenar algılama için düşük eşik; skip_processing True ise yoksayılır"
+      },
+      "canny_high_threshold": {
+        "name": "canny_yüksek_eşik",
+        "tooltip": "Canny kenar algılama için yüksek eşik; skip_processing True ise yoksayılır"
+      },
+      "skip_preprocessing": {
+        "name": "ön_işlemeyi_atla",
+        "tooltip": "Ön işlemenin atlanıp atlanmayacağı; kontrol_görüntüsü zaten canny'lenmişse True, ham bir görüntü ise False olarak ayarlayın."
+      },
+      "guidance": {
+        "name": "rehberlik",
+        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
+      },
+      "steps": {
+        "name": "adımlar",
+        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "FluxProDepthNode": {
+    "display_name": "Flux.1 Derinlik Kontrol Görüntüsü",
+    "description": "Bir kontrol görüntüsü (derinlik) kullanarak görüntü oluşturun.",
+    "inputs": {
+      "control_image": {
+        "name": "kontrol_görüntüsü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "prompt_upsampling": {
+        "name": "istem_yükseltme",
+        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
+      },
+      "skip_preprocessing": {
+        "name": "ön_işlemeyi_atla",
+        "tooltip": "Ön işlemenin atlanıp atlanmayacağı; kontrol_görüntüsü zaten derinliklendirilmişse True, ham bir görüntü ise False olarak ayarlayın."
+      },
+      "guidance": {
+        "name": "rehberlik",
+        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
+      },
+      "steps": {
+        "name": "adımlar",
+        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "FluxProExpandNode": {
+    "display_name": "Flux.1 Görüntüyü Genişlet",
+    "description": "İsteme göre görüntüyü dışa doğru boyar.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "prompt_upsampling": {
+        "name": "istem_yükseltme",
+        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
+      },
+      "top": {
+        "name": "üst",
+        "tooltip": "Görüntünün üstünde genişletilecek piksel sayısı"
+      },
+      "bottom": {
+        "name": "alt",
+        "tooltip": "Görüntünün altında genişletilecek piksel sayısı"
+      },
+      "left": {
+        "name": "sol",
+        "tooltip": "Görüntünün sol tarafında genişletilecek piksel sayısı"
+      },
+      "right": {
+        "name": "sağ",
+        "tooltip": "Görüntünün sağ tarafında genişletilecek piksel sayısı"
+      },
+      "guidance": {
+        "name": "rehberlik",
+        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
+      },
+      "steps": {
+        "name": "adımlar",
+        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "FluxProFillNode": {
+    "display_name": "Flux.1 Görüntüyü Doldur",
+    "description": "Maske ve isteme göre görüntüyü içe doğru boyar.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "prompt_upsampling": {
+        "name": "istem_yükseltme",
+        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
+      },
+      "guidance": {
+        "name": "rehberlik",
+        "tooltip": "Görüntü oluşturma süreci için rehberlik gücü"
+      },
+      "steps": {
+        "name": "adımlar",
+        "tooltip": "Görüntü oluşturma süreci için adım sayısı"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "FluxProUltraImageNode": {
+    "display_name": "Flux 1.1 [pro] Ultra Görüntü",
+    "description": "İstem ve çözünürlüğe dayalı olarak api aracılığıyla Flux Pro 1.1 Ultra kullanarak görüntüler oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "prompt_upsampling": {
+        "name": "istem_yükseltme",
+        "tooltip": "İstem üzerinde yükseltme yapılıp yapılmayacağı. Etkinse, daha yaratıcı üretim için istemi otomatik olarak değiştirir, ancak sonuçlar belirleyici değildir (aynı tohum tam olarak aynı sonucu vermez)."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Görüntünün en boy oranı; 1:4 ile 4:1 arasında olmalıdır."
+      },
+      "raw": {
+        "name": "ham",
+        "tooltip": "Doğru olduğunda, daha az işlenmiş, daha doğal görünümlü görüntüler oluşturun."
+      },
+      "image_prompt": {
+        "name": "görüntü_istemi"
+      },
+      "image_prompt_strength": {
+        "name": "görüntü_istemi_gücü",
+        "tooltip": "İstem ile görüntü istemi arasında karıştırın."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "FreeU": {
+    "display_name": "FreeU",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "b1": {
+        "name": "b1"
+      },
+      "b2": {
+        "name": "b2"
+      },
+      "s1": {
+        "name": "s1"
+      },
+      "s2": {
+        "name": "s2"
+      }
+    }
+  },
+  "FreeU_V2": {
+    "display_name": "FreeU_V2",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "b1": {
+        "name": "b1"
+      },
+      "b2": {
+        "name": "b2"
+      },
+      "s1": {
+        "name": "s1"
+      },
+      "s2": {
+        "name": "s2"
+      }
+    }
+  },
+  "FreSca": {
+    "display_name": "FreSca",
+    "description": "Rehberliğe frekansa bağlı ölçeklendirme uygular",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "scale_low": {
+        "name": "düşük_ölçek",
+        "tooltip": "Düşük frekanslı bileşenler için ölçeklendirme faktörü"
+      },
+      "scale_high": {
+        "name": "yüksek_ölçek",
+        "tooltip": "Yüksek frekanslı bileşenler için ölçeklendirme faktörü"
+      },
+      "freq_cutoff": {
+        "name": "frekans_kesme",
+        "tooltip": "Merkez etrafındaki frekans indekslerinin düşük frekanslı olarak kabul edileceği sayı"
+      }
+    }
+  },
+  "GetVideoComponents": {
+    "display_name": "Video Bileşenlerini Al",
+    "description": "Bir videodan tüm bileşenleri çıkarır: kareler, ses ve kare hızı.",
+    "inputs": {
+      "video": {
+        "name": "video",
+        "tooltip": "Bileşenlerin çıkarılacağı video."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "görüntüler"
+      },
+      "1": {
+        "name": "ses"
+      },
+      "2": {
+        "name": "fps"
+      }
+    }
+  },
+  "GITSScheduler": {
+    "display_name": "GITSZamanlayıcı",
+    "inputs": {
+      "coeff": {
+        "name": "katsayı"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    }
+  },
+  "GLIGENLoader": {
+    "display_name": "GLIGENYükleyici",
+    "inputs": {
+      "gligen_name": {
+        "name": "gligen_adı"
+      }
+    }
+  },
+  "GLIGENTextBoxApply": {
+    "display_name": "GLIGENMetinKutusuUygula",
+    "inputs": {
+      "conditioning_to": {
+        "name": "hedef_koşullandırma"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "gligen_textbox_model": {
+        "name": "gligen_metinkutusu_modeli"
+      },
+      "text": {
+        "name": "metin"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      }
+    }
+  },
+  "GrowMask": {
+    "display_name": "Maskeyi Büyüt",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      },
+      "expand": {
+        "name": "genişlet"
+      },
+      "tapered_corners": {
+        "name": "sivri_köşeler"
+      }
+    }
+  },
+  "Hunyuan3Dv2Conditioning": {
+    "display_name": "Hunyuan3Dv2Koşullandırma",
+    "inputs": {
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "Hunyuan3Dv2ConditioningMultiView": {
+    "display_name": "Hunyuan3Dv2ÇokluGörünümKoşullandırma",
+    "inputs": {
+      "front": {
+        "name": "ön"
+      },
+      "left": {
+        "name": "sol"
+      },
+      "back": {
+        "name": "arka"
+      },
+      "right": {
+        "name": "sağ"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "HunyuanImageToVideo": {
+    "display_name": "HunyuanGörüntüdenVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "guidance_type": {
+        "name": "rehberlik_türü"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "gizli"
+      }
+    }
+  },
+  "HypernetworkLoader": {
+    "display_name": "HiperAğYükleyici",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "hypernetwork_name": {
+        "name": "hiperağ_adı"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    }
+  },
+  "HyperTile": {
+    "display_name": "HiperDöşeme",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "tile_size": {
+        "name": "döşeme_boyutu"
+      },
+      "swap_size": {
+        "name": "değiştirme_boyutu"
+      },
+      "max_depth": {
+        "name": "maks_derinlik"
+      },
+      "scale_depth": {
+        "name": "ölçek_derinliği"
+      }
+    }
+  },
+  "IdeogramV1": {
+    "display_name": "Ideogram V1",
+    "description": "Ideogram V1 modelini kullanarak eşzamanlı olarak görüntüler oluşturur.\n\nGörüntü bağlantıları sınırlı bir süre için mevcuttur; görüntüyü saklamak isterseniz indirmeniz gerekir.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "turbo": {
+        "name": "turbo",
+        "tooltip": "Turbo modunun kullanılıp kullanılmayacağı (daha hızlı üretim, potansiyel olarak daha düşük kalite)"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Görüntü oluşturma için en boy oranı."
+      },
+      "magic_prompt_option": {
+        "name": "sihirli_istem_seçeneği",
+        "tooltip": "Üretimde MagicPrompt'un kullanılıp kullanılmayacağını belirleyin"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Görüntüden hariç tutulacakların açıklaması"
+      },
+      "num_images": {
+        "name": "görüntü_sayısı"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "IdeogramV2": {
+    "display_name": "Ideogram V2",
+    "description": "Ideogram V2 modelini kullanarak eşzamanlı olarak görüntüler oluşturur.\n\nGörüntü bağlantıları sınırlı bir süre için mevcuttur; görüntüyü saklamak isterseniz indirmeniz gerekir.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "turbo": {
+        "name": "turbo",
+        "tooltip": "Turbo modunun kullanılıp kullanılmayacağı (daha hızlı üretim, potansiyel olarak daha düşük kalite)"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Görüntü oluşturma için en boy oranı. Çözünürlük AUTO olarak ayarlanmadıysa yoksayılır."
+      },
+      "resolution": {
+        "name": "çözünürlük",
+        "tooltip": "Görüntü oluşturma için çözünürlük. AUTO olarak ayarlanmadıysa, bu en_boy_oranı ayarını geçersiz kılar."
+      },
+      "magic_prompt_option": {
+        "name": "sihirli_istem_seçeneği",
+        "tooltip": "Üretimde MagicPrompt'un kullanılıp kullanılmayacağını belirleyin"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "style_type": {
+        "name": "stil_türü",
+        "tooltip": "Üretim için stil türü (yalnızca V2)"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Görüntüden hariç tutulacakların açıklaması"
+      },
+      "num_images": {
+        "name": "görüntü_sayısı"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "IdeogramV3": {
+    "display_name": "Ideogram V3",
+    "description": "Ideogram V3 modelini kullanarak eşzamanlı olarak görüntüler oluşturur.\n\nMetin istemlerinden normal görüntü oluşturmayı ve maske ile görüntü düzenlemeyi destekler.\nGörüntü bağlantıları sınırlı bir süre için mevcuttur; görüntüyü saklamak isterseniz indirmeniz gerekir.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma veya düzenleme istemi"
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Görüntü düzenleme için isteğe bağlı referans görüntü."
+      },
+      "mask": {
+        "name": "maske",
+        "tooltip": "İç boyama için isteğe bağlı maske (beyaz alanlar değiştirilecektir)"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Görüntü oluşturma için en boy oranı. Çözünürlük Otomatik olarak ayarlanmadıysa yoksayılır."
+      },
+      "resolution": {
+        "name": "çözünürlük",
+        "tooltip": "Görüntü oluşturma için çözünürlük. Otomatik olarak ayarlanmadıysa, bu en_boy_oranı ayarını geçersiz kılar."
+      },
+      "magic_prompt_option": {
+        "name": "sihirli_istem_seçeneği",
+        "tooltip": "Üretimde MagicPrompt'un kullanılıp kullanılmayacağını belirleyin"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "num_images": {
+        "name": "görüntü_sayısı"
+      },
+      "rendering_speed": {
+        "name": "oluşturma_hızı",
+        "tooltip": "Üretim hızı ve kalite arasındaki dengeyi kontrol eder"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "ImageBatch": {
+    "display_name": "Görüntüleri Toplu İşle",
+    "inputs": {
+      "image1": {
+        "name": "görüntü1"
+      },
+      "image2": {
+        "name": "görüntü2"
+      }
+    }
+  },
+  "ImageBlend": {
+    "display_name": "Görüntü Karıştırma",
+    "inputs": {
+      "image1": {
+        "name": "görüntü1"
+      },
+      "image2": {
+        "name": "görüntü2"
+      },
+      "blend_factor": {
+        "name": "karıştırma_faktörü"
+      },
+      "blend_mode": {
+        "name": "karıştırma_modu"
+      }
+    }
+  },
+  "ImageBlur": {
+    "display_name": "Görüntü Bulanıklaştırma",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "blur_radius": {
+        "name": "bulanıklık_yarıçapı"
+      },
+      "sigma": {
+        "name": "sigma"
+      }
+    }
+  },
+  "ImageColorToMask": {
+    "display_name": "GörüntüRenginiMaskeyeDönüştür",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "color": {
+        "name": "renk"
+      }
+    }
+  },
+  "ImageCompositeMasked": {
+    "display_name": "MaskeliGörüntüBirleştirme",
+    "inputs": {
+      "destination": {
+        "name": "hedef"
+      },
+      "source": {
+        "name": "kaynak"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "resize_source": {
+        "name": "kaynağı_yeniden_boyutlandır"
+      },
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "ImageCrop": {
+    "display_name": "Görüntü Kırp",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      }
+    }
+  },
+  "ImageFromBatch": {
+    "display_name": "TopluİşlemdenGörüntü",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "batch_index": {
+        "name": "toplu_indeks"
+      },
+      "length": {
+        "name": "uzunluk"
+      }
+    }
+  },
+  "ImageInvert": {
+    "display_name": "Görüntüyü Ters Çevir",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "ImageOnlyCheckpointLoader": {
+    "display_name": "Sadece Görüntü Kontrol Noktası Yükleyici (img2vid modeli)",
+    "inputs": {
+      "ckpt_name": {
+        "name": "ckpt_adı"
+      }
+    }
+  },
+  "ImageOnlyCheckpointSave": {
+    "display_name": "SadeceGörüntüKontrolNoktasıKaydet",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "ImagePadForOutpaint": {
+    "display_name": "Dış Boyama için Görüntüyü Doldur",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "left": {
+        "name": "sol"
+      },
+      "top": {
+        "name": "üst"
+      },
+      "right": {
+        "name": "sağ"
+      },
+      "bottom": {
+        "name": "alt"
+      },
+      "feathering": {
+        "name": "yumuşatma"
+      }
+    }
+  },
+  "ImageQuantize": {
+    "display_name": "Görüntü Nicemleme",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "colors": {
+        "name": "renkler"
+      },
+      "dither": {
+        "name": "titreşim"
+      }
+    }
+  },
+  "ImageRGBToYUV": {
+    "display_name": "GörüntüRGB'denYUV'ye",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "Y"
+      },
+      "1": {
+        "name": "U"
+      },
+      "2": {
+        "name": "V"
+      }
+    }
+  },
+  "ImageScale": {
+    "display_name": "Görüntüyü Büyüt",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "crop": {
+        "name": "kırp"
+      }
+    }
+  },
+  "ImageScaleBy": {
+    "display_name": "Görüntüyü Oranla Büyüt",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      },
+      "scale_by": {
+        "name": "oranla_büyüt"
+      }
+    }
+  },
+  "ImageScaleToTotalPixels": {
+    "display_name": "Görüntüyü Toplam Piksele Göre Ölçekle",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      },
+      "megapixels": {
+        "name": "megapiksel"
+      }
+    }
+  },
+  "ImageSharpen": {
+    "display_name": "Görüntü Keskinleştir",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "sharpen_radius": {
+        "name": "keskinleştirme_yarıçapı"
+      },
+      "sigma": {
+        "name": "sigma"
+      },
+      "alpha": {
+        "name": "alfa"
+      }
+    }
+  },
+  "ImageToMask": {
+    "display_name": "Görüntüyü Maskeye Dönüştür",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "channel": {
+        "name": "kanal"
+      }
+    }
+  },
+  "ImageUpscaleWithModel": {
+    "display_name": "Görüntüyü Büyüt (Model kullanarak)",
+    "inputs": {
+      "upscale_model": {
+        "name": "büyütme_modeli"
+      },
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "ImageYUVToRGB": {
+    "display_name": "GörüntüYUV'denRGB'ye",
+    "inputs": {
+      "Y": {
+        "name": "Y"
+      },
+      "U": {
+        "name": "U"
+      },
+      "V": {
+        "name": "V"
+      }
+    }
+  },
+  "InpaintModelConditioning": {
+    "display_name": "İçBoyaModelKoşullandırma",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "pixels": {
+        "name": "pikseller"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "noise_mask": {
+        "name": "gürültü_maskesi",
+        "tooltip": "Gizli değişkene bir gürültü maskesi ekleyin, böylece örnekleme yalnızca maske içinde gerçekleşir. Modele bağlı olarak sonuçları iyileştirebilir veya tamamen bozabilir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "InstructPixToPixConditioning": {
+    "display_name": "InstructPixToPixKoşullandırma",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "pixels": {
+        "name": "pikseller"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "InvertMask": {
+    "display_name": "Maskeyi Ters Çevir",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "JoinImageWithAlpha": {
+    "display_name": "Görüntüyü Alfa ile Birleştir",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "alpha": {
+        "name": "alfa"
+      }
+    }
+  },
+  "KarrasScheduler": {
+    "display_name": "KarrasZamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      },
+      "rho": {
+        "name": "rho"
+      }
+    }
+  },
+  "KlingCameraControlI2VNode": {
+    "display_name": "Kling Görüntüden Videoya (Kamera Kontrolü)",
+    "description": "Gerçek dünya sinematografisini simüle eden profesyonel kamera hareketleriyle durağan görüntüleri sinematik videolara dönüştürün. Orijinal görüntünüze odaklanırken yakınlaştırma, döndürme, kaydırma, eğme ve birinci şahıs görünümü dahil olmak üzere sanal kamera eylemlerini kontrol edin.",
+    "inputs": {
+      "start_frame": {
+        "name": "başlangıç_karesi",
+        "tooltip": "Referans Görüntü - URL veya Base64 kodlu dize, 10 MB'ı geçemez, çözünürlük 300*300 pikselden az olamaz, en boy oranı 1:2.5 ~ 2.5:1 arasındadır. Base64, data:image önekini içermemelidir."
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "camera_control": {
+        "name": "kamera_kontrolü",
+        "tooltip": "Kling Kamera Kontrolleri düğümü kullanılarak oluşturulabilir. Video oluşturma sırasında kamera hareketini ve devinimini kontrol eder."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingCameraControls": {
+    "display_name": "Kling Kamera Kontrolleri",
+    "description": "Kling Kamera Kontrolleri ve hareket kontrolü efektleri için yapılandırma seçeneklerini belirtmeye olanak tanır.",
+    "inputs": {
+      "camera_control_type": {
+        "name": "kamera_kontrol_türü"
+      },
+      "horizontal_movement": {
+        "name": "yatay_hareket",
+        "tooltip": "Kameranın yatay eksen (x ekseni) boyunca hareketini kontrol eder. Negatif sola, pozitif sağa gösterir"
+      },
+      "vertical_movement": {
+        "name": "dikey_hareket",
+        "tooltip": "Kameranın dikey eksen (y ekseni) boyunca hareketini kontrol eder. Negatif aşağı, pozitif yukarı gösterir."
+      },
+      "pan": {
+        "name": "kaydırma",
+        "tooltip": "Kameranın dikey düzlemde (x ekseni) dönüşünü kontrol eder. Negatif aşağı dönüşü, pozitif yukarı dönüşü gösterir."
+      },
+      "tilt": {
+        "name": "eğme",
+        "tooltip": "Kameranın yatay düzlemde (y ekseni) dönüşünü kontrol eder. Negatif sola dönüşü, pozitif sağa dönüşü gösterir."
+      },
+      "roll": {
+        "name": "yuvarlanma",
+        "tooltip": "Kameranın yuvarlanma miktarını (z ekseni) kontrol eder. Negatif saat yönünün tersini, pozitif saat yönünü gösterir."
+      },
+      "zoom": {
+        "name": "yakınlaştırma",
+        "tooltip": "Kameranın odak uzaklığındaki değişikliği kontrol eder. Negatif daha dar bir görüş alanını, pozitif daha geniş bir görüş alanını gösterir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "kamera_kontrolü"
+      }
+    }
+  },
+  "KlingCameraControlT2VNode": {
+    "display_name": "Kling Metinden Videoya (Kamera Kontrolü)",
+    "description": "Gerçek dünya sinematografisini simüle eden profesyonel kamera hareketleriyle metni sinematik videolara dönüştürün. Orijinal metninize odaklanırken yakınlaştırma, döndürme, kaydırma, eğme ve birinci şahıs görünümü dahil olmak üzere sanal kamera eylemlerini kontrol edin.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "camera_control": {
+        "name": "kamera_kontrolü",
+        "tooltip": "Kling Kamera Kontrolleri düğümü kullanılarak oluşturulabilir. Video oluşturma sırasında kamera hareketini ve devinimini kontrol eder."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingDualCharacterVideoEffectNode": {
+    "display_name": "Kling İkili Karakter Video Efektleri",
+    "description": "Efekt_sahnesine dayalı bir video oluştururken farklı özel efektler elde edin. İlk görüntü sol tarafa, ikinci görüntü ise birleşimin sağ tarafına konumlandırılacaktır.",
+    "inputs": {
+      "image_left": {
+        "name": "sol_görüntü",
+        "tooltip": "Sol taraf görüntüsü"
+      },
+      "image_right": {
+        "name": "sağ_görüntü",
+        "tooltip": "Sağ taraf görüntüsü"
+      },
+      "effect_scene": {
+        "name": "efekt_sahnesi"
+      },
+      "model_name": {
+        "name": "model_adı"
+      },
+      "mode": {
+        "name": "mod"
+      },
+      "duration": {
+        "name": "süre"
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingImage2VideoNode": {
+    "display_name": "Kling Görüntüden Videoya",
+    "description": "Kling Görüntüden Videoya Düğümü",
+    "inputs": {
+      "start_frame": {
+        "name": "başlangıç_karesi",
+        "tooltip": "Referans Görüntü - URL veya Base64 kodlu dize, 10 MB'ı geçemez, çözünürlük 300*300 pikselden az olamaz, en boy oranı 1:2.5 ~ 2.5:1 arasındadır. Base64, data:image önekini içermemelidir."
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "model_name": {
+        "name": "model_adı"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "mode": {
+        "name": "mod"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "duration": {
+        "name": "süre"
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingImageGenerationNode": {
+    "display_name": "Kling Görüntü Oluşturma",
+    "description": "Kling Görüntü Oluşturma Düğümü. İsteğe bağlı bir referans görüntü ile bir metin isteminden bir görüntü oluşturun.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "image_type": {
+        "name": "görüntü_türü"
+      },
+      "image_fidelity": {
+        "name": "görüntü_sadakati",
+        "tooltip": "Kullanıcı tarafından yüklenen görüntüler için referans yoğunluğu"
+      },
+      "human_fidelity": {
+        "name": "insan_sadakati",
+        "tooltip": "Konu referans benzerliği"
+      },
+      "model_name": {
+        "name": "model_adı"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulan görüntü sayısı"
+      },
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "KlingLipSyncAudioToVideoNode": {
+    "display_name": "Kling Dudak Senkronizasyonu Video ile Ses",
+    "description": "Kling Dudak Senkronizasyonu Sesten Videoya Düğümü. Bir video dosyasındaki ağız hareketlerini bir ses dosyasının ses içeriğiyle senkronize eder.",
+    "inputs": {
+      "video": {
+        "name": "video"
+      },
+      "audio": {
+        "name": "ses"
+      },
+      "voice_language": {
+        "name": "ses_dili"
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingLipSyncTextToVideoNode": {
+    "display_name": "Kling Dudak Senkronizasyonu Video ile Metin",
+    "description": "Kling Dudak Senkronizasyonu Metinden Videoya Düğümü. Bir video dosyasındaki ağız hareketlerini bir metin istemiyle senkronize eder.",
+    "inputs": {
+      "video": {
+        "name": "video"
+      },
+      "text": {
+        "name": "metin",
+        "tooltip": "Dudak Senkronizasyonu Video Oluşturma için Metin İçeriği. Mod metinden videoya olduğunda gereklidir. Maksimum uzunluk 120 karakterdir."
+      },
+      "voice": {
+        "name": "ses"
+      },
+      "voice_speed": {
+        "name": "ses_hızı",
+        "tooltip": "Konuşma Hızı. Geçerli aralık: 0.8~2.0, bir ondalık basamağa kadar doğru."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingSingleImageVideoEffectNode": {
+    "display_name": "Kling Video Efektleri",
+    "description": "Efekt_sahnesine dayalı bir video oluştururken farklı özel efektler elde edin.",
+    "inputs": {
+      "image": {
+        "name": "görüntü",
+        "tooltip": " Referans Görüntü. URL veya Base64 kodlu dize (data:image öneki olmadan). Dosya boyutu 10 MB'ı geçemez, çözünürlük 300*300 pikselden az olamaz, en boy oranı 1:2.5 ~ 2.5:1 arasındadır"
+      },
+      "effect_scene": {
+        "name": "efekt_sahnesi"
+      },
+      "model_name": {
+        "name": "model_adı"
+      },
+      "duration": {
+        "name": "süre"
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingStartEndFrameNode": {
+    "display_name": "Kling Başlangıç-Bitiş Karesinden Videoya",
+    "description": "Sağladığınız başlangıç ve bitiş görüntüleri arasında geçiş yapan bir video dizisi oluşturun. Düğüm, aradaki tüm kareleri oluşturarak ilk kareden son kareye pürüzsüz bir dönüşüm üretir.",
+    "inputs": {
+      "start_frame": {
+        "name": "başlangıç_karesi",
+        "tooltip": "Referans Görüntü - URL veya Base64 kodlu dize, 10 MB'ı geçemez, çözünürlük 300*300 pikselden az olamaz, en boy oranı 1:2.5 ~ 2.5:1 arasındadır. Base64, data:image önekini içermemelidir."
+      },
+      "end_frame": {
+        "name": "bitiş_karesi",
+        "tooltip": "Referans Görüntü - Bitiş karesi kontrolü. URL veya Base64 kodlu dize, 10 MB'ı geçemez, çözünürlük 300*300 pikselden az olamaz. Base64, data:image önekini içermemelidir."
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "mode": {
+        "name": "mod",
+        "tooltip": "Video oluşturma için kullanılacak yapılandırma, şu formatı izler: mod / süre / model_adı."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingTextToVideoNode": {
+    "display_name": "Kling Metinden Videoya",
+    "description": "Kling Metinden Videoya Düğümü",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Negatif metin istemi"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "mode": {
+        "name": "mod",
+        "tooltip": "Video oluşturma için kullanılacak yapılandırma, şu formatı izler: mod / süre / model_adı."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingVideoExtendNode": {
+    "display_name": "Kling Video Uzatma",
+    "description": "Kling Video Uzatma Düğümü. Diğer Kling düğümleri tarafından yapılan videoları uzatın. video_id, diğer Kling Düğümleri kullanılarak oluşturulur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video uzatmayı yönlendirmek için pozitif metin istemi"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Uzatılmış videoda kaçınılması gereken öğeler için negatif metin istemi"
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği"
+      },
+      "video_id": {
+        "name": "video_kimliği",
+        "tooltip": "Uzatılacak videonun kimliği. Metinden videoya, görüntüden videoya ve önceki video uzatma işlemlerinden oluşturulan videoları destekler. Uzatmadan sonra toplam süre 3 dakikayı geçemez."
+      }
+    },
+    "outputs": {
+      "1": {
+        "name": "video_kimliği"
+      },
+      "2": {
+        "name": "süre"
+      }
+    }
+  },
+  "KlingVirtualTryOnNode": {
+    "display_name": "Kling Sanal Deneme",
+    "description": "Kling Sanal Deneme Düğümü. İnsan üzerine kıyafet denemek için bir insan resmi ve bir kıyafet resmi girin.",
+    "inputs": {
+      "human_image": {
+        "name": "insan_görüntüsü"
+      },
+      "cloth_image": {
+        "name": "kıyafet_görüntüsü"
+      },
+      "model_name": {
+        "name": "model_adı"
+      }
+    }
+  },
+  "KSampler": {
+    "display_name": "KSampler",
+    "description": "Gizli görüntünün gürültüsünü azaltmak için sağlanan modeli, pozitif ve negatif koşullandırmayı kullanır.",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "Giriş gizli değişkeninin gürültüsünü azaltmak için kullanılan model."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "steps": {
+        "name": "adımlar",
+        "tooltip": "Gürültü giderme işleminde kullanılan adım sayısı."
+      },
+      "cfg": {
+        "name": "cfg",
+        "tooltip": "Sınıflandırıcısız Rehberlik ölçeği, yaratıcılık ile isteme bağlılık arasında bir denge kurar. Daha yüksek değerler, isteme daha yakından eşleşen görüntülerle sonuçlanır, ancak çok yüksek değerler kaliteyi olumsuz etkiler."
+      },
+      "sampler_name": {
+        "name": "örnekleyici_adı",
+        "tooltip": "Örnekleme sırasında kullanılan algoritma, bu, oluşturulan çıktının kalitesini, hızını ve stilini etkileyebilir."
+      },
+      "scheduler": {
+        "name": "zamanlayıcı",
+        "tooltip": "Zamanlayıcı, görüntüyü oluşturmak için gürültünün kademeli olarak nasıl kaldırılacağını kontrol eder."
+      },
+      "positive": {
+        "name": "pozitif",
+        "tooltip": "Görüntüye dahil etmek istediğiniz özellikleri tanımlayan koşullandırma."
+      },
+      "negative": {
+        "name": "negatif",
+        "tooltip": "Görüntüden hariç tutmak istediğiniz özellikleri tanımlayan koşullandırma."
+      },
+      "latent_image": {
+        "name": "gizli_görüntü",
+        "tooltip": "Gürültüsü giderilecek gizli görüntü."
+      },
+      "denoise": {
+        "name": "gürültü_azaltma",
+        "tooltip": "Uygulanan gürültü giderme miktarı, daha düşük değerler ilk görüntünün yapısını koruyarak görüntüden görüntüye örneklemeye olanak tanır."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Gürültüsü giderilmiş gizli değişken."
+      }
+    }
+  },
+  "KSamplerAdvanced": {
+    "display_name": "KSampler (Gelişmiş)",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "add_noise": {
+        "name": "gürültü_ekle"
+      },
+      "noise_seed": {
+        "name": "gürültü_tohumu"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "cfg": {
+        "name": "cfg"
+      },
+      "sampler_name": {
+        "name": "örnekleyici_adı"
+      },
+      "scheduler": {
+        "name": "zamanlayıcı"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "latent_image": {
+        "name": "gizli_görüntü"
+      },
+      "start_at_step": {
+        "name": "başlangıç_adımı"
+      },
+      "end_at_step": {
+        "name": "bitiş_adımı"
+      },
+      "return_with_leftover_noise": {
+        "name": "kalan_gürültüyle_dön"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "KSamplerSelect": {
+    "display_name": "KSamplerSeç",
+    "inputs": {
+      "sampler_name": {
+        "name": "örnekleyici_adı"
+      }
+    }
+  },
+  "LaplaceScheduler": {
+    "display_name": "LaplaceZamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      },
+      "mu": {
+        "name": "mu"
+      },
+      "beta": {
+        "name": "beta"
+      }
+    }
+  },
+  "LatentAdd": {
+    "display_name": "GizliEkle",
+    "inputs": {
+      "samples1": {
+        "name": "örnekler1"
+      },
+      "samples2": {
+        "name": "örnekler2"
+      }
+    }
+  },
+  "LatentApplyOperation": {
+    "display_name": "GizliİşlemUygula",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "operation": {
+        "name": "işlem"
+      }
+    }
+  },
+  "LatentApplyOperationCFG": {
+    "display_name": "GizliİşlemUygulaCFG",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "operation": {
+        "name": "işlem"
+      }
+    }
+  },
+  "LatentBatch": {
+    "display_name": "GizliTopluİş",
+    "inputs": {
+      "samples1": {
+        "name": "örnekler1"
+      },
+      "samples2": {
+        "name": "örnekler2"
+      }
+    }
+  },
+  "LatentBatchSeedBehavior": {
+    "display_name": "GizliTopluTohumDavranışı",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "seed_behavior": {
+        "name": "tohum_davranışı"
+      }
+    }
+  },
+  "LatentBlend": {
+    "display_name": "Gizli Karıştırma",
+    "inputs": {
+      "samples1": {
+        "name": "örnekler1"
+      },
+      "samples2": {
+        "name": "örnekler2"
+      },
+      "blend_factor": {
+        "name": "karıştırma_faktörü"
+      }
+    }
+  },
+  "LatentComposite": {
+    "display_name": "Gizli Birleştirme",
+    "inputs": {
+      "samples_to": {
+        "name": "hedef_örnekler"
+      },
+      "samples_from": {
+        "name": "kaynak_örnekler"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "feather": {
+        "name": "yumuşatma"
+      }
+    }
+  },
+  "LatentCompositeMasked": {
+    "display_name": "MaskeliGizliBirleştirme",
+    "inputs": {
+      "destination": {
+        "name": "hedef"
+      },
+      "source": {
+        "name": "kaynak"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "resize_source": {
+        "name": "kaynağı_yeniden_boyutlandır"
+      },
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "LatentCrop": {
+    "display_name": "Gizli Değişkeni Kırp",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      }
+    }
+  },
+  "LatentFlip": {
+    "display_name": "Gizli Değişkeni Çevir",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "flip_method": {
+        "name": "çevirme_yöntemi"
+      }
+    }
+  },
+  "LatentFromBatch": {
+    "display_name": "Toplu İşlemden Gizli Değişken",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "batch_index": {
+        "name": "toplu_indeks"
+      },
+      "length": {
+        "name": "uzunluk"
+      }
+    }
+  },
+  "LatentInterpolate": {
+    "display_name": "GizliAraDeğerleme",
+    "inputs": {
+      "samples1": {
+        "name": "örnekler1"
+      },
+      "samples2": {
+        "name": "örnekler2"
+      },
+      "ratio": {
+        "name": "oran"
+      }
+    }
+  },
+  "LatentMultiply": {
+    "display_name": "GizliÇarpma",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "multiplier": {
+        "name": "çarpan"
+      }
+    }
+  },
+  "LatentOperationSharpen": {
+    "display_name": "GizliİşlemKeskinleştirme",
+    "inputs": {
+      "sharpen_radius": {
+        "name": "keskinleştirme_yarıçapı"
+      },
+      "sigma": {
+        "name": "sigma"
+      },
+      "alpha": {
+        "name": "alfa"
+      }
+    }
+  },
+  "LatentOperationTonemapReinhard": {
+    "display_name": "GizliİşlemTonEşlemeReinhard",
+    "inputs": {
+      "multiplier": {
+        "name": "çarpan"
+      }
+    }
+  },
+  "LatentRotate": {
+    "display_name": "Gizli Değişkeni Döndür",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "rotation": {
+        "name": "döndürme"
+      }
+    }
+  },
+  "LatentSubtract": {
+    "display_name": "GizliÇıkarma",
+    "inputs": {
+      "samples1": {
+        "name": "örnekler1"
+      },
+      "samples2": {
+        "name": "örnekler2"
+      }
+    }
+  },
+  "LatentUpscale": {
+    "display_name": "Gizli Değişkeni Büyüt",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "crop": {
+        "name": "kırp"
+      }
+    }
+  },
+  "LatentUpscaleBy": {
+    "display_name": "Gizli Değişkeni Oranla Büyüt",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      },
+      "scale_by": {
+        "name": "oranla_büyüt"
+      }
+    }
+  },
+  "Load3D": {
+    "display_name": "3D Yükle",
+    "inputs": {
+      "model_file": {
+        "name": "model_dosyası"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "clear": {},
+      "upload 3d model": {}
+    },
+    "outputs": {
+      "0": {
+        "name": "görüntü"
+      },
+      "1": {
+        "name": "maske"
+      },
+      "2": {
+        "name": "ağ_yolu"
+      },
+      "3": {
+        "name": "normal"
+      },
+      "4": {
+        "name": "çizgi_sanatı"
+      },
+      "5": {
+        "name": "kamera_bilgisi"
+      }
+    }
+  },
+  "Load3DAnimation": {
+    "display_name": "3D Yükle - Animasyon",
+    "inputs": {
+      "model_file": {
+        "name": "model_dosyası"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "clear": {},
+      "upload 3d model": {}
+    },
+    "outputs": {
+      "0": {
+        "name": "görüntü"
+      },
+      "1": {
+        "name": "maske"
+      },
+      "2": {
+        "name": "ağ_yolu"
+      },
+      "3": {
+        "name": "normal"
+      },
+      "4": {
+        "name": "kamera_bilgisi"
+      }
+    }
+  },
+  "LoadAudio": {
+    "display_name": "Ses Yükle",
+    "inputs": {
+      "audio": {
+        "name": "ses"
+      },
+      "audioUI": {
+        "name": "sesArayüzü"
+      },
+      "upload": {
+        "name": "yüklenecek dosyayı seçin"
+      }
+    }
+  },
+  "LoadImage": {
+    "display_name": "Görüntü Yükle",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "upload": {
+        "name": "yüklenecek dosyayı seçin"
+      }
+    }
+  },
+  "LoadImageMask": {
+    "display_name": "Görüntü Yükle (Maske olarak)",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "channel": {
+        "name": "kanal"
+      },
+      "upload": {
+        "name": "yüklenecek dosyayı seçin"
+      }
+    }
+  },
+  "LoadImageOutput": {
+    "display_name": "Görüntü Yükle (Çıktılardan)",
+    "description": "Çıktı klasöründen bir görüntü yükleyin. Yenile düğmesine tıklandığında, düğüm görüntü listesini güncelleyecek ve otomatik olarak ilk görüntüyü seçecek, bu da kolay yinelemeye olanak tanıyacaktır.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "refresh": {},
+      "upload": {
+        "name": "yüklenecek dosyayı seçin"
+      }
+    }
+  },
+  "LoadLatent": {
+    "display_name": "GizliYükle",
+    "inputs": {
+      "latent": {
+        "name": "gizli"
+      }
+    }
+  },
+  "LoadVideo": {
+    "display_name": "Video Yükle",
+    "inputs": {
+      "file": {
+        "name": "dosya"
+      },
+      "upload": {
+        "name": "yüklenecek dosyayı seçin"
+      }
+    }
+  },
+  "LoraLoader": {
+    "display_name": "LoRA Yükle",
+    "description": "LoRA'lar, difüzyon ve CLIP modellerini değiştirmek, gizli değişkenlerin gürültüsünün giderilme şeklini değiştirmek (örneğin stiller uygulamak) için kullanılır. Birden fazla LoRA düğümü birbirine bağlanabilir.",
+    "inputs": {
+      "model": {
+        "name": "model",
+        "tooltip": "LoRA'nın uygulanacağı difüzyon modeli."
+      },
+      "clip": {
+        "name": "clip",
+        "tooltip": "LoRA'nın uygulanacağı CLIP modeli."
+      },
+      "lora_name": {
+        "name": "lora_adı",
+        "tooltip": "LoRA'nın adı."
+      },
+      "strength_model": {
+        "name": "model_gücü",
+        "tooltip": "Difüzyon modelinin ne kadar güçlü değiştirileceği. Bu değer negatif olabilir."
+      },
+      "strength_clip": {
+        "name": "clip_gücü",
+        "tooltip": "CLIP modelinin ne kadar güçlü değiştirileceği. Bu değer negatif olabilir."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Değiştirilmiş difüzyon modeli."
+      },
+      "1": {
+        "tooltip": "Değiştirilmiş CLIP modeli."
+      }
+    }
+  },
+  "LoraLoaderModelOnly": {
+    "display_name": "SadeceModelLoRA Yükleyici",
+    "description": "LoRA'lar, difüzyon ve CLIP modellerini değiştirmek, gizli değişkenlerin gürültüsünün giderilme şeklini değiştirmek (örneğin stiller uygulamak) için kullanılır. Birden fazla LoRA düğümü birbirine bağlanabilir.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "lora_name": {
+        "name": "lora_adı"
+      },
+      "strength_model": {
+        "name": "model_gücü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Değiştirilmiş difüzyon modeli."
+      }
+    }
+  },
+  "LoraSave": {
+    "display_name": "Lora'yı Çıkar ve Kaydet",
+    "inputs": {
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "rank": {
+        "name": "rütbe"
+      },
+      "lora_type": {
+        "name": "lora_türü"
+      },
+      "bias_diff": {
+        "name": "yanlılık_farkı"
+      },
+      "model_diff": {
+        "name": "model_farkı",
+        "tooltip": "Lora'ya dönüştürülecek ModelSubtract çıktısı."
+      },
+      "text_encoder_diff": {
+        "name": "metin_kodlayıcı_farkı",
+        "tooltip": "Lora'ya dönüştürülecek CLIPSubtract çıktısı."
+      }
+    }
+  },
+  "LotusConditioning": {
+    "display_name": "LotusKoşullandırma",
+    "outputs": {
+      "0": {
+        "name": "koşullandırma"
+      }
+    }
+  },
+  "LTXVAddGuide": {
+    "display_name": "LTXVRehberEkle",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "latent": {
+        "name": "gizli"
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Gizli videoyu koşullandırmak için görüntü veya video. 8*n + 1 kare olmalıdır. Video 8*n + 1 kare değilse, en yakın 8*n + 1 kareye kırpılacaktır."
+      },
+      "frame_idx": {
+        "name": "kare_indeksi",
+        "tooltip": "Koşullandırmanın başlayacağı kare indeksi. Tek kareli görüntüler veya 1-8 kareli videolar için herhangi bir kare_indeksi değeri kabul edilebilir. 9+ kareli videolar için kare_indeksi 8'e bölünebilir olmalıdır, aksi takdirde en yakın 8'in katına yuvarlanacaktır. Negatif değerler videonun sonundan sayılır."
+      },
+      "strength": {
+        "name": "güç"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "LTXVConditioning": {
+    "display_name": "LTXVKoşullandırma",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "frame_rate": {
+        "name": "kare_hızı"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "LTXVCropGuides": {
+    "display_name": "LTXVRehberleriKırp",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "latent": {
+        "name": "gizli"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "LTXVImgToVideo": {
+    "display_name": "LTXVGörüntüdenVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "strength": {
+        "name": "güç"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "LTXVPreprocess": {
+    "display_name": "LTXVÖnİşleme",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "img_compression": {
+        "name": "görüntü_sıkıştırma",
+        "tooltip": "Görüntüye uygulanacak sıkıştırma miktarı."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "çıktı_görüntüsü"
+      }
+    }
+  },
+  "LTXVScheduler": {
+    "display_name": "LTXVZamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "max_shift": {
+        "name": "maks_kaydırma"
+      },
+      "base_shift": {
+        "name": "temel_kaydırma"
+      },
+      "stretch": {
+        "name": "uzatma",
+        "tooltip": "Sigmaları [terminal, 1] aralığında olacak şekilde uzatın."
+      },
+      "terminal": {
+        "name": "terminal",
+        "tooltip": "Uzatmadan sonra sigmaların terminal değeri."
+      },
+      "latent": {
+        "name": "gizli"
+      }
+    }
+  },
+  "LumaConceptsNode": {
+    "display_name": "Luma Kavramları",
+    "description": "Luma Metinden Videoya ve Luma Görüntüden Videoya düğümleriyle kullanılmak üzere bir veya daha fazla Kamera Kavramı tutar.",
+    "inputs": {
+      "concept1": {
+        "name": "kavram1"
+      },
+      "concept2": {
+        "name": "kavram2"
+      },
+      "concept3": {
+        "name": "kavram3"
+      },
+      "concept4": {
+        "name": "kavram4"
+      },
+      "luma_concepts": {
+        "name": "luma_kavramları",
+        "tooltip": "Burada seçilenlere eklemek için isteğe bağlı Kamera Kavramları."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "luma_kavramları"
+      }
+    }
+  },
+  "LumaImageModifyNode": {
+    "display_name": "Luma Görüntüden Görüntüye",
+    "description": "İstem ve en boy oranına göre görüntüleri eşzamanlı olarak değiştirir.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "image_weight": {
+        "name": "görüntü_ağırlığı",
+        "tooltip": "Görüntünün ağırlığı; 1.0'a ne kadar yakınsa, görüntü o kadar az değiştirilir."
+      },
+      "model": {
+        "name": "model"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "LumaImageNode": {
+    "display_name": "Luma Metinden Görüntüye",
+    "description": "İstem ve en boy oranına göre görüntüleri eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi"
+      },
+      "model": {
+        "name": "model"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "style_image_weight": {
+        "name": "stil_görüntüsü_ağırlığı",
+        "tooltip": "Stil görüntüsünün ağırlığı. Stil_görüntüsü sağlanmazsa yoksayılır."
+      },
+      "image_luma_ref": {
+        "name": "görüntü_luma_referansı",
+        "tooltip": "Giriş görüntüleriyle üretimi etkilemek için Luma Referans düğümü bağlantısı; en fazla 4 görüntü dikkate alınabilir."
+      },
+      "style_image": {
+        "name": "stil_görüntüsü",
+        "tooltip": "Stil referans görüntüsü; yalnızca 1 görüntü kullanılacaktır."
+      },
+      "character_image": {
+        "name": "karakter_görüntüsü",
+        "tooltip": "Karakter referans görüntüleri; birden fazla toplu olabilir, en fazla 4 görüntü dikkate alınabilir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "LumaImageToVideoNode": {
+    "display_name": "Luma Görüntüden Videoya",
+    "description": "İstem, giriş görüntüleri ve çıktı_boyutuna göre videoları eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video oluşturma istemi"
+      },
+      "model": {
+        "name": "model"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "loop": {
+        "name": "döngü"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "first_image": {
+        "name": "ilk_görüntü",
+        "tooltip": "Oluşturulan videonun ilk karesi."
+      },
+      "last_image": {
+        "name": "son_görüntü",
+        "tooltip": "Oluşturulan videonun son karesi."
+      },
+      "luma_concepts": {
+        "name": "luma_kavramları",
+        "tooltip": "Luma Kavramları düğümü aracılığıyla kamera hareketini dikte etmek için isteğe bağlı Kamera Kavramları."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "LumaReferenceNode": {
+    "display_name": "Luma Referansı",
+    "description": "Luma Görüntü Oluştur düğümüyle kullanılmak üzere bir görüntü ve ağırlık tutar.",
+    "inputs": {
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Referans olarak kullanılacak görüntü."
+      },
+      "weight": {
+        "name": "ağırlık",
+        "tooltip": "Görüntü referansının ağırlığı."
+      },
+      "luma_ref": {
+        "name": "luma_referansı"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "luma_referansı"
+      }
+    }
+  },
+  "LumaVideoNode": {
+    "display_name": "Luma Metinden Videoya",
+    "description": "İstem ve çıktı_boyutuna göre videoları eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video oluşturma istemi"
+      },
+      "model": {
+        "name": "model"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "loop": {
+        "name": "döngü"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "luma_concepts": {
+        "name": "luma_kavramları",
+        "tooltip": "Luma Kavramları düğümü aracılığıyla kamera hareketini dikte etmek için isteğe bağlı Kamera Kavramları."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "Mahiro": {
+    "display_name": "Mahiro o kadar sevimli ki daha iyi bir rehberlik fonksiyonunu hak ediyor!! (。・ω・。)",
+    "description": "Rehberliği, negatif istem arasındaki farktan ziyade pozitif istemin 'yönüne' daha fazla ölçeklenecek şekilde değiştirin.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "yamalı_model"
+      }
+    }
+  },
+  "MaskComposite": {
+    "display_name": "MaskeBirleştirme",
+    "inputs": {
+      "destination": {
+        "name": "hedef"
+      },
+      "source": {
+        "name": "kaynak"
+      },
+      "x": {
+        "name": "x"
+      },
+      "y": {
+        "name": "y"
+      },
+      "operation": {
+        "name": "işlem"
+      }
+    }
+  },
+  "MaskPreview": {
+    "display_name": "MaskeÖnizleme",
+    "description": "Giriş görüntülerini ComfyUI çıktı dizininize kaydeder.",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "MaskToImage": {
+    "display_name": "Maskeyi Görüntüye Dönüştür",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "MinimaxImageToVideoNode": {
+    "display_name": "MiniMax Görüntüden Videoya",
+    "description": "MiniMax'in API'sini kullanarak bir görüntüden ve istemlerden videolar oluşturur",
+    "inputs": {
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Video oluşturmanın ilk karesi olarak kullanılacak görüntü"
+      },
+      "prompt_text": {
+        "name": "istem_metni",
+        "tooltip": "Video oluşturmayı yönlendirecek metin istemi"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "Video oluşturma için kullanılacak model"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "MinimaxTextToVideoNode": {
+    "display_name": "MiniMax Metinden Videoya",
+    "description": "MiniMax'in API'sini kullanarak istemlerden videolar oluşturur",
+    "inputs": {
+      "prompt_text": {
+        "name": "istem_metni",
+        "tooltip": "Video oluşturmayı yönlendirecek metin istemi"
+      },
+      "model": {
+        "name": "model",
+        "tooltip": "Video oluşturma için kullanılacak model"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "ModelComputeDtype": {
+    "display_name": "ModelHesaplamaVeriTürü",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "dtype": {
+        "name": "veri_türü"
+      }
+    }
+  },
+  "ModelMergeAdd": {
+    "display_name": "ModelBirleştirmeEkle",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      }
+    }
+  },
+  "ModelMergeAuraflow": {
+    "display_name": "ModelBirleştirmeAuraflow",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "init_x_linear_": {
+        "name": "başlangıç_x_doğrusal."
+      },
+      "positional_encoding": {
+        "name": "konumsal_kodlama"
+      },
+      "cond_seq_linear_": {
+        "name": "koşul_dizi_doğrusal."
+      },
+      "register_tokens": {
+        "name": "kayıt_jetonları"
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "double_layers_0_": {
+        "name": "çift_katmanlar.0."
+      },
+      "double_layers_1_": {
+        "name": "çift_katmanlar.1."
+      },
+      "double_layers_2_": {
+        "name": "çift_katmanlar.2."
+      },
+      "double_layers_3_": {
+        "name": "çift_katmanlar.3."
+      },
+      "single_layers_0_": {
+        "name": "tek_katmanlar.0."
+      },
+      "single_layers_1_": {
+        "name": "tek_katmanlar.1."
+      },
+      "single_layers_2_": {
+        "name": "tek_katmanlar.2."
+      },
+      "single_layers_3_": {
+        "name": "tek_katmanlar.3."
+      },
+      "single_layers_4_": {
+        "name": "tek_katmanlar.4."
+      },
+      "single_layers_5_": {
+        "name": "tek_katmanlar.5."
+      },
+      "single_layers_6_": {
+        "name": "tek_katmanlar.6."
+      },
+      "single_layers_7_": {
+        "name": "tek_katmanlar.7."
+      },
+      "single_layers_8_": {
+        "name": "tek_katmanlar.8."
+      },
+      "single_layers_9_": {
+        "name": "tek_katmanlar.9."
+      },
+      "single_layers_10_": {
+        "name": "tek_katmanlar.10."
+      },
+      "single_layers_11_": {
+        "name": "tek_katmanlar.11."
+      },
+      "single_layers_12_": {
+        "name": "tek_katmanlar.12."
+      },
+      "single_layers_13_": {
+        "name": "tek_katmanlar.13."
+      },
+      "single_layers_14_": {
+        "name": "tek_katmanlar.14."
+      },
+      "single_layers_15_": {
+        "name": "tek_katmanlar.15."
+      },
+      "single_layers_16_": {
+        "name": "tek_katmanlar.16."
+      },
+      "single_layers_17_": {
+        "name": "tek_katmanlar.17."
+      },
+      "single_layers_18_": {
+        "name": "tek_katmanlar.18."
+      },
+      "single_layers_19_": {
+        "name": "tek_katmanlar.19."
+      },
+      "single_layers_20_": {
+        "name": "tek_katmanlar.20."
+      },
+      "single_layers_21_": {
+        "name": "tek_katmanlar.21."
+      },
+      "single_layers_22_": {
+        "name": "tek_katmanlar.22."
+      },
+      "single_layers_23_": {
+        "name": "tek_katmanlar.23."
+      },
+      "single_layers_24_": {
+        "name": "tek_katmanlar.24."
+      },
+      "single_layers_25_": {
+        "name": "tek_katmanlar.25."
+      },
+      "single_layers_26_": {
+        "name": "tek_katmanlar.26."
+      },
+      "single_layers_27_": {
+        "name": "tek_katmanlar.27."
+      },
+      "single_layers_28_": {
+        "name": "tek_katmanlar.28."
+      },
+      "single_layers_29_": {
+        "name": "tek_katmanlar.29."
+      },
+      "single_layers_30_": {
+        "name": "tek_katmanlar.30."
+      },
+      "single_layers_31_": {
+        "name": "tek_katmanlar.31."
+      },
+      "modF_": {
+        "name": "modF."
+      },
+      "final_linear_": {
+        "name": "son_doğrusal."
+      }
+    }
+  },
+  "ModelMergeBlocks": {
+    "display_name": "ModelBloklarınıBirleştir",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "input": {
+        "name": "giriş"
+      },
+      "middle": {
+        "name": "orta"
+      },
+      "out": {
+        "name": "çıktı"
+      }
+    }
+  },
+  "ModelMergeCosmos14B": {
+    "display_name": "ModelBirleştirmeCosmos14B",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "pos_embedder_": {
+        "name": "konum_gömücü."
+      },
+      "extra_pos_embedder_": {
+        "name": "ek_konum_gömücü."
+      },
+      "x_embedder_": {
+        "name": "x_gömücü."
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "affline_norm_": {
+        "name": "afin_norm."
+      },
+      "blocks_block0_": {
+        "name": "bloklar.blok0."
+      },
+      "blocks_block1_": {
+        "name": "bloklar.blok1."
+      },
+      "blocks_block2_": {
+        "name": "bloklar.blok2."
+      },
+      "blocks_block3_": {
+        "name": "bloklar.blok3."
+      },
+      "blocks_block4_": {
+        "name": "bloklar.blok4."
+      },
+      "blocks_block5_": {
+        "name": "bloklar.blok5."
+      },
+      "blocks_block6_": {
+        "name": "bloklar.blok6."
+      },
+      "blocks_block7_": {
+        "name": "bloklar.blok7."
+      },
+      "blocks_block8_": {
+        "name": "bloklar.blok8."
+      },
+      "blocks_block9_": {
+        "name": "bloklar.blok9."
+      },
+      "blocks_block10_": {
+        "name": "bloklar.blok10."
+      },
+      "blocks_block11_": {
+        "name": "bloklar.blok11."
+      },
+      "blocks_block12_": {
+        "name": "bloklar.blok12."
+      },
+      "blocks_block13_": {
+        "name": "bloklar.blok13."
+      },
+      "blocks_block14_": {
+        "name": "bloklar.blok14."
+      },
+      "blocks_block15_": {
+        "name": "bloklar.blok15."
+      },
+      "blocks_block16_": {
+        "name": "bloklar.blok16."
+      },
+      "blocks_block17_": {
+        "name": "bloklar.blok17."
+      },
+      "blocks_block18_": {
+        "name": "bloklar.blok18."
+      },
+      "blocks_block19_": {
+        "name": "bloklar.blok19."
+      },
+      "blocks_block20_": {
+        "name": "bloklar.blok20."
+      },
+      "blocks_block21_": {
+        "name": "bloklar.blok21."
+      },
+      "blocks_block22_": {
+        "name": "bloklar.blok22."
+      },
+      "blocks_block23_": {
+        "name": "bloklar.blok23."
+      },
+      "blocks_block24_": {
+        "name": "bloklar.blok24."
+      },
+      "blocks_block25_": {
+        "name": "bloklar.blok25."
+      },
+      "blocks_block26_": {
+        "name": "bloklar.blok26."
+      },
+      "blocks_block27_": {
+        "name": "bloklar.blok27."
+      },
+      "blocks_block28_": {
+        "name": "bloklar.blok28."
+      },
+      "blocks_block29_": {
+        "name": "bloklar.blok29."
+      },
+      "blocks_block30_": {
+        "name": "bloklar.blok30."
+      },
+      "blocks_block31_": {
+        "name": "bloklar.blok31."
+      },
+      "blocks_block32_": {
+        "name": "bloklar.blok32."
+      },
+      "blocks_block33_": {
+        "name": "bloklar.blok33."
+      },
+      "blocks_block34_": {
+        "name": "bloklar.blok34."
+      },
+      "blocks_block35_": {
+        "name": "bloklar.blok35."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeCosmos7B": {
+    "display_name": "ModelBirleştirmeCosmos7B",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "pos_embedder_": {
+        "name": "konum_gömücü."
+      },
+      "extra_pos_embedder_": {
+        "name": "ek_konum_gömücü."
+      },
+      "x_embedder_": {
+        "name": "x_gömücü."
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "affline_norm_": {
+        "name": "afin_norm."
+      },
+      "blocks_block0_": {
+        "name": "bloklar.blok0."
+      },
+      "blocks_block1_": {
+        "name": "bloklar.blok1."
+      },
+      "blocks_block2_": {
+        "name": "bloklar.blok2."
+      },
+      "blocks_block3_": {
+        "name": "bloklar.blok3."
+      },
+      "blocks_block4_": {
+        "name": "bloklar.blok4."
+      },
+      "blocks_block5_": {
+        "name": "bloklar.blok5."
+      },
+      "blocks_block6_": {
+        "name": "bloklar.blok6."
+      },
+      "blocks_block7_": {
+        "name": "bloklar.blok7."
+      },
+      "blocks_block8_": {
+        "name": "bloklar.blok8."
+      },
+      "blocks_block9_": {
+        "name": "bloklar.blok9."
+      },
+      "blocks_block10_": {
+        "name": "bloklar.blok10."
+      },
+      "blocks_block11_": {
+        "name": "bloklar.blok11."
+      },
+      "blocks_block12_": {
+        "name": "bloklar.blok12."
+      },
+      "blocks_block13_": {
+        "name": "bloklar.blok13."
+      },
+      "blocks_block14_": {
+        "name": "bloklar.blok14."
+      },
+      "blocks_block15_": {
+        "name": "bloklar.blok15."
+      },
+      "blocks_block16_": {
+        "name": "bloklar.blok16."
+      },
+      "blocks_block17_": {
+        "name": "bloklar.blok17."
+      },
+      "blocks_block18_": {
+        "name": "bloklar.blok18."
+      },
+      "blocks_block19_": {
+        "name": "bloklar.blok19."
+      },
+      "blocks_block20_": {
+        "name": "bloklar.blok20."
+      },
+      "blocks_block21_": {
+        "name": "bloklar.blok21."
+      },
+      "blocks_block22_": {
+        "name": "bloklar.blok22."
+      },
+      "blocks_block23_": {
+        "name": "bloklar.blok23."
+      },
+      "blocks_block24_": {
+        "name": "bloklar.blok24."
+      },
+      "blocks_block25_": {
+        "name": "bloklar.blok25."
+      },
+      "blocks_block26_": {
+        "name": "bloklar.blok26."
+      },
+      "blocks_block27_": {
+        "name": "bloklar.blok27."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeFlux1": {
+    "display_name": "ModelBirleştirmeFlux1",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "img_in_": {
+        "name": "görüntü_girişi."
+      },
+      "time_in_": {
+        "name": "zaman_girişi."
+      },
+      "guidance_in": {
+        "name": "rehberlik_girişi"
+      },
+      "vector_in_": {
+        "name": "vektör_girişi."
+      },
+      "txt_in_": {
+        "name": "metin_girişi."
+      },
+      "double_blocks_0_": {
+        "name": "çift_bloklar.0."
+      },
+      "double_blocks_1_": {
+        "name": "çift_bloklar.1."
+      },
+      "double_blocks_2_": {
+        "name": "çift_bloklar.2."
+      },
+      "double_blocks_3_": {
+        "name": "çift_bloklar.3."
+      },
+      "double_blocks_4_": {
+        "name": "çift_bloklar.4."
+      },
+      "double_blocks_5_": {
+        "name": "çift_bloklar.5."
+      },
+      "double_blocks_6_": {
+        "name": "çift_bloklar.6."
+      },
+      "double_blocks_7_": {
+        "name": "çift_bloklar.7."
+      },
+      "double_blocks_8_": {
+        "name": "çift_bloklar.8."
+      },
+      "double_blocks_9_": {
+        "name": "çift_bloklar.9."
+      },
+      "double_blocks_10_": {
+        "name": "çift_bloklar.10."
+      },
+      "double_blocks_11_": {
+        "name": "çift_bloklar.11."
+      },
+      "double_blocks_12_": {
+        "name": "çift_bloklar.12."
+      },
+      "double_blocks_13_": {
+        "name": "çift_bloklar.13."
+      },
+      "double_blocks_14_": {
+        "name": "çift_bloklar.14."
+      },
+      "double_blocks_15_": {
+        "name": "çift_bloklar.15."
+      },
+      "double_blocks_16_": {
+        "name": "çift_bloklar.16."
+      },
+      "double_blocks_17_": {
+        "name": "çift_bloklar.17."
+      },
+      "double_blocks_18_": {
+        "name": "çift_bloklar.18."
+      },
+      "single_blocks_0_": {
+        "name": "tek_bloklar.0."
+      },
+      "single_blocks_1_": {
+        "name": "tek_bloklar.1."
+      },
+      "single_blocks_2_": {
+        "name": "tek_bloklar.2."
+      },
+      "single_blocks_3_": {
+        "name": "tek_bloklar.3."
+      },
+      "single_blocks_4_": {
+        "name": "tek_bloklar.4."
+      },
+      "single_blocks_5_": {
+        "name": "tek_bloklar.5."
+      },
+      "single_blocks_6_": {
+        "name": "tek_bloklar.6."
+      },
+      "single_blocks_7_": {
+        "name": "tek_bloklar.7."
+      },
+      "single_blocks_8_": {
+        "name": "tek_bloklar.8."
+      },
+      "single_blocks_9_": {
+        "name": "tek_bloklar.9."
+      },
+      "single_blocks_10_": {
+        "name": "tek_bloklar.10."
+      },
+      "single_blocks_11_": {
+        "name": "tek_bloklar.11."
+      },
+      "single_blocks_12_": {
+        "name": "tek_bloklar.12."
+      },
+      "single_blocks_13_": {
+        "name": "tek_bloklar.13."
+      },
+      "single_blocks_14_": {
+        "name": "tek_bloklar.14."
+      },
+      "single_blocks_15_": {
+        "name": "tek_bloklar.15."
+      },
+      "single_blocks_16_": {
+        "name": "tek_bloklar.16."
+      },
+      "single_blocks_17_": {
+        "name": "tek_bloklar.17."
+      },
+      "single_blocks_18_": {
+        "name": "tek_bloklar.18."
+      },
+      "single_blocks_19_": {
+        "name": "tek_bloklar.19."
+      },
+      "single_blocks_20_": {
+        "name": "tek_bloklar.20."
+      },
+      "single_blocks_21_": {
+        "name": "tek_bloklar.21."
+      },
+      "single_blocks_22_": {
+        "name": "tek_bloklar.22."
+      },
+      "single_blocks_23_": {
+        "name": "tek_bloklar.23."
+      },
+      "single_blocks_24_": {
+        "name": "tek_bloklar.24."
+      },
+      "single_blocks_25_": {
+        "name": "tek_bloklar.25."
+      },
+      "single_blocks_26_": {
+        "name": "tek_bloklar.26."
+      },
+      "single_blocks_27_": {
+        "name": "tek_bloklar.27."
+      },
+      "single_blocks_28_": {
+        "name": "tek_bloklar.28."
+      },
+      "single_blocks_29_": {
+        "name": "tek_bloklar.29."
+      },
+      "single_blocks_30_": {
+        "name": "tek_bloklar.30."
+      },
+      "single_blocks_31_": {
+        "name": "tek_bloklar.31."
+      },
+      "single_blocks_32_": {
+        "name": "tek_bloklar.32."
+      },
+      "single_blocks_33_": {
+        "name": "tek_bloklar.33."
+      },
+      "single_blocks_34_": {
+        "name": "tek_bloklar.34."
+      },
+      "single_blocks_35_": {
+        "name": "tek_bloklar.35."
+      },
+      "single_blocks_36_": {
+        "name": "tek_bloklar.36."
+      },
+      "single_blocks_37_": {
+        "name": "tek_bloklar.37."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeLTXV": {
+    "display_name": "ModelBirleştirmeLTXV",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "patchify_proj_": {
+        "name": "yama_proj."
+      },
+      "adaln_single_": {
+        "name": "adaln_tek."
+      },
+      "caption_projection_": {
+        "name": "başlık_projeksiyonu."
+      },
+      "transformer_blocks_0_": {
+        "name": "dönüştürücü_blokları.0."
+      },
+      "transformer_blocks_1_": {
+        "name": "dönüştürücü_blokları.1."
+      },
+      "transformer_blocks_2_": {
+        "name": "dönüştürücü_blokları.2."
+      },
+      "transformer_blocks_3_": {
+        "name": "dönüştürücü_blokları.3."
+      },
+      "transformer_blocks_4_": {
+        "name": "dönüştürücü_blokları.4."
+      },
+      "transformer_blocks_5_": {
+        "name": "dönüştürücü_blokları.5."
+      },
+      "transformer_blocks_6_": {
+        "name": "dönüştürücü_blokları.6."
+      },
+      "transformer_blocks_7_": {
+        "name": "dönüştürücü_blokları.7."
+      },
+      "transformer_blocks_8_": {
+        "name": "dönüştürücü_blokları.8."
+      },
+      "transformer_blocks_9_": {
+        "name": "dönüştürücü_blokları.9."
+      },
+      "transformer_blocks_10_": {
+        "name": "dönüştürücü_blokları.10."
+      },
+      "transformer_blocks_11_": {
+        "name": "dönüştürücü_blokları.11."
+      },
+      "transformer_blocks_12_": {
+        "name": "dönüştürücü_blokları.12."
+      },
+      "transformer_blocks_13_": {
+        "name": "dönüştürücü_blokları.13."
+      },
+      "transformer_blocks_14_": {
+        "name": "dönüştürücü_blokları.14."
+      },
+      "transformer_blocks_15_": {
+        "name": "dönüştürücü_blokları.15."
+      },
+      "transformer_blocks_16_": {
+        "name": "dönüştürücü_blokları.16."
+      },
+      "transformer_blocks_17_": {
+        "name": "dönüştürücü_blokları.17."
+      },
+      "transformer_blocks_18_": {
+        "name": "dönüştürücü_blokları.18."
+      },
+      "transformer_blocks_19_": {
+        "name": "dönüştürücü_blokları.19."
+      },
+      "transformer_blocks_20_": {
+        "name": "dönüştürücü_blokları.20."
+      },
+      "transformer_blocks_21_": {
+        "name": "dönüştürücü_blokları.21."
+      },
+      "transformer_blocks_22_": {
+        "name": "dönüştürücü_blokları.22."
+      },
+      "transformer_blocks_23_": {
+        "name": "dönüştürücü_blokları.23."
+      },
+      "transformer_blocks_24_": {
+        "name": "dönüştürücü_blokları.24."
+      },
+      "transformer_blocks_25_": {
+        "name": "dönüştürücü_blokları.25."
+      },
+      "transformer_blocks_26_": {
+        "name": "dönüştürücü_blokları.26."
+      },
+      "transformer_blocks_27_": {
+        "name": "dönüştürücü_blokları.27."
+      },
+      "scale_shift_table": {
+        "name": "ölçek_kaydırma_tablosu"
+      },
+      "proj_out_": {
+        "name": "proj_çıkışı."
+      }
+    }
+  },
+  "ModelMergeMochiPreview": {
+    "display_name": "ModelBirleştirmeMochiÖnizleme",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "pos_frequencies_": {
+        "name": "konum_frekansları."
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "t5_y_embedder_": {
+        "name": "t5_y_gömücü."
+      },
+      "t5_yproj_": {
+        "name": "t5_yproj."
+      },
+      "blocks_0_": {
+        "name": "bloklar.0."
+      },
+      "blocks_1_": {
+        "name": "bloklar.1."
+      },
+      "blocks_2_": {
+        "name": "bloklar.2."
+      },
+      "blocks_3_": {
+        "name": "bloklar.3."
+      },
+      "blocks_4_": {
+        "name": "bloklar.4."
+      },
+      "blocks_5_": {
+        "name": "bloklar.5."
+      },
+      "blocks_6_": {
+        "name": "bloklar.6."
+      },
+      "blocks_7_": {
+        "name": "bloklar.7."
+      },
+      "blocks_8_": {
+        "name": "bloklar.8."
+      },
+      "blocks_9_": {
+        "name": "bloklar.9."
+      },
+      "blocks_10_": {
+        "name": "bloklar.10."
+      },
+      "blocks_11_": {
+        "name": "bloklar.11."
+      },
+      "blocks_12_": {
+        "name": "bloklar.12."
+      },
+      "blocks_13_": {
+        "name": "bloklar.13."
+      },
+      "blocks_14_": {
+        "name": "bloklar.14."
+      },
+      "blocks_15_": {
+        "name": "bloklar.15."
+      },
+      "blocks_16_": {
+        "name": "bloklar.16."
+      },
+      "blocks_17_": {
+        "name": "bloklar.17."
+      },
+      "blocks_18_": {
+        "name": "bloklar.18."
+      },
+      "blocks_19_": {
+        "name": "bloklar.19."
+      },
+      "blocks_20_": {
+        "name": "bloklar.20."
+      },
+      "blocks_21_": {
+        "name": "bloklar.21."
+      },
+      "blocks_22_": {
+        "name": "bloklar.22."
+      },
+      "blocks_23_": {
+        "name": "bloklar.23."
+      },
+      "blocks_24_": {
+        "name": "bloklar.24."
+      },
+      "blocks_25_": {
+        "name": "bloklar.25."
+      },
+      "blocks_26_": {
+        "name": "bloklar.26."
+      },
+      "blocks_27_": {
+        "name": "bloklar.27."
+      },
+      "blocks_28_": {
+        "name": "bloklar.28."
+      },
+      "blocks_29_": {
+        "name": "bloklar.29."
+      },
+      "blocks_30_": {
+        "name": "bloklar.30."
+      },
+      "blocks_31_": {
+        "name": "bloklar.31."
+      },
+      "blocks_32_": {
+        "name": "bloklar.32."
+      },
+      "blocks_33_": {
+        "name": "bloklar.33."
+      },
+      "blocks_34_": {
+        "name": "bloklar.34."
+      },
+      "blocks_35_": {
+        "name": "bloklar.35."
+      },
+      "blocks_36_": {
+        "name": "bloklar.36."
+      },
+      "blocks_37_": {
+        "name": "bloklar.37."
+      },
+      "blocks_38_": {
+        "name": "bloklar.38."
+      },
+      "blocks_39_": {
+        "name": "bloklar.39."
+      },
+      "blocks_40_": {
+        "name": "bloklar.40."
+      },
+      "blocks_41_": {
+        "name": "bloklar.41."
+      },
+      "blocks_42_": {
+        "name": "bloklar.42."
+      },
+      "blocks_43_": {
+        "name": "bloklar.43."
+      },
+      "blocks_44_": {
+        "name": "bloklar.44."
+      },
+      "blocks_45_": {
+        "name": "bloklar.45."
+      },
+      "blocks_46_": {
+        "name": "bloklar.46."
+      },
+      "blocks_47_": {
+        "name": "bloklar.47."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeSD1": {
+    "display_name": "ModelBirleştirmeSD1",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "time_embed_": {
+        "name": "zaman_gömme."
+      },
+      "label_emb_": {
+        "name": "etiket_gömme."
+      },
+      "input_blocks_0_": {
+        "name": "giriş_blokları.0."
+      },
+      "input_blocks_1_": {
+        "name": "giriş_blokları.1."
+      },
+      "input_blocks_2_": {
+        "name": "giriş_blokları.2."
+      },
+      "input_blocks_3_": {
+        "name": "giriş_blokları.3."
+      },
+      "input_blocks_4_": {
+        "name": "giriş_blokları.4."
+      },
+      "input_blocks_5_": {
+        "name": "giriş_blokları.5."
+      },
+      "input_blocks_6_": {
+        "name": "giriş_blokları.6."
+      },
+      "input_blocks_7_": {
+        "name": "giriş_blokları.7."
+      },
+      "input_blocks_8_": {
+        "name": "giriş_blokları.8."
+      },
+      "input_blocks_9_": {
+        "name": "giriş_blokları.9."
+      },
+      "input_blocks_10_": {
+        "name": "giriş_blokları.10."
+      },
+      "input_blocks_11_": {
+        "name": "giriş_blokları.11."
+      },
+      "middle_block_0_": {
+        "name": "orta_blok.0."
+      },
+      "middle_block_1_": {
+        "name": "orta_blok.1."
+      },
+      "middle_block_2_": {
+        "name": "orta_blok.2."
+      },
+      "output_blocks_0_": {
+        "name": "çıktı_blokları.0."
+      },
+      "output_blocks_1_": {
+        "name": "çıktı_blokları.1."
+      },
+      "output_blocks_2_": {
+        "name": "çıktı_blokları.2."
+      },
+      "output_blocks_3_": {
+        "name": "çıktı_blokları.3."
+      },
+      "output_blocks_4_": {
+        "name": "çıktı_blokları.4."
+      },
+      "output_blocks_5_": {
+        "name": "çıktı_blokları.5."
+      },
+      "output_blocks_6_": {
+        "name": "çıktı_blokları.6."
+      },
+      "output_blocks_7_": {
+        "name": "çıktı_blokları.7."
+      },
+      "output_blocks_8_": {
+        "name": "çıktı_blokları.8."
+      },
+      "output_blocks_9_": {
+        "name": "çıktı_blokları.9."
+      },
+      "output_blocks_10_": {
+        "name": "çıktı_blokları.10."
+      },
+      "output_blocks_11_": {
+        "name": "çıktı_blokları.11."
+      },
+      "out_": {
+        "name": "çıktı."
+      }
+    }
+  },
+  "ModelMergeSD2": {
+    "display_name": "ModelBirleştirmeSD2",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "time_embed_": {
+        "name": "zaman_gömme."
+      },
+      "label_emb_": {
+        "name": "etiket_gömme."
+      },
+      "input_blocks_0_": {
+        "name": "giriş_blokları.0."
+      },
+      "input_blocks_1_": {
+        "name": "giriş_blokları.1."
+      },
+      "input_blocks_2_": {
+        "name": "giriş_blokları.2."
+      },
+      "input_blocks_3_": {
+        "name": "giriş_blokları.3."
+      },
+      "input_blocks_4_": {
+        "name": "giriş_blokları.4."
+      },
+      "input_blocks_5_": {
+        "name": "giriş_blokları.5."
+      },
+      "input_blocks_6_": {
+        "name": "giriş_blokları.6."
+      },
+      "input_blocks_7_": {
+        "name": "giriş_blokları.7."
+      },
+      "input_blocks_8_": {
+        "name": "giriş_blokları.8."
+      },
+      "input_blocks_9_": {
+        "name": "giriş_blokları.9."
+      },
+      "input_blocks_10_": {
+        "name": "giriş_blokları.10."
+      },
+      "input_blocks_11_": {
+        "name": "giriş_blokları.11."
+      },
+      "middle_block_0_": {
+        "name": "orta_blok.0."
+      },
+      "middle_block_1_": {
+        "name": "orta_blok.1."
+      },
+      "middle_block_2_": {
+        "name": "orta_blok.2."
+      },
+      "output_blocks_0_": {
+        "name": "çıktı_blokları.0."
+      },
+      "output_blocks_1_": {
+        "name": "çıktı_blokları.1."
+      },
+      "output_blocks_2_": {
+        "name": "çıktı_blokları.2."
+      },
+      "output_blocks_3_": {
+        "name": "çıktı_blokları.3."
+      },
+      "output_blocks_4_": {
+        "name": "çıktı_blokları.4."
+      },
+      "output_blocks_5_": {
+        "name": "çıktı_blokları.5."
+      },
+      "output_blocks_6_": {
+        "name": "çıktı_blokları.6."
+      },
+      "output_blocks_7_": {
+        "name": "çıktı_blokları.7."
+      },
+      "output_blocks_8_": {
+        "name": "çıktı_blokları.8."
+      },
+      "output_blocks_9_": {
+        "name": "çıktı_blokları.9."
+      },
+      "output_blocks_10_": {
+        "name": "çıktı_blokları.10."
+      },
+      "output_blocks_11_": {
+        "name": "çıktı_blokları.11."
+      },
+      "out_": {
+        "name": "çıktı."
+      }
+    }
+  },
+  "ModelMergeSD3_2B": {
+    "display_name": "ModelBirleştirmeSD3_2B",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "pos_embed_": {
+        "name": "konum_gömme."
+      },
+      "x_embedder_": {
+        "name": "x_gömücü."
+      },
+      "context_embedder_": {
+        "name": "bağlam_gömücü."
+      },
+      "y_embedder_": {
+        "name": "y_gömücü."
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "joint_blocks_0_": {
+        "name": "birleşik_bloklar.0."
+      },
+      "joint_blocks_1_": {
+        "name": "birleşik_bloklar.1."
+      },
+      "joint_blocks_2_": {
+        "name": "birleşik_bloklar.2."
+      },
+      "joint_blocks_3_": {
+        "name": "birleşik_bloklar.3."
+      },
+      "joint_blocks_4_": {
+        "name": "birleşik_bloklar.4."
+      },
+      "joint_blocks_5_": {
+        "name": "birleşik_bloklar.5."
+      },
+      "joint_blocks_6_": {
+        "name": "birleşik_bloklar.6."
+      },
+      "joint_blocks_7_": {
+        "name": "birleşik_bloklar.7."
+      },
+      "joint_blocks_8_": {
+        "name": "birleşik_bloklar.8."
+      },
+      "joint_blocks_9_": {
+        "name": "birleşik_bloklar.9."
+      },
+      "joint_blocks_10_": {
+        "name": "birleşik_bloklar.10."
+      },
+      "joint_blocks_11_": {
+        "name": "birleşik_bloklar.11."
+      },
+      "joint_blocks_12_": {
+        "name": "birleşik_bloklar.12."
+      },
+      "joint_blocks_13_": {
+        "name": "birleşik_bloklar.13."
+      },
+      "joint_blocks_14_": {
+        "name": "birleşik_bloklar.14."
+      },
+      "joint_blocks_15_": {
+        "name": "birleşik_bloklar.15."
+      },
+      "joint_blocks_16_": {
+        "name": "birleşik_bloklar.16."
+      },
+      "joint_blocks_17_": {
+        "name": "birleşik_bloklar.17."
+      },
+      "joint_blocks_18_": {
+        "name": "birleşik_bloklar.18."
+      },
+      "joint_blocks_19_": {
+        "name": "birleşik_bloklar.19."
+      },
+      "joint_blocks_20_": {
+        "name": "birleşik_bloklar.20."
+      },
+      "joint_blocks_21_": {
+        "name": "birleşik_bloklar.21."
+      },
+      "joint_blocks_22_": {
+        "name": "birleşik_bloklar.22."
+      },
+      "joint_blocks_23_": {
+        "name": "birleşik_bloklar.23."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeSD35_Large": {
+    "display_name": "ModelBirleştirmeSD35_Büyük",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "pos_embed_": {
+        "name": "konum_gömme."
+      },
+      "x_embedder_": {
+        "name": "x_gömücü."
+      },
+      "context_embedder_": {
+        "name": "bağlam_gömücü."
+      },
+      "y_embedder_": {
+        "name": "y_gömücü."
+      },
+      "t_embedder_": {
+        "name": "t_gömücü."
+      },
+      "joint_blocks_0_": {
+        "name": "birleşik_bloklar.0."
+      },
+      "joint_blocks_1_": {
+        "name": "birleşik_bloklar.1."
+      },
+      "joint_blocks_2_": {
+        "name": "birleşik_bloklar.2."
+      },
+      "joint_blocks_3_": {
+        "name": "birleşik_bloklar.3."
+      },
+      "joint_blocks_4_": {
+        "name": "birleşik_bloklar.4."
+      },
+      "joint_blocks_5_": {
+        "name": "birleşik_bloklar.5."
+      },
+      "joint_blocks_6_": {
+        "name": "birleşik_bloklar.6."
+      },
+      "joint_blocks_7_": {
+        "name": "birleşik_bloklar.7."
+      },
+      "joint_blocks_8_": {
+        "name": "birleşik_bloklar.8."
+      },
+      "joint_blocks_9_": {
+        "name": "birleşik_bloklar.9."
+      },
+      "joint_blocks_10_": {
+        "name": "birleşik_bloklar.10."
+      },
+      "joint_blocks_11_": {
+        "name": "birleşik_bloklar.11."
+      },
+      "joint_blocks_12_": {
+        "name": "birleşik_bloklar.12."
+      },
+      "joint_blocks_13_": {
+        "name": "birleşik_bloklar.13."
+      },
+      "joint_blocks_14_": {
+        "name": "birleşik_bloklar.14."
+      },
+      "joint_blocks_15_": {
+        "name": "birleşik_bloklar.15."
+      },
+      "joint_blocks_16_": {
+        "name": "birleşik_bloklar.16."
+      },
+      "joint_blocks_17_": {
+        "name": "birleşik_bloklar.17."
+      },
+      "joint_blocks_18_": {
+        "name": "birleşik_bloklar.18."
+      },
+      "joint_blocks_19_": {
+        "name": "birleşik_bloklar.19."
+      },
+      "joint_blocks_20_": {
+        "name": "birleşik_bloklar.20."
+      },
+      "joint_blocks_21_": {
+        "name": "birleşik_bloklar.21."
+      },
+      "joint_blocks_22_": {
+        "name": "birleşik_bloklar.22."
+      },
+      "joint_blocks_23_": {
+        "name": "birleşik_bloklar.23."
+      },
+      "joint_blocks_24_": {
+        "name": "birleşik_bloklar.24."
+      },
+      "joint_blocks_25_": {
+        "name": "birleşik_bloklar.25."
+      },
+      "joint_blocks_26_": {
+        "name": "birleşik_bloklar.26."
+      },
+      "joint_blocks_27_": {
+        "name": "birleşik_bloklar.27."
+      },
+      "joint_blocks_28_": {
+        "name": "birleşik_bloklar.28."
+      },
+      "joint_blocks_29_": {
+        "name": "birleşik_bloklar.29."
+      },
+      "joint_blocks_30_": {
+        "name": "birleşik_bloklar.30."
+      },
+      "joint_blocks_31_": {
+        "name": "birleşik_bloklar.31."
+      },
+      "joint_blocks_32_": {
+        "name": "birleşik_bloklar.32."
+      },
+      "joint_blocks_33_": {
+        "name": "birleşik_bloklar.33."
+      },
+      "joint_blocks_34_": {
+        "name": "birleşik_bloklar.34."
+      },
+      "joint_blocks_35_": {
+        "name": "birleşik_bloklar.35."
+      },
+      "joint_blocks_36_": {
+        "name": "birleşik_bloklar.36."
+      },
+      "joint_blocks_37_": {
+        "name": "birleşik_bloklar.37."
+      },
+      "final_layer_": {
+        "name": "son_katman."
+      }
+    }
+  },
+  "ModelMergeSDXL": {
+    "display_name": "ModelBirleştirmeSDXL",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "time_embed_": {
+        "name": "zaman_gömme."
+      },
+      "label_emb_": {
+        "name": "etiket_gömme."
+      },
+      "input_blocks_0": {
+        "name": "giriş_blokları.0"
+      },
+      "input_blocks_1": {
+        "name": "giriş_blokları.1"
+      },
+      "input_blocks_2": {
+        "name": "giriş_blokları.2"
+      },
+      "input_blocks_3": {
+        "name": "giriş_blokları.3"
+      },
+      "input_blocks_4": {
+        "name": "giriş_blokları.4"
+      },
+      "input_blocks_5": {
+        "name": "giriş_blokları.5"
+      },
+      "input_blocks_6": {
+        "name": "giriş_blokları.6"
+      },
+      "input_blocks_7": {
+        "name": "giriş_blokları.7"
+      },
+      "input_blocks_8": {
+        "name": "giriş_blokları.8"
+      },
+      "middle_block_0": {
+        "name": "orta_blok.0"
+      },
+      "middle_block_1": {
+        "name": "orta_blok.1"
+      },
+      "middle_block_2": {
+        "name": "orta_blok.2"
+      },
+      "output_blocks_0": {
+        "name": "çıktı_blokları.0"
+      },
+      "output_blocks_1": {
+        "name": "çıktı_blokları.1"
+      },
+      "output_blocks_2": {
+        "name": "çıktı_blokları.2"
+      },
+      "output_blocks_3": {
+        "name": "çıktı_blokları.3"
+      },
+      "output_blocks_4": {
+        "name": "çıktı_blokları.4"
+      },
+      "output_blocks_5": {
+        "name": "çıktı_blokları.5"
+      },
+      "output_blocks_6": {
+        "name": "çıktı_blokları.6"
+      },
+      "output_blocks_7": {
+        "name": "çıktı_blokları.7"
+      },
+      "output_blocks_8": {
+        "name": "çıktı_blokları.8"
+      },
+      "out_": {
+        "name": "çıktı."
+      }
+    }
+  },
+  "ModelMergeSimple": {
+    "display_name": "BasitModelBirleştirme",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "ratio": {
+        "name": "oran"
+      }
+    }
+  },
+  "ModelMergeSubtract": {
+    "display_name": "ModelBirleştirmeÇıkarma",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "multiplier": {
+        "name": "çarpan"
+      }
+    }
+  },
+  "ModelMergeWAN2_1": {
+    "display_name": "ModelBirleştirmeWAN2_1",
+    "description": "1.3B modelinde 30 blok, 14B modelinde 40 blok bulunur. Görüntüden videoya modelinde ek olarak img_emb bulunur.",
+    "inputs": {
+      "model1": {
+        "name": "model1"
+      },
+      "model2": {
+        "name": "model2"
+      },
+      "patch_embedding_": {
+        "name": "yama_gömme."
+      },
+      "time_embedding_": {
+        "name": "zaman_gömme."
+      },
+      "time_projection_": {
+        "name": "zaman_projeksiyonu."
+      },
+      "text_embedding_": {
+        "name": "metin_gömme."
+      },
+      "img_emb_": {
+        "name": "görüntü_gömme."
+      },
+      "blocks_0_": {
+        "name": "bloklar.0."
+      },
+      "blocks_1_": {
+        "name": "bloklar.1."
+      },
+      "blocks_2_": {
+        "name": "bloklar.2."
+      },
+      "blocks_3_": {
+        "name": "bloklar.3."
+      },
+      "blocks_4_": {
+        "name": "bloklar.4."
+      },
+      "blocks_5_": {
+        "name": "bloklar.5."
+      },
+      "blocks_6_": {
+        "name": "bloklar.6."
+      },
+      "blocks_7_": {
+        "name": "bloklar.7."
+      },
+      "blocks_8_": {
+        "name": "bloklar.8."
+      },
+      "blocks_9_": {
+        "name": "bloklar.9."
+      },
+      "blocks_10_": {
+        "name": "bloklar.10."
+      },
+      "blocks_11_": {
+        "name": "bloklar.11."
+      },
+      "blocks_12_": {
+        "name": "bloklar.12."
+      },
+      "blocks_13_": {
+        "name": "bloklar.13."
+      },
+      "blocks_14_": {
+        "name": "bloklar.14."
+      },
+      "blocks_15_": {
+        "name": "bloklar.15."
+      },
+      "blocks_16_": {
+        "name": "bloklar.16."
+      },
+      "blocks_17_": {
+        "name": "bloklar.17."
+      },
+      "blocks_18_": {
+        "name": "bloklar.18."
+      },
+      "blocks_19_": {
+        "name": "bloklar.19."
+      },
+      "blocks_20_": {
+        "name": "bloklar.20."
+      },
+      "blocks_21_": {
+        "name": "bloklar.21."
+      },
+      "blocks_22_": {
+        "name": "bloklar.22."
+      },
+      "blocks_23_": {
+        "name": "bloklar.23."
+      },
+      "blocks_24_": {
+        "name": "bloklar.24."
+      },
+      "blocks_25_": {
+        "name": "bloklar.25."
+      },
+      "blocks_26_": {
+        "name": "bloklar.26."
+      },
+      "blocks_27_": {
+        "name": "bloklar.27."
+      },
+      "blocks_28_": {
+        "name": "bloklar.28."
+      },
+      "blocks_29_": {
+        "name": "bloklar.29."
+      },
+      "blocks_30_": {
+        "name": "bloklar.30."
+      },
+      "blocks_31_": {
+        "name": "bloklar.31."
+      },
+      "blocks_32_": {
+        "name": "bloklar.32."
+      },
+      "blocks_33_": {
+        "name": "bloklar.33."
+      },
+      "blocks_34_": {
+        "name": "bloklar.34."
+      },
+      "blocks_35_": {
+        "name": "bloklar.35."
+      },
+      "blocks_36_": {
+        "name": "bloklar.36."
+      },
+      "blocks_37_": {
+        "name": "bloklar.37."
+      },
+      "blocks_38_": {
+        "name": "bloklar.38."
+      },
+      "blocks_39_": {
+        "name": "bloklar.39."
+      },
+      "head_": {
+        "name": "baş."
+      }
+    }
+  },
+  "ModelSamplingAuraFlow": {
+    "display_name": "ModelÖrneklemeAuraFlow",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "shift": {
+        "name": "kaydırma"
+      }
+    }
+  },
+  "ModelSamplingContinuousEDM": {
+    "display_name": "ModelÖrneklemeSürekliEDM",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "sampling": {
+        "name": "örnekleme"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      }
+    }
+  },
+  "ModelSamplingContinuousV": {
+    "display_name": "ModelÖrneklemeSürekliV",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "sampling": {
+        "name": "örnekleme"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      }
+    }
+  },
+  "ModelSamplingDiscrete": {
+    "display_name": "ModelÖrneklemeAyrık",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "sampling": {
+        "name": "örnekleme"
+      },
+      "zsnr": {
+        "name": "zsnr"
+      }
+    }
+  },
+  "ModelSamplingFlux": {
+    "display_name": "ModelÖrneklemeFlux",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "max_shift": {
+        "name": "maks_kaydırma"
+      },
+      "base_shift": {
+        "name": "temel_kaydırma"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      }
+    }
+  },
+  "ModelSamplingLTXV": {
+    "display_name": "ModelÖrneklemeLTXV",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "max_shift": {
+        "name": "maks_kaydırma"
+      },
+      "base_shift": {
+        "name": "temel_kaydırma"
+      },
+      "latent": {
+        "name": "gizli"
+      }
+    }
+  },
+  "ModelSamplingSD3": {
+    "display_name": "ModelÖrneklemeSD3",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "shift": {
+        "name": "kaydırma"
+      }
+    }
+  },
+  "ModelSamplingStableCascade": {
+    "display_name": "ModelÖrneklemeStabilKaskad",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "shift": {
+        "name": "kaydırma"
+      }
+    }
+  },
+  "ModelSave": {
+    "display_name": "ModelKaydet",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "Morphology": {
+    "display_name": "GörüntüMorfolojisi",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "operation": {
+        "name": "işlem"
+      },
+      "kernel_size": {
+        "name": "çekirdek_boyutu"
+      }
+    }
+  },
+  "OpenAIDalle2": {
+    "display_name": "OpenAI DALL·E 2",
+    "description": "OpenAI'nin DALL·E 2 uç noktası aracılığıyla eşzamanlı olarak görüntüler oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "DALL·E için metin istemi"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "arka uçta henüz uygulanmadı"
+      },
+      "size": {
+        "name": "boyut",
+        "tooltip": "Görüntü boyutu"
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Kaç tane görüntü oluşturulacağı"
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Görüntü düzenleme için isteğe bağlı referans görüntü."
+      },
+      "mask": {
+        "name": "maske",
+        "tooltip": "İç boyama için isteğe bağlı maske (beyaz alanlar değiştirilecektir)"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "OpenAIDalle3": {
+    "display_name": "OpenAI DALL·E 3",
+    "description": "OpenAI'nin DALL·E 3 uç noktası aracılığıyla eşzamanlı olarak görüntüler oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "DALL·E için metin istemi"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "arka uçta henüz uygulanmadı"
+      },
+      "quality": {
+        "name": "kalite",
+        "tooltip": "Görüntü kalitesi"
+      },
+      "style": {
+        "name": "stil",
+        "tooltip": "Canlı, modelin hiper-gerçekçi ve dramatik görüntüler oluşturmaya yönelmesine neden olur. Doğal, modelin daha doğal, daha az hiper-gerçekçi görünen görüntüler üretmesine neden olur."
+      },
+      "size": {
+        "name": "boyut",
+        "tooltip": "Görüntü boyutu"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "OpenAIGPTImage1": {
+    "display_name": "OpenAI GPT Görüntü 1",
+    "description": "OpenAI'nin GPT Görüntü 1 uç noktası aracılığıyla eşzamanlı olarak görüntüler oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "GPT Görüntü 1 için metin istemi"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "arka uçta henüz uygulanmadı"
+      },
+      "quality": {
+        "name": "kalite",
+        "tooltip": "Görüntü kalitesi, maliyeti ve üretim süresini etkiler."
+      },
+      "background": {
+        "name": "arka_plan",
+        "tooltip": "Görüntüyü arka planlı veya arka plansız döndür"
+      },
+      "size": {
+        "name": "boyut",
+        "tooltip": "Görüntü boyutu"
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Kaç tane görüntü oluşturulacağı"
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Görüntü düzenleme için isteğe bağlı referans görüntü."
+      },
+      "mask": {
+        "name": "maske",
+        "tooltip": "İç boyama için isteğe bağlı maske (beyaz alanlar değiştirilecektir)"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "OptimalStepsScheduler": {
+    "display_name": "OptimalAdımlarZamanlayıcı",
+    "inputs": {
+      "model_type": {
+        "name": "model_türü"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    }
+  },
+  "PairConditioningCombine": {
+    "display_name": "Koşul Çifti Birleştir",
+    "inputs": {
+      "positive_A": {
+        "name": "pozitif_A"
+      },
+      "negative_A": {
+        "name": "negatif_A"
+      },
+      "positive_B": {
+        "name": "pozitif_B"
+      },
+      "negative_B": {
+        "name": "negatif_B"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "PairConditioningSetDefaultCombine": {
+    "display_name": "Koşul Çifti Varsayılan Birleştirmeyi Ayarla",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "positive_DEFAULT": {
+        "name": "pozitif_VARSAYILAN"
+      },
+      "negative_DEFAULT": {
+        "name": "negatif_VARSAYILAN"
+      },
+      "hooks": {
+        "name": "kancalar"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "PairConditioningSetProperties": {
+    "display_name": "Koşul Çifti Özelliklerini Ayarla",
+    "inputs": {
+      "positive_NEW": {
+        "name": "yeni_pozitif"
+      },
+      "negative_NEW": {
+        "name": "yeni_negatif"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "set_cond_area": {
+        "name": "koşul_alanı_ayarla"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "hooks": {
+        "name": "kancalar"
+      },
+      "timesteps": {
+        "name": "zaman_adımları"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "PairConditioningSetPropertiesAndCombine": {
+    "display_name": "Koşul Çifti Özelliklerini Ayarla ve Birleştir",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "positive_NEW": {
+        "name": "yeni_pozitif"
+      },
+      "negative_NEW": {
+        "name": "yeni_negatif"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "set_cond_area": {
+        "name": "koşul_alanı_ayarla"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "hooks": {
+        "name": "kancalar"
+      },
+      "timesteps": {
+        "name": "zaman_adımları"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      }
+    }
+  },
+  "PatchModelAddDownscale": {
+    "display_name": "Model Yaması Ekle Küçültme (Kohya Deep Shrink)",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "block_number": {
+        "name": "blok_numarası"
+      },
+      "downscale_factor": {
+        "name": "küçültme_faktörü"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      },
+      "downscale_after_skip": {
+        "name": "atlamadan_sonra_küçült"
+      },
+      "downscale_method": {
+        "name": "küçültme_yöntemi"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      }
+    }
+  },
+  "PerpNeg": {
+    "display_name": "Perp-Neg (PerpNegGuider tarafından ESKİ)",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "empty_conditioning": {
+        "name": "boş_koşullandırma"
+      },
+      "neg_scale": {
+        "name": "neg_ölçek"
+      }
+    }
+  },
+  "PerpNegGuider": {
+    "display_name": "PerpNegRehberi",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "empty_conditioning": {
+        "name": "boş_koşullandırma"
+      },
+      "cfg": {
+        "name": "cfg"
+      },
+      "neg_scale": {
+        "name": "neg_ölçek"
+      }
+    }
+  },
+  "PerturbedAttentionGuidance": {
+    "display_name": "BozulmuşDikkatRehberliği",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "scale": {
+        "name": "ölçek"
+      }
+    }
+  },
+  "PhotoMakerEncode": {
+    "display_name": "PhotoMakerKodlama",
+    "inputs": {
+      "photomaker": {
+        "name": "photomaker"
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "clip": {
+        "name": "clip"
+      },
+      "text": {
+        "name": "metin"
+      }
+    }
+  },
+  "PhotoMakerLoader": {
+    "display_name": "PhotoMakerYükleyici",
+    "inputs": {
+      "photomaker_model_name": {
+        "name": "photomaker_model_adı"
+      }
+    }
+  },
+  "Pikadditions": {
+    "display_name": "Pikadditions (Video Nesne Ekleme)",
+    "description": "Videonuzun içine herhangi bir nesne veya görüntü ekleyin. Bir video yükleyin ve sorunsuz bir şekilde entegre edilmiş bir sonuç oluşturmak için ne eklemek istediğinizi belirtin.",
+    "inputs": {
+      "video": {
+        "name": "video",
+        "tooltip": "Görüntü eklenecek video."
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Videoya eklenecek görüntü."
+      },
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "Pikaffects": {
+    "display_name": "Pikaffects (Video Efektleri)",
+    "description": "Belirli bir Pikaffect ile bir video oluşturun. Desteklenen Pikaffect'ler: Cake-ify, Crumble, Crush, Decapitate, Deflate, Dissolve, Explode, Eye-pop, Inflate, Levitate, Melt, Peel, Poke, Squish, Ta-da, Tear",
+    "inputs": {
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Pikaffect'in uygulanacağı referans görüntü."
+      },
+      "pikaffect": {
+        "name": "pikaffect"
+      },
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PikaImageToVideoNode2_2": {
+    "display_name": "Pika Görüntüden Videoya",
+    "description": "Bir video oluşturmak için Pika API v2.2'ye bir görüntü ve istem gönderir.",
+    "inputs": {
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Videoya dönüştürülecek görüntü"
+      },
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PikaScenesV2_2": {
+    "display_name": "Pika Sahneleri (Video Görüntü Kompozisyonu)",
+    "description": "İçlerindeki nesnelerle bir video oluşturmak için görüntülerinizi birleştirin. Malzeme olarak birden fazla görüntü yükleyin ve hepsini içeren yüksek kaliteli bir video oluşturun.",
+    "inputs": {
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "ingredients_mode": {
+        "name": "malzemeler_modu"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "En boy oranı (genişlik / yükseklik)"
+      },
+      "image_ingredient_1": {
+        "name": "görüntü_malzemesi_1",
+        "tooltip": "Video oluşturmak için malzeme olarak kullanılacak görüntü."
+      },
+      "image_ingredient_2": {
+        "name": "görüntü_malzemesi_2",
+        "tooltip": "Video oluşturmak için malzeme olarak kullanılacak görüntü."
+      },
+      "image_ingredient_3": {
+        "name": "görüntü_malzemesi_3",
+        "tooltip": "Video oluşturmak için malzeme olarak kullanılacak görüntü."
+      },
+      "image_ingredient_4": {
+        "name": "görüntü_malzemesi_4",
+        "tooltip": "Video oluşturmak için malzeme olarak kullanılacak görüntü."
+      },
+      "image_ingredient_5": {
+        "name": "görüntü_malzemesi_5",
+        "tooltip": "Video oluşturmak için malzeme olarak kullanılacak görüntü."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PikaStartEndFrameNode2_2": {
+    "display_name": "Pika Başlangıç ve Bitiş Karesinden Videoya",
+    "description": "İlk ve son karenizi birleştirerek bir video oluşturun. Başlangıç ve bitiş noktalarını tanımlamak için iki görüntü yükleyin ve yapay zekanın aralarında pürüzsüz bir geçiş oluşturmasına izin verin.",
+    "inputs": {
+      "image_start": {
+        "name": "başlangıç_görüntüsü",
+        "tooltip": "Birleştirilecek ilk görüntü."
+      },
+      "image_end": {
+        "name": "bitiş_görüntüsü",
+        "tooltip": "Birleştirilecek son görüntü."
+      },
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "Pikaswaps": {
+    "display_name": "Pika Değişimleri (Video Nesne Değiştirme)",
+    "description": "Videonuzdaki herhangi bir nesneyi veya bölgeyi yeni bir görüntü veya nesneyle değiştirin. Değiştirilecek alanları bir maske veya koordinatlarla tanımlayın.",
+    "inputs": {
+      "video": {
+        "name": "video",
+        "tooltip": "İçinde bir nesne değiştirilecek video."
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Videodaki maskelenmiş nesneyi değiştirmek için kullanılan görüntü."
+      },
+      "mask": {
+        "name": "maske",
+        "tooltip": "Videoda değiştirilecek alanları tanımlamak için maskeyi kullanın"
+      },
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PikaTextToVideoNode2_2": {
+    "display_name": "Pika Metinden Videoya",
+    "description": "Bir video oluşturmak için Pika API v2.2'ye bir metin istemi gönderir.",
+    "inputs": {
+      "prompt_text": {
+        "name": "istem_metni"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem"
+      },
+      "seed": {
+        "name": "tohum"
+      },
+      "resolution": {
+        "name": "çözünürlük"
+      },
+      "duration": {
+        "name": "süre"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "En boy oranı (genişlik / yükseklik)"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PixverseImageToVideoNode": {
+    "display_name": "PixVerse Görüntüden Videoya",
+    "description": "İstem ve çıktı_boyutuna göre videoları eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video oluşturma istemi"
+      },
+      "quality": {
+        "name": "kalite"
+      },
+      "duration_seconds": {
+        "name": "süre_saniye"
+      },
+      "motion_mode": {
+        "name": "hareket_modu"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Video oluşturma için tohum."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "pixverse_template": {
+        "name": "pixverse_şablonu",
+        "tooltip": "PixVerse Şablon düğümü tarafından oluşturulan, üretimin stilini etkilemek için isteğe bağlı bir şablon."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PixverseTemplateNode": {
+    "display_name": "PixVerse Şablonu",
+    "inputs": {
+      "template": {
+        "name": "şablon"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pixverse_şablonu"
+      }
+    }
+  },
+  "PixverseTextToVideoNode": {
+    "display_name": "PixVerse Metinden Videoya",
+    "description": "İstem ve çıktı_boyutuna göre videoları eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video oluşturma istemi"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı"
+      },
+      "quality": {
+        "name": "kalite"
+      },
+      "duration_seconds": {
+        "name": "süre_saniye"
+      },
+      "motion_mode": {
+        "name": "hareket_modu"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Video oluşturma için tohum."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "pixverse_template": {
+        "name": "pixverse_şablonu",
+        "tooltip": "PixVerse Şablon düğümü tarafından oluşturulan, üretimin stilini etkilemek için isteğe bağlı bir şablon."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PixverseTransitionVideoNode": {
+    "display_name": "PixVerse Geçiş Videosu",
+    "description": "İstem ve çıktı_boyutuna göre videoları eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "first_frame": {
+        "name": "ilk_kare"
+      },
+      "last_frame": {
+        "name": "son_kare"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Video oluşturma istemi"
+      },
+      "quality": {
+        "name": "kalite"
+      },
+      "duration_seconds": {
+        "name": "süre_saniye"
+      },
+      "motion_mode": {
+        "name": "hareket_modu"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Video oluşturma için tohum."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PolyexponentialScheduler": {
+    "display_name": "ÇokÜstelZamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "sigma_max": {
+        "name": "sigma_maks"
+      },
+      "sigma_min": {
+        "name": "sigma_min"
+      },
+      "rho": {
+        "name": "rho"
+      }
+    }
+  },
+  "PorterDuffImageComposite": {
+    "display_name": "Porter-Duff Görüntü Birleştirme",
+    "inputs": {
+      "source": {
+        "name": "kaynak"
+      },
+      "source_alpha": {
+        "name": "kaynak_alfa"
+      },
+      "destination": {
+        "name": "hedef"
+      },
+      "destination_alpha": {
+        "name": "hedef_alfa"
+      },
+      "mode": {
+        "name": "mod"
+      }
+    }
+  },
+  "Preview3D": {
+    "display_name": "3D Önizleme",
+    "inputs": {
+      "model_file": {
+        "name": "model_dosyası"
+      },
+      "camera_info": {
+        "name": "kamera_bilgisi"
+      },
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "Preview3DAnimation": {
+    "display_name": "3D Önizleme - Animasyon",
+    "inputs": {
+      "model_file": {
+        "name": "model_dosyası"
+      },
+      "camera_info": {
+        "name": "kamera_bilgisi"
+      },
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "PreviewAny": {
+    "display_name": "Herhangi Bir Şeyi Önizle",
+    "inputs": {
+      "source": {
+        "name": "kaynak"
+      },
+      "preview": {}
+    }
+  },
+  "PreviewAudio": {
+    "display_name": "Sesi Önizle",
+    "inputs": {
+      "audio": {
+        "name": "ses"
+      },
+      "audioUI": {
+        "name": "sesArayüzü"
+      }
+    }
+  },
+  "PreviewImage": {
+    "display_name": "Görüntüyü Önizle",
+    "description": "Giriş görüntülerini ComfyUI çıktı dizininize kaydeder.",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      }
+    }
+  },
+  "PrimitiveBoolean": {
+    "display_name": "Boolean",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      }
+    }
+  },
+  "PrimitiveFloat": {
+    "display_name": "Float",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      }
+    }
+  },
+  "PrimitiveInt": {
+    "display_name": "Int",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "PrimitiveString": {
+    "display_name": "String",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      }
+    }
+  },
+  "PrimitiveStringMultiline": {
+    "display_name": "String (Çok Satırlı)",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      }
+    }
+  },
+  "QuadrupleCLIPLoader": {
+    "display_name": "DörtlüCLIPYükleyici",
+    "description": "[Tarifler]\n\nhidream: uzun clip-l, uzun clip-g, t5xxl, llama_8b_3.1_instruct",
+    "inputs": {
+      "clip_name1": {
+        "name": "clip_adı1"
+      },
+      "clip_name2": {
+        "name": "clip_adı2"
+      },
+      "clip_name3": {
+        "name": "clip_adı3"
+      },
+      "clip_name4": {
+        "name": "clip_adı4"
+      }
+    }
+  },
+  "RandomNoise": {
+    "display_name": "RastgeleGürültü",
+    "inputs": {
+      "noise_seed": {
+        "name": "gürültü_tohumu"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RebatchImages": {
+    "display_name": "Görüntüleri Yeniden Grupla",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "RebatchLatents": {
+    "display_name": "Gizli Değişkenleri Yeniden Grupla",
+    "inputs": {
+      "latents": {
+        "name": "gizli_değişkenler"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    }
+  },
+  "RecraftColorRGB": {
+    "display_name": "Recraft Renk RGB",
+    "description": "Belirli RGB değerlerini seçerek Recraft Rengi oluşturun.",
+    "inputs": {
+      "r": {
+        "name": "k",
+        "tooltip": "Rengin Kırmızı değeri."
+      },
+      "g": {
+        "name": "y",
+        "tooltip": "Rengin Yeşil değeri."
+      },
+      "b": {
+        "name": "m",
+        "tooltip": "Rengin Mavi değeri."
+      },
+      "recraft_color": {
+        "name": "recraft_rengi"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_rengi"
+      }
+    }
+  },
+  "RecraftControls": {
+    "display_name": "Recraft Kontrolleri",
+    "description": "Recraft üretimini özelleştirmek için Recraft Kontrolleri oluşturun.",
+    "inputs": {
+      "colors": {
+        "name": "renkler"
+      },
+      "background_color": {
+        "name": "arka_plan_rengi"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_kontrolleri"
+      }
+    }
+  },
+  "RecraftCreativeUpscaleNode": {
+    "display_name": "Recraft Yaratıcı Büyütme Görüntüsü",
+    "description": "Görüntüyü eşzamanlı olarak büyütün.\nVerilen bir raster görüntüyü ‘yaratıcı büyütme’ aracıyla geliştirir, küçük ayrıntıları ve yüzleri iyileştirmeye odaklanarak çözünürlüğü artırır.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "RecraftCrispUpscaleNode": {
+    "display_name": "Recraft Net Büyütme Görüntüsü",
+    "description": "Görüntüyü eşzamanlı olarak büyütün.\nVerilen bir raster görüntüyü ‘net büyütme’ aracıyla geliştirir, görüntü çözünürlüğünü artırır, görüntüyü daha keskin ve temiz hale getirir.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "RecraftImageInpaintingNode": {
+    "display_name": "Recraft Görüntü İç Boyama",
+    "description": "İstem ve maskeye göre görüntüyü değiştirin.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi."
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulacak görüntü sayısı."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "recraft_style": {
+        "name": "recraft_stili"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RecraftImageToImageNode": {
+    "display_name": "Recraft Görüntüden Görüntüye",
+    "description": "İstem ve güce göre görüntüyü değiştirin.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi."
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulacak görüntü sayısı."
+      },
+      "strength": {
+        "name": "güç",
+        "tooltip": "Orijinal görüntü ile farkı tanımlar, [0, 1] aralığında olmalıdır, burada 0 neredeyse aynı anlamına gelir ve 1 sefil bir benzerlik anlamına gelir."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "recraft_style": {
+        "name": "recraft_stili"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "recraft_controls": {
+        "name": "recraft_kontrolleri",
+        "tooltip": "Recraft Kontrolleri düğümü aracılığıyla üretim üzerinde isteğe bağlı ek kontroller."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RecraftRemoveBackgroundNode": {
+    "display_name": "Recraft Arka Planı Kaldır",
+    "description": "Görüntüden arka planı kaldırın ve işlenmiş görüntüyü ve maskeyi döndürün.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "RecraftReplaceBackgroundNode": {
+    "display_name": "Recraft Arka Planı Değiştir",
+    "description": "Sağlanan isteme göre görüntüdeki arka planı değiştirin.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi."
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulacak görüntü sayısı."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "recraft_style": {
+        "name": "recraft_stili"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RecraftStyleV3DigitalIllustration": {
+    "display_name": "Recraft Stili - Dijital İllüstrasyon",
+    "description": "Gerçekçi_görüntü stilini ve isteğe bağlı alt stili seçin.",
+    "inputs": {
+      "substyle": {
+        "name": "alt_stil"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_stili"
+      }
+    }
+  },
+  "RecraftStyleV3InfiniteStyleLibrary": {
+    "display_name": "Recraft Stili - Sonsuz Stil Kütüphanesi",
+    "description": "Recraft'ın Sonsuz Stil Kütüphanesinden önceden var olan UUID'ye göre stil seçin.",
+    "inputs": {
+      "style_id": {
+        "name": "stil_kimliği",
+        "tooltip": "Sonsuz Stil Kütüphanesinden stilin UUID'si."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_stili"
+      }
+    }
+  },
+  "RecraftStyleV3LogoRaster": {
+    "display_name": "Recraft Stili - Logo Raster",
+    "description": "Gerçekçi_görüntü stilini ve isteğe bağlı alt stili seçin.",
+    "inputs": {
+      "substyle": {
+        "name": "alt_stil"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_stili"
+      }
+    }
+  },
+  "RecraftStyleV3RealisticImage": {
+    "display_name": "Recraft Stili - Gerçekçi Görüntü",
+    "description": "Gerçekçi_görüntü stilini ve isteğe bağlı alt stili seçin.",
+    "inputs": {
+      "substyle": {
+        "name": "alt_stil"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "recraft_stili"
+      }
+    }
+  },
+  "RecraftTextToImageNode": {
+    "display_name": "Recraft Metinden Görüntüye",
+    "description": "İstem ve çözünürlüğe göre görüntüleri eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi."
+      },
+      "size": {
+        "name": "boyut",
+        "tooltip": "Oluşturulan görüntünün boyutu."
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulacak görüntü sayısı."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "recraft_style": {
+        "name": "recraft_stili"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "recraft_controls": {
+        "name": "recraft_kontrolleri",
+        "tooltip": "Recraft Kontrolleri düğümü aracılığıyla üretim üzerinde isteğe bağlı ek kontroller."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RecraftTextToVectorNode": {
+    "display_name": "Recraft Metinden Vektöre",
+    "description": "İstem ve çözünürlüğe göre SVG'yi eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Görüntü oluşturma istemi."
+      },
+      "substyle": {
+        "name": "alt_stil"
+      },
+      "size": {
+        "name": "boyut",
+        "tooltip": "Oluşturulan görüntünün boyutu."
+      },
+      "n": {
+        "name": "n",
+        "tooltip": "Oluşturulacak görüntü sayısı."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Düğümün yeniden çalışıp çalışmayacağını belirlemek için tohum; gerçek sonuçlar tohumdan bağımsız olarak belirleyici değildir."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Bir görüntüde istenmeyen öğelerin isteğe bağlı metin açıklaması."
+      },
+      "recraft_controls": {
+        "name": "recraft_kontrolleri",
+        "tooltip": "Recraft Kontrolleri düğümü aracılığıyla üretim üzerinde isteğe bağlı ek kontroller."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "RecraftVectorizeImageNode": {
+    "display_name": "Recraft Görüntüyü Vektörleştir",
+    "description": "Bir giriş görüntüsünden eşzamanlı olarak SVG oluşturur.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "RenormCFG": {
+    "display_name": "YenidenNormalleştirCFG",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "cfg_trunc": {
+        "name": "cfg_kesme"
+      },
+      "renorm_cfg": {
+        "name": "yenidenorm_cfg"
+      }
+    }
+  },
+  "RepeatImageBatch": {
+    "display_name": "GörüntüGrubunuTekrarla",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "amount": {
+        "name": "miktar"
+      }
+    }
+  },
+  "RepeatLatentBatch": {
+    "display_name": "Gizli Grubu Tekrarla",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "amount": {
+        "name": "miktar"
+      }
+    }
+  },
+  "RescaleCFG": {
+    "display_name": "CFG'yiYenidenÖlçekle",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "multiplier": {
+        "name": "çarpan"
+      }
+    }
+  },
+  "SamplerCustom": {
+    "display_name": "ÖzelÖrnekleyici",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "add_noise": {
+        "name": "gürültü_ekle"
+      },
+      "noise_seed": {
+        "name": "gürültü_tohumu"
+      },
+      "cfg": {
+        "name": "cfg"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "sampler": {
+        "name": "örnekleyici"
+      },
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "latent_image": {
+        "name": "gizli_görüntü"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "çıktı"
+      },
+      "1": {
+        "name": "gürültüsü_alınmış_çıktı"
+      }
+    }
+  },
+  "SamplerCustomAdvanced": {
+    "display_name": "GelişmişÖzelÖrnekleyici",
+    "inputs": {
+      "noise": {
+        "name": "gürültü"
+      },
+      "guider": {
+        "name": "rehber"
+      },
+      "sampler": {
+        "name": "örnekleyici"
+      },
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "latent_image": {
+        "name": "gizli_görüntü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "çıktı"
+      },
+      "1": {
+        "name": "gürültüsü_alınmış_çıktı"
+      }
+    }
+  },
+  "SamplerDPMAdaptative": {
+    "display_name": "UyarlanabilirDPMÖrnekleyici",
+    "inputs": {
+      "order": {
+        "name": "sıra"
+      },
+      "rtol": {
+        "name": "rtol"
+      },
+      "atol": {
+        "name": "atol"
+      },
+      "h_init": {
+        "name": "h_başlangıç"
+      },
+      "pcoeff": {
+        "name": "pkatsayı"
+      },
+      "icoeff": {
+        "name": "ikatsayı"
+      },
+      "dcoeff": {
+        "name": "dkatsayı"
+      },
+      "accept_safety": {
+        "name": "kabul_güvenliği"
+      },
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      }
+    }
+  },
+  "SamplerDPMPP_2M_SDE": {
+    "display_name": "ÖrnekleyiciDPMPP_2M_SDE",
+    "inputs": {
+      "solver_type": {
+        "name": "çözücü_türü"
+      },
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      },
+      "noise_device": {
+        "name": "gürültü_cihazı"
+      }
+    }
+  },
+  "SamplerDPMPP_2S_Ancestral": {
+    "display_name": "ÖrnekleyiciDPMPP_2S_Atasal",
+    "inputs": {
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      }
+    }
+  },
+  "SamplerDPMPP_3M_SDE": {
+    "display_name": "ÖrnekleyiciDPMPP_3M_SDE",
+    "inputs": {
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      },
+      "noise_device": {
+        "name": "gürültü_cihazı"
+      }
+    }
+  },
+  "SamplerDPMPP_SDE": {
+    "display_name": "ÖrnekleyiciDPMPP_SDE",
+    "inputs": {
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      },
+      "r": {
+        "name": "r"
+      },
+      "noise_device": {
+        "name": "gürültü_cihazı"
+      }
+    }
+  },
+  "SamplerEulerAncestral": {
+    "display_name": "Euler Atasal Örnekleyici",
+    "inputs": {
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      }
+    }
+  },
+  "SamplerEulerAncestralCFGPP": {
+    "display_name": "Euler Atasal Örnekleyici CFG++",
+    "inputs": {
+      "eta": {
+        "name": "eta"
+      },
+      "s_noise": {
+        "name": "s_gürültü"
+      }
+    }
+  },
+  "SamplerEulerCFGpp": {
+    "display_name": "Euler Örnekleyici CFG++",
+    "inputs": {
+      "version": {
+        "name": "sürüm"
+      }
+    }
+  },
+  "SamplerLCMUpscale": {
+    "display_name": "LCM Büyütme Örnekleyici",
+    "inputs": {
+      "scale_ratio": {
+        "name": "ölçek_oranı"
+      },
+      "scale_steps": {
+        "name": "ölçek_adımları"
+      },
+      "upscale_method": {
+        "name": "büyütme_yöntemi"
+      }
+    }
+  },
+  "SamplerLMS": {
+    "display_name": "LMS Örnekleyici",
+    "inputs": {
+      "order": {
+        "name": "sıra"
+      }
+    }
+  },
+  "SaveAnimatedPNG": {
+    "display_name": "Animasyonlu PNG Kaydet",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "compress_level": {
+        "name": "sıkıştırma_seviyesi"
+      }
+    }
+  },
+  "SaveAnimatedWEBP": {
+    "display_name": "Animasyonlu WEBP Kaydet",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "lossless": {
+        "name": "kayıpsız"
+      },
+      "quality": {
+        "name": "kalite"
+      },
+      "method": {
+        "name": "yöntem"
+      }
+    }
+  },
+  "SaveAudio": {
+    "display_name": "Sesi Kaydet",
+    "inputs": {
+      "audio": {
+        "name": "ses"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "audioUI": {
+        "name": "sesArayüzü"
+      }
+    }
+  },
+  "SaveGLB": {
+    "display_name": "GLB Kaydet",
+    "inputs": {
+      "mesh": {
+        "name": "ağ"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "SaveImage": {
+    "display_name": "Görüntüyü Kaydet",
+    "description": "Giriş görüntülerini ComfyUI çıktı dizininize kaydeder.",
+    "inputs": {
+      "images": {
+        "name": "görüntüler",
+        "tooltip": "Kaydedilecek görüntüler."
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki",
+        "tooltip": "Kaydedilecek dosyanın öneki. Bu, düğümlerden değerleri dahil etmek için %date:yyyy-MM-dd% veya %Empty Latent Image.width% gibi biçimlendirme bilgileri içerebilir."
+      }
+    }
+  },
+  "SaveImageWebsocket": {
+    "display_name": "GörüntüyüWebsocketKaydet",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      }
+    }
+  },
+  "SaveLatent": {
+    "display_name": "GizliDeğişkeniKaydet",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "SaveSVG": {
+    "display_name": "SVG Kaydet",
+    "description": "SVG dosyalarını diske kaydedin.",
+    "inputs": {
+      "svg": {
+        "name": "svg"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki",
+        "tooltip": "Kaydedilecek dosyanın öneki. Bu, düğümlerden değerleri dahil etmek için %date:yyyy-MM-dd% veya %Empty Latent Image.width% gibi biçimlendirme bilgileri içerebilir."
+      }
+    }
+  },
+  "SaveVideo": {
+    "display_name": "Videoyu Kaydet",
+    "description": "Giriş görüntülerini ComfyUI çıktı dizininize kaydeder.",
+    "inputs": {
+      "video": {
+        "name": "video",
+        "tooltip": "Kaydedilecek video."
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki",
+        "tooltip": "Kaydedilecek dosyanın öneki. Bu, düğümlerden değerleri dahil etmek için %date:yyyy-MM-dd% veya %Empty Latent Image.width% gibi biçimlendirme bilgileri içerebilir."
+      },
+      "format": {
+        "name": "format",
+        "tooltip": "Videonun kaydedileceği format."
+      },
+      "codec": {
+        "name": "codec",
+        "tooltip": "Video için kullanılacak codec."
+      }
+    }
+  },
+  "SaveWEBM": {
+    "display_name": "WEBM Kaydet",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      },
+      "codec": {
+        "name": "codec"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "crf": {
+        "name": "crf",
+        "tooltip": "Daha yüksek crf, daha küçük dosya boyutuyla daha düşük kalite anlamına gelir, daha düşük crf ise daha yüksek kalite daha yüksek dosya boyutu anlamına gelir."
+      }
+    }
+  },
+  "SD_4XUpscale_Conditioning": {
+    "display_name": "SD_4X_Büyütme_Koşullandırma",
+    "inputs": {
+      "images": {
+        "name": "görüntüler"
+      },
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "scale_ratio": {
+        "name": "ölçek_oranı"
+      },
+      "noise_augmentation": {
+        "name": "gürültü_artırımı"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "SDTurboScheduler": {
+    "display_name": "SDTurboZamanlayıcı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "steps": {
+        "name": "adımlar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    }
+  },
+  "SelfAttentionGuidance": {
+    "display_name": "Öz-Dikkat Rehberliği",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "scale": {
+        "name": "ölçek"
+      },
+      "blur_sigma": {
+        "name": "bulanıklık_sigma"
+      }
+    }
+  },
+  "SetClipHooks": {
+    "display_name": "CLIP Kancalarını Ayarla",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "apply_to_conds": {
+        "name": "koşullara_uygula"
+      },
+      "schedule_clip": {
+        "name": "zamanlama_klibi"
+      },
+      "hooks": {
+        "name": "kancalar"
+      }
+    }
+  },
+  "SetFirstSigma": {
+    "display_name": "İlkSigmayıAyarla",
+    "inputs": {
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "sigma": {
+        "name": "sigma"
+      }
+    }
+  },
+  "SetHookKeyframes": {
+    "display_name": "Kanca Anahtar Karelerini Ayarla",
+    "inputs": {
+      "hooks": {
+        "name": "kancalar"
+      },
+      "hook_kf": {
+        "name": "kanca_kf"
+      }
+    }
+  },
+  "SetLatentNoiseMask": {
+    "display_name": "Gizli Gürültü Maskesi Ayarla",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "mask": {
+        "name": "maske"
+      }
+    }
+  },
+  "SetUnionControlNetType": {
+    "display_name": "BileşimControlNetTürüAyarla",
+    "inputs": {
+      "control_net": {
+        "name": "kontrol_ağı"
+      },
+      "type": {
+        "name": "tür"
+      }
+    }
+  },
+  "SkipLayerGuidanceDiT": {
+    "display_name": "KatmanAtlamaRehberliğiDiT",
+    "description": "Her DiT modelinde kullanılabilecek SkipLayerGuidance düğümünün genel bir sürümü.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "double_layers": {
+        "name": "çift_katmanlar"
+      },
+      "single_layers": {
+        "name": "tek_katmanlar"
+      },
+      "scale": {
+        "name": "ölçek"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      },
+      "rescaling_scale": {
+        "name": "yeniden_ölçeklendirme_ölçeği"
+      }
+    }
+  },
+  "SkipLayerGuidanceSD3": {
+    "display_name": "KatmanAtlamaRehberliğiSD3",
+    "description": "Her DiT modelinde kullanılabilecek SkipLayerGuidance düğümünün genel bir sürümü.",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "layers": {
+        "name": "katmanlar"
+      },
+      "scale": {
+        "name": "ölçek"
+      },
+      "start_percent": {
+        "name": "başlangıç_yüzdesi"
+      },
+      "end_percent": {
+        "name": "bitiş_yüzdesi"
+      }
+    }
+  },
+  "SolidMask": {
+    "display_name": "KatıMaske",
+    "inputs": {
+      "value": {
+        "name": "değer"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      }
+    }
+  },
+  "SplitImageWithAlpha": {
+    "display_name": "Görüntüyü Alfa ile Böl",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "SplitSigmas": {
+    "display_name": "SigmalarıBöl",
+    "inputs": {
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "step": {
+        "name": "adım"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "yüksek_sigmalar"
+      },
+      "1": {
+        "name": "düşük_sigmalar"
+      }
+    }
+  },
+  "SplitSigmasDenoise": {
+    "display_name": "SigmalarıGürültüAzaltmaBöl",
+    "inputs": {
+      "sigmas": {
+        "name": "sigmalar"
+      },
+      "denoise": {
+        "name": "gürültü_azaltma"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "yüksek_sigmalar"
+      },
+      "1": {
+        "name": "düşük_sigmalar"
+      }
+    }
+  },
+  "StabilityStableImageSD_3_5Node": {
+    "display_name": "Stability AI Stable Diffusion 3.5 Görüntü",
+    "description": "İstem ve çözünürlüğe göre görüntüleri eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istediğiniz. Öğeleri, renkleri ve konuları açıkça tanımlayan güçlü, açıklayıcı bir istem daha iyi sonuçlara yol açacaktır."
+      },
+      "model": {
+        "name": "model"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Oluşturulan görüntünün en boy oranı."
+      },
+      "style_preset": {
+        "name": "stil_önayarı",
+        "tooltip": "Oluşturulan görüntünün isteğe bağlı istenen stili."
+      },
+      "cfg_scale": {
+        "name": "cfg_ölçeği",
+        "tooltip": "Difüzyon sürecinin istem metnine ne kadar sıkı bir şekilde bağlı kaldığı (daha yüksek değerler görüntünüzü isteminize daha yakın tutar)"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istemediğinizin anahtar kelimeleri. Bu gelişmiş bir özelliktir."
+      },
+      "image_denoise": {
+        "name": "görüntü_gürültü_azaltma",
+        "tooltip": "Giriş görüntüsünün gürültüsünün azaltılması; 0.0 girdiyle aynı bir görüntü verir, 1.0 ise hiç görüntü sağlanmamış gibidir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "StabilityStableImageUltraNode": {
+    "display_name": "Stability AI Stable Image Ultra",
+    "description": "İstem ve çözünürlüğe göre görüntüleri eşzamanlı olarak oluşturur.",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istediğiniz. Öğeleri, renkleri ve konuları açıkça tanımlayan güçlü, açıklayıcı bir istem daha iyi sonuçlara yol açacaktır. Belirli bir kelimenin ağırlığını kontrol etmek için (kelime:ağırlık) formatını kullanın, burada 'kelime' ağırlığını kontrol etmek istediğiniz kelime ve 'ağırlık' 0 ile 1 arasında bir değerdir. Örneğin: 'Gökyüzü berrak (mavi:0.3) ve (yeşil:0.8) idi' mavi ve yeşil bir gökyüzü, ancak maviden daha çok yeşil olduğunu ifade eder."
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Oluşturulan görüntünün en boy oranı."
+      },
+      "style_preset": {
+        "name": "stil_önayarı",
+        "tooltip": "Oluşturulan görüntünün isteğe bağlı istenen stili."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "image": {
+        "name": "görüntü"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istemediğinizi anlatan bir metin. Bu gelişmiş bir özelliktir."
+      },
+      "image_denoise": {
+        "name": "görüntü_gürültü_azaltma",
+        "tooltip": "Giriş görüntüsünün gürültüsünün azaltılması; 0.0 girdiyle aynı bir görüntü verir, 1.0 ise hiç görüntü sağlanmamış gibidir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "StabilityUpscaleConservativeNode": {
+    "display_name": "Stability AI Büyütme Muhafazakar",
+    "description": "Görüntüyü minimum değişiklikle 4K çözünürlüğe büyütün.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istediğiniz. Öğeleri, renkleri ve konuları açıkça tanımlayan güçlü, açıklayıcı bir istem daha iyi sonuçlara yol açacaktır."
+      },
+      "creativity": {
+        "name": "yaratıcılık",
+        "tooltip": "Başlangıç görüntüsü tarafından yoğun bir şekilde koşullandırılmayan ek ayrıntılar oluşturma olasılığını kontrol eder."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istemediğinizin anahtar kelimeleri. Bu gelişmiş bir özelliktir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "StabilityUpscaleCreativeNode": {
+    "display_name": "Stability AI Büyütme Yaratıcı",
+    "description": "Görüntüyü minimum değişiklikle 4K çözünürlüğe büyütün.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istediğiniz. Öğeleri, renkleri ve konuları açıkça tanımlayan güçlü, açıklayıcı bir istem daha iyi sonuçlara yol açacaktır."
+      },
+      "creativity": {
+        "name": "yaratıcılık",
+        "tooltip": "Başlangıç görüntüsü tarafından yoğun bir şekilde koşullandırılmayan ek ayrıntılar oluşturma olasılığını kontrol eder."
+      },
+      "style_preset": {
+        "name": "stil_önayarı",
+        "tooltip": "Oluşturulan görüntünün isteğe bağlı istenen stili."
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Gürültüyü oluşturmak için kullanılan rastgele tohum."
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Çıktı görüntüsünde ne görmek istemediğinizin anahtar kelimeleri. Bu gelişmiş bir özelliktir."
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "StabilityUpscaleFastNode": {
+    "display_name": "Stability AI Hızlı Büyütme",
+    "description": "Stability API çağrısı aracılığıyla bir görüntüyü orijinal boyutunun 4 katına kadar hızlı bir şekilde büyütür; düşük kaliteli/sıkıştırılmış görüntüleri büyütmek için tasarlanmıştır.",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      }
+    }
+  },
+  "StableCascade_EmptyLatentImage": {
+    "display_name": "StabilKaskad_BoşGizliGörüntü",
+    "inputs": {
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "compression": {
+        "name": "sıkıştırma"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "aşama_c"
+      },
+      "1": {
+        "name": "aşama_b"
+      }
+    }
+  },
+  "StableCascade_StageB_Conditioning": {
+    "display_name": "StabilKaskad_AşamaB_Koşullandırma",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "stage_c": {
+        "name": "aşama_c"
+      }
+    }
+  },
+  "StableCascade_StageC_VAEEncode": {
+    "display_name": "StabilKaskad_AşamaC_VAEKodlama",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "compression": {
+        "name": "sıkıştırma"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "aşama_c"
+      },
+      "1": {
+        "name": "aşama_b"
+      }
+    }
+  },
+  "StableCascade_SuperResolutionControlnet": {
+    "display_name": "StabilKaskad_SüperÇözünürlükKontrolAğı",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "kontrol_ağı_girişi"
+      },
+      "1": {
+        "name": "aşama_c"
+      },
+      "2": {
+        "name": "aşama_b"
+      }
+    }
+  },
+  "StableZero123_Conditioning": {
+    "display_name": "StabilSıfır123_Koşullandırma",
+    "inputs": {
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "init_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "elevation": {
+        "name": "yükseklik"
+      },
+      "azimuth": {
+        "name": "azimut"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "StableZero123_Conditioning_Batched": {
+    "display_name": "StabilSıfır123_Koşullandırma_Toplu",
+    "inputs": {
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "init_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "elevation": {
+        "name": "yükseklik"
+      },
+      "azimuth": {
+        "name": "azimut"
+      },
+      "elevation_batch_increment": {
+        "name": "yükseklik_toplu_artışı"
+      },
+      "azimuth_batch_increment": {
+        "name": "azimut_toplu_artışı"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "StyleModelApply": {
+    "display_name": "Stil Modeli Uygula",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "style_model": {
+        "name": "stil_modeli"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "strength_type": {
+        "name": "güç_türü"
+      }
+    }
+  },
+  "StyleModelLoader": {
+    "display_name": "Stil Modeli Yükle",
+    "inputs": {
+      "style_model_name": {
+        "name": "stil_modeli_adı"
+      }
+    }
+  },
+  "SV3D_Conditioning": {
+    "display_name": "SV3D_Koşullandırma",
+    "inputs": {
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "init_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "video_frames": {
+        "name": "video_kareleri"
+      },
+      "elevation": {
+        "name": "yükseklik"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "SVD_img2vid_Conditioning": {
+    "display_name": "SVD_görüntüden_videoya_Koşullandırma",
+    "inputs": {
+      "clip_vision": {
+        "name": "clip_görü"
+      },
+      "init_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "video_frames": {
+        "name": "video_kareleri"
+      },
+      "motion_bucket_id": {
+        "name": "hareket_kovası_kimliği"
+      },
+      "fps": {
+        "name": "fps"
+      },
+      "augmentation_level": {
+        "name": "artırma_seviyesi"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "T5TokenizerOptions": {
+    "display_name": "T5JetonlaştırıcıSeçenekleri",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "min_padding": {
+        "name": "min_dolgu"
+      },
+      "min_length": {
+        "name": "min_uzunluk"
+      }
+    }
+  },
+  "TextEncodeHunyuanVideo_ImageToVideo": {
+    "display_name": "MetinKodlamaHunyuanVideo_GörüntüdenVideoya",
+    "inputs": {
+      "clip": {
+        "name": "clip"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "prompt": {
+        "name": "istem"
+      },
+      "image_interleave": {
+        "name": "görüntü_serpiştirme",
+        "tooltip": "Görüntünün metin istemine karşı ne kadar etkili olduğu. Daha yüksek sayı, metin isteminden daha fazla etki anlamına gelir."
+      }
+    }
+  },
+  "ThresholdMask": {
+    "display_name": "EşikMaskesi",
+    "inputs": {
+      "mask": {
+        "name": "maske"
+      },
+      "value": {
+        "name": "değer"
+      }
+    }
+  },
+  "TomePatchModel": {
+    "display_name": "Tome Model Yaması",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "ratio": {
+        "name": "oran"
+      }
+    }
+  },
+  "TorchCompileModel": {
+    "display_name": "Torch Model Derleme",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "backend": {
+        "name": "arka_uç"
+      }
+    }
+  },
+  "TrimVideoLatent": {
+    "display_name": "VideoGizliDeğişkeniniKırp",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "trim_amount": {
+        "name": "kırpma_miktarı"
+      }
+    }
+  },
+  "TripleCLIPLoader": {
+    "display_name": "ÜçlüCLIPYükleyici",
+    "description": "[Tarifler]\n\nsd3: clip-l, clip-g, t5",
+    "inputs": {
+      "clip_name1": {
+        "name": "clip_adı1"
+      },
+      "clip_name2": {
+        "name": "clip_adı2"
+      },
+      "clip_name3": {
+        "name": "clip_adı3"
+      }
+    }
+  },
+  "unCLIPCheckpointLoader": {
+    "display_name": "unCLIPKontrolNoktasıYükleyici",
+    "inputs": {
+      "ckpt_name": {
+        "name": "ckpt_adı"
+      }
+    }
+  },
+  "unCLIPConditioning": {
+    "display_name": "unCLIPKoşullandırma",
+    "inputs": {
+      "conditioning": {
+        "name": "koşullandırma"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "noise_augmentation": {
+        "name": "gürültü_artırımı"
+      }
+    }
+  },
+  "UNetCrossAttentionMultiply": {
+    "display_name": "UNetÇaprazDikkatÇarpımı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "q": {
+        "name": "q"
+      },
+      "k": {
+        "name": "k"
+      },
+      "v": {
+        "name": "v"
+      },
+      "out": {
+        "name": "çıktı"
+      }
+    }
+  },
+  "UNETLoader": {
+    "display_name": "Difüzyon Modeli Yükle",
+    "inputs": {
+      "unet_name": {
+        "name": "unet_adı"
+      },
+      "weight_dtype": {
+        "name": "ağırlık_veri_türü"
+      }
+    }
+  },
+  "UNetSelfAttentionMultiply": {
+    "display_name": "UNetÖzDikkatÇarpımı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "q": {
+        "name": "q"
+      },
+      "k": {
+        "name": "k"
+      },
+      "v": {
+        "name": "v"
+      },
+      "out": {
+        "name": "çıktı"
+      }
+    }
+  },
+  "UNetTemporalAttentionMultiply": {
+    "display_name": "UNetZamansalDikkatÇarpımı",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "self_structural": {
+        "name": "öz_yapısal"
+      },
+      "self_temporal": {
+        "name": "öz_zamansal"
+      },
+      "cross_structural": {
+        "name": "çapraz_yapısal"
+      },
+      "cross_temporal": {
+        "name": "çapraz_zamansal"
+      }
+    }
+  },
+  "UpscaleModelLoader": {
+    "display_name": "Büyütme Modeli Yükle",
+    "inputs": {
+      "model_name": {
+        "name": "model_adı"
+      }
+    }
+  },
+  "VAEDecode": {
+    "display_name": "VAE Kod Çözme",
+    "description": "Gizli görüntüleri tekrar piksel uzayı görüntülerine çözer.",
+    "inputs": {
+      "samples": {
+        "name": "örnekler",
+        "tooltip": "Kodunun çözüleceği gizli değişken."
+      },
+      "vae": {
+        "name": "vae",
+        "tooltip": "Gizli değişkenin kodunu çözmek için kullanılan VAE modeli."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": "Kodu çözülmüş görüntü."
+      }
+    }
+  },
+  "VAEDecodeAudio": {
+    "display_name": "VAESesKodunuÇöz",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    }
+  },
+  "VAEDecodeHunyuan3D": {
+    "display_name": "VAEKodÇözmeHunyuan3D",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "num_chunks": {
+        "name": "parça_sayısı"
+      },
+      "octree_resolution": {
+        "name": "sekizli_ağaç_çözünürlüğü"
+      }
+    }
+  },
+  "VAEDecodeTiled": {
+    "display_name": "VAE Kod Çözme (Döşemeli)",
+    "inputs": {
+      "samples": {
+        "name": "örnekler"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "tile_size": {
+        "name": "döşeme_boyutu"
+      },
+      "overlap": {
+        "name": "örtüşme"
+      },
+      "temporal_size": {
+        "name": "zamansal_boyut",
+        "tooltip": "Yalnızca video VAE'leri için kullanılır: Bir seferde kodu çözülecek kare sayısı."
+      },
+      "temporal_overlap": {
+        "name": "zamansal_örtüşme",
+        "tooltip": "Yalnızca video VAE'leri için kullanılır: Örtüşecek kare sayısı."
+      }
+    }
+  },
+  "VAEEncode": {
+    "display_name": "VAE Kodlama",
+    "inputs": {
+      "pixels": {
+        "name": "pikseller"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    }
+  },
+  "VAEEncodeAudio": {
+    "display_name": "VAESesKodla",
+    "inputs": {
+      "audio": {
+        "name": "ses"
+      },
+      "vae": {
+        "name": "vae"
+      }
+    }
+  },
+  "VAEEncodeForInpaint": {
+    "display_name": "VAE Kodlama (İç Boyama için)",
+    "inputs": {
+      "pixels": {
+        "name": "pikseller"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "mask": {
+        "name": "maske"
+      },
+      "grow_mask_by": {
+        "name": "maskeyi_büyüt"
+      }
+    }
+  },
+  "VAEEncodeTiled": {
+    "display_name": "VAE Kodlama (Döşemeli)",
+    "inputs": {
+      "pixels": {
+        "name": "pikseller"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "tile_size": {
+        "name": "döşeme_boyutu"
+      },
+      "overlap": {
+        "name": "örtüşme"
+      },
+      "temporal_size": {
+        "name": "zamansal_boyut",
+        "tooltip": "Yalnızca video VAE'leri için kullanılır: Bir seferde kodlanacak kare sayısı."
+      },
+      "temporal_overlap": {
+        "name": "zamansal_örtüşme",
+        "tooltip": "Yalnızca video VAE'leri için kullanılır: Örtüşecek kare sayısı."
+      }
+    }
+  },
+  "VAELoader": {
+    "display_name": "VAE Yükle",
+    "inputs": {
+      "vae_name": {
+        "name": "vae_adı"
+      }
+    }
+  },
+  "VAESave": {
+    "display_name": "VAEKaydet",
+    "inputs": {
+      "vae": {
+        "name": "vae"
+      },
+      "filename_prefix": {
+        "name": "dosyaadı_öneki"
+      }
+    }
+  },
+  "VeoVideoGenerationNode": {
+    "display_name": "Google Veo2 Video Oluşturma",
+    "description": "Google'ın Veo API'sini kullanarak metin istemlerinden videolar oluşturur",
+    "inputs": {
+      "prompt": {
+        "name": "istem",
+        "tooltip": "Videonun metin açıklaması"
+      },
+      "aspect_ratio": {
+        "name": "en_boy_oranı",
+        "tooltip": "Çıktı videosunun en boy oranı"
+      },
+      "negative_prompt": {
+        "name": "negatif_istem",
+        "tooltip": "Videoda kaçınılması gerekenleri yönlendirmek için negatif metin istemi"
+      },
+      "duration_seconds": {
+        "name": "süre_saniye",
+        "tooltip": "Çıktı videosunun saniye cinsinden süresi"
+      },
+      "enhance_prompt": {
+        "name": "istemi_geliştir",
+        "tooltip": "İstemi yapay zeka yardımıyla geliştirip geliştirmeme"
+      },
+      "person_generation": {
+        "name": "kişi_oluşturma",
+        "tooltip": "Videoda insan oluşturmaya izin verip vermeme"
+      },
+      "seed": {
+        "name": "tohum",
+        "tooltip": "Video oluşturma için tohum (rastgele için 0)"
+      },
+      "image": {
+        "name": "görüntü",
+        "tooltip": "Video oluşturmayı yönlendirmek için isteğe bağlı referans görüntü"
+      },
+      "control_after_generate": {
+        "name": "oluşturduktan sonra kontrol et"
+      }
+    }
+  },
+  "VideoLinearCFGGuidance": {
+    "display_name": "VideoDoğrusalCFGRehberliği",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "min_cfg": {
+        "name": "min_cfg"
+      }
+    }
+  },
+  "VideoTriangleCFGGuidance": {
+    "display_name": "VideoÜçgenCFGRehberliği",
+    "inputs": {
+      "model": {
+        "name": "model"
+      },
+      "min_cfg": {
+        "name": "min_cfg"
+      }
+    }
+  },
+  "VoxelToMesh": {
+    "display_name": "VokseldenAğa",
+    "inputs": {
+      "voxel": {
+        "name": "voksel"
+      },
+      "algorithm": {
+        "name": "algoritma"
+      },
+      "threshold": {
+        "name": "eşik"
+      }
+    }
+  },
+  "VoxelToMeshBasic": {
+    "display_name": "TemelVokseldenAğa",
+    "inputs": {
+      "voxel": {
+        "name": "voksel"
+      },
+      "threshold": {
+        "name": "eşik"
+      }
+    }
+  },
+  "VPScheduler": {
+    "display_name": "VPZamanlayıcı",
+    "inputs": {
+      "steps": {
+        "name": "adımlar"
+      },
+      "beta_d": {
+        "name": "beta_d"
+      },
+      "beta_min": {
+        "name": "beta_min"
+      },
+      "eps_s": {
+        "name": "eps_s"
+      }
+    }
+  },
+  "WanFirstLastFrameToVideo": {
+    "display_name": "WanİlkSonKaredenVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "clip_vision_start_image": {
+        "name": "clip_görü_başlangıç_görüntüsü"
+      },
+      "clip_vision_end_image": {
+        "name": "clip_görü_bitiş_görüntüsü"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "end_image": {
+        "name": "bitiş_görüntüsü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "WanFunControlToVideo": {
+    "display_name": "WanEğlenceKontroldenVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "control_video": {
+        "name": "kontrol_videosu"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "WanFunInpaintToVideo": {
+    "display_name": "WanEğlenceİçBoyamadanVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      },
+      "end_image": {
+        "name": "bitiş_görüntüsü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "WanImageToVideo": {
+    "display_name": "WanGörüntüdenVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "clip_vision_output": {
+        "name": "clip_görü_çıktısı"
+      },
+      "start_image": {
+        "name": "başlangıç_görüntüsü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      }
+    }
+  },
+  "WanVaceToVideo": {
+    "display_name": "WanVace'denVideoya",
+    "inputs": {
+      "positive": {
+        "name": "pozitif"
+      },
+      "negative": {
+        "name": "negatif"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "length": {
+        "name": "uzunluk"
+      },
+      "batch_size": {
+        "name": "toplu_boyut"
+      },
+      "strength": {
+        "name": "güç"
+      },
+      "control_video": {
+        "name": "kontrol_videosu"
+      },
+      "control_masks": {
+        "name": "kontrol_maskeleri"
+      },
+      "reference_image": {
+        "name": "referans_görüntüsü"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pozitif"
+      },
+      "1": {
+        "name": "negatif"
+      },
+      "2": {
+        "name": "gizli"
+      },
+      "3": {
+        "name": "gizliyi_kırp"
+      }
+    }
+  },
+  "WebcamCapture": {
+    "display_name": "Webcam Yakalama",
+    "inputs": {
+      "image": {
+        "name": "görüntü"
+      },
+      "width": {
+        "name": "genişlik"
+      },
+      "height": {
+        "name": "yükseklik"
+      },
+      "capture_on_queue": {
+        "name": "kuyrukta_yakala"
+      },
+      "waiting for camera___": { "name": "kamera bekleniyor___" }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/locales/tr/settings.json b/src/locales/tr/settings.json
new file mode 100644
index 0000000000..06db2ad951
--- /dev/null
+++ b/src/locales/tr/settings.json
@@ -0,0 +1,424 @@
+{
+  "Comfy-Desktop_AutoUpdate": {
+    "name": "Güncellemeleri otomatik olarak kontrol et"
+  },
+  "Comfy-Desktop_SendStatistics": {
+    "name": "Anonim kullanım metrikleri gönder"
+  },
+  "Comfy-Desktop_UV_PypiInstallMirror": {
+    "name": "Pypi Yükleme Yansısı",
+    "tooltip": "Varsayılan pip yükleme yansısı"
+  },
+  "Comfy-Desktop_UV_PythonInstallMirror": {
+    "name": "Python Yükleme Yansısı",
+    "tooltip": "Yönetilen Python kurulumları Astral python-build-standalone projesinden indirilir. Bu değişken, Python kurulumları için farklı bir kaynak kullanmak üzere bir yansıma URL'sine ayarlanabilir. Sağlanan URL, örneğin https://github.com/astral-sh/python-build-standalone/releases/download/20240713/cpython-3.12.4%2B20240713-aarch64-apple-darwin-install_only.tar.gz'deki https://github.com/astral-sh/python-build-standalone/releases/download'ın yerini alacaktır. Dağıtımlar, file:// URL şeması kullanılarak yerel bir dizinden okunabilir."
+  },
+  "Comfy-Desktop_UV_TorchInstallMirror": {
+    "name": "Torch Yükleme Yansısı",
+    "tooltip": "Pytorch için Pip yükleme yansısı"
+  },
+  "Comfy-Desktop_WindowStyle": {
+    "name": "Pencere Stili",
+    "tooltip": "Özel: Sistem başlık çubuğunu ComfyUI'nin Üst menüsüyle değiştirin",
+    "options": {
+      "default": "varsayılan",
+      "custom": "özel"
+    }
+  },
+  "Comfy_Canvas_BackgroundImage": {
+    "name": "Tuval arka plan resmi",
+    "tooltip": "Tuval arka planı için resim URL'si. Çıktılar panelindeki bir resme sağ tıklayıp \"Arka Plan Olarak Ayarla\"yı seçerek kullanabilir veya yükleme düğmesini kullanarak kendi resminizi yükleyebilirsiniz."
+  },
+  "Comfy_Canvas_NavigationMode": {
+    "name": "Tuval Gezinme Modu",
+    "options": {
+      "Standard (New)": "Standart (Yeni)",
+      "Drag Navigation": "Sürükleyerek Gezinme"
+    }
+  },
+  "Comfy_Canvas_SelectionToolbox": {
+    "name": "Seçim araç kutusunu göster"
+  },
+  "Comfy_ConfirmClear": {
+    "name": "İş akışını temizlerken onay iste"
+  },
+  "Comfy_DevMode": {
+    "name": "Geliştirici modu seçeneklerini etkinleştir (API kaydetme, vb.)"
+  },
+  "Comfy_DisableFloatRounding": {
+    "name": "Varsayılan ondalık sayı widget yuvarlamasını devre dışı bırak.",
+    "tooltip": "(sayfanın yeniden yüklenmesini gerektirir) Arka uçtaki düğüm tarafından yuvarlama ayarlandığında yuvarlama devre dışı bırakılamaz."
+  },
+  "Comfy_DisableSliders": {
+    "name": "Düğüm widget kaydırıcılarını devre dışı bırak"
+  },
+  "Comfy_DOMClippingEnabled": {
+    "name": "DOM öğesi kırpmayı etkinleştir (etkinleştirmek performansı düşürebilir)"
+  },
+  "Comfy_EditAttention_Delta": {
+    "name": "Ctrl+yukarı/aşağı hassasiyeti"
+  },
+  "Comfy_EnableTooltips": {
+    "name": "Araç İpuçlarını Etkinleştir"
+  },
+  "Comfy_EnableWorkflowViewRestore": {
+    "name": "İş akışlarında tuval konumunu ve yakınlaştırma seviyesini kaydet ve geri yükle"
+  },
+  "Comfy_FloatRoundingPrecision": {
+    "name": "Ondalık sayı widget yuvarlama ondalık basamakları [0 = otomatik].",
+    "tooltip": "(sayfanın yeniden yüklenmesini gerektirir)"
+  },
+  "Comfy_Graph_CanvasInfo": {
+    "name": "Sol alt köşede tuval bilgilerini göster (fps, vb.)"
+  },
+  "Comfy_Graph_CanvasMenu": {
+    "name": "Grafik tuval menüsünü göster"
+  },
+  "Comfy_Graph_CtrlShiftZoom": {
+    "name": "Hızlı yakınlaştırma kısayolunu etkinleştir (Ctrl + Shift + Sürükle)"
+  },
+  "Comfy_Graph_LinkMarkers": {
+    "name": "Bağlantı orta nokta işaretçileri",
+    "options": {
+      "None": "Yok",
+      "Circle": "Daire",
+      "Arrow": "Ok"
+    }
+  },
+  "Comfy_Graph_ZoomSpeed": {
+    "name": "Tuval yakınlaştırma hızı"
+  },
+  "Comfy_Group_DoubleClickTitleToEdit": {
+    "name": "Düzenlemek için grup başlığına çift tıkla"
+  },
+  "Comfy_GroupSelectedNodes_Padding": {
+    "name": "Seçili düğümleri gruplandırma dolgusu"
+  },
+  "Comfy_LinkRelease_Action": {
+    "name": "Bağlantı bırakıldığında eylem (Değiştirici yok)",
+    "options": {
+      "context menu": "bağlam menüsü",
+      "search box": "arama kutusu",
+      "no action": "eylem yok"
+    }
+  },
+  "Comfy_LinkRelease_ActionShift": {
+    "name": "Bağlantı bırakıldığında eylem (Shift)",
+    "options": {
+      "context menu": "bağlam menüsü",
+      "search box": "arama kutusu",
+      "no action": "eylem yok"
+    }
+  },
+  "Comfy_LinkRenderMode": {
+    "name": "Bağlantı Oluşturma Modu",
+    "options": {
+      "Straight": "Düz",
+      "Linear": "Doğrusal",
+      "Spline": "Eğri",
+      "Hidden": "Gizli"
+    }
+  },
+  "Comfy_Load3D_3DViewerEnable": {
+    "name": "3D Görüntüleyiciyi Etkinleştir (Beta)",
+    "tooltip": "Seçili düğümler için 3D Görüntüleyiciyi (Beta) etkinleştirir. Bu özellik, 3D modelleri doğrudan tam boyutlu 3D görüntüleyici içinde görselleştirmenize ve etkileşimde bulunmanıza olanak tanır."
+  },
+  "Comfy_Load3D_BackgroundColor": {
+    "name": "Başlangıç Arka Plan Rengi",
+    "tooltip": "3D sahnenin varsayılan arka plan rengini kontrol eder. Bu ayar, yeni bir 3D widget oluşturulduğunda arka plan görünümünü belirler, ancak oluşturulduktan sonra her widget için ayrı ayrı ayarlanabilir."
+  },
+  "Comfy_Load3D_CameraType": {
+    "name": "Başlangıç Kamera Tipi",
+    "tooltip": "Yeni bir 3D widget oluşturulduğunda kameranın varsayılan olarak perspektif mi yoksa ortografik mi olacağını kontrol eder. Bu varsayılan, oluşturulduktan sonra her widget için ayrı ayrı değiştirilebilir.",
+    "options": {
+      "perspective": "perspektif",
+      "orthographic": "ortografik"
+    }
+  },
+  "Comfy_Load3D_LightAdjustmentIncrement": {
+    "name": "Işık Ayarlama Artışı",
+    "tooltip": "3D sahnelerde ışık yoğunluğunu ayarlarken artış boyutunu kontrol eder. Daha küçük bir adım değeri, aydınlatma ayarlamaları üzerinde daha ince kontrol sağlarken, daha büyük bir değer ayarlama başına daha belirgin değişikliklere neden olur."
+  },
+  "Comfy_Load3D_LightIntensity": {
+    "name": "Başlangıç Işık Yoğunluğu",
+    "tooltip": "3D sahnedeki aydınlatmanın varsayılan parlaklık seviyesini ayarlar. Bu değer, yeni bir 3D widget oluşturulduğunda ışıkların nesneleri ne kadar yoğun aydınlatacağını belirler, ancak oluşturulduktan sonra her widget için ayrı ayrı ayarlanabilir."
+  },
+  "Comfy_Load3D_LightIntensityMaximum": {
+    "name": "Maksimum Işık Yoğunluğu",
+    "tooltip": "3D sahneler için izin verilen maksimum ışık yoğunluğu değerini ayarlar. Bu, herhangi bir 3D widget'ta aydınlatma ayarlanırken ayarlanabilecek üst parlaklık sınırını tanımlar."
+  },
+  "Comfy_Load3D_LightIntensityMinimum": {
+    "name": "Minimum Işık Yoğunluğu",
+    "tooltip": "3D sahneler için izin verilen minimum ışık yoğunluğu değerini ayarlar. Bu, herhangi bir 3D widget'ta aydınlatma ayarlanırken ayarlanabilecek alt parlaklık sınırını tanımlar."
+  },
+  "Comfy_Load3D_ShowGrid": {
+    "name": "Başlangıç Izgara Görünürlüğü",
+    "tooltip": "Yeni bir 3D widget oluşturulduğunda ızgaranın varsayılan olarak görünür olup olmadığını kontrol eder. Bu varsayılan, oluşturulduktan sonra her widget için ayrı ayrı değiştirilebilir."
+  },
+  "Comfy_Load3D_ShowPreview": {
+    "name": "Başlangıç Önizleme Görünürlüğü",
+    "tooltip": "Yeni bir 3D widget oluşturulduğunda önizleme ekranının varsayılan olarak görünür olup olmadığını kontrol eder. Bu varsayılan, oluşturulduktan sonra her widget için ayrı ayrı değiştirilebilir."
+  },
+  "Comfy_Locale": {
+    "name": "Dil"
+  },
+  "Comfy_MaskEditor_BrushAdjustmentSpeed": {
+    "name": "Fırça ayar hızı çarpanı",
+    "tooltip": "Ayarlama sırasında fırça boyutunun ve sertliğinin ne kadar hızlı değiştiğini kontrol eder. Daha yüksek değerler daha hızlı değişiklikler anlamına gelir."
+  },
+  "Comfy_MaskEditor_UseDominantAxis": {
+    "name": "Fırça ayarını baskın eksene kilitle",
+    "tooltip": "Etkinleştirildiğinde, fırça ayarları yalnızca daha fazla hareket ettiğiniz yöne bağlı olarak boyutu VEYA sertliği etkileyecektir"
+  },
+  "Comfy_MaskEditor_UseNewEditor": {
+    "name": "Yeni maske düzenleyiciyi kullan",
+    "tooltip": "Yeni maske düzenleyici arayüzüne geç"
+  },
+  "Comfy_ModelLibrary_AutoLoadAll": {
+    "name": "Tüm model klasörlerini otomatik olarak yükle",
+    "tooltip": "Doğruysa, model kütüphanesini açar açmaz tüm klasörler yüklenecektir (bu, yüklenirken gecikmelere neden olabilir). Yanlışsa, kök düzeyindeki model klasörleri yalnızca üzerlerine tıkladığınızda yüklenecektir."
+  },
+  "Comfy_ModelLibrary_NameFormat": {
+    "name": "Model kütüphanesi ağaç görünümünde hangi adın görüntüleneceği",
+    "tooltip": "Model listesinde ham dosya adının (dizin veya \".safetensors\" uzantısı olmadan) basitleştirilmiş bir görünümünü oluşturmak için \"dosyaadı\"nı seçin. Yapılandırılabilir model meta veri başlığını görüntülemek için \"başlık\"ı seçin.",
+    "options": {
+      "filename": "dosyaadı",
+      "title": "başlık"
+    }
+  },
+  "Comfy_Node_AllowImageSizeDraw": {
+    "name": "Görüntü önizlemesinin altında genişlik × yüksekliği göster"
+  },
+  "Comfy_Node_AutoSnapLinkToSlot": {
+    "name": "Bağlantıyı otomatik olarak düğüm yuvasına yapıştır",
+    "tooltip": "Bir bağlantıyı bir düğümün üzerine sürüklerken, bağlantı otomatik olarak düğüm üzerindeki uygun bir giriş yuvasına yapışır"
+  },
+  "Comfy_Node_BypassAllLinksOnDelete": {
+    "name": "Düğümleri silerken tüm bağlantıları koru",
+    "tooltip": "Bir düğümü silerken, tüm giriş ve çıkış bağlantılarını yeniden bağlamaya çalışın (silinen düğümü atlayarak)"
+  },
+  "Comfy_Node_DoubleClickTitleToEdit": {
+    "name": "Düzenlemek için düğüm başlığına çift tıkla"
+  },
+  "Comfy_Node_MiddleClickRerouteNode": {
+    "name": "Orta tıklama yeni bir Yeniden Yönlendirme düğümü oluşturur"
+  },
+  "Comfy_Node_Opacity": {
+    "name": "Düğüm opaklığı"
+  },
+  "Comfy_Node_ShowDeprecated": {
+    "name": "Aramada kullanımdan kaldırılmış düğümleri göster",
+    "tooltip": "Kullanımdan kaldırılmış düğümler arayüzde varsayılan olarak gizlidir, ancak bunları kullanan mevcut iş akışlarında işlevsel kalır."
+  },
+  "Comfy_Node_ShowExperimental": {
+    "name": "Aramada deneysel düğümleri göster",
+    "tooltip": "Deneysel düğümler arayüzde bu şekilde işaretlenmiştir ve gelecekteki sürümlerde önemli değişikliklere veya kaldırılmaya tabi olabilir. Üretim iş akışlarında dikkatli kullanın"
+  },
+  "Comfy_Node_SnapHighlightsNode": {
+    "name": "Yapıştırma düğümü vurgular",
+    "tooltip": "Uygun giriş yuvasına sahip bir düğümün üzerine bir bağlantı sürüklerken, düğümü vurgulayın"
+  },
+  "Comfy_NodeBadge_NodeIdBadgeMode": {
+    "name": "Düğüm ID rozeti modu",
+    "options": {
+      "None": "Yok",
+      "Show all": "Tümünü göster"
+    }
+  },
+  "Comfy_NodeBadge_NodeLifeCycleBadgeMode": {
+    "name": "Düğüm yaşam döngüsü rozeti modu",
+    "options": {
+      "None": "Yok",
+      "Show all": "Tümünü göster"
+    }
+  },
+  "Comfy_NodeBadge_NodeSourceBadgeMode": {
+    "name": "Düğüm kaynak rozeti modu",
+    "options": {
+      "None": "Yok",
+      "Show all": "Tümünü göster",
+      "Hide built-in": "Yerleşik olanı gizle"
+    }
+  },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "API düğüm fiyatlandırma rozetini göster"
+  },
+  "Comfy_NodeSearchBoxImpl": {
+    "name": "Düğüm arama kutusu uygulaması",
+    "options": {
+      "default": "varsayılan",
+      "litegraph (legacy)": "litegraph (eski)"
+    }
+  },
+  "Comfy_NodeSearchBoxImpl_NodePreview": {
+    "name": "Düğüm önizlemesi",
+    "tooltip": "Yalnızca varsayılan uygulama için geçerlidir"
+  },
+  "Comfy_NodeSearchBoxImpl_ShowCategory": {
+    "name": "Arama sonuçlarında düğüm kategorisini göster",
+    "tooltip": "Yalnızca varsayılan uygulama için geçerlidir"
+  },
+  "Comfy_NodeSearchBoxImpl_ShowIdName": {
+    "name": "Arama sonuçlarında düğüm kimliği adını göster",
+    "tooltip": "Yalnızca varsayılan uygulama için geçerlidir"
+  },
+  "Comfy_NodeSearchBoxImpl_ShowNodeFrequency": {
+    "name": "Arama sonuçlarında düğüm sıklığını göster",
+    "tooltip": "Yalnızca varsayılan uygulama için geçerlidir"
+  },
+  "Comfy_NodeSuggestions_number": {
+    "name": "Düğüm öneri sayısı",
+    "tooltip": "Yalnızca litegraph arama kutusu/bağlam menüsü için"
+  },
+  "Comfy_Notification_ShowVersionUpdates": {
+    "name": "Sürüm güncellemelerini göster",
+    "tooltip": "Yeni modeller ve önemli yeni özellikler için güncellemeleri göster."
+  },
+  "Comfy_Pointer_ClickBufferTime": {
+    "name": "İşaretçi tıklama kayma gecikmesi",
+    "tooltip": "Bir işaretçi düğmesine bastıktan sonra, bu, işaretçi hareketinin göz ardı edilebileceği maksimum süredir (milisaniye cinsinden).\n\nTıklarken işaretçi hareket ettirilirse nesnelerin istemeden dürtülmesini önlemeye yardımcı olur."
+  },
+  "Comfy_Pointer_ClickDrift": {
+    "name": "İşaretçi tıklama kayması (maksimum mesafe)",
+    "tooltip": "İşaretçi bir düğmeyi basılı tutarken bu mesafeden daha fazla hareket ederse, bu sürükleme olarak kabul edilir (tıklama yerine).\n\nTıklarken işaretçi hareket ettirilirse nesnelerin istemeden dürtülmesini önlemeye yardımcı olur."
+  },
+  "Comfy_Pointer_DoubleClickTime": {
+    "name": "Çift tıklama aralığı (maksimum)",
+    "tooltip": "Çift tıklamanın iki tıklaması arasındaki milisaniye cinsinden maksimum süre. Bu değeri artırmak, çift tıklamaların bazen kaydedilmemesi durumunda yardımcı olabilir."
+  },
+  "Comfy_PreviewFormat": {
+    "name": "Önizleme görüntü formatı",
+    "tooltip": "Görüntü widget'ında bir önizleme görüntülerken, onu hafif bir görüntüye dönüştürün, örn. webp, jpeg, webp;50, vb."
+  },
+  "Comfy_PromptFilename": {
+    "name": "İş akışını kaydederken dosya adı iste"
+  },
+  "Comfy_Queue_MaxHistoryItems": {
+    "name": "Kuyruk geçmişi boyutu",
+    "tooltip": "Kuyruk geçmişinde gösterilen maksimum görev sayısı."
+  },
+  "Comfy_QueueButton_BatchCountLimit": {
+    "name": "Toplu iş sayısı sınırı",
+    "tooltip": "Tek bir düğme tıklamasıyla kuyruğa eklenen maksimum görev sayısı"
+  },
+  "Comfy_Sidebar_Location": {
+    "name": "Kenar çubuğu konumu",
+    "options": {
+      "left": "sol",
+      "right": "sağ"
+    }
+  },
+  "Comfy_Sidebar_Size": {
+    "name": "Kenar çubuğu boyutu",
+    "options": {
+      "normal": "normal",
+      "small": "küçük"
+    }
+  },
+  "Comfy_Sidebar_UnifiedWidth": {
+    "name": "Birleşik kenar çubuğu genişliği"
+  },
+  "Comfy_SnapToGrid_GridSize": {
+    "name": "Izgaraya yapıştırma boyutu",
+    "tooltip": "Shift tuşunu basılı tutarken düğümleri sürükleyip yeniden boyutlandırırken ızgaraya hizalanacaklar, bu o ızgaranın boyutunu kontrol eder."
+  },
+  "Comfy_TextareaWidget_FontSize": {
+    "name": "Metin alanı widget yazı tipi boyutu"
+  },
+  "Comfy_TextareaWidget_Spellcheck": {
+    "name": "Metin alanı widget yazım denetimi"
+  },
+  "Comfy_TreeExplorer_ItemPadding": {
+    "name": "Ağaç gezgini öğe dolgusu"
+  },
+  "Comfy_UseNewMenu": {
+    "name": "Yeni menüyü kullan",
+    "tooltip": "Menü çubuğu konumu. Mobil cihazlarda menü her zaman üstte gösterilir.",
+    "options": {
+      "Disabled": "Devre dışı",
+      "Top": "Üst",
+      "Bottom": "Alt"
+    }
+  },
+  "Comfy_Validation_Workflows": {
+    "name": "İş akışlarını doğrula"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Vue düğüm oluşturmayı etkinleştir",
+    "tooltip": "Düğümleri tuval öğeleri yerine Vue bileşenleri olarak oluşturun. Deneysel özellik."
+  },
+  "Comfy_VueNodes_Widgets": {
+    "name": "Vue widget'larını etkinleştir",
+    "tooltip": "Widget'ları Vue düğümleri içinde Vue bileşenleri olarak oluşturun."
+  },
+  "Comfy_WidgetControlMode": {
+    "name": "Widget kontrol modu",
+    "tooltip": "Widget değerlerinin ne zaman güncelleneceğini (rastgele/artırma/azaltma), istem kuyruğa alınmadan önce veya sonra kontrol eder.",
+    "options": {
+      "before": "önce",
+      "after": "sonra"
+    }
+  },
+  "Comfy_Window_UnloadConfirmation": {
+    "name": "Pencereyi kapatırken onay göster"
+  },
+  "Comfy_Workflow_AutoSave": {
+    "name": "Otomatik Kaydet",
+    "options": {
+      "off": "kapalı",
+      "after delay": "gecikmeden sonra"
+    }
+  },
+  "Comfy_Workflow_AutoSaveDelay": {
+    "name": "Otomatik Kaydetme Gecikmesi (ms)",
+    "tooltip": "Yalnızca Otomatik Kaydetme \"gecikmeden sonra\" olarak ayarlandığında geçerlidir."
+  },
+  "Comfy_Workflow_ConfirmDelete": {
+    "name": "İş akışlarını silerken onay göster"
+  },
+  "Comfy_Workflow_Persist": {
+    "name": "İş akışı durumunu koru ve sayfayı (yeniden) yüklediğinde geri yükle"
+  },
+  "Comfy_Workflow_ShowMissingModelsWarning": {
+    "name": "Eksik model uyarısını göster"
+  },
+  "Comfy_Workflow_ShowMissingNodesWarning": {
+    "name": "Eksik düğüm uyarısını göster"
+  },
+  "Comfy_Workflow_SortNodeIdOnSave": {
+    "name": "İş akışını kaydederken düğüm kimliklerini sırala"
+  },
+  "Comfy_Workflow_WorkflowTabsPosition": {
+    "name": "Açılan iş akışları konumu",
+    "options": {
+      "Sidebar": "Kenar Çubuğu",
+      "Topbar": "Üst Çubuk",
+      "Topbar (2nd-row)": "Üst Çubuk (2. sıra)"
+    }
+  },
+  "LiteGraph_Canvas_MinFontSizeForLOD": {
+    "name": "Yakınlaştırma Düğümü Ayrıntı Seviyesi - yazı tipi boyutu eşiği",
+    "tooltip": "Düğümlerin ne zaman düşük kaliteli LOD oluşturmaya geçeceğini kontrol eder. Ne zaman geçiş yapılacağını belirlemek için piksel cinsinden yazı tipi boyutunu kullanır. Devre dışı bırakmak için 0'a ayarlayın. 1-24 arasındaki değerler LOD için minimum yazı tipi boyutu eşiğini ayarlar - daha yüksek değerler (24 piksel) = uzaklaştırırken düğümleri daha erken basitleştirilmiş oluşturmaya geçirin, daha düşük değerler (1 piksel) = tam düğüm kalitesini daha uzun süre koruyun."
+  },
+  "LiteGraph_Canvas_MaximumFps": {
+    "name": "Maksimum FPS",
+    "tooltip": "Tuvalin saniyede oluşturmasına izin verilen maksimum kare sayısı. Akıcılık pahasına GPU kullanımını sınırlar. 0 ise, ekran yenileme hızı kullanılır. Varsayılan: 0"
+  },
+  "LiteGraph_ContextMenu_Scaling": {
+    "name": "Yakınlaştırıldığında düğüm birleşik widget menülerini (listeleri) ölçeklendir"
+  },
+  "LiteGraph_Node_DefaultPadding": {
+    "name": "Yeni düğümleri her zaman küçült",
+    "tooltip": "Oluşturulduğunda düğümleri mümkün olan en küçük boyuta yeniden boyutlandırın. Devre dışı bırakıldığında, yeni eklenen bir düğüm widget değerlerini göstermek için biraz genişletilecektir."
+  },
+  "LiteGraph_Node_TooltipDelay": {
+    "name": "Araç İpucu Gecikmesi"
+  },
+  "LiteGraph_Reroute_SplineOffset": {
+    "name": "Yeniden yönlendirme eğri ofseti",
+    "tooltip": "Yeniden yönlendirme merkez noktasından bezier kontrol noktası ofseti"
+  },
+  "pysssss_SnapToGrid": {
+    "name": "Her zaman ızgaraya yapıştır"
+  }
+}
\ No newline at end of file
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
new file mode 100644
index 0000000000..bb27153c21
--- /dev/null
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
+    <span
+      v-for="badge in badges"
+      :key="badge.label"
+      :class="
+        cn(
+          'px-2 py-1 rounded text-xs font-medium uppercase tracking-wider text-white',
+          getBadgeColor(badge.type)
+        )
+      "
+    >
+      {{ badge.label }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+
+type AssetBadge = {
+  label: string
+  type: 'type' | 'base' | 'size'
+}
+
+defineProps<{
+  badges: AssetBadge[]
+}>()
+
+function getBadgeColor(type: AssetBadge['type']): string {
+  switch (type) {
+    case 'type':
+      return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
+    case 'base':
+      return 'bg-success-100/90 dark-theme:bg-success-100/80'
+    case 'size':
+      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+    default:
+      return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
+  }
+}
+</script>
diff --git a/src/platform/assets/components/AssetBrowserModal.stories.ts b/src/platform/assets/components/AssetBrowserModal.stories.ts
new file mode 100644
index 0000000000..f062fe71fa
--- /dev/null
+++ b/src/platform/assets/components/AssetBrowserModal.stories.ts
@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import {
+  createMockAssets,
+  mockAssets
+} from '@/platform/assets/fixtures/ui-mock-assets'
+
+// Story arguments interface
+interface StoryArgs {
+  nodeType: string
+  inputName: string
+  currentValue: string
+  showLeftPanel?: boolean
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Platform/Assets/AssetBrowserModal',
+  component: AssetBrowserModal,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  argTypes: {
+    nodeType: {
+      control: 'select',
+      options: ['CheckpointLoaderSimple', 'VAELoader', 'ControlNetLoader'],
+      description: 'ComfyUI node type for context'
+    },
+    inputName: {
+      control: 'select',
+      options: ['ckpt_name', 'vae_name', 'control_net_name'],
+      description: 'Widget input name'
+    },
+    currentValue: {
+      control: 'text',
+      description: 'Current selected asset value'
+    },
+    showLeftPanel: {
+      control: 'boolean',
+      description: 'Whether to show the left panel with categories'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Modal Layout Stories
+export const Default: Story = {
+  args: {
+    nodeType: 'CheckpointLoaderSimple',
+    inputName: 'ckpt_name',
+    currentValue: '',
+    showLeftPanel: true
+  },
+  render: (args) => ({
+    components: { AssetBrowserModal },
+    setup() {
+      const onAssetSelect = (asset: AssetDisplayItem) => {
+        console.log('Selected asset:', asset)
+      }
+      const onClose = () => {
+        console.log('Modal closed')
+      }
+
+      return {
+        ...args,
+        onAssetSelect,
+        onClose,
+        assets: mockAssets
+      }
+    },
+    template: `
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+        <AssetBrowserModal
+          :node-type="nodeType"
+          :input-name="inputName"
+          :show-left-panel="showLeftPanel"
+          :assets="assets"
+          @asset-select="onAssetSelect"
+          @close="onClose"
+        />
+      </div>
+    `
+  })
+}
+
+// Story demonstrating single asset type (auto-hides left panel)
+export const SingleAssetType: Story = {
+  args: {
+    nodeType: 'CheckpointLoaderSimple',
+    inputName: 'ckpt_name',
+    currentValue: '',
+    showLeftPanel: false
+  },
+  render: (args) => ({
+    components: { AssetBrowserModal },
+    setup() {
+      const onAssetSelect = (asset: AssetDisplayItem) => {
+        console.log('Selected asset:', asset)
+      }
+      const onClose = () => {
+        console.log('Modal closed')
+      }
+
+      // Create assets with only one type (checkpoints)
+      const singleTypeAssets = createMockAssets(15).map((asset) => ({
+        ...asset,
+        type: 'checkpoint'
+      }))
+
+      return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
+    },
+    template: `
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+        <AssetBrowserModal
+          :node-type="nodeType"
+          :input-name="inputName"
+          :show-left-panel="showLeftPanel"
+          :assets="assets"
+          @asset-select="onAssetSelect"
+          @close="onClose"
+        />
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Modal with assets of only one type (checkpoint) - left panel auto-hidden.'
+      }
+    }
+  }
+}
+
+// Story with left panel explicitly hidden
+export const NoLeftPanel: Story = {
+  args: {
+    nodeType: 'CheckpointLoaderSimple',
+    inputName: 'ckpt_name',
+    currentValue: '',
+    showLeftPanel: false
+  },
+  render: (args) => ({
+    components: { AssetBrowserModal },
+    setup() {
+      const onAssetSelect = (asset: AssetDisplayItem) => {
+        console.log('Selected asset:', asset)
+      }
+      const onClose = () => {
+        console.log('Modal closed')
+      }
+
+      return { ...args, onAssetSelect, onClose, assets: mockAssets }
+    },
+    template: `
+      <div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
+        <AssetBrowserModal
+          :node-type="nodeType"
+          :input-name="inputName"
+          :show-left-panel="showLeftPanel"
+          :assets="assets"
+          @asset-select="onAssetSelect"
+          @close="onClose"
+        />
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Modal with left panel explicitly disabled via showLeftPanel=false.'
+      }
+    }
+  }
+}
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
new file mode 100644
index 0000000000..1182fdfa93
--- /dev/null
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -0,0 +1,95 @@
+<template>
+  <BaseModalLayout
+    data-component-id="AssetBrowserModal"
+    class="size-full max-h-full max-w-full min-w-0"
+    :content-title="contentTitle"
+    @close="handleClose"
+  >
+    <template v-if="shouldShowLeftPanel" #leftPanel>
+      <LeftSidePanel
+        v-model="selectedCategory"
+        data-component-id="AssetBrowserModal-LeftSidePanel"
+        :nav-items="availableCategories"
+      >
+        <template #header-icon>
+          <div class="icon-[lucide--folder] size-4" />
+        </template>
+        <template #header-title>{{ $t('assetBrowser.browseAssets') }}</template>
+      </LeftSidePanel>
+    </template>
+
+    <template #header>
+      <SearchBox
+        v-model="searchQuery"
+        size="lg"
+        :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
+        class="max-w-96"
+      />
+    </template>
+
+    <template #contentFilter>
+      <AssetFilterBar :assets="assets" @filter-change="updateFilters" />
+    </template>
+
+    <template #content>
+      <AssetGrid
+        :assets="filteredAssets"
+        @asset-select="handleAssetSelectAndEmit"
+      />
+    </template>
+  </BaseModalLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import SearchBox from '@/components/input/SearchBox.vue'
+import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
+import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
+import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { OnCloseKey } from '@/types/widgetTypes'
+
+const props = defineProps<{
+  nodeType?: string
+  inputName?: string
+  onSelect?: (assetPath: string) => void
+  onClose?: () => void
+  showLeftPanel?: boolean
+  assets?: AssetItem[]
+}>()
+
+const emit = defineEmits<{
+  'asset-select': [asset: AssetDisplayItem]
+  close: []
+}>()
+
+provide(OnCloseKey, props.onClose ?? (() => {}))
+
+const {
+  searchQuery,
+  selectedCategory,
+  availableCategories,
+  contentTitle,
+  filteredAssets,
+  selectAssetWithCallback,
+  updateFilters
+} = useAssetBrowser(props.assets)
+
+const shouldShowLeftPanel = computed(() => {
+  return props.showLeftPanel ?? true
+})
+
+function handleClose() {
+  props.onClose?.()
+  emit('close')
+}
+
+async function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
+  emit('asset-select', asset)
+  await selectAssetWithCallback(asset.id, props.onSelect)
+}
+</script>
diff --git a/src/platform/assets/components/AssetCard.stories.ts b/src/platform/assets/components/AssetCard.stories.ts
new file mode 100644
index 0000000000..2b3532a05e
--- /dev/null
+++ b/src/platform/assets/components/AssetCard.stories.ts
@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import AssetCard from '@/platform/assets/components/AssetCard.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { mockAssets } from '@/platform/assets/fixtures/ui-mock-assets'
+
+// Use the first mock asset as base and transform it to display format
+const baseAsset = mockAssets[0]
+const createAssetData = (
+  overrides: Partial<AssetDisplayItem> = {}
+): AssetDisplayItem => ({
+  ...baseAsset,
+  description:
+    'High-quality realistic images with perfect detail and natural lighting effects for professional photography',
+  formattedSize: '2.1 GB',
+  badges: [
+    { label: 'checkpoints', type: 'type' },
+    { label: '2.1 GB', type: 'size' }
+  ],
+  stats: {
+    formattedDate: '3/15/25',
+    downloadCount: '1.8k',
+    stars: '4.2k'
+  },
+  ...overrides
+})
+
+const meta: Meta<typeof AssetCard> = {
+  title: 'Platform/Assets/AssetCard',
+  component: AssetCard,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Interactive: Story = {
+  args: {
+    asset: createAssetData(),
+    interactive: true
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Default AssetCard with complete data including badges and all stats.'
+      }
+    }
+  }
+}
+
+export const NonInteractive: Story = {
+  args: {
+    asset: createAssetData(),
+    interactive: false
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'AssetCard in non-interactive mode - renders as div without button semantics.'
+      }
+    }
+  }
+}
+
+export const EdgeCases: Story = {
+  render: () => ({
+    components: { AssetCard },
+    setup() {
+      const edgeCases = [
+        // Default case for comparison
+        createAssetData({
+          name: 'Complete Data',
+          description: 'Asset with all data present for comparison'
+        }),
+        // No badges
+        createAssetData({
+          id: 'no-badges',
+          name: 'No Badges',
+          description: 'Testing graceful handling when badges are not provided',
+          badges: []
+        }),
+        // No stars
+        createAssetData({
+          id: 'no-stars',
+          name: 'No Stars',
+          description: 'Testing missing stars data gracefully',
+          stats: {
+            downloadCount: '1.8k',
+            formattedDate: '3/15/25'
+          }
+        }),
+        // No downloads
+        createAssetData({
+          id: 'no-downloads',
+          name: 'No Downloads',
+          description: 'Testing missing downloads data gracefully',
+          stats: {
+            stars: '4.2k',
+            formattedDate: '3/15/25'
+          }
+        }),
+        // No date
+        createAssetData({
+          id: 'no-date',
+          name: 'No Date',
+          description: 'Testing missing date data gracefully',
+          stats: {
+            stars: '4.2k',
+            downloadCount: '1.8k'
+          }
+        }),
+        // No stats at all
+        createAssetData({
+          id: 'no-stats',
+          name: 'No Stats',
+          description: 'Testing when all stats are missing',
+          stats: {}
+        }),
+        // Long description
+        createAssetData({
+          id: 'long-desc',
+          name: 'Long Description',
+          description:
+            'This is a very long description that should demonstrate how the component handles text overflow and truncation with ellipsis. The description continues with even more content to ensure we test the 2-line clamp behavior properly and see how it renders when there is significantly more text than can fit in the allocated space.'
+        }),
+        // Minimal data
+        createAssetData({
+          id: 'minimal',
+          name: 'Minimal',
+          description: 'Basic model',
+          tags: ['models'],
+          badges: [],
+          stats: {}
+        })
+      ]
+
+      return { edgeCases }
+    },
+    template: `
+      <div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-gray-900">
+        <AssetCard
+          v-for="asset in edgeCases"
+          :key="asset.id"
+          :asset="asset"
+          :interactive="true"
+          @select="(asset) => console.log('Selected:', asset)"
+        />
+      </div>
+    `
+  }),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'All AssetCard edge cases in a grid layout to test graceful handling of missing data, badges, stats, and long descriptions.'
+      }
+    }
+  }
+}
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
new file mode 100644
index 0000000000..90b8734bc2
--- /dev/null
+++ b/src/platform/assets/components/AssetCard.vue
@@ -0,0 +1,109 @@
+<template>
+  <component
+    :is="interactive ? 'button' : 'div'"
+    data-component-id="AssetCard"
+    :data-asset-id="asset.id"
+    v-bind="elementProps"
+    :class="
+      cn(
+        // Base layout and container styles (always applied)
+        'rounded-xl overflow-hidden transition-all duration-200',
+        interactive && 'group',
+        // Button-specific styles
+        interactive && [
+          'appearance-none bg-transparent p-0 m-0 font-inherit text-inherit outline-none cursor-pointer text-left',
+          'bg-gray-100 dark-theme:bg-charcoal-800',
+          'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
+          'border-none',
+          'focus:outline-solid outline-blue-100 outline-4'
+        ],
+        // Div-specific styles
+        !interactive && 'bg-gray-100 dark-theme:bg-charcoal-800'
+      )
+    "
+    @click="interactive && $emit('select', asset)"
+    @keydown.enter="interactive && $emit('select', asset)"
+  >
+    <div class="relative w-full aspect-square overflow-hidden">
+      <div
+        class="w-full h-full bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-600 flex items-center justify-center"
+      ></div>
+      <AssetBadgeGroup :badges="asset.badges" />
+    </div>
+    <div :class="cn('p-4 h-32 flex flex-col justify-between')">
+      <div>
+        <h3
+          :class="
+            cn(
+              'mb-2 m-0 text-base font-semibold overflow-hidden text-ellipsis whitespace-nowrap',
+              'text-slate-800',
+              'dark-theme:text-white'
+            )
+          "
+        >
+          {{ asset.name }}
+        </h3>
+        <p
+          :class="
+            cn(
+              'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
+              'text-stone-100',
+              'dark-theme:text-slate-100'
+            )
+          "
+          :title="asset.description"
+        >
+          {{ asset.description }}
+        </p>
+      </div>
+      <div
+        :class="
+          cn(
+            'flex gap-4 text-xs',
+            'text-stone-400',
+            'dark-theme:text-stone-300'
+          )
+        "
+      >
+        <span v-if="asset.stats.stars" class="flex items-center gap-1">
+          <i-lucide:star class="size-3" />
+          {{ asset.stats.stars }}
+        </span>
+        <span v-if="asset.stats.downloadCount" class="flex items-center gap-1">
+          <i-lucide:download class="size-3" />
+          {{ asset.stats.downloadCount }}
+        </span>
+        <span v-if="asset.stats.formattedDate" class="flex items-center gap-1">
+          <i-lucide:clock class="size-3" />
+          {{ asset.stats.formattedDate }}
+        </span>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AssetBadgeGroup from '@/platform/assets/components/AssetBadgeGroup.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  asset: AssetDisplayItem
+  interactive?: boolean
+}>()
+
+const elementProps = computed(() =>
+  props.interactive
+    ? {
+        type: 'button',
+        'aria-label': `Select asset ${props.asset.name}`
+      }
+    : {}
+)
+
+defineEmits<{
+  select: [asset: AssetDisplayItem]
+}>()
+</script>
diff --git a/src/platform/assets/components/AssetFilterBar.stories.ts b/src/platform/assets/components/AssetFilterBar.stories.ts
new file mode 100644
index 0000000000..ac0316d3be
--- /dev/null
+++ b/src/platform/assets/components/AssetFilterBar.stories.ts
@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import {
+  createAssetWithSpecificBaseModel,
+  createAssetWithSpecificExtension,
+  createAssetWithoutBaseModel,
+  createAssetWithoutExtension
+} from '@/platform/assets/fixtures/ui-mock-assets'
+
+import AssetFilterBar from './AssetFilterBar.vue'
+
+const meta: Meta<typeof AssetFilterBar> = {
+  title: 'Platform/Assets/AssetFilterBar',
+  component: AssetFilterBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Filter bar for asset browser that dynamically shows/hides filters based on available options.'
+      }
+    }
+  },
+  decorators: [
+    () => ({
+      template: `
+        <div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
+          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-gray-200 dark-theme:border-charcoal-600">
+            <story />
+          </div>
+          <div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
+            <p>Filter bar with proper chrome styling showing contextual background and borders.</p>
+          </div>
+        </div>
+      `
+    })
+  ],
+  argTypes: {
+    assets: {
+      description: 'Array of assets to generate filter options from'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BothFiltersVisible: Story = {
+  args: {
+    assets: [
+      createAssetWithSpecificExtension('safetensors'),
+      createAssetWithSpecificExtension('ckpt'),
+      createAssetWithSpecificBaseModel('sd15'),
+      createAssetWithSpecificBaseModel('sdxl')
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows both file format and base model filters when assets contain both types of options.'
+      }
+    }
+  }
+}
+
+export const OnlyFileFormatFilter: Story = {
+  args: {
+    assets: [
+      // Assets with extensions but explicitly NO base models
+      {
+        ...createAssetWithSpecificExtension('safetensors'),
+        user_metadata: undefined
+      },
+      { ...createAssetWithSpecificExtension('ckpt'), user_metadata: undefined }
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows only file format filter when assets have file extensions but no base model metadata.'
+      }
+    }
+  }
+}
+
+export const OnlyBaseModelFilter: Story = {
+  args: {
+    assets: [
+      // Assets with base models but no recognizable extensions
+      {
+        ...createAssetWithSpecificBaseModel('sd15'),
+        name: 'model_without_extension'
+      },
+      { ...createAssetWithSpecificBaseModel('sdxl'), name: 'another_model' }
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows only base model filter when assets have base model metadata but no recognizable file extensions.'
+      }
+    }
+  }
+}
+
+export const NoFiltersVisible: Story = {
+  args: {
+    assets: []
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows no filters when no assets are provided or assets contain no filterable options.'
+      }
+    }
+  }
+}
+
+export const NoFiltersFromAssetsWithoutOptions: Story = {
+  args: {
+    assets: [createAssetWithoutExtension(), createAssetWithoutBaseModel()]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows no filters when assets are provided but contain no filterable options (no extensions or base models).'
+      }
+    }
+  }
+}
diff --git a/src/platform/assets/components/AssetFilterBar.vue b/src/platform/assets/components/AssetFilterBar.vue
new file mode 100644
index 0000000000..3ec844b306
--- /dev/null
+++ b/src/platform/assets/components/AssetFilterBar.vue
@@ -0,0 +1,98 @@
+<template>
+  <div :class="containerClasses" data-component-id="asset-filter-bar">
+    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
+      <MultiSelect
+        v-if="availableFileFormats.length > 0"
+        v-model="fileFormats"
+        :label="$t('assetBrowser.fileFormats')"
+        :options="availableFileFormats"
+        :class="selectClasses"
+        data-component-id="asset-filter-file-formats"
+        @update:model-value="handleFilterChange"
+      />
+
+      <MultiSelect
+        v-if="availableBaseModels.length > 0"
+        v-model="baseModels"
+        :label="$t('assetBrowser.baseModels')"
+        :options="availableBaseModels"
+        :class="selectClasses"
+        data-component-id="asset-filter-base-models"
+        @update:model-value="handleFilterChange"
+      />
+    </div>
+
+    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
+      <SingleSelect
+        v-model="sortBy"
+        :label="$t('assetBrowser.sortBy')"
+        :options="sortOptions"
+        :class="selectClasses"
+        data-component-id="asset-filter-sort"
+        @update:model-value="handleFilterChange"
+      >
+        <template #icon>
+          <i-lucide:arrow-up-down class="size-3" />
+        </template>
+      </SingleSelect>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import MultiSelect from '@/components/input/MultiSelect.vue'
+import SingleSelect from '@/components/input/SingleSelect.vue'
+import type { SelectOption } from '@/components/input/types'
+import { t } from '@/i18n'
+import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { cn } from '@/utils/tailwindUtil'
+
+export interface FilterState {
+  fileFormats: string[]
+  baseModels: string[]
+  sortBy: string
+}
+
+const { assets = [] } = defineProps<{
+  assets?: AssetItem[]
+}>()
+
+const fileFormats = ref<SelectOption[]>([])
+const baseModels = ref<SelectOption[]>([])
+const sortBy = ref('name-asc')
+
+const { availableFileFormats, availableBaseModels } =
+  useAssetFilterOptions(assets)
+
+// TODO: Make sortOptions configurable via props
+// Different asset types might need different sorting options
+const sortOptions = [
+  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
+  { name: t('assetBrowser.sortZA'), value: 'name-desc' },
+  { name: t('assetBrowser.sortRecent'), value: 'recent' },
+  { name: t('assetBrowser.sortPopular'), value: 'popular' }
+]
+
+const emit = defineEmits<{
+  filterChange: [filters: FilterState]
+}>()
+
+const containerClasses = cn(
+  'flex gap-4 items-center justify-between',
+  'px-6 pt-2 pb-6'
+)
+const leftSideClasses = cn('flex gap-4 items-center')
+const rightSideClasses = cn('flex items-center')
+const selectClasses = cn('min-w-32')
+
+function handleFilterChange() {
+  emit('filterChange', {
+    fileFormats: fileFormats.value.map((option: SelectOption) => option.value),
+    baseModels: baseModels.value.map((option: SelectOption) => option.value),
+    sortBy: sortBy.value
+  })
+}
+</script>
diff --git a/src/platform/assets/components/AssetGrid.vue b/src/platform/assets/components/AssetGrid.vue
new file mode 100644
index 0000000000..35122fd52c
--- /dev/null
+++ b/src/platform/assets/components/AssetGrid.vue
@@ -0,0 +1,70 @@
+<template>
+  <div
+    data-component-id="AssetGrid"
+    :style="gridStyle"
+    role="grid"
+    aria-label="Asset collection"
+    :aria-rowcount="-1"
+    :aria-colcount="-1"
+    :aria-setsize="assets.length"
+  >
+    <AssetCard
+      v-for="asset in assets"
+      :key="asset.id"
+      :asset="asset"
+      :interactive="true"
+      role="gridcell"
+      @select="$emit('assetSelect', $event)"
+    />
+
+    <!-- Empty state -->
+    <div
+      v-if="assets.length === 0"
+      :class="
+        cn(
+          'col-span-full flex flex-col items-center justify-center py-16',
+          'text-stone-300 dark-theme:text-stone-200'
+        )
+      "
+    >
+      <i-lucide:search class="size-10 mb-4" />
+      <h3 class="text-lg font-medium mb-2">
+        {{ $t('assetBrowser.noAssetsFound') }}
+      </h3>
+      <p class="text-sm">{{ $t('assetBrowser.tryAdjustingFilters') }}</p>
+    </div>
+
+    <!-- Loading state -->
+    <div
+      v-if="loading"
+      class="col-span-full flex items-center justify-center py-16"
+    >
+      <i-lucide:loader
+        :class="
+          cn('size-6 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AssetCard from '@/platform/assets/components/AssetCard.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import { createGridStyle } from '@/utils/gridUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  assets: AssetDisplayItem[]
+  loading?: boolean
+}>()
+
+defineEmits<{
+  assetSelect: [asset: AssetDisplayItem]
+}>()
+
+// Use same grid style as BaseModalLayout
+const gridStyle = computed(() => createGridStyle())
+</script>
diff --git a/src/platform/assets/composables/useAssetBrowser.ts b/src/platform/assets/composables/useAssetBrowser.ts
new file mode 100644
index 0000000000..831b6c9ac1
--- /dev/null
+++ b/src/platform/assets/composables/useAssetBrowser.ts
@@ -0,0 +1,242 @@
+import { computed, ref } from 'vue'
+
+import { d, t } from '@/i18n'
+import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetFilenameSchema } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import {
+  getAssetBaseModel,
+  getAssetDescription
+} from '@/platform/assets/utils/assetMetadataUtils'
+import { formatSize } from '@/utils/formatUtil'
+
+function filterByCategory(category: string) {
+  return (asset: AssetItem) => {
+    return category === 'all' || asset.tags.includes(category)
+  }
+}
+
+function filterByQuery(query: string) {
+  return (asset: AssetItem) => {
+    if (!query) return true
+    const lowerQuery = query.toLowerCase()
+    const description = getAssetDescription(asset)
+    return (
+      asset.name.toLowerCase().includes(lowerQuery) ||
+      (description && description.toLowerCase().includes(lowerQuery)) ||
+      asset.tags.some((tag) => tag.toLowerCase().includes(lowerQuery))
+    )
+  }
+}
+
+function filterByFileFormats(formats: string[]) {
+  return (asset: AssetItem) => {
+    if (formats.length === 0) return true
+    const formatSet = new Set(formats)
+    const extension = asset.name.split('.').pop()?.toLowerCase()
+    return extension ? formatSet.has(extension) : false
+  }
+}
+
+function filterByBaseModels(models: string[]) {
+  return (asset: AssetItem) => {
+    if (models.length === 0) return true
+    const modelSet = new Set(models)
+    const baseModel = getAssetBaseModel(asset)
+    return baseModel ? modelSet.has(baseModel) : false
+  }
+}
+
+type AssetBadge = {
+  label: string
+  type: 'type' | 'base' | 'size'
+}
+
+// Display properties for transformed assets
+export interface AssetDisplayItem extends AssetItem {
+  description: string
+  formattedSize: string
+  badges: AssetBadge[]
+  stats: {
+    formattedDate?: string
+    downloadCount?: string
+    stars?: string
+  }
+}
+
+/**
+ * Asset Browser composable
+ * Manages search, filtering, asset transformation and selection logic
+ */
+export function useAssetBrowser(assets: AssetItem[] = []) {
+  // State
+  const searchQuery = ref('')
+  const selectedCategory = ref('all')
+  const filters = ref<FilterState>({
+    sortBy: 'name-asc',
+    fileFormats: [],
+    baseModels: []
+  })
+
+  // Transform API asset to display asset
+  function transformAssetForDisplay(asset: AssetItem): AssetDisplayItem {
+    // Extract description from metadata or create from tags
+    const typeTag = asset.tags.find((tag) => tag !== 'models')
+    const description =
+      getAssetDescription(asset) ||
+      `${typeTag || t('assetBrowser.unknown')} model`
+
+    // Format file size
+    const formattedSize = formatSize(asset.size)
+
+    // Create badges from tags and metadata
+    const badges: AssetBadge[] = []
+
+    // Type badge from non-root tag
+    if (typeTag) {
+      badges.push({ label: typeTag, type: 'type' })
+    }
+
+    // Base model badge from metadata
+    const baseModel = getAssetBaseModel(asset)
+    if (baseModel) {
+      badges.push({
+        label: baseModel,
+        type: 'base'
+      })
+    }
+
+    // Size badge
+    badges.push({ label: formattedSize, type: 'size' })
+
+    // Create display stats from API data
+    const stats = {
+      formattedDate: d(new Date(asset.created_at), { dateStyle: 'short' }),
+      downloadCount: undefined, // Not available in API
+      stars: undefined // Not available in API
+    }
+
+    return {
+      ...asset,
+      description,
+      formattedSize,
+      badges,
+      stats
+    }
+  }
+
+  const availableCategories = computed(() => {
+    const categories = assets
+      .filter((asset) => asset.tags[0] === 'models' && asset.tags[1])
+      .map((asset) => asset.tags[1])
+
+    const uniqueCategories = Array.from(new Set(categories))
+      .sort()
+      .map((category) => ({
+        id: category,
+        label: category.charAt(0).toUpperCase() + category.slice(1),
+        icon: 'icon-[lucide--package]'
+      }))
+
+    return [
+      {
+        id: 'all',
+        label: t('assetBrowser.allModels'),
+        icon: 'icon-[lucide--folder]'
+      },
+      ...uniqueCategories
+    ]
+  })
+
+  // Compute content title from selected category
+  const contentTitle = computed(() => {
+    if (selectedCategory.value === 'all') {
+      return t('assetBrowser.allModels')
+    }
+
+    const category = availableCategories.value.find(
+      (cat) => cat.id === selectedCategory.value
+    )
+    return category?.label || t('assetBrowser.assets')
+  })
+
+  const filteredAssets = computed(() => {
+    const filtered = assets
+      .filter(filterByCategory(selectedCategory.value))
+      .filter(filterByQuery(searchQuery.value))
+      .filter(filterByFileFormats(filters.value.fileFormats))
+      .filter(filterByBaseModels(filters.value.baseModels))
+
+    // Sort assets
+    filtered.sort((a, b) => {
+      switch (filters.value.sortBy) {
+        case 'name-desc':
+          return b.name.localeCompare(a.name)
+        case 'recent':
+          return (
+            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+          )
+        case 'popular':
+          return a.name.localeCompare(b.name)
+        case 'name-asc':
+        default:
+          return a.name.localeCompare(b.name)
+      }
+    })
+
+    // Transform to display format
+    return filtered.map(transformAssetForDisplay)
+  })
+
+  /**
+   * Asset selection that fetches full details and executes callback with filename
+   * @param assetId - The asset ID to select and fetch details for
+   * @param onSelect - Optional callback to execute with the asset filename
+   */
+  async function selectAssetWithCallback(
+    assetId: string,
+    onSelect?: (filename: string) => void
+  ): Promise<void> {
+    if (import.meta.env.DEV) {
+      console.debug('Asset selected:', assetId)
+    }
+
+    if (!onSelect) {
+      return
+    }
+
+    try {
+      const detailAsset = await assetService.getAssetDetails(assetId)
+      const filename = detailAsset.user_metadata?.filename
+      const validatedFilename = assetFilenameSchema.safeParse(filename)
+      if (!validatedFilename.success) {
+        console.error(
+          'Invalid asset filename:',
+          validatedFilename.error.errors,
+          'for asset:',
+          assetId
+        )
+        return
+      }
+
+      onSelect(validatedFilename.data)
+    } catch (error) {
+      console.error(`Failed to fetch asset details for ${assetId}:`, error)
+    }
+  }
+
+  function updateFilters(newFilters: FilterState) {
+    filters.value = { ...newFilters }
+  }
+
+  return {
+    searchQuery,
+    selectedCategory,
+    availableCategories,
+    contentTitle,
+    filteredAssets,
+    selectAssetWithCallback,
+    updateFilters
+  }
+}
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.stories.ts b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
new file mode 100644
index 0000000000..e0095b6196
--- /dev/null
+++ b/src/platform/assets/composables/useAssetBrowserDialog.stories.ts
@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
+import { mockAssets } from '@/platform/assets/fixtures/ui-mock-assets'
+
+// Component that simulates the useAssetBrowserDialog functionality with working close
+const DialogDemoComponent = {
+  components: { AssetBrowserModal },
+  setup() {
+    const isDialogOpen = ref(false)
+    const currentNodeType = ref('CheckpointLoaderSimple')
+    const currentInputName = ref('ckpt_name')
+    const currentValue = ref('')
+
+    const handleOpenDialog = (
+      nodeType: string,
+      inputName: string,
+      value = ''
+    ) => {
+      currentNodeType.value = nodeType
+      currentInputName.value = inputName
+      currentValue.value = value
+      isDialogOpen.value = true
+    }
+
+    const handleCloseDialog = () => {
+      isDialogOpen.value = false
+    }
+
+    const handleAssetSelected = (assetPath: string) => {
+      console.log('Asset selected:', assetPath)
+      alert(`Selected asset: ${assetPath}`)
+      isDialogOpen.value = false // Auto-close like the real composable
+    }
+
+    const handleOpenWithCurrentValue = () => {
+      handleOpenDialog(
+        'CheckpointLoaderSimple',
+        'ckpt_name',
+        'realistic_vision_v5.safetensors'
+      )
+    }
+
+    return {
+      isDialogOpen,
+      currentNodeType,
+      currentInputName,
+      currentValue,
+      handleOpenDialog,
+      handleOpenWithCurrentValue,
+      handleCloseDialog,
+      handleAssetSelected,
+      mockAssets
+    }
+  },
+  template: `
+    <div class="relative">
+      <div class="p-8 space-y-4">
+        <h2 class="text-2xl font-bold mb-6">Asset Browser Dialog Demo</h2>
+
+        <div class="space-y-4">
+          <div>
+            <h3 class="text-lg font-semibold mb-2">Different Node Types</h3>
+            <div class="flex gap-3 flex-wrap">
+              <button
+                @click="handleOpenDialog('CheckpointLoaderSimple', 'ckpt_name')"
+                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+              >
+                Browse Checkpoints
+              </button>
+              <button
+                @click="handleOpenDialog('VAELoader', 'vae_name')"
+                class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+              >
+                Browse VAE
+              </button>
+              <button
+                @click="handleOpenDialog('ControlNetLoader', 'control_net_name')"
+                class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700"
+              >
+                Browse ControlNet
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <h3 class="text-lg font-semibold mb-2">With Current Value</h3>
+            <button
+              @click="handleOpenWithCurrentValue"
+              class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700"
+            >
+              Change Current Model
+            </button>
+            <p class="text-sm text-gray-600 mt-1">
+              Opens with "realistic_vision_v5.safetensors" as current value
+            </p>
+          </div>
+
+          <div class="mt-8 p-4 bg-gray-100 rounded">
+            <h4 class="font-semibold mb-2">Instructions:</h4>
+            <ul class="text-sm space-y-1">
+              <li>• Click any button to open the Asset Browser dialog</li>
+              <li>• Select an asset to see the callback in action</li>
+              <li>• Check the browser console for logged events</li>
+              <li>• Try toggling the left panel with different asset types</li>
+              <li>• Close button will work properly in this demo</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dialog Modal Overlay -->
+      <div
+        v-if="isDialogOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+        @click.self="handleCloseDialog"
+      >
+        <div class="w-[80vw] h-[80vh] max-w-[80vw] max-h-[80vh] rounded-2xl overflow-hidden">
+          <AssetBrowserModal
+            :assets="mockAssets"
+            :node-type="currentNodeType"
+            :input-name="currentInputName"
+            :current-value="currentValue"
+            @asset-select="handleAssetSelected"
+            @close="handleCloseDialog"
+          />
+        </div>
+      </div>
+    </div>
+  `
+}
+
+const meta: Meta = {
+  title: 'Platform/Assets/useAssetBrowserDialog',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Demonstrates the AssetBrowserModal functionality as used by the useAssetBrowserDialog composable.'
+      }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Demo: Story = {
+  render: () => ({
+    components: { DialogDemoComponent },
+    template: `
+      <div>
+        <DialogDemoComponent />
+
+        <!-- Code Example Section -->
+        <div class="p-8 border-t border-gray-200 bg-gray-50">
+          <h2 class="text-2xl font-bold mb-4">Code Example</h2>
+          <p class="text-gray-600 mb-4">
+            This is how you would use the composable in your component:
+          </p>
+          <div class="bg-white p-4 rounded-lg border shadow-sm">
+            <pre><code class="text-sm">import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+
+export default {
+  setup() {
+    const assetBrowserDialog = useAssetBrowserDialog()
+
+    const openBrowser = () => {
+      assetBrowserDialog.show({
+        nodeType: 'CheckpointLoaderSimple',
+        inputName: 'ckpt_name',
+        currentValue: '',
+        onAssetSelected: (assetPath) => {
+          console.log('Selected:', assetPath)
+          // Update your component state
+        }
+      })
+    }
+
+    return { openBrowser }
+  }
+}</code></pre>
+          </div>
+          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
+            <p class="text-sm text-blue-800">
+              <strong>💡 Try it:</strong> Use the interactive buttons above to see this code in action!
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Complete demo showing both interactive functionality and code examples for using useAssetBrowserDialog to open the Asset Browser modal programmatically.'
+      }
+    }
+  }
+}
diff --git a/src/platform/assets/composables/useAssetBrowserDialog.ts b/src/platform/assets/composables/useAssetBrowserDialog.ts
new file mode 100644
index 0000000000..ac42177b2e
--- /dev/null
+++ b/src/platform/assets/composables/useAssetBrowserDialog.ts
@@ -0,0 +1,73 @@
+import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import { type DialogComponentProps, useDialogStore } from '@/stores/dialogStore'
+
+interface AssetBrowserDialogProps {
+  /** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
+  nodeType: string
+  /** Widget input name (e.g., 'ckpt_name') */
+  inputName: string
+  /** Current selected asset value */
+  currentValue?: string
+  /**
+   * Callback for when an asset is selected
+   * @param {string} filename - The validated filename from user_metadata.filename
+   */
+  onAssetSelected?: (filename: string) => void
+}
+
+export const useAssetBrowserDialog = () => {
+  const dialogStore = useDialogStore()
+  const dialogKey = 'global-asset-browser'
+
+  async function show(props: AssetBrowserDialogProps) {
+    const handleAssetSelected = (filename: string) => {
+      props.onAssetSelected?.(filename)
+      dialogStore.closeDialog({ key: dialogKey })
+    }
+    const dialogComponentProps: DialogComponentProps = {
+      headless: true,
+      modal: true,
+      closable: true,
+      pt: {
+        root: {
+          class: 'rounded-2xl overflow-hidden asset-browser-dialog'
+        },
+        header: {
+          class: '!p-0 hidden'
+        },
+        content: {
+          class: '!p-0 !m-0 h-full w-full'
+        }
+      }
+    }
+
+    const assets: AssetItem[] = await assetService
+      .getAssetsForNodeType(props.nodeType)
+      .catch((error) => {
+        console.error(
+          'Failed to fetch assets for node type:',
+          props.nodeType,
+          error
+        )
+        return []
+      })
+
+    dialogStore.showDialog({
+      key: dialogKey,
+      component: AssetBrowserModal,
+      props: {
+        nodeType: props.nodeType,
+        inputName: props.inputName,
+        currentValue: props.currentValue,
+        assets,
+        onSelect: handleAssetSelected,
+        onClose: () => dialogStore.closeDialog({ key: dialogKey })
+      },
+      dialogComponentProps
+    })
+  }
+
+  return { show }
+}
diff --git a/src/platform/assets/composables/useAssetFilterOptions.ts b/src/platform/assets/composables/useAssetFilterOptions.ts
new file mode 100644
index 0000000000..30572d8c9a
--- /dev/null
+++ b/src/platform/assets/composables/useAssetFilterOptions.ts
@@ -0,0 +1,56 @@
+import { uniqWith } from 'es-toolkit'
+import { computed } from 'vue'
+
+import type { SelectOption } from '@/components/input/types'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+/**
+ * Composable that extracts available filter options from asset data
+ * Provides reactive computed properties for file formats and base models
+ */
+export function useAssetFilterOptions(assets: AssetItem[] = []) {
+  /**
+   * Extract unique file formats from asset names
+   * Returns sorted SelectOption array with extensions
+   */
+  const availableFileFormats = computed<SelectOption[]>(() => {
+    const extensions = assets
+      .map((asset) => {
+        const extension = asset.name.split('.').pop()
+        return extension && extension !== asset.name ? extension : null
+      })
+      .filter((extension): extension is string => extension !== null)
+
+    const uniqueExtensions = uniqWith(extensions, (a, b) => a === b)
+
+    return uniqueExtensions.sort().map((format) => ({
+      name: `.${format}`,
+      value: format
+    }))
+  })
+
+  /**
+   * Extract unique base models from asset user metadata
+   * Returns sorted SelectOption array with base model names
+   */
+  const availableBaseModels = computed<SelectOption[]>(() => {
+    const models = assets
+      .map((asset) => asset.user_metadata?.base_model)
+      .filter(
+        (baseModel): baseModel is string =>
+          baseModel !== undefined && typeof baseModel === 'string'
+      )
+
+    const uniqueModels = uniqWith(models, (a, b) => a === b)
+
+    return uniqueModels.sort().map((model) => ({
+      name: model,
+      value: model
+    }))
+  })
+
+  return {
+    availableFileFormats,
+    availableBaseModels
+  }
+}
diff --git a/src/platform/assets/fixtures/ui-mock-assets.ts b/src/platform/assets/fixtures/ui-mock-assets.ts
new file mode 100644
index 0000000000..482a48af93
--- /dev/null
+++ b/src/platform/assets/fixtures/ui-mock-assets.ts
@@ -0,0 +1,159 @@
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+// 🎭 OBVIOUSLY FAKE MOCK DATA - DO NOT USE IN PRODUCTION! 🎭
+const fakeFunnyModelNames = [
+  '🎯_totally_real_model_v420.69',
+  '🚀_definitely_not_fake_v999',
+  '🎪_super_legit_checkpoint_pro_max',
+  '🦄_unicorn_dreams_totally_real.model',
+  '🍕_pizza_generator_supreme',
+  '🎸_rock_star_fake_data_v1337',
+  '🌮_taco_tuesday_model_deluxe',
+  '🦖_dino_nugget_generator_v3',
+  '🎮_gamer_fuel_checkpoint_xl',
+  '🍄_mushroom_kingdom_diffusion',
+  '🏴‍☠️_pirate_treasure_model_arr',
+  '🦋_butterfly_effect_generator',
+  '🎺_jazz_hands_checkpoint_pro',
+  '🥨_pretzel_logic_model_v2',
+  '🌙_midnight_snack_generator',
+  '🎭_drama_llama_checkpoint',
+  '🧙‍♀️_wizard_hat_diffusion_xl',
+  '🎪_circus_peanut_model_v4',
+  '🦒_giraffe_neck_generator',
+  '🎲_random_stuff_checkpoint_max'
+]
+
+const obviouslyFakeDescriptions = [
+  '⚠️ FAKE DATA: Generates 100% authentic fake images with premium mock quality',
+  '🎭 MOCK ALERT: This totally real model creates absolutely genuine fake content',
+  '🚨 NOT REAL: Professional-grade fake imagery for your mock data needs',
+  '🎪 DEMO ONLY: Circus-quality fake generation with extra mock seasoning',
+  '🍕 FAKE FOOD: Generates delicious fake pizzas (not edible in reality)',
+  "🎸 MOCK ROCK: Creates fake rock stars who definitely don't exist",
+  '🌮 TACO FAKERY: Tuesday-themed fake tacos for your mock appetite',
+  '🦖 PREHISTORIC FAKE: Generates extinct fake dinosaurs for demo purposes',
+  '🎮 FAKE GAMING: Level up your mock data with obviously fake content',
+  '🍄 FUNGI FICTION: Magical fake mushrooms from the demo dimension',
+  '🏴‍☠️ FAKE TREASURE: Arr! This be mock data for ye demo needs, matey!',
+  '🦋 DEMO EFFECT: Small fake changes create big mock differences',
+  '🎺 JAZZ FAKERY: Smooth fake jazz for your mock listening pleasure',
+  '🥨 MOCK LOGIC: Twisted fake reasoning for your demo requirements',
+  '🌙 MIDNIGHT MOCK: Late-night fake snacks for your demo hunger',
+  '🎭 FAKE DRAMA: Over-the-top mock emotions for demo entertainment',
+  '🧙‍♀️ WIZARD MOCK: Magically fake spells cast with demo ingredients',
+  '🎪 CIRCUS FAKE: Big top mock entertainment under the demo tent',
+  '🦒 TALL FAKE: Reaches new heights of obviously fake content',
+  '🎲 RANDOM MOCK: Generates random fake stuff for your demo pleasure'
+]
+
+// API-compliant tag structure: first tag must be root (models/input/output), second is category
+const modelCategories = ['checkpoints', 'loras', 'embeddings', 'vae']
+const baseModels = ['sd15', 'sdxl', 'sd35']
+const fileExtensions = ['.safetensors', '.ckpt', '.pt']
+const mimeTypes = [
+  'application/octet-stream',
+  'application/x-pytorch',
+  'application/x-safetensors'
+]
+
+function getRandomElement<T>(array: T[]): T {
+  return array[Math.floor(Math.random() * array.length)]
+}
+
+function getRandomNumber(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function getRandomISODate(): string {
+  const start = new Date('2024-01-01').getTime()
+  const end = new Date('2024-12-31').getTime()
+  const randomTime = start + Math.random() * (end - start)
+  return new Date(randomTime).toISOString()
+}
+
+function generateFakeAssetHash(): string {
+  const chars = '0123456789abcdef'
+  let hash = 'blake3:'
+  for (let i = 0; i < 64; i++) {
+    hash += chars[Math.floor(Math.random() * chars.length)]
+  }
+  return hash
+}
+
+// 🎭 CREATES OBVIOUSLY FAKE ASSETS FOR DEMO/TEST PURPOSES ONLY! 🎭
+export function createMockAssets(count: number = 20): AssetItem[] {
+  return Array.from({ length: count }, (_, index) => {
+    const category = getRandomElement(modelCategories)
+    const baseModel = getRandomElement(baseModels)
+    const extension = getRandomElement(fileExtensions)
+    const mimeType = getRandomElement(mimeTypes)
+    const sizeInBytes = getRandomNumber(
+      500 * 1024 * 1024,
+      8 * 1024 * 1024 * 1024
+    ) // 500MB to 8GB
+    const createdAt = getRandomISODate()
+    const updatedAt = createdAt
+    const lastAccessTime = getRandomISODate()
+
+    const fakeFileName = `${fakeFunnyModelNames[index]}${extension}`
+
+    return {
+      id: `mock-asset-uuid-${(index + 1).toString().padStart(3, '0')}-fake`,
+      name: fakeFileName,
+      asset_hash: generateFakeAssetHash(),
+      size: sizeInBytes,
+      mime_type: mimeType,
+      tags: [
+        'models', // Root tag (required first)
+        category, // Category tag (required second for models)
+        'fake-data', // Obviously fake tag
+        ...(Math.random() > 0.5 ? ['demo-mode'] : ['test-only']),
+        ...(Math.random() > 0.7 ? ['obviously-mock'] : [])
+      ],
+      preview_url: `/api/assets/mock-asset-uuid-${(index + 1).toString().padStart(3, '0')}-fake/content`,
+      created_at: createdAt,
+      updated_at: updatedAt,
+      last_access_time: lastAccessTime,
+      user_metadata: {
+        description: obviouslyFakeDescriptions[index],
+        base_model: baseModel,
+        original_name: fakeFunnyModelNames[index],
+        warning: '🚨 THIS IS FAKE DEMO DATA - NOT A REAL MODEL! 🚨'
+      }
+    }
+  })
+}
+
+export const mockAssets = createMockAssets(20)
+
+// 🧪 Test helpers for edge cases - built on mock asset foundation
+export function createAssetWithoutExtension() {
+  const asset = createMockAssets(1)[0]
+  asset.name = 'model_no_extension'
+  return asset
+}
+
+export function createAssetWithoutBaseModel() {
+  const asset = createMockAssets(1)[0]
+  asset.user_metadata = { description: 'A test model' }
+  return asset
+}
+
+export function createAssetWithoutUserMetadata() {
+  const asset = createMockAssets(1)[0]
+  asset.user_metadata = undefined
+  return asset
+}
+
+export function createAssetWithSpecificExtension(extension: string) {
+  const asset = createMockAssets(1)[0]
+  asset.name = `test-model.${extension}`
+  return asset
+}
+
+export function createAssetWithSpecificBaseModel(baseModel: string) {
+  const asset = createMockAssets(1)[0]
+  asset.user_metadata = { ...asset.user_metadata, base_model: baseModel }
+  return asset
+}
diff --git a/src/platform/assets/schemas/assetSchema.ts b/src/platform/assets/schemas/assetSchema.ts
index 277efcbb02..2c051a30de 100644
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -1,12 +1,19 @@
 import { z } from 'zod'
 
-// Zod schemas for asset API validation
+// Zod schemas for asset API validation matching ComfyUI Assets REST API spec
 const zAsset = z.object({
   id: z.string(),
   name: z.string(),
-  tags: z.array(z.string()),
+  asset_hash: z.string().nullable(),
   size: z.number(),
-  created_at: z.string().optional()
+  mime_type: z.string().nullable(),
+  tags: z.array(z.string()),
+  preview_url: z.string().optional(),
+  created_at: z.string(),
+  updated_at: z.string().optional(),
+  last_access_time: z.string(),
+  user_metadata: z.record(z.unknown()).optional(), // API allows arbitrary key-value pairs
+  preview_id: z.string().nullable().optional()
 })
 
 const zAssetResponse = z.object({
@@ -20,19 +27,30 @@ const zModelFolder = z.object({
   folders: z.array(z.string())
 })
 
+// Zod schema for ModelFile to align with interface
+const zModelFile = z.object({
+  name: z.string(),
+  pathIndex: z.number()
+})
+
+// Filename validation schema
+export const assetFilenameSchema = z
+  .string()
+  .min(1, 'Filename cannot be empty')
+  .regex(/^[^\\:*?"<>|]+$/, 'Invalid filename characters') // Allow forward slashes, block backslashes and other unsafe chars
+  .regex(/^(?!\/|.*\.\.)/, 'Path must not start with / or contain ..') // Prevent absolute paths and directory traversal
+  .trim()
+
 // Export schemas following repository patterns
 export const assetResponseSchema = zAssetResponse
 
 // Export types derived from Zod schemas
+export type AssetItem = z.infer<typeof zAsset>
 export type AssetResponse = z.infer<typeof zAssetResponse>
 export type ModelFolder = z.infer<typeof zModelFolder>
+export type ModelFile = z.infer<typeof zModelFile>
 
-// Common interfaces for API responses
-export interface ModelFile {
-  name: string
-  pathIndex: number
-}
-
+// Legacy interface for backward compatibility (now aligned with Zod schema)
 export interface ModelFolderInfo {
   name: string
   folders: string[]
diff --git a/src/platform/assets/services/assetService.ts b/src/platform/assets/services/assetService.ts
index 344209bf71..7d0f82cbb4 100644
--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -1,6 +1,7 @@
 import { fromZodError } from 'zod-validation-error'
 
 import {
+  type AssetItem,
   type AssetResponse,
   type ModelFile,
   type ModelFolder,
@@ -67,7 +68,7 @@ function createAssetService() {
     )
 
     // Blacklist directories we don't want to show
-    const blacklistedDirectories = ['configs']
+    const blacklistedDirectories = new Set(['configs'])
 
     // Extract directory names from assets that actually exist, exclude missing assets
     const discoveredFolders = new Set<string>(
@@ -75,7 +76,7 @@ function createAssetService() {
         ?.filter((asset) => !asset.tags.includes(MISSING_TAG))
         ?.flatMap((asset) => asset.tags)
         ?.filter(
-          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.includes(tag)
+          (tag) => tag !== MODELS_TAG && !blacklistedDirectories.has(tag)
         ) ?? []
     )
 
@@ -127,10 +128,75 @@ function createAssetService() {
     )
   }
 
+  /**
+   * Gets assets for a specific node type by finding the matching category
+   * and fetching all assets with that category tag
+   *
+   * @param nodeType - The ComfyUI node type (e.g., 'CheckpointLoaderSimple')
+   * @returns Promise<AssetItem[]> - Full asset objects with preserved metadata
+   */
+  async function getAssetsForNodeType(nodeType: string): Promise<AssetItem[]> {
+    if (!nodeType || typeof nodeType !== 'string') {
+      return []
+    }
+
+    // Find the category for this node type using efficient O(1) lookup
+    const modelToNodeStore = useModelToNodeStore()
+    const category = modelToNodeStore.getCategoryForNodeType(nodeType)
+
+    if (!category) {
+      return []
+    }
+
+    // Fetch assets for this category using same API pattern as getAssetModels
+    const data = await handleAssetRequest(
+      `${ASSETS_ENDPOINT}?include_tags=${MODELS_TAG},${category}`,
+      `assets for ${nodeType}`
+    )
+
+    // Return full AssetItem[] objects (don't strip like getAssetModels does)
+    return (
+      data?.assets?.filter(
+        (asset) =>
+          !asset.tags.includes(MISSING_TAG) && asset.tags.includes(category)
+      ) ?? []
+    )
+  }
+
+  /**
+   * Gets complete details for a specific asset by ID
+   * Calls the detail endpoint which includes user_metadata and all fields
+   *
+   * @param id - The asset ID
+   * @returns Promise<AssetItem> - Complete asset object with user_metadata
+   */
+  async function getAssetDetails(id: string): Promise<AssetItem> {
+    const res = await api.fetchApi(`${ASSETS_ENDPOINT}/${id}`)
+    if (!res.ok) {
+      throw new Error(
+        `Unable to load asset details for ${id}: Server returned ${res.status}. Please try again.`
+      )
+    }
+    const data = await res.json()
+
+    // Validate the single asset response against our schema
+    const result = assetResponseSchema.safeParse({ assets: [data] })
+    if (result.success && result.data.assets?.[0]) {
+      return result.data.assets[0]
+    }
+
+    const error = result.error
+      ? fromZodError(result.error)
+      : 'Unknown validation error'
+    throw new Error(`Invalid asset response against zod schema:\n${error}`)
+  }
+
   return {
     getAssetModelFolders,
     getAssetModels,
-    isAssetBrowserEligible
+    isAssetBrowserEligible,
+    getAssetsForNodeType,
+    getAssetDetails
   }
 }
 
diff --git a/src/platform/assets/utils/assetMetadataUtils.ts b/src/platform/assets/utils/assetMetadataUtils.ts
new file mode 100644
index 0000000000..2d32fa07fe
--- /dev/null
+++ b/src/platform/assets/utils/assetMetadataUtils.ts
@@ -0,0 +1,27 @@
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+/**
+ * Type-safe utilities for extracting metadata from assets
+ */
+
+/**
+ * Safely extracts string description from asset metadata
+ * @param asset - The asset to extract description from
+ * @returns The description string or null if not present/not a string
+ */
+export function getAssetDescription(asset: AssetItem): string | null {
+  return typeof asset.user_metadata?.description === 'string'
+    ? asset.user_metadata.description
+    : null
+}
+
+/**
+ * Safely extracts string base_model from asset metadata
+ * @param asset - The asset to extract base_model from
+ * @returns The base_model string or null if not present/not a string
+ */
+export function getAssetBaseModel(asset: AssetItem): string | null {
+  return typeof asset.user_metadata?.base_model === 'string'
+    ? asset.user_metadata.base_model
+    : null
+}
diff --git a/src/platform/settings/components/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
index 7aa78cd048..bbeb53ca59 100644
--- a/src/platform/settings/components/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -73,8 +73,8 @@ import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMess
 import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
 import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
 import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
-import { SettingTreeNode } from '@/platform/settings/settingStore'
-import { ISettingGroup, SettingParams } from '@/platform/settings/types'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { flattenTree } from '@/utils/treeUtil'
 
 const { defaultPanel } = defineProps<{
diff --git a/src/platform/settings/components/SettingGroup.vue b/src/platform/settings/components/SettingGroup.vue
index 2d25d1fe79..ea18aa5692 100644
--- a/src/platform/settings/components/SettingGroup.vue
+++ b/src/platform/settings/components/SettingGroup.vue
@@ -20,7 +20,7 @@
 import Divider from 'primevue/divider'
 
 import SettingItem from '@/platform/settings/components/SettingItem.vue'
-import { SettingParams } from '@/platform/settings/types'
+import type { SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
diff --git a/src/platform/settings/components/SettingsPanel.vue b/src/platform/settings/components/SettingsPanel.vue
index 997908e124..58b686a964 100644
--- a/src/platform/settings/components/SettingsPanel.vue
+++ b/src/platform/settings/components/SettingsPanel.vue
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
-import { ISettingGroup } from '@/platform/settings/types'
+import type { ISettingGroup } from '@/platform/settings/types'
 
 const props = defineProps<{
   settingGroups: ISettingGroup[]
diff --git a/src/platform/settings/composables/useSettingSearch.ts b/src/platform/settings/composables/useSettingSearch.ts
index c401cc4152..c2bf3cfe87 100644
--- a/src/platform/settings/composables/useSettingSearch.ts
+++ b/src/platform/settings/composables/useSettingSearch.ts
@@ -1,12 +1,12 @@
 import { computed, ref, watch } from 'vue'
 
 import { st } from '@/i18n'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import {
-  SettingTreeNode,
   getSettingInfo,
   useSettingStore
 } from '@/platform/settings/settingStore'
-import { ISettingGroup, SettingParams } from '@/platform/settings/types'
+import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 export function useSettingSearch() {
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index 9aa8ea316a..8a01ec1e2d 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -8,10 +8,8 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import {
-  SettingTreeNode,
-  useSettingStore
-} from '@/platform/settings/settingStore'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
index 1272290449..4adf2db9d1 100644
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -404,7 +404,8 @@ export const CORE_SETTINGS: SettingParams[] = [
       { value: 'ko', text: '한국어' },
       { value: 'fr', text: 'Français' },
       { value: 'es', text: 'Español' },
-      { value: 'ar', text: 'عربي' }
+      { value: 'ar', text: 'عربي' },
+      { value: 'tr', text: 'Türkçe' }
     ],
     defaultValue: () => navigator.language.split('-')[0] || 'en'
   },
@@ -594,7 +595,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     migrateDeprecatedValue: (value: any[]) => {
       return value.map((keybinding) => {
         if (keybinding['targetSelector'] === '#graph-canvas') {
-          keybinding['targetElementId'] = 'graph-canvas'
+          keybinding['targetElementId'] = 'graph-canvas-container'
         }
         return keybinding
       })
diff --git a/src/platform/settings/settingStore.ts b/src/platform/settings/settingStore.ts
index 2d94e38e57..5a1573efbf 100644
--- a/src/platform/settings/settingStore.ts
+++ b/src/platform/settings/settingStore.ts
@@ -1,5 +1,6 @@
 import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
+import { compare, valid } from 'semver'
 import { ref } from 'vue'
 
 import type { SettingParams } from '@/platform/settings/types'
@@ -7,7 +8,6 @@ import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { TreeNode } from '@/types/treeExplorerTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
 
 export const getSettingInfo = (setting: SettingParams) => {
   const parts = setting.category || setting.id.split('.')
@@ -132,20 +132,25 @@ export const useSettingStore = defineStore('setting', () => {
 
       if (installedVersion) {
         const sortedVersions = Object.keys(defaultsByInstallVersion).sort(
-          (a, b) => compareVersions(b, a)
+          (a, b) => compare(b, a)
         )
 
         for (const version of sortedVersions) {
           // Ensure the version is in a valid format before comparing
-          if (!isSemVer(version)) {
+          if (!valid(version)) {
             continue
           }
 
-          if (compareVersions(installedVersion, version) >= 0) {
-            const versionedDefault = defaultsByInstallVersion[version]
-            return typeof versionedDefault === 'function'
-              ? versionedDefault()
-              : versionedDefault
+          if (compare(installedVersion, version) >= 0) {
+            const versionedDefault =
+              defaultsByInstallVersion[
+                version as keyof typeof defaultsByInstallVersion
+              ]
+            if (versionedDefault !== undefined) {
+              return typeof versionedDefault === 'function'
+                ? versionedDefault()
+                : versionedDefault
+            }
           }
         }
       }
diff --git a/src/platform/updates/common/releaseService.ts b/src/platform/updates/common/releaseService.ts
index 7c55ae8f08..1894216781 100644
--- a/src/platform/updates/common/releaseService.ts
+++ b/src/platform/updates/common/releaseService.ts
@@ -1,4 +1,5 @@
-import axios, { AxiosError, AxiosResponse } from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+import axios from 'axios'
 import { ref } from 'vue'
 
 import { COMFY_API_BASE_URL } from '@/config/comfyApi'
diff --git a/src/platform/updates/common/releaseStore.ts b/src/platform/updates/common/releaseStore.ts
index f34e525f56..470c922721 100644
--- a/src/platform/updates/common/releaseStore.ts
+++ b/src/platform/updates/common/releaseStore.ts
@@ -1,11 +1,12 @@
 import { until } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { compare } from 'semver'
 import { computed, ref } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { isElectron } from '@/utils/envUtil'
-import { compareVersions, stringToLocale } from '@/utils/formatUtil'
+import { stringToLocale } from '@/utils/formatUtil'
 
 import { type ReleaseNote, useReleaseService } from './releaseService'
 
@@ -56,16 +57,19 @@ export const useReleaseStore = defineStore('release', () => {
   const isNewVersionAvailable = computed(
     () =>
       !!recentRelease.value &&
-      compareVersions(
+      compare(
         recentRelease.value.version,
-        currentComfyUIVersion.value
+        currentComfyUIVersion.value || '0.0.0'
       ) > 0
   )
 
   const isLatestVersion = computed(
     () =>
       !!recentRelease.value &&
-      !compareVersions(recentRelease.value.version, currentComfyUIVersion.value)
+      compare(
+        recentRelease.value.version,
+        currentComfyUIVersion.value || '0.0.0'
+      ) === 0
   )
 
   const hasMediumOrHighAttention = computed(() =>
diff --git a/src/platform/updates/common/versionCompatibilityStore.ts b/src/platform/updates/common/versionCompatibilityStore.ts
index 46b25cf330..cc85f945b5 100644
--- a/src/platform/updates/common/versionCompatibilityStore.ts
+++ b/src/platform/updates/common/versionCompatibilityStore.ts
@@ -1,6 +1,6 @@
 import { until, useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import * as semver from 'semver'
+import { gt, valid } from 'semver'
 import { computed } from 'vue'
 
 import config from '@/config'
@@ -26,13 +26,13 @@ export const useVersionCompatibilityStore = defineStore(
       if (
         !frontendVersion.value ||
         !requiredFrontendVersion.value ||
-        !semver.valid(frontendVersion.value) ||
-        !semver.valid(requiredFrontendVersion.value)
+        !valid(frontendVersion.value) ||
+        !valid(requiredFrontendVersion.value)
       ) {
         return false
       }
       // Returns true if required version is greater than frontend version
-      return semver.gt(requiredFrontendVersion.value, frontendVersion.value)
+      return gt(requiredFrontendVersion.value, frontendVersion.value)
     })
 
     const isFrontendNewer = computed(() => {
diff --git a/src/platform/workflow/core/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
index cc41f971e1..c4234cf455 100644
--- a/src/platform/workflow/core/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -9,7 +9,7 @@ import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
-import { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
@@ -17,7 +17,7 @@ import { downloadBlob } from '@/scripts/utils'
 import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { appendJsonExt, generateUUID } from '@/utils/formatUtil'
+import { appendJsonExt } from '@/utils/formatUtil'
 
 export const useWorkflowService = () => {
   const settingStore = useSettingStore()
@@ -112,13 +112,6 @@ export const useWorkflowService = () => {
       await renameWorkflow(workflow, newPath)
       await workflowStore.saveWorkflow(workflow)
     } else {
-      // Generate new id when saving existing workflow as a new file
-      const id = generateUUID()
-      const state = JSON.parse(
-        JSON.stringify(workflow.activeState)
-      ) as ComfyWorkflowJSON
-      state.id = id
-
       const tempWorkflow = workflowStore.saveAs(workflow, newPath)
       await openWorkflow(tempWorkflow)
       await workflowStore.saveWorkflow(tempWorkflow)
diff --git a/src/platform/workflow/management/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
index 254698b669..02b48c55bb 100644
--- a/src/platform/workflow/management/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -4,7 +4,7 @@ import { type Raw, computed, markRaw, ref, shallowRef, watch } from 'vue'
 
 import { t } from '@/i18n'
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { api } from '@/scripts/api'
@@ -20,7 +20,7 @@ import {
   parseNodeExecutionId,
   parseNodeLocatorId
 } from '@/types/nodeIdentification'
-import { getPathDetails } from '@/utils/formatUtil'
+import { generateUUID, getPathDetails } from '@/utils/formatUtil'
 import { syncEntities } from '@/utils/syncUtil'
 import { isSubgraph } from '@/utils/typeGuardUtil'
 
@@ -320,12 +320,19 @@ export const useWorkflowStore = defineStore('workflow', () => {
     existingWorkflow: ComfyWorkflow,
     path: string
   ): ComfyWorkflow => {
+    // Generate new id when saving existing workflow as a new file
+    const id = generateUUID()
+    const state = JSON.parse(
+      JSON.stringify(existingWorkflow.activeState)
+    ) as ComfyWorkflowJSON
+    state.id = id
+
     const workflow: ComfyWorkflow = new (existingWorkflow.constructor as any)({
       path,
       modified: Date.now(),
       size: -1
     })
-    workflow.originalContent = workflow.content = existingWorkflow.content
+    workflow.originalContent = workflow.content = JSON.stringify(state)
     workflowLookup.value[workflow.path] = workflow
     return workflow
   }
diff --git a/src/renderer/core/canvas/canvasStore.ts b/src/renderer/core/canvas/canvasStore.ts
index 6e09d95a3a..ec38940fe9 100644
--- a/src/renderer/core/canvas/canvasStore.ts
+++ b/src/renderer/core/canvas/canvasStore.ts
@@ -1,8 +1,10 @@
+import { useEventListener, whenever } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
 
 import type { Point, Positionable } from '@/lib/litegraph/src/interfaces'
 import type {
+  LGraph,
   LGraphCanvas,
   LGraphGroup,
   LGraphNode
@@ -94,9 +96,43 @@ export const useCanvasStore = defineStore('canvas', () => {
     appScalePercentage.value = Math.round(newScale * 100)
   }
 
+  const currentGraph = shallowRef<LGraph | null>(null)
+  const isInSubgraph = ref(false)
+
+  // Provide selection state to all Vue nodes
+  const selectedNodeIds = computed(
+    () =>
+      new Set(
+        selectedItems.value
+          .filter((item) => item.id !== undefined)
+          .map((item) => String(item.id))
+      )
+  )
+
+  whenever(
+    () => canvas.value,
+    (newCanvas) => {
+      useEventListener(
+        newCanvas.canvas,
+        'litegraph:set-graph',
+        (event: CustomEvent<{ newGraph: LGraph; oldGraph: LGraph }>) => {
+          const newGraph = event.detail?.newGraph || app.canvas?.graph
+          currentGraph.value = newGraph
+          isInSubgraph.value = Boolean(app.canvas?.subgraph)
+        }
+      )
+
+      useEventListener(newCanvas.canvas, 'subgraph-opened', () => {
+        isInSubgraph.value = true
+      })
+    },
+    { immediate: true }
+  )
+
   return {
     canvas,
     selectedItems,
+    selectedNodeIds,
     nodeSelected,
     groupSelected,
     rerouteSelected,
@@ -105,6 +141,8 @@ export const useCanvasStore = defineStore('canvas', () => {
     getCanvas,
     setAppZoomFromPercentage,
     initScaleSync,
-    cleanupScaleSync
+    cleanupScaleSync,
+    currentGraph,
+    isInSubgraph
   }
 })
diff --git a/src/renderer/core/canvas/injectionKeys.ts b/src/renderer/core/canvas/injectionKeys.ts
deleted file mode 100644
index 5c850c100b..0000000000
--- a/src/renderer/core/canvas/injectionKeys.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-import type { NodeProgressState } from '@/schemas/apiSchema'
-
-/**
- * Injection key for providing selected node IDs to Vue node components.
- * Contains a reactive Set of selected node IDs (as strings).
- */
-export const SelectedNodeIdsKey: InjectionKey<Ref<Set<string>>> =
-  Symbol('selectedNodeIds')
-
-/**
- * Injection key for providing executing node IDs to Vue node components.
- * Contains a reactive Set of currently executing node IDs (as strings).
- */
-export const ExecutingNodeIdsKey: InjectionKey<Ref<Set<string>>> =
-  Symbol('executingNodeIds')
-
-/**
- * Injection key for providing node progress states to Vue node components.
- * Contains a reactive Record of node IDs to their current progress state.
- */
-export const NodeProgressStatesKey: InjectionKey<
-  Ref<Record<string, NodeProgressState>>
-> = Symbol('nodeProgressStates')
diff --git a/src/renderer/core/canvas/links/slotLinkCompatibility.ts b/src/renderer/core/canvas/links/slotLinkCompatibility.ts
new file mode 100644
index 0000000000..b8beffc384
--- /dev/null
+++ b/src/renderer/core/canvas/links/slotLinkCompatibility.ts
@@ -0,0 +1,73 @@
+import { getActivePinia } from 'pinia'
+
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/interfaces'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import type {
+  SlotDragSource,
+  SlotDropCandidate
+} from '@/renderer/core/canvas/links/slotLinkDragState'
+import { app } from '@/scripts/app'
+
+interface CompatibilityResult {
+  allowable: boolean
+  targetNode?: LGraphNode
+  targetSlot?: INodeInputSlot | INodeOutputSlot
+}
+
+function resolveNode(nodeId: NodeId) {
+  const pinia = getActivePinia()
+  const canvasStore = pinia ? useCanvasStore() : null
+  const graph = canvasStore?.canvas?.graph ?? app.canvas?.graph
+  if (!graph) return null
+  const id = typeof nodeId === 'string' ? Number(nodeId) : nodeId
+  if (Number.isNaN(id)) return null
+  return graph.getNodeById(id)
+}
+
+export function evaluateCompatibility(
+  source: SlotDragSource,
+  candidate: SlotDropCandidate
+): CompatibilityResult {
+  if (candidate.layout.nodeId === source.nodeId) {
+    return { allowable: false }
+  }
+
+  const isOutputToInput =
+    source.type === 'output' && candidate.layout.type === 'input'
+  const isInputToOutput =
+    source.type === 'input' && candidate.layout.type === 'output'
+
+  if (!isOutputToInput && !isInputToOutput) {
+    return { allowable: false }
+  }
+
+  const sourceNode = resolveNode(source.nodeId)
+  const targetNode = resolveNode(candidate.layout.nodeId)
+  if (!sourceNode || !targetNode) {
+    return { allowable: false }
+  }
+
+  if (isOutputToInput) {
+    const outputSlot = sourceNode.outputs?.[source.slotIndex]
+    const inputSlot = targetNode.inputs?.[candidate.layout.index]
+    if (!outputSlot || !inputSlot) {
+      return { allowable: false }
+    }
+
+    const allowable = sourceNode.canConnectTo(targetNode, inputSlot, outputSlot)
+    return { allowable, targetNode, targetSlot: inputSlot }
+  }
+
+  const inputSlot = sourceNode.inputs?.[source.slotIndex]
+  const outputSlot = targetNode.outputs?.[candidate.layout.index]
+  if (!inputSlot || !outputSlot) {
+    return { allowable: false }
+  }
+
+  const allowable = targetNode.canConnectTo(sourceNode, inputSlot, outputSlot)
+  return { allowable, targetNode, targetSlot: outputSlot }
+}
diff --git a/src/renderer/core/canvas/links/slotLinkDragState.ts b/src/renderer/core/canvas/links/slotLinkDragState.ts
new file mode 100644
index 0000000000..5d2bbcfc43
--- /dev/null
+++ b/src/renderer/core/canvas/links/slotLinkDragState.ts
@@ -0,0 +1,95 @@
+import { reactive, readonly } from 'vue'
+
+import type { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { Point, SlotLayout } from '@/renderer/core/layout/types'
+
+type SlotDragType = 'input' | 'output'
+
+export interface SlotDragSource {
+  nodeId: string
+  slotIndex: number
+  type: SlotDragType
+  direction: LinkDirection
+  position: Readonly<Point>
+}
+
+export interface SlotDropCandidate {
+  layout: SlotLayout
+  compatible: boolean
+}
+
+interface PointerPosition {
+  client: Point
+  canvas: Point
+}
+
+interface SlotDragState {
+  active: boolean
+  pointerId: number | null
+  source: SlotDragSource | null
+  pointer: PointerPosition
+  candidate: SlotDropCandidate | null
+}
+
+const state = reactive<SlotDragState>({
+  active: false,
+  pointerId: null,
+  source: null,
+  pointer: {
+    client: { x: 0, y: 0 },
+    canvas: { x: 0, y: 0 }
+  },
+  candidate: null
+})
+
+function updatePointerPosition(
+  clientX: number,
+  clientY: number,
+  canvasX: number,
+  canvasY: number
+) {
+  state.pointer.client.x = clientX
+  state.pointer.client.y = clientY
+  state.pointer.canvas.x = canvasX
+  state.pointer.canvas.y = canvasY
+}
+
+function setCandidate(candidate: SlotDropCandidate | null) {
+  state.candidate = candidate
+}
+
+function beginDrag(source: SlotDragSource, pointerId: number) {
+  state.active = true
+  state.source = source
+  state.pointerId = pointerId
+  state.candidate = null
+}
+
+function endDrag() {
+  state.active = false
+  state.pointerId = null
+  state.source = null
+  state.pointer.client.x = 0
+  state.pointer.client.y = 0
+  state.pointer.canvas.x = 0
+  state.pointer.canvas.y = 0
+  state.candidate = null
+}
+
+function getSlotLayout(nodeId: string, slotIndex: number, isInput: boolean) {
+  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
+  return layoutStore.getSlotLayout(slotKey)
+}
+
+export function useSlotLinkDragState() {
+  return {
+    state: readonly(state),
+    beginDrag,
+    endDrag,
+    updatePointerPosition,
+    setCandidate,
+    getSlotLayout
+  }
+}
diff --git a/src/renderer/core/canvas/links/slotLinkPreviewRenderer.ts b/src/renderer/core/canvas/links/slotLinkPreviewRenderer.ts
new file mode 100644
index 0000000000..b69cd9b7a4
--- /dev/null
+++ b/src/renderer/core/canvas/links/slotLinkPreviewRenderer.ts
@@ -0,0 +1,95 @@
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot,
+  ReadOnlyPoint
+} from '@/lib/litegraph/src/interfaces'
+import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
+import { resolveConnectingLinkColor } from '@/lib/litegraph/src/utils/linkColors'
+import {
+  type SlotDragSource,
+  useSlotLinkDragState
+} from '@/renderer/core/canvas/links/slotLinkDragState'
+import type { LinkRenderContext } from '@/renderer/core/canvas/litegraph/litegraphLinkAdapter'
+
+function buildContext(canvas: LGraphCanvas): LinkRenderContext {
+  return {
+    renderMode: canvas.links_render_mode,
+    connectionWidth: canvas.connections_width,
+    renderBorder: canvas.render_connections_border,
+    lowQuality: canvas.low_quality,
+    highQualityRender: canvas.highquality_render,
+    scale: canvas.ds.scale,
+    linkMarkerShape: canvas.linkMarkerShape,
+    renderConnectionArrows: canvas.render_connection_arrows,
+    highlightedLinks: new Set(Object.keys(canvas.highlighted_links)),
+    defaultLinkColor: canvas.default_link_color,
+    linkTypeColors: (canvas.constructor as typeof LGraphCanvas)
+      .link_type_colors,
+    disabledPattern: canvas._pattern
+  }
+}
+
+export function attachSlotLinkPreviewRenderer(canvas: LGraphCanvas) {
+  const originalOnDrawForeground = canvas.onDrawForeground?.bind(canvas)
+  const patched = (
+    ctx: CanvasRenderingContext2D,
+    area: LGraphCanvas['visible_area']
+  ) => {
+    originalOnDrawForeground?.(ctx, area)
+
+    const { state } = useSlotLinkDragState()
+    if (!state.active || !state.source) return
+
+    const { pointer, source } = state
+    const start = source.position
+    const sourceSlot = resolveSourceSlot(canvas, source)
+
+    const linkRenderer = canvas.linkRenderer
+    if (!linkRenderer) return
+
+    const context = buildContext(canvas)
+
+    const from: ReadOnlyPoint = [start.x, start.y]
+    const to: ReadOnlyPoint = [pointer.canvas.x, pointer.canvas.y]
+
+    const startDir = source.direction ?? LinkDirection.RIGHT
+    const endDir = LinkDirection.CENTER
+
+    const colour = resolveConnectingLinkColor(sourceSlot?.type)
+
+    ctx.save()
+
+    linkRenderer.renderDraggingLink(
+      ctx,
+      from,
+      to,
+      colour,
+      startDir,
+      endDir,
+      context
+    )
+
+    ctx.restore()
+  }
+
+  canvas.onDrawForeground = patched
+}
+
+function resolveSourceSlot(
+  canvas: LGraphCanvas,
+  source: SlotDragSource
+): INodeInputSlot | INodeOutputSlot | undefined {
+  const graph = canvas.graph
+  if (!graph) return undefined
+
+  const nodeId = Number(source.nodeId)
+  if (!Number.isFinite(nodeId)) return undefined
+
+  const node = graph.getNodeById(nodeId)
+  if (!node) return undefined
+
+  return source.type === 'output'
+    ? node.outputs?.[source.slotIndex]
+    : node.inputs?.[source.slotIndex]
+}
diff --git a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
index 349ad903b5..1bb3f7dae5 100644
--- a/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
+++ b/src/renderer/core/canvas/litegraph/litegraphLinkAdapter.ts
@@ -7,13 +7,10 @@
  * Maintains backward compatibility with existing litegraph integration.
  */
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { LLink } from '@/lib/litegraph/src/LLink'
+import type { LLink } from '@/lib/litegraph/src/LLink'
 import type { Reroute } from '@/lib/litegraph/src/Reroute'
 import type {
   CanvasColour,
-  INodeInputSlot,
-  INodeOutputSlot,
   ReadOnlyPoint
 } from '@/lib/litegraph/src/interfaces'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -27,7 +24,6 @@ import {
   type ArrowShape,
   CanvasPathRenderer,
   type Direction,
-  type DragLinkData,
   type LinkRenderData,
   type RenderContext as PathRenderContext,
   type Point,
@@ -209,7 +205,6 @@ export class LitegraphLinkAdapter {
       case LinkDirection.DOWN:
         return 'down'
       case LinkDirection.CENTER:
-      case LinkDirection.NONE:
         return 'none'
       default:
         return 'right'
@@ -502,57 +497,33 @@ export class LitegraphLinkAdapter {
     }
   }
 
-  /**
-   * Render a link being dragged from a slot to mouse position
-   * Used during link creation/reconnection
-   */
   renderDraggingLink(
     ctx: CanvasRenderingContext2D,
-    fromNode: LGraphNode | null,
-    fromSlot: INodeOutputSlot | INodeInputSlot,
-    fromSlotIndex: number,
-    toPosition: ReadOnlyPoint,
-    context: LinkRenderContext,
-    options: {
-      fromInput?: boolean
-      color?: CanvasColour
-      disabled?: boolean
-    } = {}
+    from: ReadOnlyPoint,
+    to: ReadOnlyPoint,
+    colour: CanvasColour,
+    startDir: LinkDirection,
+    endDir: LinkDirection,
+    context: LinkRenderContext
   ): void {
-    if (!fromNode) return
-
-    // Get slot position using layout tree if available
-    const slotPos = getSlotPosition(
-      fromNode,
-      fromSlotIndex,
-      options.fromInput || false
+    this.renderLinkDirect(
+      ctx,
+      from,
+      to,
+      null,
+      false,
+      null,
+      colour,
+      startDir,
+      endDir,
+      {
+        ...context,
+        linkMarkerShape: LinkMarkerShape.None
+      },
+      {
+        disabled: false
+      }
     )
-    if (!slotPos) return
-
-    // Get slot direction
-    const slotDir =
-      fromSlot.dir ||
-      (options.fromInput ? LinkDirection.LEFT : LinkDirection.RIGHT)
-
-    // Create drag data
-    const dragData: DragLinkData = {
-      fixedPoint: { x: slotPos[0], y: slotPos[1] },
-      fixedDirection: this.convertDirection(slotDir),
-      dragPoint: { x: toPosition[0], y: toPosition[1] },
-      color: options.color ? String(options.color) : undefined,
-      type: fromSlot.type !== undefined ? String(fromSlot.type) : undefined,
-      disabled: options.disabled || false,
-      fromInput: options.fromInput || false
-    }
-
-    // Convert context
-    const pathContext = this.convertToPathRenderContext(context)
-
-    // Hide center marker when dragging links
-    pathContext.style.showCenterMarker = false
-
-    // Render using pure renderer
-    this.pathRenderer.drawDraggingLink(ctx, dragData, pathContext)
   }
 
   /**
diff --git a/src/renderer/core/canvas/pathRenderer.ts b/src/renderer/core/canvas/pathRenderer.ts
index 29f406cad6..126b98e00e 100644
--- a/src/renderer/core/canvas/pathRenderer.ts
+++ b/src/renderer/core/canvas/pathRenderer.ts
@@ -70,7 +70,7 @@ export interface RenderContext {
   highlightedIds?: Set<string>
 }
 
-export interface DragLinkData {
+interface DragLinkData {
   /** Fixed end - the slot being dragged from */
   fixedPoint: Point
   fixedDirection: Direction
diff --git a/src/composables/graph/useCanvasInteractions.ts b/src/renderer/core/canvas/useCanvasInteractions.ts
similarity index 87%
rename from src/composables/graph/useCanvasInteractions.ts
rename to src/renderer/core/canvas/useCanvasInteractions.ts
index be807b7714..cddc50d087 100644
--- a/src/composables/graph/useCanvasInteractions.ts
+++ b/src/renderer/core/canvas/useCanvasInteractions.ts
@@ -11,12 +11,21 @@ import { app } from '@/scripts/app'
  */
 export function useCanvasInteractions() {
   const settingStore = useSettingStore()
-  const { getCanvas } = useCanvasStore()
+  const canvasStore = useCanvasStore()
+  const { getCanvas } = canvasStore
 
   const isStandardNavMode = computed(
     () => settingStore.get('Comfy.Canvas.NavigationMode') === 'standard'
   )
 
+  /**
+   * Whether Vue node components should handle pointer events.
+   * Returns false when canvas is in read-only/panning mode (e.g., space key held for panning).
+   */
+  const shouldHandleNodePointerEvents = computed(
+    () => !(canvasStore.canvas?.read_only ?? false)
+  )
+
   /**
    * Handles wheel events from UI components that should be forwarded to canvas
    * when appropriate (e.g., Ctrl+wheel for zoom in standard mode)
@@ -97,6 +106,7 @@ export function useCanvasInteractions() {
   return {
     handleWheel,
     handlePointer,
-    forwardEventToCanvas
+    forwardEventToCanvas,
+    shouldHandleNodePointerEvents
   }
 }
diff --git a/src/renderer/core/layout/__tests__/TransformPane.spec.ts b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
index e3519afb59..f6b4f463e0 100644
--- a/src/renderer/core/layout/__tests__/TransformPane.spec.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
@@ -1,97 +1,96 @@
 import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, nextTick } from 'vue'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
 import TransformPane from '../transform/TransformPane.vue'
 
-// Mock the transform state composable
-const mockTransformState = {
-  camera: ref({ x: 0, y: 0, z: 1 }),
-  transformStyle: ref({
+const mockData = vi.hoisted(() => ({
+  mockTransformStyle: {
     transform: 'scale(1) translate(0px, 0px)',
     transformOrigin: '0 0'
-  }),
-  syncWithCanvas: vi.fn(),
-  canvasToScreen: vi.fn(),
-  screenToCanvas: vi.fn(),
-  isNodeInViewport: vi.fn()
-}
-
-vi.mock('@/renderer/core/spatial/useTransformState', () => ({
-  useTransformState: () => mockTransformState
+  },
+  mockCamera: { x: 0, y: 0, z: 1 }
 }))
 
-// Mock requestAnimationFrame/cancelAnimationFrame
-global.requestAnimationFrame = vi.fn((cb) => {
-  setTimeout(cb, 16)
-  return 1
+vi.mock('@/renderer/core/layout/transform/useTransformState', () => {
+  const syncWithCanvas = vi.fn()
+  return {
+    useTransformState: () => ({
+      camera: computed(() => mockData.mockCamera),
+      transformStyle: computed(() => mockData.mockTransformStyle),
+      canvasToScreen: vi.fn(),
+      screenToCanvas: vi.fn(),
+      isNodeInViewport: vi.fn(),
+      syncWithCanvas
+    })
+  }
 })
-global.cancelAnimationFrame = vi.fn()
 
-describe('TransformPane', () => {
-  let wrapper: ReturnType<typeof mount>
-  let mockCanvas: any
-
-  beforeEach(() => {
-    vi.clearAllMocks()
+vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
+  useLOD: vi.fn(() => ({
+    isLOD: false
+  }))
+}))
 
-    // Create mock canvas with LiteGraph interface
-    mockCanvas = {
-      canvas: {
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn()
-      },
-      ds: {
-        offset: [0, 0],
-        scale: 1
-      }
+function createMockCanvas(): LGraphCanvas {
+  return {
+    canvas: {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
     }
+  } as unknown as LGraphCanvas
+}
 
-    // Reset mock transform state
-    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
-    mockTransformState.transformStyle.value = {
-      transform: 'scale(1) translate(0px, 0px)',
-      transformOrigin: '0 0'
-    }
-  })
+describe('TransformPane', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.resetAllMocks()
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount()
-    }
+    // Create mock canvas with LiteGraph interface
   })
 
   describe('component mounting', () => {
     it('should mount successfully with minimal props', () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
       expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="transform-pane"]').exists()).toBe(true)
     })
 
-    it('should apply transform style from composable', () => {
-      mockTransformState.transformStyle.value = {
+    it('should apply transform style from composable', async () => {
+      mockData.mockTransformStyle = {
         transform: 'scale(2) translate(100px, 50px)',
         transformOrigin: '0 0'
       }
 
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
+      await nextTick()
 
-      const transformPane = wrapper.find('.transform-pane')
+      const transformPane = wrapper.find('[data-testid="transform-pane"]')
       const style = transformPane.attributes('style')
       expect(style).toContain('transform: scale(2) translate(100px, 50px)')
     })
 
     it('should render slot content', () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         },
@@ -106,22 +105,9 @@ describe('TransformPane', () => {
   })
 
   describe('RAF synchronization', () => {
-    it('should start RAF sync on mount', async () => {
-      wrapper = mount(TransformPane, {
-        props: {
-          canvas: mockCanvas
-        }
-      })
-
-      await nextTick()
-
-      // Should emit RAF status change to true
-      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
-      expect(wrapper.emitted('rafStatusChange')?.[0]).toEqual([true])
-    })
-
     it('should call syncWithCanvas during RAF updates', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -130,13 +116,15 @@ describe('TransformPane', () => {
       await nextTick()
 
       // Allow RAF to execute
-      await new Promise((resolve) => setTimeout(resolve, 20))
+      vi.advanceTimersToNextFrame()
 
-      expect(mockTransformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
+      const transformState = useTransformState()
+      expect(transformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
     })
 
     it('should emit transform update timing', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -145,34 +133,16 @@ describe('TransformPane', () => {
       await nextTick()
 
       // Allow RAF to execute
-      await new Promise((resolve) => setTimeout(resolve, 20))
+      vi.advanceTimersToNextFrame()
 
       expect(wrapper.emitted('transformUpdate')).toBeTruthy()
-      const updateEvent = wrapper.emitted('transformUpdate')?.[0]
-      expect(typeof updateEvent?.[0]).toBe('number')
-      expect(updateEvent?.[0]).toBeGreaterThanOrEqual(0)
-    })
-
-    it('should stop RAF sync on unmount', async () => {
-      wrapper = mount(TransformPane, {
-        props: {
-          canvas: mockCanvas
-        }
-      })
-
-      await nextTick()
-      wrapper.unmount()
-
-      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
-      const events = wrapper.emitted('rafStatusChange') as any[]
-      expect(events[events.length - 1]).toEqual([false])
-      expect(global.cancelAnimationFrame).toHaveBeenCalled()
     })
   })
 
   describe('canvas event listeners', () => {
     it('should add event listeners to canvas on mount', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -203,7 +173,8 @@ describe('TransformPane', () => {
     })
 
     it('should remove event listeners on unmount', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -237,7 +208,8 @@ describe('TransformPane', () => {
 
   describe('interaction state management', () => {
     it('should apply interacting class during interactions', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
@@ -245,7 +217,7 @@ describe('TransformPane', () => {
 
       // Simulate interaction start by checking internal state
       // Note: This tests the CSS class application logic
-      const transformPane = wrapper.find('.transform-pane')
+      const transformPane = wrapper.find('[data-testid="transform-pane"]')
 
       // Initially should not have interacting class
       expect(transformPane.classes()).not.toContain(
@@ -254,13 +226,14 @@ describe('TransformPane', () => {
     })
 
     it('should handle pointer events for node delegation', async () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
-      const transformPane = wrapper.find('.transform-pane')
+      const transformPane = wrapper.find('[data-testid="transform-pane"]')
 
       // Simulate pointer down - we can't test the exact delegation logic
       // in unit tests due to vue-test-utils limitations, but we can verify
@@ -274,77 +247,32 @@ describe('TransformPane', () => {
 
   describe('transform state integration', () => {
     it('should provide transform utilities to child components', () => {
-      wrapper = mount(TransformPane, {
+      const mockCanvas = createMockCanvas()
+      mount(TransformPane, {
         props: {
           canvas: mockCanvas
         }
       })
 
+      const transformState = useTransformState()
       // The component should provide transform state via Vue's provide/inject
       // This is tested indirectly through the composable integration
-      expect(mockTransformState.syncWithCanvas).toBeDefined()
-      expect(mockTransformState.canvasToScreen).toBeDefined()
-      expect(mockTransformState.screenToCanvas).toBeDefined()
+      expect(transformState.syncWithCanvas).toBeDefined()
+      expect(transformState.canvasToScreen).toBeDefined()
+      expect(transformState.screenToCanvas).toBeDefined()
     })
   })
 
   describe('error handling', () => {
     it('should handle null canvas gracefully', () => {
-      wrapper = mount(TransformPane, {
+      const wrapper = mount(TransformPane, {
         props: {
           canvas: undefined
         }
       })
 
       expect(wrapper.exists()).toBe(true)
-      expect(wrapper.find('.transform-pane').exists()).toBe(true)
-    })
-
-    it('should handle missing canvas properties', () => {
-      const incompleteCanvas = {} as any
-
-      wrapper = mount(TransformPane, {
-        props: {
-          canvas: incompleteCanvas
-        }
-      })
-
-      expect(wrapper.exists()).toBe(true)
-      // Should not throw errors during mount
-    })
-  })
-
-  describe('performance optimizations', () => {
-    it('should use contain CSS property for layout optimization', () => {
-      wrapper = mount(TransformPane, {
-        props: {
-          canvas: mockCanvas
-        }
-      })
-
-      const transformPane = wrapper.find('.transform-pane')
-
-      // This test verifies the CSS contains the performance optimization
-      // Note: In JSDOM, computed styles might not reflect all CSS properties
-      expect(transformPane.element.className).toContain('transform-pane')
-    })
-
-    it('should disable pointer events on container but allow on children', () => {
-      wrapper = mount(TransformPane, {
-        props: {
-          canvas: mockCanvas
-        },
-        slots: {
-          default: '<div data-node-id="test">Test Node</div>'
-        }
-      })
-
-      const transformPane = wrapper.find('.transform-pane')
-
-      // The CSS should handle pointer events optimization
-      // This is primarily a CSS concern, but we verify the structure
-      expect(transformPane.exists()).toBe(true)
-      expect(wrapper.find('[data-node-id="test"]').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="transform-pane"]').exists()).toBe(true)
     })
   })
 })
diff --git a/src/renderer/core/layout/injectionKeys.ts b/src/renderer/core/layout/injectionKeys.ts
index dd6efda21b..8e0e0e1d60 100644
--- a/src/renderer/core/layout/injectionKeys.ts
+++ b/src/renderer/core/layout/injectionKeys.ts
@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-import type { Point } from '@/renderer/core/layout/types'
+import type { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
 /**
  * Lightweight, injectable transform state used by layout-aware components.
@@ -21,29 +21,11 @@ import type { Point } from '@/renderer/core/layout/types'
  * const state = inject(TransformStateKey)!
  * const screen = state.canvasToScreen({ x: 100, y: 50 })
  */
-interface TransformState {
-  /** Convert a screen-space point (CSS pixels) to canvas space. */
-  screenToCanvas: (p: Point) => Point
-  /** Convert a canvas-space point to screen space (CSS pixels). */
-  canvasToScreen: (p: Point) => Point
-  /** Current pan/zoom; `x`/`y` are offsets, `z` is scale. */
-  camera?: { x: number; y: number; z: number }
-  /**
-   * Test whether a node's rectangle intersects the (expanded) viewport.
-   * Handy for viewport culling and lazy work.
-   *
-   * @param nodePos Top-left in canvas space `[x, y]`
-   * @param nodeSize Size in canvas units `[width, height]`
-   * @param viewport Screen-space viewport `{ width, height }`
-   * @param margin Optional fractional margin (e.g. `0.2` = 20%)
-   */
-  isNodeInViewport?: (
-    nodePos: ArrayLike<number>,
-    nodeSize: ArrayLike<number>,
-    viewport: { width: number; height: number },
-    margin?: number
-  ) => boolean
-}
+interface TransformState
+  extends Pick<
+    ReturnType<typeof useTransformState>,
+    'screenToCanvas' | 'canvasToScreen' | 'camera' | 'isNodeInViewport'
+  > {}
 
 export const TransformStateKey: InjectionKey<TransformState> =
   Symbol('transformState')
diff --git a/src/renderer/core/layout/operations/layoutMutations.ts b/src/renderer/core/layout/operations/layoutMutations.ts
index 0c656899d0..f8eb7cfadf 100644
--- a/src/renderer/core/layout/operations/layoutMutations.ts
+++ b/src/renderer/core/layout/operations/layoutMutations.ts
@@ -8,13 +8,13 @@ import log from 'loglevel'
 
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import {
-  LayoutSource,
-  type LinkId,
-  type NodeLayout,
-  type Point,
-  type RerouteId,
-  type Size
+import type { LayoutSource } from '@/renderer/core/layout/types'
+import type {
+  LinkId,
+  NodeLayout,
+  Point,
+  RerouteId,
+  Size
 } from '@/renderer/core/layout/types'
 
 const logger = log.getLogger('LayoutMutations')
diff --git a/src/renderer/core/layout/store/layoutStore.ts b/src/renderer/core/layout/store/layoutStore.ts
index 7daa4523cc..15d4128142 100644
--- a/src/renderer/core/layout/store/layoutStore.ts
+++ b/src/renderer/core/layout/store/layoutStore.ts
@@ -5,7 +5,7 @@
  * CRDT ensures conflict-free operations for both single and multi-user scenarios.
  */
 import log from 'loglevel'
-import { type ComputedRef, type Ref, computed, customRef } from 'vue'
+import { type ComputedRef, type Ref, computed, customRef, ref } from 'vue'
 import * as Y from 'yjs'
 
 import { ACTOR_CONFIG } from '@/renderer/core/layout/constants'
@@ -134,6 +134,9 @@ class LayoutStoreImpl implements LayoutStore {
   private slotSpatialIndex: SpatialIndexManager // For slots
   private rerouteSpatialIndex: SpatialIndexManager // For reroutes
 
+  // Vue dragging state for selection toolbox (public ref for direct mutation)
+  public isDraggingVueNodes = ref(false)
+
   constructor() {
     // Initialize Yjs data structures
     this.ynodes = this.ydoc.getMap('nodes')
@@ -1376,6 +1379,7 @@ class LayoutStoreImpl implements LayoutStore {
 
         this.spatialIndex.update(nodeId, bounds)
         ynode.set('bounds', bounds)
+        ynode.set('position', { x: bounds.x, y: bounds.y })
         ynode.set('size', { width: bounds.width, height: bounds.height })
       }
     }, this.currentActor)
diff --git a/src/renderer/core/layout/sync/useSlotLayoutSync.ts b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
index 55a464140e..281199e8be 100644
--- a/src/renderer/core/layout/sync/useSlotLayoutSync.ts
+++ b/src/renderer/core/layout/sync/useSlotLayoutSync.ts
@@ -7,8 +7,9 @@
 import { onUnmounted } from 'vue'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { type SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
 import { registerNodeSlots } from '@/renderer/core/layout/slots/register'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 
@@ -133,7 +134,11 @@ export function useSlotLayoutSync() {
     restoreHandlers = () => {
       graph.onNodeAdded = origNodeAdded || undefined
       graph.onNodeRemoved = origNodeRemoved || undefined
-      graph.onTrigger = origTrigger || undefined
+      // Only restore onTrigger if Vue nodes are not active
+      // Vue node manager sets its own onTrigger handler
+      if (!LiteGraph.vueNodesMode) {
+        graph.onTrigger = origTrigger || undefined
+      }
       graph.onAfterChange = origAfterChange || undefined
     }
 
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index 70ece647ee..0ed23a90c6 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -1,9 +1,14 @@
 <template>
   <div
-    class="transform-pane"
-    :class="{ 'transform-pane--interacting': isInteracting }"
+    data-testid="transform-pane"
+    :class="
+      cn(
+        'absolute inset-0 w-full h-full pointer-events-none',
+        isInteracting ? 'transform-pane--interacting' : 'will-change-auto',
+        isLOD && 'isLOD'
+      )
+    "
     :style="transformStyle"
-    @pointerdown="handlePointerDown"
   >
     <!-- Vue nodes will be rendered here -->
     <slot />
@@ -11,13 +16,15 @@
 </template>
 
 <script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
 import { computed, provide } from 'vue'
 
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
-import { useCanvasTransformSync } from '@/renderer/core/layout/transform/useCanvasTransformSync'
 import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { cn } from '@/utils/tailwindUtil'
 
 interface TransformPaneProps {
   canvas?: LGraphCanvas
@@ -34,6 +41,8 @@ const {
   isNodeInViewport
 } = useTransformState()
 
+const { isLOD } = useLOD(camera)
+
 const canvasElement = computed(() => props.canvas?.canvas)
 const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
   settleDelay: 200,
@@ -47,46 +56,24 @@ provide(TransformStateKey, {
   isNodeInViewport
 })
 
-const handlePointerDown = (event: PointerEvent) => {
-  const target = event.target as HTMLElement
-  const nodeElement = target.closest('[data-node-id]')
-
-  if (nodeElement) {
-    // TODO: Emit event for node interaction
-    // Node interaction with nodeId will be handled in future implementation
-  }
-}
-
 const emit = defineEmits<{
-  rafStatusChange: [active: boolean]
-  transformUpdate: [time: number]
+  transformUpdate: []
 }>()
 
-useCanvasTransformSync(props.canvas, syncWithCanvas, {
-  onStart: () => emit('rafStatusChange', true),
-  onUpdate: (duration) => emit('transformUpdate', duration),
-  onStop: () => emit('rafStatusChange', false)
-})
+useRafFn(
+  () => {
+    if (!props.canvas) {
+      return
+    }
+    syncWithCanvas(props.canvas)
+    emit('transformUpdate')
+  },
+  { immediate: true }
+)
 </script>
 
 <style scoped>
-.transform-pane {
-  position: absolute;
-  inset: 0;
-  transform-origin: 0 0;
-  pointer-events: none;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
 .transform-pane--interacting {
   will-change: transform;
 }
-
-/* Allow pointer events on nodes */
-.transform-pane :deep([data-node-id]) {
-  pointer-events: auto;
-}
 </style>
diff --git a/src/renderer/core/layout/transform/useCanvasTransformSync.ts b/src/renderer/core/layout/transform/useCanvasTransformSync.ts
deleted file mode 100644
index 4333976f7d..0000000000
--- a/src/renderer/core/layout/transform/useCanvasTransformSync.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { onUnmounted, ref } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-
-interface CanvasTransformSyncOptions {
-  /**
-   * Whether to automatically start syncing when canvas is available
-   * @default true
-   */
-  autoStart?: boolean
-}
-
-interface CanvasTransformSyncCallbacks {
-  /**
-   * Called when sync starts
-   */
-  onStart?: () => void
-  /**
-   * Called after each sync update with timing information
-   */
-  onUpdate?: (duration: number) => void
-  /**
-   * Called when sync stops
-   */
-  onStop?: () => void
-}
-
-/**
- * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
- *
- * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
- * on every frame. It handles RAF lifecycle management, provides performance timing,
- * and ensures proper cleanup.
- *
- * The sync function typically reads canvas.ds (draw state) properties like offset and scale
- * to keep Vue components aligned with the canvas coordinate system.
- *
- * @example
- * ```ts
- * const { isActive, startSync, stopSync } = useCanvasTransformSync(
- *   canvas,
- *   (canvas) => syncWithCanvas(canvas),
- *   {
- *     onStart: () => emit('rafStatusChange', true),
- *     onUpdate: (time) => emit('transformUpdate', time),
- *     onStop: () => emit('rafStatusChange', false)
- *   }
- * )
- * ```
- */
-export function useCanvasTransformSync(
-  canvas: LGraphCanvas | undefined | null,
-  syncFn: (canvas: LGraphCanvas) => void,
-  callbacks: CanvasTransformSyncCallbacks = {},
-  options: CanvasTransformSyncOptions = {}
-) {
-  const { autoStart = true } = options
-  const { onStart, onUpdate, onStop } = callbacks
-
-  const isActive = ref(false)
-  let rafId: number | null = null
-
-  const startSync = () => {
-    if (isActive.value || !canvas) return
-
-    isActive.value = true
-    onStart?.()
-
-    const sync = () => {
-      if (!isActive.value || !canvas) return
-
-      try {
-        const startTime = performance.now()
-        syncFn(canvas)
-        const endTime = performance.now()
-
-        onUpdate?.(endTime - startTime)
-      } catch (error) {
-        console.warn('Canvas transform sync error:', error)
-      }
-
-      rafId = requestAnimationFrame(sync)
-    }
-
-    sync()
-  }
-
-  const stopSync = () => {
-    if (!isActive.value) return
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
-    isActive.value = false
-    onStop?.()
-  }
-
-  // Auto-start if canvas is available and autoStart is enabled
-  if (autoStart && canvas) {
-    startSync()
-  }
-
-  // Clean up on unmount
-  onUnmounted(() => {
-    stopSync()
-  })
-
-  return {
-    isActive,
-    startSync,
-    stopSync
-  }
-}
diff --git a/src/renderer/core/thumbnail/useWorkflowThumbnail.ts b/src/renderer/core/thumbnail/useWorkflowThumbnail.ts
index 7d21aaeb87..ff49ac4720 100644
--- a/src/renderer/core/thumbnail/useWorkflowThumbnail.ts
+++ b/src/renderer/core/thumbnail/useWorkflowThumbnail.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 
 import { createGraphThumbnail } from './graphThumbnailRenderer'
 
diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
index 4f1c0dd8ed..c5bf9aa6c9 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
@@ -1,11 +1,13 @@
 import { useThrottleFn } from '@vueuse/core'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { api } from '@/scripts/api'
 
+import { MinimapDataSourceFactory } from '../data/MinimapDataSourceFactory'
 import type { UpdateFlags } from '../types'
 
 interface GraphCallbacks {
@@ -28,6 +30,9 @@ export function useMinimapGraph(
     viewport: false
   })
 
+  // Track LayoutStore version for change detection
+  const layoutStoreVersion = layoutStore.getVersion()
+
   // Map to store original callbacks per graph ID
   const originalCallbacksMap = new Map<string, GraphCallbacks>()
 
@@ -96,28 +101,30 @@ export function useMinimapGraph(
     let positionChanged = false
     let connectionChanged = false
 
-    if (g._nodes.length !== lastNodeCount.value) {
+    // Use unified data source for change detection
+    const dataSource = MinimapDataSourceFactory.create(g)
+
+    // Check for node count changes
+    const currentNodeCount = dataSource.getNodeCount()
+    if (currentNodeCount !== lastNodeCount.value) {
       structureChanged = true
-      lastNodeCount.value = g._nodes.length
+      lastNodeCount.value = currentNodeCount
     }
 
-    for (const node of g._nodes) {
-      const key = node.id
-      const currentState = `${node.pos[0]},${node.pos[1]},${node.size[0]},${node.size[1]}`
+    // Check for node position/size changes
+    const nodes = dataSource.getNodes()
+    for (const node of nodes) {
+      const nodeId = node.id
+      const currentState = `${node.x},${node.y},${node.width},${node.height}`
 
-      if (nodeStatesCache.get(key) !== currentState) {
+      if (nodeStatesCache.get(nodeId) !== currentState) {
         positionChanged = true
-        nodeStatesCache.set(key, currentState)
+        nodeStatesCache.set(nodeId, currentState)
       }
     }
 
-    const currentLinks = JSON.stringify(g.links || {})
-    if (currentLinks !== linksCache.value) {
-      connectionChanged = true
-      linksCache.value = currentLinks
-    }
-
-    const currentNodeIds = new Set(g._nodes.map((n: LGraphNode) => n.id))
+    // Clean up removed nodes from cache
+    const currentNodeIds = new Set(nodes.map((n) => n.id))
     for (const [nodeId] of nodeStatesCache) {
       if (!currentNodeIds.has(nodeId)) {
         nodeStatesCache.delete(nodeId)
@@ -125,6 +132,13 @@ export function useMinimapGraph(
       }
     }
 
+    // TODO: update when Layoutstore tracks links
+    const currentLinks = JSON.stringify(g.links || {})
+    if (currentLinks !== linksCache.value) {
+      connectionChanged = true
+      linksCache.value = currentLinks
+    }
+
     if (structureChanged || positionChanged) {
       updateFlags.value.bounds = true
       updateFlags.value.nodes = true
@@ -140,6 +154,10 @@ export function useMinimapGraph(
   const init = () => {
     setupEventListeners()
     api.addEventListener('graphChanged', handleGraphChangedThrottled)
+
+    watch(layoutStoreVersion, () => {
+      void handleGraphChangedThrottled()
+    })
   }
 
   const destroy = () => {
diff --git a/src/renderer/extensions/minimap/composables/useMinimapViewport.ts b/src/renderer/extensions/minimap/composables/useMinimapViewport.ts
index da67e5a7ca..0dd4d19df8 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapViewport.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapViewport.ts
@@ -1,13 +1,13 @@
+import { useRafFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import {
   calculateMinimapScale,
-  calculateNodeBounds,
   enforceMinimumBounds
 } from '@/renderer/core/spatial/boundsCalculator'
+import { MinimapDataSourceFactory } from '@/renderer/extensions/minimap/data/MinimapDataSourceFactory'
 
 import type { MinimapBounds, MinimapCanvas, ViewportTransform } from '../types'
 
@@ -53,17 +53,15 @@ export function useMinimapViewport(
   }
 
   const calculateGraphBounds = (): MinimapBounds => {
-    const g = graph.value
-    if (!g || !g._nodes || g._nodes.length === 0) {
-      return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
-    }
+    // Use unified data source
+    const dataSource = MinimapDataSourceFactory.create(graph.value)
 
-    const bounds = calculateNodeBounds(g._nodes)
-    if (!bounds) {
+    if (!dataSource.hasData()) {
       return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
     }
 
-    return enforceMinimumBounds(bounds)
+    const sourceBounds = dataSource.getBounds()
+    return enforceMinimumBounds(sourceBounds)
   }
 
   const calculateScale = () => {
@@ -126,9 +124,8 @@ export function useMinimapViewport(
 
     c.setDirty(true, true)
   }
-
-  const { startSync: startViewportSync, stopSync: stopViewportSync } =
-    useCanvasTransformSync(updateViewport, { autoStart: false })
+  const { resume: startViewportSync, pause: stopViewportSync } =
+    useRafFn(updateViewport)
 
   return {
     bounds: computed(() => bounds.value),
diff --git a/src/renderer/extensions/minimap/data/AbstractMinimapDataSource.ts b/src/renderer/extensions/minimap/data/AbstractMinimapDataSource.ts
new file mode 100644
index 0000000000..4aae340b4e
--- /dev/null
+++ b/src/renderer/extensions/minimap/data/AbstractMinimapDataSource.ts
@@ -0,0 +1,95 @@
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { calculateNodeBounds } from '@/renderer/core/spatial/boundsCalculator'
+
+import type {
+  IMinimapDataSource,
+  MinimapBounds,
+  MinimapGroupData,
+  MinimapLinkData,
+  MinimapNodeData
+} from '../types'
+
+/**
+ * Abstract base class for minimap data sources
+ * Provides common functionality and shared implementation
+ */
+export abstract class AbstractMinimapDataSource implements IMinimapDataSource {
+  constructor(protected graph: LGraph | null) {}
+
+  // Abstract methods that must be implemented by subclasses
+  abstract getNodes(): MinimapNodeData[]
+  abstract getNodeCount(): number
+  abstract hasData(): boolean
+
+  // Shared implementation using calculateNodeBounds
+  getBounds(): MinimapBounds {
+    const nodes = this.getNodes()
+    if (nodes.length === 0) {
+      return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
+    }
+
+    // Convert MinimapNodeData to the format expected by calculateNodeBounds
+    const compatibleNodes = nodes.map((node) => ({
+      pos: [node.x, node.y],
+      size: [node.width, node.height]
+    }))
+
+    const bounds = calculateNodeBounds(compatibleNodes)
+    if (!bounds) {
+      return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
+    }
+
+    return bounds
+  }
+
+  // Shared implementation for groups
+  getGroups(): MinimapGroupData[] {
+    if (!this.graph?._groups) return []
+    return this.graph._groups.map((group) => ({
+      x: group.pos[0],
+      y: group.pos[1],
+      width: group.size[0],
+      height: group.size[1],
+      color: group.color
+    }))
+  }
+
+  // TODO: update when Layoutstore supports links
+  getLinks(): MinimapLinkData[] {
+    if (!this.graph) return []
+    return this.extractLinksFromGraph(this.graph)
+  }
+
+  protected extractLinksFromGraph(graph: LGraph): MinimapLinkData[] {
+    const links: MinimapLinkData[] = []
+    const nodeMap = new Map(this.getNodes().map((n) => [n.id, n]))
+
+    for (const node of graph._nodes) {
+      if (!node.outputs) continue
+
+      const sourceNodeData = nodeMap.get(String(node.id))
+      if (!sourceNodeData) continue
+
+      for (const output of node.outputs) {
+        if (!output.links) continue
+
+        for (const linkId of output.links) {
+          const link = graph.links[linkId]
+          if (!link) continue
+
+          const targetNodeData = nodeMap.get(String(link.target_id))
+          if (!targetNodeData) continue
+
+          links.push({
+            sourceNode: sourceNodeData,
+            targetNode: targetNodeData,
+            sourceSlot: link.origin_slot,
+            targetSlot: link.target_slot
+          })
+        }
+      }
+    }
+
+    return links
+  }
+}
diff --git a/src/renderer/extensions/minimap/data/LayoutStoreDataSource.ts b/src/renderer/extensions/minimap/data/LayoutStoreDataSource.ts
new file mode 100644
index 0000000000..c0daf7030f
--- /dev/null
+++ b/src/renderer/extensions/minimap/data/LayoutStoreDataSource.ts
@@ -0,0 +1,42 @@
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+import type { MinimapNodeData } from '../types'
+import { AbstractMinimapDataSource } from './AbstractMinimapDataSource'
+
+/**
+ * Layout Store data source implementation
+ */
+export class LayoutStoreDataSource extends AbstractMinimapDataSource {
+  getNodes(): MinimapNodeData[] {
+    const allNodes = layoutStore.getAllNodes().value
+    if (allNodes.size === 0) return []
+
+    const nodes: MinimapNodeData[] = []
+
+    for (const [nodeId, layout] of allNodes) {
+      // Find corresponding LiteGraph node for additional properties
+      const graphNode = this.graph?._nodes?.find((n) => String(n.id) === nodeId)
+
+      nodes.push({
+        id: nodeId,
+        x: layout.position.x,
+        y: layout.position.y,
+        width: layout.size.width,
+        height: layout.size.height,
+        bgcolor: graphNode?.bgcolor,
+        mode: graphNode?.mode,
+        hasErrors: graphNode?.has_errors
+      })
+    }
+
+    return nodes
+  }
+
+  getNodeCount(): number {
+    return layoutStore.getAllNodes().value.size
+  }
+
+  hasData(): boolean {
+    return this.getNodeCount() > 0
+  }
+}
diff --git a/src/renderer/extensions/minimap/data/LiteGraphDataSource.ts b/src/renderer/extensions/minimap/data/LiteGraphDataSource.ts
new file mode 100644
index 0000000000..8e1048e750
--- /dev/null
+++ b/src/renderer/extensions/minimap/data/LiteGraphDataSource.ts
@@ -0,0 +1,30 @@
+import type { MinimapNodeData } from '../types'
+import { AbstractMinimapDataSource } from './AbstractMinimapDataSource'
+
+/**
+ * LiteGraph data source implementation
+ */
+export class LiteGraphDataSource extends AbstractMinimapDataSource {
+  getNodes(): MinimapNodeData[] {
+    if (!this.graph?._nodes) return []
+
+    return this.graph._nodes.map((node) => ({
+      id: String(node.id),
+      x: node.pos[0],
+      y: node.pos[1],
+      width: node.size[0],
+      height: node.size[1],
+      bgcolor: node.bgcolor,
+      mode: node.mode,
+      hasErrors: node.has_errors
+    }))
+  }
+
+  getNodeCount(): number {
+    return this.graph?._nodes?.length ?? 0
+  }
+
+  hasData(): boolean {
+    return this.getNodeCount() > 0
+  }
+}
diff --git a/src/renderer/extensions/minimap/data/MinimapDataSourceFactory.ts b/src/renderer/extensions/minimap/data/MinimapDataSourceFactory.ts
new file mode 100644
index 0000000000..49b15ed9e3
--- /dev/null
+++ b/src/renderer/extensions/minimap/data/MinimapDataSourceFactory.ts
@@ -0,0 +1,22 @@
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+import type { IMinimapDataSource } from '../types'
+import { LayoutStoreDataSource } from './LayoutStoreDataSource'
+import { LiteGraphDataSource } from './LiteGraphDataSource'
+
+/**
+ * Factory for creating the appropriate data source
+ */
+export class MinimapDataSourceFactory {
+  static create(graph: LGraph | null): IMinimapDataSource {
+    // Check if LayoutStore has data
+    const layoutStoreHasData = layoutStore.getAllNodes().value.size > 0
+
+    if (layoutStoreHasData) {
+      return new LayoutStoreDataSource(graph)
+    }
+
+    return new LiteGraphDataSource(graph)
+  }
+}
diff --git a/src/renderer/extensions/minimap/minimapCanvasRenderer.ts b/src/renderer/extensions/minimap/minimapCanvasRenderer.ts
index 69528d5c32..3e547ce689 100644
--- a/src/renderer/extensions/minimap/minimapCanvasRenderer.ts
+++ b/src/renderer/extensions/minimap/minimapCanvasRenderer.ts
@@ -1,8 +1,14 @@
-import { LGraph, LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 
-import type { MinimapRenderContext } from './types'
+import { MinimapDataSourceFactory } from './data/MinimapDataSourceFactory'
+import type {
+  IMinimapDataSource,
+  MinimapNodeData,
+  MinimapRenderContext
+} from './types'
 
 /**
  * Get theme-aware colors for the minimap
@@ -24,24 +30,49 @@ function getMinimapColors() {
   }
 }
 
+/**
+ * Get node color based on settings and node properties (Single Responsibility)
+ */
+function getNodeColor(
+  node: MinimapNodeData,
+  settings: MinimapRenderContext['settings'],
+  colors: ReturnType<typeof getMinimapColors>
+): string {
+  if (settings.renderBypass && node.mode === LGraphEventMode.BYPASS) {
+    return colors.bypassColor
+  }
+
+  if (settings.nodeColors) {
+    if (node.bgcolor) {
+      return colors.isLightTheme
+        ? adjustColor(node.bgcolor, { lightness: 0.5 })
+        : node.bgcolor
+    }
+    return colors.nodeColorDefault
+  }
+
+  return colors.nodeColor
+}
+
 /**
  * Render groups on the minimap
  */
 function renderGroups(
   ctx: CanvasRenderingContext2D,
-  graph: LGraph,
+  dataSource: IMinimapDataSource,
   offsetX: number,
   offsetY: number,
   context: MinimapRenderContext,
   colors: ReturnType<typeof getMinimapColors>
 ) {
-  if (!graph._groups || graph._groups.length === 0) return
+  const groups = dataSource.getGroups()
+  if (groups.length === 0) return
 
-  for (const group of graph._groups) {
-    const x = (group.pos[0] - context.bounds.minX) * context.scale + offsetX
-    const y = (group.pos[1] - context.bounds.minY) * context.scale + offsetY
-    const w = group.size[0] * context.scale
-    const h = group.size[1] * context.scale
+  for (const group of groups) {
+    const x = (group.x - context.bounds.minX) * context.scale + offsetX
+    const y = (group.y - context.bounds.minY) * context.scale + offsetY
+    const w = group.width * context.scale
+    const h = group.height * context.scale
 
     let color = colors.groupColor
 
@@ -63,45 +94,34 @@ function renderGroups(
  */
 function renderNodes(
   ctx: CanvasRenderingContext2D,
-  graph: LGraph,
+  dataSource: IMinimapDataSource,
   offsetX: number,
   offsetY: number,
   context: MinimapRenderContext,
   colors: ReturnType<typeof getMinimapColors>
 ) {
-  if (!graph._nodes || graph._nodes.length === 0) return
+  const nodes = dataSource.getNodes()
+  if (nodes.length === 0) return
 
-  // Group nodes by color for batch rendering
+  // Group nodes by color for batch rendering (performance optimization)
   const nodesByColor = new Map<
     string,
     Array<{ x: number; y: number; w: number; h: number; hasErrors?: boolean }>
   >()
 
-  for (const node of graph._nodes) {
-    const x = (node.pos[0] - context.bounds.minX) * context.scale + offsetX
-    const y = (node.pos[1] - context.bounds.minY) * context.scale + offsetY
-    const w = node.size[0] * context.scale
-    const h = node.size[1] * context.scale
-
-    let color = colors.nodeColor
-
-    if (context.settings.renderBypass && node.mode === LGraphEventMode.BYPASS) {
-      color = colors.bypassColor
-    } else if (context.settings.nodeColors) {
-      color = colors.nodeColorDefault
+  for (const node of nodes) {
+    const x = (node.x - context.bounds.minX) * context.scale + offsetX
+    const y = (node.y - context.bounds.minY) * context.scale + offsetY
+    const w = node.width * context.scale
+    const h = node.height * context.scale
 
-      if (node.bgcolor) {
-        color = colors.isLightTheme
-          ? adjustColor(node.bgcolor, { lightness: 0.5 })
-          : node.bgcolor
-      }
-    }
+    const color = getNodeColor(node, context.settings, colors)
 
     if (!nodesByColor.has(color)) {
       nodesByColor.set(color, [])
     }
 
-    nodesByColor.get(color)!.push({ x, y, w, h, hasErrors: node.has_errors })
+    nodesByColor.get(color)!.push({ x, y, w, h, hasErrors: node.hasErrors })
   }
 
   // Batch render nodes by color
@@ -131,13 +151,14 @@ function renderNodes(
  */
 function renderConnections(
   ctx: CanvasRenderingContext2D,
-  graph: LGraph,
+  dataSource: IMinimapDataSource,
   offsetX: number,
   offsetY: number,
   context: MinimapRenderContext,
   colors: ReturnType<typeof getMinimapColors>
 ) {
-  if (!graph || !graph._nodes) return
+  const links = dataSource.getLinks()
+  if (links.length === 0) return
 
   ctx.strokeStyle = colors.linkColor
   ctx.lineWidth = 0.3
@@ -150,41 +171,28 @@ function renderConnections(
     y2: number
   }> = []
 
-  for (const node of graph._nodes) {
-    if (!node.outputs) continue
-
-    const x1 = (node.pos[0] - context.bounds.minX) * context.scale + offsetX
-    const y1 = (node.pos[1] - context.bounds.minY) * context.scale + offsetY
-
-    for (const output of node.outputs) {
-      if (!output.links) continue
-
-      for (const linkId of output.links) {
-        const link = graph.links[linkId]
-        if (!link) continue
-
-        const targetNode = graph.getNodeById(link.target_id)
-        if (!targetNode) continue
-
-        const x2 =
-          (targetNode.pos[0] - context.bounds.minX) * context.scale + offsetX
-        const y2 =
-          (targetNode.pos[1] - context.bounds.minY) * context.scale + offsetY
-
-        const outputX = x1 + node.size[0] * context.scale
-        const outputY = y1 + node.size[1] * context.scale * 0.2
-        const inputX = x2
-        const inputY = y2 + targetNode.size[1] * context.scale * 0.2
-
-        // Draw connection line
-        ctx.beginPath()
-        ctx.moveTo(outputX, outputY)
-        ctx.lineTo(inputX, inputY)
-        ctx.stroke()
+  for (const link of links) {
+    const x1 =
+      (link.sourceNode.x - context.bounds.minX) * context.scale + offsetX
+    const y1 =
+      (link.sourceNode.y - context.bounds.minY) * context.scale + offsetY
+    const x2 =
+      (link.targetNode.x - context.bounds.minX) * context.scale + offsetX
+    const y2 =
+      (link.targetNode.y - context.bounds.minY) * context.scale + offsetY
+
+    const outputX = x1 + link.sourceNode.width * context.scale
+    const outputY = y1 + link.sourceNode.height * context.scale * 0.2
+    const inputX = x2
+    const inputY = y2 + link.targetNode.height * context.scale * 0.2
+
+    // Draw connection line
+    ctx.beginPath()
+    ctx.moveTo(outputX, outputY)
+    ctx.lineTo(inputX, inputY)
+    ctx.stroke()
 
-        connections.push({ x1: outputX, y1: outputY, x2: inputX, y2: inputY })
-      }
-    }
+    connections.push({ x1: outputX, y1: outputY, x2: inputX, y2: inputY })
   }
 
   // Render connection slots on top
@@ -216,8 +224,11 @@ export function renderMinimapToCanvas(
   // Clear canvas
   ctx.clearRect(0, 0, context.width, context.height)
 
+  // Create unified data source (Dependency Inversion)
+  const dataSource = MinimapDataSourceFactory.create(graph)
+
   // Fast path for empty graph
-  if (!graph || !graph._nodes || graph._nodes.length === 0) {
+  if (!dataSource.hasData()) {
     return
   }
 
@@ -227,12 +238,12 @@ export function renderMinimapToCanvas(
 
   // Render in correct order: groups -> links -> nodes
   if (context.settings.showGroups) {
-    renderGroups(ctx, graph, offsetX, offsetY, context, colors)
+    renderGroups(ctx, dataSource, offsetX, offsetY, context, colors)
   }
 
   if (context.settings.showLinks) {
-    renderConnections(ctx, graph, offsetX, offsetY, context, colors)
+    renderConnections(ctx, dataSource, offsetX, offsetY, context, colors)
   }
 
-  renderNodes(ctx, graph, offsetX, offsetY, context, colors)
+  renderNodes(ctx, dataSource, offsetX, offsetY, context, colors)
 }
diff --git a/src/renderer/extensions/minimap/types.ts b/src/renderer/extensions/minimap/types.ts
index fbea21c83e..b458718ea8 100644
--- a/src/renderer/extensions/minimap/types.ts
+++ b/src/renderer/extensions/minimap/types.ts
@@ -2,6 +2,7 @@
  * Minimap-specific type definitions
  */
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 /**
  * Minimal interface for what the minimap needs from the canvas
@@ -66,3 +67,50 @@ export type MinimapSettingsKey =
   | 'Comfy.Minimap.ShowGroups'
   | 'Comfy.Minimap.RenderBypassState'
   | 'Comfy.Minimap.RenderErrorState'
+
+/**
+ * Node data required for minimap rendering
+ */
+export interface MinimapNodeData {
+  id: NodeId
+  x: number
+  y: number
+  width: number
+  height: number
+  bgcolor?: string
+  mode?: number
+  hasErrors?: boolean
+}
+
+/**
+ * Link data required for minimap rendering
+ */
+export interface MinimapLinkData {
+  sourceNode: MinimapNodeData
+  targetNode: MinimapNodeData
+  sourceSlot: number
+  targetSlot: number
+}
+
+/**
+ * Group data required for minimap rendering
+ */
+export interface MinimapGroupData {
+  x: number
+  y: number
+  width: number
+  height: number
+  color?: string
+}
+
+/**
+ * Interface for minimap data sources (Dependency Inversion Principle)
+ */
+export interface IMinimapDataSource {
+  getNodes(): MinimapNodeData[]
+  getLinks(): MinimapLinkData[]
+  getGroups(): MinimapGroupData[]
+  getBounds(): MinimapBounds
+  getNodeCount(): number
+  hasData(): boolean
+}
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 120b246577..26ff64e1ee 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -35,7 +35,7 @@
         v-else
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="w-full h-[352px] object-cover block"
+        class="w-full h-[352px] object-contain block"
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -94,17 +94,20 @@
       </div>
     </div>
 
-    <!-- Image Dimensions -->
-    <div class="text-white text-xs text-center mt-2">
-      <span v-if="imageError" class="text-red-400">
-        {{ $t('g.errorLoadingImage') }}
-      </span>
-      <span v-else-if="isLoading" class="text-gray-400">
-        {{ $t('g.loading') }}...
-      </span>
-      <span v-else>
-        {{ actualDimensions || $t('g.calculatingDimensions') }}
-      </span>
+    <div class="relative">
+      <!-- Image Dimensions -->
+      <div class="text-white text-xs text-center mt-2">
+        <span v-if="imageError" class="text-red-400">
+          {{ $t('g.errorLoadingImage') }}
+        </span>
+        <span v-else-if="isLoading" class="text-gray-400">
+          {{ $t('g.loading') }}...
+        </span>
+        <span v-else>
+          {{ actualDimensions || $t('g.calculatingDimensions') }}
+        </span>
+      </div>
+      <LODFallback />
     </div>
   </div>
 </template>
@@ -119,6 +122,8 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
+import LODFallback from './LODFallback.vue'
+
 interface ImagePreviewProps {
   /** Array of image URLs to display */
   readonly imageUrls: readonly string[]
diff --git a/src/renderer/extensions/vueNodes/components/InputOutputSlot.test.ts b/src/renderer/extensions/vueNodes/components/InputOutputSlot.test.ts
deleted file mode 100644
index d1c886905b..0000000000
--- a/src/renderer/extensions/vueNodes/components/InputOutputSlot.test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { type ComponentMountingOptions, mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import enMessages from '@/locales/en/main.json'
-import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
-
-import InputSlot from './InputSlot.vue'
-import OutputSlot from './OutputSlot.vue'
-
-// Mock composable used by InputSlot/OutputSlot so we can assert call params
-vi.mock(
-  '@/renderer/extensions/vueNodes/composables/useSlotElementTracking',
-  () => ({
-    useSlotElementTracking: vi.fn(() => ({ stop: vi.fn() }))
-  })
-)
-
-type InputSlotProps = ComponentMountingOptions<typeof InputSlot>['props']
-type OutputSlotProps = ComponentMountingOptions<typeof OutputSlot>['props']
-
-const mountInputSlot = (props: InputSlotProps) =>
-  mount(InputSlot, {
-    global: {
-      plugins: [
-        createI18n({
-          legacy: false,
-          locale: 'en',
-          messages: { en: enMessages }
-        }),
-        createPinia()
-      ]
-    },
-    props
-  })
-
-const mountOutputSlot = (props: OutputSlotProps) =>
-  mount(OutputSlot, {
-    global: {
-      plugins: [
-        createI18n({
-          legacy: false,
-          locale: 'en',
-          messages: { en: enMessages }
-        }),
-        createPinia()
-      ]
-    },
-    props
-  })
-
-describe('InputSlot/OutputSlot', () => {
-  beforeEach(() => {
-    vi.mocked(useSlotElementTracking).mockClear()
-  })
-
-  it('InputSlot registers with correct options', () => {
-    mountInputSlot({
-      nodeId: 'node-1',
-      index: 3,
-      slotData: { name: 'A', type: 'any', boundingRect: [0, 0, 0, 0] }
-    })
-
-    expect(useSlotElementTracking).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        nodeId: 'node-1',
-        index: 3,
-        type: 'input'
-      })
-    )
-  })
-
-  it('OutputSlot registers with correct options', () => {
-    mountOutputSlot({
-      nodeId: 'node-2',
-      index: 1,
-      slotData: { name: 'B', type: 'any', boundingRect: [0, 0, 0, 0] }
-    })
-
-    expect(useSlotElementTracking).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        nodeId: 'node-2',
-        index: 1,
-        type: 'output'
-      })
-    )
-  })
-})
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index d7424b082e..1e8387335f 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,37 +1,33 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
-  <div
-    v-else
-    class="lg-slot lg-slot--input flex items-center cursor-crosshair group rounded-r-lg h-6"
-    :class="{
-      'opacity-70': readonly,
-      'lg-slot--connected': connected,
-      'lg-slot--compatible': compatible,
-      'lg-slot--dot-only': dotOnly,
-      'pr-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly
-    }"
-  >
+  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
       class="-translate-x-1/2"
+      v-on="readonly ? {} : { pointerdown: onPointerDown }"
     />
 
     <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.localized_name || slotData.name || `Input ${index}` }}
-    </span>
+    <div class="relative">
+      <span
+        v-if="!dotOnly"
+        class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200 lod-toggle"
+      >
+        {{ slotData.localized_name || slotData.name || `Input ${index}` }}
+      </span>
+      <LODFallback />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
+  type Ref,
   computed,
+  inject,
   onErrorCaptured,
   ref,
   watchEffect
@@ -39,13 +35,17 @@ import {
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
-import { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
+import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
+import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
+import { cn } from '@/utils/tailwindUtil'
 
+import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'
 
 interface InputSlotProps {
-  node?: LGraphNode
+  nodeType?: string
   nodeId?: string
   slotData: INodeSlot
   index: number
@@ -61,6 +61,20 @@ const props = defineProps<InputSlotProps>()
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
 
+const tooltipContainer =
+  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
+const { getInputSlotTooltip, createTooltipConfig } = useNodeTooltips(
+  props.nodeType || '',
+  tooltipContainer
+)
+
+const tooltipConfig = computed(() => {
+  const slotName = props.slotData.localized_name || props.slotData.name || ''
+  const tooltipText = getInputSlotTooltip(slotName)
+  const fallbackText = tooltipText || `Input: ${slotName}`
+  return createTooltipConfig(fallbackText)
+})
+
 onErrorCaptured((error) => {
   renderError.value = error.message
   toastErrorHandler(error)
@@ -70,6 +84,20 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
+const slotWrapperClass = computed(() =>
+  cn(
+    'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
+    props.readonly ? 'cursor-default opacity-70' : 'cursor-crosshair',
+    props.dotOnly
+      ? 'lg-slot--dot-only'
+      : 'pr-6 hover:bg-black/5 hover:dark:bg-white/5',
+    {
+      'lg-slot--connected': props.connected,
+      'lg-slot--compatible': props.compatible
+    }
+  )
+)
+
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)
@@ -88,4 +116,11 @@ useSlotElementTracking({
   type: 'input',
   element: slotElRef
 })
+
+const { onPointerDown } = useSlotLinkInteraction({
+  nodeId: props.nodeId ?? '',
+  index: props.index,
+  type: 'input',
+  readonly: props.readonly
+})
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 1842d61af5..828ee3c8cd 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -4,13 +4,16 @@
   </div>
   <div
     v-else
+    ref="nodeContainerRef"
     :data-node-id="nodeData.id"
     :class="
       cn(
         'bg-white dark-theme:bg-charcoal-800',
         'lg-node absolute rounded-2xl',
         'border border-solid border-sand-100 dark-theme:border-charcoal-600',
-        'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
+        // hover (only when node should handle events)
+        shouldHandleNodePointerEvents &&
+          'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
         'outline-transparent -outline-offset-2 outline-2',
         borderClass,
         outlineClass,
@@ -18,15 +21,19 @@
           'animate-pulse': executing,
           'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0':
             bypassed,
+          'opacity-50 before:rounded-2xl before:pointer-events-none before:absolute before:inset-0':
+            muted,
           'will-change-transform': isDragging
         },
-        lodCssClass,
-        'pointer-events-auto'
+
+        shouldHandleNodePointerEvents
+          ? 'pointer-events-auto'
+          : 'pointer-events-none'
       )
     "
     :style="[
       {
-        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
         zIndex: zIndex
       },
       dragStyle
@@ -34,6 +41,7 @@
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
+    @wheel="handleWheel"
   >
     <div class="flex items-center">
       <template v-if="isCollapsed">
@@ -42,20 +50,18 @@
       </template>
       <!-- Header only updates on title/color changes -->
       <NodeHeader
-        v-memo="[nodeData.title, lodLevel, isCollapsed]"
+        v-memo="[nodeData.title, isCollapsed]"
         :node-data="nodeData"
         :readonly="readonly"
-        :lod-level="lodLevel"
         :collapsed="isCollapsed"
         @collapse="handleCollapse"
-        @update:title="handleTitleUpdate"
+        @update:title="handleHeaderTitleUpdate"
+        @enter-subgraph="handleEnterSubgraph"
       />
     </div>
 
     <div
-      v-if="
-        (isMinimalLOD || isCollapsed) && executing && progress !== undefined
-      "
+      v-if="isCollapsed && executing && progress !== undefined"
       :class="
         cn(
           'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
@@ -65,7 +71,7 @@
       :style="{ width: `${Math.min(progress * 100, 100)}%` }"
     />
 
-    <template v-if="!isMinimalLOD && !isCollapsed">
+    <template v-if="!isCollapsed">
       <div class="mb-4 relative">
         <div :class="separatorClasses" />
         <!-- Progress bar for executing state -->
@@ -89,29 +95,24 @@
       >
         <!-- Slots only rendered at full detail -->
         <NodeSlots
-          v-if="shouldRenderSlots"
-          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
           :node-data="nodeData"
           :readonly="readonly"
-          :lod-level="lodLevel"
-          @slot-click="handleSlotClick"
         />
 
         <!-- Widgets rendered at reduced+ detail -->
         <NodeWidgets
-          v-if="shouldShowWidgets"
-          v-memo="[nodeData.widgets?.length, lodLevel]"
+          v-if="nodeData.widgets?.length"
+          v-memo="[nodeData.widgets?.length]"
           :node-data="nodeData"
           :readonly="readonly"
-          :lod-level="lodLevel"
         />
 
         <!-- Custom content at reduced+ detail -->
         <NodeContent
-          v-if="shouldShowContent"
+          v-if="hasCustomContent"
           :node-data="nodeData"
           :readonly="readonly"
-          :lod-level="lodLevel"
           :image-urls="nodeImageUrls"
         />
         <!-- Live preview image -->
@@ -132,34 +133,30 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  inject,
-  onErrorCaptured,
-  onMounted,
-  provide,
-  ref,
-  toRef,
-  watch
-} from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
+import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
-import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useNodePreviewState'
-import { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
+import {
+  getLocatorIdFromNodeData,
+  getNodeByLocatorId
+} from '@/utils/graphTraversalUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useVueElementTracking } from '../composables/useVueNodeResizeTracking'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
@@ -169,8 +166,6 @@ import SlotConnectionDot from './SlotConnectionDot.vue'
 // Extended props for main node component
 interface LGraphNodeProps {
   nodeData: VueNodeData
-  position?: { x: number; y: number }
-  size?: { width: number; height: number }
   readonly?: boolean
   error?: string | null
   zoomLevel?: number
@@ -178,39 +173,16 @@ interface LGraphNodeProps {
 
 const {
   nodeData,
-  position,
-  size,
   error = null,
-  readonly = false,
-  zoomLevel = 1
+  readonly = false
 } = defineProps<LGraphNodeProps>()
 
-const emit = defineEmits<{
-  'node-click': [
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    wasDragging: boolean
-  ]
-  'slot-click': [
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    slotIndex: number,
-    isInput: boolean
-  ]
-  dragStart: [event: DragEvent, nodeData: VueNodeData]
-  'update:collapsed': [nodeId: string, collapsed: boolean]
-  'update:title': [nodeId: string, newTitle: string]
-}>()
-
-useVueElementTracking(nodeData.id, 'node')
-
-// Inject selection state from parent
-const selectedNodeIds = inject(SelectedNodeIdsKey)
-if (!selectedNodeIds) {
-  throw new Error(
-    'SelectedNodeIds not provided - LGraphNode must be used within a component that provides selection state'
-  )
-}
+const { handleNodeCollapse, handleNodeTitleUpdate, handleNodeSelect } =
+  useNodeEventHandlers()
+
+useVueElementTracking(() => nodeData.id, 'node')
+
+const { selectedNodeIds } = storeToRefs(useCanvasStore())
 
 // Inject transform state for coordinate conversion
 const transformState = inject(TransformStateKey)
@@ -221,7 +193,7 @@ const isSelected = computed(() => {
 })
 
 // Use execution state composable
-const { executing, progress } = useNodeExecutionState(nodeData.id)
+const { executing, progress } = useNodeExecutionState(() => nodeData.id)
 
 // Direct access to execution store for error state
 const executionStore = useExecutionStore()
@@ -230,24 +202,23 @@ const hasExecutionError = computed(
 )
 
 // Computed error states for styling
-const hasAnyError = computed(
-  (): boolean => !!(hasExecutionError.value || nodeData.hasErrors || error)
-)
+const hasAnyError = computed((): boolean => {
+  return !!(
+    hasExecutionError.value ||
+    nodeData.hasErrors ||
+    error ||
+    // Type assertions needed because VueNodeData.inputs/outputs are typed as unknown[]
+    // but at runtime they contain INodeInputSlot/INodeOutputSlot objects
+    nodeData.inputs?.some((slot) => slot?.hasErrors) ||
+    nodeData.outputs?.some((slot) => slot?.hasErrors)
+  )
+})
 
 const bypassed = computed((): boolean => nodeData.mode === 4)
+const muted = computed((): boolean => nodeData.mode === 2) // NEVER mode
 
-// LOD (Level of Detail) system based on zoom level
-const zoomRef = toRef(() => zoomLevel)
-const {
-  lodLevel,
-  shouldRenderWidgets,
-  shouldRenderSlots,
-  shouldRenderContent,
-  lodCssClass
-} = useLOD(zoomRef)
-
-// Computed properties for template usage
-const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+// Use canvas interactions for proper wheel event handling and pointer event capture control
+const { handleWheel, shouldHandleNodePointerEvents } = useCanvasInteractions()
 
 // Error boundary implementation
 const renderError = ref<string | null>(null)
@@ -260,48 +231,28 @@ onErrorCaptured((error) => {
 })
 
 // Use layout system for node position and dragging
+const { position, size, zIndex, resize } = useNodeLayout(() => nodeData.id)
 const {
-  position: layoutPosition,
-  zIndex,
-  startDrag,
-  handleDrag: handleLayoutDrag,
-  endDrag,
-  resize
-} = useNodeLayout(nodeData.id)
+  handlePointerDown,
+  handlePointerUp,
+  handlePointerMove,
+  isDragging,
+  dragStyle
+} = useNodePointerInteractions(() => nodeData, handleNodeSelect)
 
 onMounted(() => {
-  if (size && transformState?.camera) {
+  if (size.value && transformState?.camera) {
     const scale = transformState.camera.z
     const screenSize = {
-      width: size.width * scale,
-      height: size.height * scale
+      width: size.value.width * scale,
+      height: size.value.height * scale
     }
     resize(screenSize)
   }
 })
 
-// Drag state for styling
-const isDragging = ref(false)
-const dragStyle = computed(() => ({
-  cursor: isDragging.value ? 'grabbing' : 'grab'
-}))
-const lastY = ref(0)
-const lastX = ref(0)
-// Treat tiny pointer jitter as a click, not a drag
-const DRAG_THRESHOLD_PX = 4
-
 // Track collapsed state
-const isCollapsed = ref(nodeData.flags?.collapsed ?? false)
-
-// Watch for external changes to the collapsed state
-watch(
-  () => nodeData.flags?.collapsed,
-  (newCollapsed: boolean | undefined) => {
-    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
-      isCollapsed.value = newCollapsed
-    }
-  }
-)
+const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
 
 // Check if node has custom content (like image outputs)
 const hasCustomContent = computed(() => {
@@ -311,29 +262,19 @@ const hasCustomContent = computed(() => {
 
 // Computed classes and conditions for better reusability
 const separatorClasses =
-  'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
+  'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full lod-toggle'
 const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
 
 const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
-  nodeData.id,
+  () => nodeData.id,
   {
-    isMinimalLOD,
     isCollapsed
   }
 )
 
-// Common condition computations to avoid repetition
-const shouldShowWidgets = computed(
-  () => shouldRenderWidgets.value && nodeData.widgets?.length
-)
-
-const shouldShowContent = computed(
-  () => shouldRenderContent.value && hasCustomContent.value
-)
-
 const borderClass = computed(() => {
   if (hasAnyError.value) {
-    return 'border-error'
+    return 'border-error dark-theme:border-error'
   }
   if (executing.value) {
     return 'border-blue-500'
@@ -346,82 +287,61 @@ const outlineClass = computed(() => {
     return undefined
   }
   if (hasAnyError.value) {
-    return 'outline-error'
+    return 'outline-error dark-theme:outline-error'
   }
   if (executing.value) {
-    return 'outline-blue-500'
+    return 'outline-blue-500 dark-theme:outline-blue-500'
   }
   return 'outline-black dark-theme:outline-white'
 })
 
 // Event handlers
-const handlePointerDown = (event: PointerEvent) => {
-  if (!nodeData) {
-    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
-    return
-  }
-
-  // Start drag using layout system
-  isDragging.value = true
-  startDrag(event)
-  lastY.value = event.clientY
-  lastX.value = event.clientX
+const handleCollapse = () => {
+  handleNodeCollapse(nodeData.id, !isCollapsed.value)
 }
 
-const handlePointerMove = (event: PointerEvent) => {
-  if (isDragging.value) {
-    void handleLayoutDrag(event)
-  }
+const handleHeaderTitleUpdate = (newTitle: string) => {
+  handleNodeTitleUpdate(nodeData.id, newTitle)
 }
 
-const handlePointerUp = (event: PointerEvent) => {
-  if (isDragging.value) {
-    isDragging.value = false
-    void endDrag(event)
+const handleEnterSubgraph = () => {
+  const graph = app.graph?.rootGraph || app.graph
+  if (!graph) {
+    console.warn('LGraphNode: No graph available for subgraph navigation')
+    return
   }
-  // Emit node-click for selection handling in GraphCanvas
-  const dx = event.clientX - lastX.value
-  const dy = event.clientY - lastY.value
-  const wasDragging = Math.hypot(dx, dy) > DRAG_THRESHOLD_PX
-  emit('node-click', event, nodeData, wasDragging)
-}
 
-const handleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
-  // Emit event so parent can sync with LiteGraph if needed
-  emit('update:collapsed', nodeData.id, isCollapsed.value)
-}
+  const locatorId = getLocatorIdFromNodeData(nodeData)
 
-const handleSlotClick = (
-  event: PointerEvent,
-  slotIndex: number,
-  isInput: boolean
-) => {
-  if (!nodeData) {
-    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+  const litegraphNode = getNodeByLocatorId(graph, locatorId)
+
+  if (!litegraphNode?.isSubgraphNode() || !('subgraph' in litegraphNode)) {
+    console.warn('LGraphNode: Node is not a valid subgraph node', litegraphNode)
+    return
+  }
+
+  const canvas = app.canvas
+  if (!canvas || typeof canvas.openSubgraph !== 'function') {
+    console.warn('LGraphNode: Canvas or openSubgraph method not available')
     return
   }
-  emit('slot-click', event, nodeData, slotIndex, isInput)
-}
 
-const handleTitleUpdate = (newTitle: string) => {
-  emit('update:title', nodeData.id, newTitle)
+  canvas.openSubgraph(litegraphNode.subgraph)
 }
 
 const nodeOutputs = useNodeOutputStore()
 
-const nodeImageUrls = ref<string[]>([])
-const onNodeOutputsUpdate = (newOutputs: ExecutedWsMessage['output']) => {
-  // Construct proper locator ID using subgraph ID from VueNodeData
-  const locatorId = nodeData.subgraphId
-    ? `${nodeData.subgraphId}:${nodeData.id}`
-    : nodeData.id
+const nodeOutputLocatorId = computed(() =>
+  nodeData.subgraphId ? `${nodeData.subgraphId}:${nodeData.id}` : nodeData.id
+)
+const nodeImageUrls = computed(() => {
+  const newOutputs = nodeOutputs.nodeOutputs[nodeOutputLocatorId.value]
+  const locatorId = getLocatorIdFromNodeData(nodeData)
 
   // Use root graph for getNodeByLocatorId since it needs to traverse from root
   const rootGraph = app.graph?.rootGraph || app.graph
   if (!rootGraph) {
-    nodeImageUrls.value = []
-    return
+    return []
   }
 
   const node = getNodeByLocatorId(rootGraph, locatorId)
@@ -429,26 +349,13 @@ const onNodeOutputsUpdate = (newOutputs: ExecutedWsMessage['output']) => {
   if (node && newOutputs?.images?.length) {
     const urls = nodeOutputs.getNodeImageUrls(node)
     if (urls) {
-      nodeImageUrls.value = urls
+      return urls
     }
-  } else {
-    // Clear URLs if no outputs or no images
-    nodeImageUrls.value = []
   }
-}
-
-const nodeOutputLocatorId = computed(() =>
-  nodeData.subgraphId ? `${nodeData.subgraphId}:${nodeData.id}` : nodeData.id
-)
-
-watch(
-  () => nodeOutputs.nodeOutputs[nodeOutputLocatorId.value],
-  (newOutputs) => {
-    onNodeOutputsUpdate(newOutputs)
-  },
-  { deep: true }
-)
+  // Clear URLs if no outputs or no images
+  return []
+})
 
-// Provide nodeImageUrls to child components
-provide('nodeImageUrls', nodeImageUrls)
+const nodeContainerRef = ref()
+provide('tooltipContainer', nodeContainerRef)
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
new file mode 100644
index 0000000000..a6513f039f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="scale-75">
+    <div
+      class="bg-white dark-theme:bg-charcoal-800 lg-node absolute rounded-2xl border border-solid border-sand-100 dark-theme:border-charcoal-600 outline-transparent -outline-offset-2 outline-2 pointer-events-none"
+    >
+      <NodeHeader :node-data="nodeData" :readonly="readonly" />
+
+      <div
+        class="bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full mb-4"
+      />
+
+      <div class="flex flex-col gap-4 pb-4">
+        <NodeSlots
+          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
+          :node-data="nodeData"
+          :readonly="readonly"
+        />
+
+        <NodeWidgets
+          v-if="nodeData.widgets?.length"
+          v-memo="[nodeData.widgets?.length]"
+          :node-data="nodeData"
+          :readonly="readonly"
+        />
+
+        <NodeContent
+          v-if="hasCustomContent"
+          :node-data="nodeData"
+          :readonly="readonly"
+          :image-urls="nodeImageUrls"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/interfaces'
+import { RenderShape } from '@/lib/litegraph/src/litegraph'
+import NodeContent from '@/renderer/extensions/vueNodes/components/NodeContent.vue'
+import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
+import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
+import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
+import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useWidgetStore } from '@/stores/widgetStore'
+
+const { nodeDef } = defineProps<{
+  nodeDef: ComfyNodeDefV2
+}>()
+
+const widgetStore = useWidgetStore()
+
+// Convert nodeDef into VueNodeData
+const nodeData = computed<VueNodeData>(() => {
+  const widgets = Object.entries(nodeDef.inputs || {})
+    .filter(([_, input]) => widgetStore.inputIsWidget(input))
+    .map(([name, input]) => ({
+      name,
+      type: input.widgetType || input.type,
+      value:
+        input.default !== undefined
+          ? input.default
+          : input.type === 'COMBO' &&
+              Array.isArray(input.options) &&
+              input.options.length > 0
+            ? input.options[0]
+            : undefined,
+      options: {
+        ...input,
+        hidden: input.hidden,
+        advanced: input.advanced,
+        values: input.type === 'COMBO' ? input.options : undefined // For combo widgets
+      }
+    }))
+
+  const inputs: INodeInputSlot[] = Object.entries(nodeDef.inputs || {})
+    .filter(([_, input]) => !widgetStore.inputIsWidget(input))
+    .map(([name, input]) => ({
+      name,
+      type: input.type,
+      shape: input.isOptional ? RenderShape.HollowCircle : undefined,
+      boundingRect: [0, 0, 0, 0],
+      link: null
+    }))
+
+  const outputs: INodeOutputSlot[] = (nodeDef.outputs || []).map((output) => {
+    if (typeof output === 'string') {
+      return {
+        name: output,
+        type: output,
+        boundingRect: [0, 0, 0, 0],
+        links: []
+      }
+    }
+    return {
+      ...output,
+      boundingRect: [0, 0, 0, 0],
+      links: []
+    }
+  })
+
+  return {
+    id: `preview-${nodeDef.name}`,
+    title: nodeDef.display_name || nodeDef.name,
+    type: nodeDef.name,
+    mode: 0, // Normal mode
+    selected: false,
+    executing: false,
+    widgets,
+    inputs,
+    outputs,
+    flags: {
+      collapsed: false
+    }
+  }
+})
+
+const readonly = true
+const hasCustomContent = false
+const nodeImageUrls = ['']
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/LODFallback.vue b/src/renderer/extensions/vueNodes/components/LODFallback.vue
new file mode 100644
index 0000000000..9f77a3de9c
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/LODFallback.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="lod-fallback absolute inset-0 w-full h-full bg-zinc-800"></div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/components/NodeContent.vue b/src/renderer/extensions/vueNodes/components/NodeContent.vue
index 3df38bdf66..9137df4631 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -21,7 +21,6 @@ import { computed, onErrorCaptured, ref } from 'vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
 
 import ImagePreview from './ImagePreview.vue'
 
@@ -29,7 +28,6 @@ interface NodeContentProps {
   node?: LGraphNode // For backwards compatibility
   nodeData?: VueNodeData // New clean data structure
   readonly?: boolean
-  lodLevel?: LODLevel
   imageUrls?: string[]
 }
 
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts b/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts
index 240a51071c..775dd6ba69 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts
@@ -1,12 +1,16 @@
 import { mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
+import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import enMessages from '@/locales/en/main.json'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { Settings } from '@/schemas/apiSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 
 import NodeHeader from './NodeHeader.vue'
 
@@ -24,19 +28,94 @@ const makeNodeData = (overrides: Partial<VueNodeData> = {}): VueNodeData => ({
   ...overrides
 })
 
-const mountHeader = (
-  props?: Partial<InstanceType<typeof NodeHeader>['$props']>
-) => {
+const setupMockStores = () => {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+
+  const settingStore = useSettingStore()
+  const nodeDefStore = useNodeDefStore()
+
+  // Mock tooltip delay setting
+  vi.spyOn(settingStore, 'get').mockImplementation(
+    <K extends keyof Settings>(key: K): Settings[K] => {
+      switch (key) {
+        case 'Comfy.EnableTooltips':
+          return true as Settings[K]
+        case 'LiteGraph.Node.TooltipDelay':
+          return 500 as Settings[K]
+        default:
+          return undefined as Settings[K]
+      }
+    }
+  )
+
+  // Mock node definition store
+  const baseMockNodeDef: ComfyNodeDef = {
+    name: 'KSampler',
+    display_name: 'KSampler',
+    category: 'sampling',
+    python_module: 'test_module',
+    description: 'Advanced sampling node for diffusion models',
+    input: {
+      required: {
+        model: ['MODEL', {}],
+        positive: ['CONDITIONING', {}],
+        negative: ['CONDITIONING', {}]
+      },
+      optional: {},
+      hidden: {}
+    },
+    output: ['LATENT'],
+    output_is_list: [false],
+    output_name: ['samples'],
+    output_node: false,
+    deprecated: false,
+    experimental: false
+  }
+
+  const mockNodeDef = new ComfyNodeDefImpl(baseMockNodeDef)
+
+  vi.spyOn(nodeDefStore, 'nodeDefsByName', 'get').mockReturnValue({
+    KSampler: mockNodeDef
+  })
+
+  return { settingStore, nodeDefStore, pinia }
+}
+
+const createMountConfig = () => {
   const i18n = createI18n({
     legacy: false,
     locale: 'en',
     messages: { en: enMessages }
   })
-  return mount(NodeHeader, {
+
+  const { pinia } = setupMockStores()
+
+  return {
     global: {
-      plugins: [PrimeVue, i18n, createPinia()],
-      components: { InputText }
-    },
+      plugins: [PrimeVue, i18n, pinia],
+      components: { InputText },
+      directives: {
+        tooltip: {
+          mounted: vi.fn(),
+          updated: vi.fn(),
+          unmounted: vi.fn()
+        }
+      },
+      provide: {
+        tooltipContainer: { value: document.createElement('div') }
+      }
+    }
+  }
+}
+
+const mountHeader = (
+  props?: Partial<InstanceType<typeof NodeHeader>['$props']>
+) => {
+  const config = createMountConfig()
+
+  return mount(NodeHeader, {
+    ...config,
     props: {
       nodeData: makeNodeData(),
       readonly: false,
@@ -126,4 +205,68 @@ describe('NodeHeader.vue', () => {
     const collapsedIcon = wrapper.get('i')
     expect(collapsedIcon.classes()).toContain('pi-chevron-right')
   })
+
+  describe('Tooltips', () => {
+    it('applies tooltip directive to node title with correct configuration', () => {
+      const wrapper = mountHeader({
+        nodeData: makeNodeData({ type: 'KSampler' })
+      })
+
+      const titleElement = wrapper.find('[data-testid="node-title"]')
+      expect(titleElement.exists()).toBe(true)
+
+      // Check that v-tooltip directive was applied
+      const directive = wrapper.vm.$el.querySelector(
+        '[data-testid="node-title"]'
+      )
+      expect(directive).toBeTruthy()
+    })
+
+    it('disables tooltip when in readonly mode', () => {
+      const wrapper = mountHeader({
+        readonly: true,
+        nodeData: makeNodeData({ type: 'KSampler' })
+      })
+
+      const titleElement = wrapper.find('[data-testid="node-title"]')
+      expect(titleElement.exists()).toBe(true)
+    })
+
+    it('disables tooltip when editing is active', async () => {
+      const wrapper = mountHeader({
+        nodeData: makeNodeData({ type: 'KSampler' })
+      })
+
+      // Enter edit mode
+      await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+
+      // Tooltip should be disabled during editing
+      const titleElement = wrapper.find('[data-testid="node-title"]')
+      expect(titleElement.exists()).toBe(true)
+    })
+
+    it('creates tooltip configuration when component mounts', () => {
+      const wrapper = mountHeader({
+        nodeData: makeNodeData({ type: 'KSampler' })
+      })
+
+      // Verify tooltip directive is applied to the title element
+      const titleElement = wrapper.find('[data-testid="node-title"]')
+      expect(titleElement.exists()).toBe(true)
+
+      // The tooltip composable should be initialized
+      expect(wrapper.vm).toBeDefined()
+    })
+
+    it('uses tooltip container from provide/inject', () => {
+      const wrapper = mountHeader({
+        nodeData: makeNodeData({ type: 'KSampler' })
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      // Container should be provided through inject
+      const titleElement = wrapper.find('[data-testid="node-title"]')
+      expect(titleElement.exists()).toBe(true)
+    })
+  })
 })
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 286c7ee4bc..d66e00d929 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -4,59 +4,90 @@
   </div>
   <div
     v-else
-    class="lg-node-header flex items-center justify-between p-4 rounded-t-2xl cursor-move"
-    :data-testid="`node-header-${nodeInfo?.id || ''}`"
+    class="lg-node-header p-4 rounded-t-2xl cursor-move"
+    :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <!-- Collapse/Expand Button -->
-    <button
-      v-show="!readonly"
-      class="bg-transparent border-transparent flex items-center"
-      data-testid="node-collapse-button"
-      @click.stop="handleCollapse"
-      @dblclick.stop
-    >
-      <i
-        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
-        class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
-      ></i>
-    </button>
-
-    <!-- Node Title -->
-    <div class="text-sm font-bold truncate flex-1" data-testid="node-title">
-      <EditableText
-        :model-value="displayTitle"
-        :is-editing="isEditing"
-        :input-attrs="{ 'data-testid': 'node-title-input' }"
-        @edit="handleTitleEdit"
-        @cancel="handleTitleCancel"
-      />
+    <div class="flex items-center justify-between relative">
+      <!-- Collapse/Expand Button -->
+      <button
+        v-show="!readonly"
+        class="bg-transparent border-transparent flex items-center lod-toggle"
+        data-testid="node-collapse-button"
+        @click.stop="handleCollapse"
+        @dblclick.stop
+      >
+        <i
+          :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+          class="text-xs leading-none relative top-px text-stone-200 dark-theme:text-slate-300"
+        ></i>
+      </button>
+
+      <!-- Node Title -->
+      <div
+        v-tooltip.top="tooltipConfig"
+        class="text-sm font-bold truncate flex-1 lod-toggle"
+        data-testid="node-title"
+      >
+        <EditableText
+          :model-value="displayTitle"
+          :is-editing="isEditing"
+          :input-attrs="{ 'data-testid': 'node-title-input' }"
+          @edit="handleTitleEdit"
+          @cancel="handleTitleCancel"
+        />
+      </div>
+      <LODFallback />
+    </div>
+
+    <!-- Title Buttons -->
+    <div v-if="!readonly" class="flex items-center lod-toggle">
+      <IconButton
+        v-if="isSubgraphNode"
+        size="sm"
+        type="transparent"
+        class="text-stone-200 dark-theme:text-slate-300"
+        data-testid="subgraph-enter-button"
+        title="Enter Subgraph"
+        @click.stop="handleEnterSubgraph"
+        @dblclick.stop
+      >
+        <i class="pi pi-external-link"></i>
+      </IconButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref, watch } from 'vue'
+import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
 
+import IconButton from '@/components/button/IconButton.vue'
 import EditableText from '@/components/common/EditableText.vue'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { st } from '@/i18n'
+import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
+import { app } from '@/scripts/app'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+import {
+  getLocatorIdFromNodeData,
+  getNodeByLocatorId
+} from '@/utils/graphTraversalUtil'
+
+import LODFallback from './LODFallback.vue'
 
 interface NodeHeaderProps {
-  node?: LGraphNode // For backwards compatibility
-  nodeData?: VueNodeData // New clean data structure
+  nodeData?: VueNodeData
   readonly?: boolean
-  lodLevel?: LODLevel
   collapsed?: boolean
 }
 
-const props = defineProps<NodeHeaderProps>()
+const { nodeData, readonly, collapsed } = defineProps<NodeHeaderProps>()
 
 const emit = defineEmits<{
   collapse: []
   'update:title': [newTitle: string]
+  'enter-subgraph': []
 }>()
 
 // Error boundary implementation
@@ -72,36 +103,67 @@ onErrorCaptured((error) => {
 // Editing state
 const isEditing = ref(false)
 
-const nodeInfo = computed(() => props.nodeData || props.node)
+const tooltipContainer =
+  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
+const { getNodeDescription, createTooltipConfig } = useNodeTooltips(
+  nodeData?.type || '',
+  tooltipContainer
+)
+
+const tooltipConfig = computed(() => {
+  if (readonly || isEditing.value) {
+    return { value: '', disabled: true }
+  }
+  const description = getNodeDescription.value
+  return createTooltipConfig(description)
+})
 
-const resolveTitle = (info: LGraphNode | VueNodeData | undefined) => {
+const resolveTitle = (info: VueNodeData | undefined) => {
   const title = (info?.title ?? '').trim()
   if (title.length > 0) return title
-  const type = (info?.type ?? '').trim()
-  return type.length > 0 ? type : 'Untitled'
+
+  const nodeType = (info?.type ?? '').trim() || 'Untitled'
+  const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name`
+  return st(key, nodeType)
 }
 
 // Local state for title to provide immediate feedback
-const displayTitle = ref(resolveTitle(nodeInfo.value))
+const displayTitle = ref(resolveTitle(nodeData))
 
 // Watch for external changes to the node title or type
 watch(
-  () => [nodeInfo.value?.title, nodeInfo.value?.type] as const,
+  () => [nodeData?.title, nodeData?.type] as const,
   () => {
-    const next = resolveTitle(nodeInfo.value)
+    const next = resolveTitle(nodeData)
     if (next !== displayTitle.value) {
       displayTitle.value = next
     }
   }
 )
 
+// Subgraph detection
+const isSubgraphNode = computed(() => {
+  if (!nodeData?.id) return false
+
+  // Get the underlying LiteGraph node
+  const graph = app.graph?.rootGraph || app.graph
+  if (!graph) return false
+
+  const locatorId = getLocatorIdFromNodeData(nodeData)
+
+  const litegraphNode = getNodeByLocatorId(graph, locatorId)
+
+  // Use the official type guard method
+  return litegraphNode?.isSubgraphNode() ?? false
+})
+
 // Event handlers
 const handleCollapse = () => {
   emit('collapse')
 }
 
 const handleDoubleClick = () => {
-  if (!props.readonly) {
+  if (!readonly) {
     isEditing.value = true
   }
 }
@@ -118,4 +180,8 @@ const handleTitleEdit = (newTitle: string) => {
 const handleTitleCancel = () => {
   isEditing.value = false
 }
+
+const handleEnterSubgraph = () => {
+  emit('enter-subgraph')
+}
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts b/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
index f58e115ad6..ed8bb8ed27 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
@@ -5,6 +5,8 @@ import { type PropType, defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
+import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import NodeSlots from './NodeSlots.vue'
@@ -94,15 +96,17 @@ describe('NodeSlots.vue', () => {
     const inputObjNoWidget = {
       name: 'objNoWidget',
       type: 'number',
-      boundingRect: [0, 0, 0, 0]
+      boundingRect: new Float32Array([0, 0, 0, 0]),
+      link: null
     }
     const inputObjWithWidget = {
       name: 'objWithWidget',
       type: 'number',
-      boundingRect: [0, 0, 0, 0],
-      widget: { name: 'objWithWidget' }
+      boundingRect: new Float32Array([0, 0, 0, 0]),
+      widget: { name: 'objWithWidget' },
+      link: null
     }
-    const inputs = [inputObjNoWidget, inputObjWithWidget, 'stringInput']
+    const inputs: INodeInputSlot[] = [inputObjNoWidget, inputObjWithWidget]
 
     const wrapper = mountSlots(makeNodeData({ inputs }))
 
@@ -143,8 +147,19 @@ describe('NodeSlots.vue', () => {
   })
 
   it('maps outputs and passes correct indexes', () => {
-    const outputObj = { name: 'outA', type: 'any', boundingRect: [0, 0, 0, 0] }
-    const outputs = [outputObj, 'outB']
+    const outputObj = {
+      name: 'outA',
+      type: 'any',
+      boundingRect: new Float32Array([0, 0, 0, 0]),
+      links: []
+    }
+    const outputObjB = {
+      name: 'outB',
+      type: 'any',
+      boundingRect: new Float32Array([0, 0, 0, 0]),
+      links: []
+    }
+    const outputs: INodeOutputSlot[] = [outputObj, outputObjB]
 
     const wrapper = mountSlots(makeNodeData({ outputs }))
     const outputEls = wrapper
@@ -174,7 +189,7 @@ describe('NodeSlots.vue', () => {
 
   it('passes readonly to child slots', () => {
     const wrapper = mountSlots(
-      makeNodeData({ inputs: ['a'], outputs: ['b'] }),
+      makeNodeData({ inputs: [], outputs: [] }),
       /* readonly */ true
     )
     const all = [
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 68f2479321..26187899d1 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -8,7 +8,8 @@
         v-for="(input, index) in filteredInputs"
         :key="`input-${index}`"
         :slot-data="input"
-        :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+        :node-type="nodeData?.type || ''"
+        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
         :index="getActualInputIndex(input, index)"
         :readonly="readonly"
       />
@@ -19,7 +20,8 @@
         v-for="(output, index) in filteredOutputs"
         :key="`output-${index}`"
         :slot-data="output"
-        :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+        :node-type="nodeData?.type || ''"
+        :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
         :index="index"
         :readonly="readonly"
       />
@@ -32,29 +34,24 @@ import { computed, onErrorCaptured, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { isSlotObject } from '@/utils/typeGuardUtil'
 
 import InputSlot from './InputSlot.vue'
 import OutputSlot from './OutputSlot.vue'
 
 interface NodeSlotsProps {
-  node?: LGraphNode // For backwards compatibility
-  nodeData?: VueNodeData // New clean data structure
+  nodeData?: VueNodeData
   readonly?: boolean
-  lodLevel?: LODLevel
 }
 
-const props = defineProps<NodeSlotsProps>()
-
-const nodeInfo = computed(() => props.nodeData || props.node || null)
+const { nodeData = null, readonly } = defineProps<NodeSlotsProps>()
 
 // Filter out input slots that have corresponding widgets
 const filteredInputs = computed(() => {
-  if (!nodeInfo.value?.inputs) return []
+  if (!nodeData?.inputs) return []
 
-  return nodeInfo.value.inputs
+  return nodeData.inputs
     .filter((input) => {
       // Check if this slot has a widget property (indicating it has a corresponding widget)
       if (isSlotObject(input) && 'widget' in input && input.widget) {
@@ -76,7 +73,7 @@ const filteredInputs = computed(() => {
 
 // Outputs don't have widgets, so we don't need to filter them
 const filteredOutputs = computed(() => {
-  const outputs = nodeInfo.value?.outputs || []
+  const outputs = nodeData?.outputs || []
   return outputs.map((output) =>
     isSlotObject(output)
       ? output
@@ -94,10 +91,10 @@ const getActualInputIndex = (
   input: INodeSlot,
   filteredIndex: number
 ): number => {
-  if (!nodeInfo.value?.inputs) return filteredIndex
+  if (!nodeData?.inputs) return filteredIndex
 
   // Find the actual index in the unfiltered inputs array
-  const actualIndex = nodeInfo.value.inputs.findIndex((i) => i === input)
+  const actualIndex = nodeData.inputs.findIndex((i) => i === input)
   return actualIndex !== -1 ? actualIndex : filteredIndex
 }
 
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 0cd7a59cc5..c27cf8976a 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -2,13 +2,27 @@
   <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
     {{ $t('Node Widgets Error') }}
   </div>
-  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
+  <div
+    v-else
+    :class="
+      cn(
+        'lg-node-widgets flex flex-col gap-2 pr-4',
+        shouldHandleNodePointerEvents
+          ? 'pointer-events-auto'
+          : 'pointer-events-none'
+      )
+    "
+    @pointerdown.stop="handleWidgetPointerEvent"
+    @pointermove.stop="handleWidgetPointerEvent"
+    @pointerup.stop="handleWidgetPointerEvent"
+  >
     <div
       v-for="(widget, index) in processedWidgets"
       :key="`widget-${index}-${widget.name}`"
-      class="lg-widget-container relative flex items-center group"
+      class="lg-widget-container flex items-center group"
     >
       <!-- Widget Input Slot Dot -->
+
       <div
         class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
       >
@@ -18,7 +32,7 @@
             type: widget.type,
             boundingRect: [0, 0, 0, 0]
           }"
-          :node-id="nodeInfo?.id != null ? String(nodeInfo.id) : ''"
+          :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :index="getWidgetInputIndex(widget)"
           :readonly="readonly"
           :dot-only="true"
@@ -27,6 +41,7 @@
       <!-- Widget Component -->
       <component
         :is="widget.vueComponent"
+        v-tooltip.left="widget.tooltipConfig"
         :widget="widget.simplified"
         :model-value="widget.value"
         :readonly="readonly"
@@ -38,34 +53,40 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onErrorCaptured, ref } from 'vue'
+import { type Ref, computed, inject, onErrorCaptured, ref } from 'vue'
 
 import type {
   SafeWidgetData,
   VueNodeData
 } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { LODLevel } from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 // Import widget components directly
 import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
 import {
   getComponent,
-  isEssential,
   shouldRenderAsVue
 } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
 import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
 
 import InputSlot from './InputSlot.vue'
 
 interface NodeWidgetsProps {
-  node?: LGraphNode
   nodeData?: VueNodeData
   readonly?: boolean
-  lodLevel?: LODLevel
 }
 
-const props = defineProps<NodeWidgetsProps>()
+const { nodeData, readonly } = defineProps<NodeWidgetsProps>()
+
+const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
+  useCanvasInteractions()
+const handleWidgetPointerEvent = (event: PointerEvent) => {
+  if (!shouldHandleNodePointerEvents.value) {
+    forwardEventToCanvas(event)
+  }
+}
 
 // Error boundary implementation
 const renderError = ref<string | null>(null)
@@ -78,7 +99,13 @@ onErrorCaptured((error) => {
   return false
 })
 
-const nodeInfo = computed(() => props.nodeData || props.node)
+const nodeType = computed(() => nodeData?.type || '')
+const tooltipContainer =
+  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
+const { getWidgetTooltip, createTooltipConfig } = useNodeTooltips(
+  nodeType.value,
+  tooltipContainer
+)
 
 interface ProcessedWidget {
   name: string
@@ -87,34 +114,28 @@ interface ProcessedWidget {
   simplified: SimplifiedWidget
   value: WidgetValue
   updateHandler: (value: unknown) => void
+  tooltipConfig: any
 }
 
 const processedWidgets = computed((): ProcessedWidget[] => {
-  const info = nodeInfo.value
-  if (!info?.widgets) return []
+  if (!nodeData?.widgets) return []
 
-  const widgets = info.widgets as SafeWidgetData[]
-  const lodLevel = props.lodLevel
+  const widgets = nodeData.widgets as SafeWidgetData[]
   const result: ProcessedWidget[] = []
 
-  if (lodLevel === LODLevel.MINIMAL) {
-    return []
-  }
-
   for (const widget of widgets) {
     if (widget.options?.hidden) continue
     if (widget.options?.canvasOnly) continue
     if (!widget.type) continue
     if (!shouldRenderAsVue(widget)) continue
 
-    if (lodLevel === LODLevel.REDUCED && !isEssential(widget.type)) continue
-
     const vueComponent = getComponent(widget.type) || WidgetInputText
 
     const simplified: SimplifiedWidget = {
       name: widget.name,
       type: widget.type,
       value: widget.value,
+      label: widget.label,
       options: widget.options,
       callback: widget.callback
     }
@@ -125,13 +146,17 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       }
     }
 
+    const tooltipText = getWidgetTooltip(widget)
+    const tooltipConfig = createTooltipConfig(tooltipText)
+
     result.push({
       name: widget.name,
       type: widget.type,
       vueComponent,
       simplified,
       value: widget.value,
-      updateHandler
+      updateHandler,
+      tooltipConfig
     })
   }
 
@@ -142,7 +167,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 // or restructuring data model to unify widgets and inputs
 // Map a widget to its corresponding input slot index
 const getWidgetInputIndex = (widget: ProcessedWidget): number => {
-  const inputs = nodeInfo.value?.inputs
+  const inputs = nodeData?.inputs
   if (!inputs) return 0
 
   const idx = inputs.findIndex((input: any) => {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index ae8d4c7410..dceab81111 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -1,30 +1,22 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
-  <div
-    v-else
-    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group rounded-l-lg h-6"
-    :class="{
-      'opacity-70': readonly,
-      'lg-slot--connected': connected,
-      'lg-slot--compatible': compatible,
-      'lg-slot--dot-only': dotOnly,
-      'pl-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly,
-      'justify-center': dotOnly
-    }"
-  >
-    <!-- Slot Name -->
-    <span
-      v-if="!dotOnly"
-      class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200"
-    >
-      {{ slotData.name || `Output ${index}` }}
-    </span>
-
+  <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
+    <div class="relative">
+      <!-- Slot Name -->
+      <span
+        v-if="!dotOnly"
+        class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200 lod-toggle"
+      >
+        {{ slotData.localized_name || slotData.name || `Output ${index}` }}
+      </span>
+      <LODFallback />
+    </div>
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
       class="translate-x-1/2"
+      v-on="readonly ? {} : { pointerdown: onPointerDown }"
     />
   </div>
 </template>
@@ -32,7 +24,9 @@
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
+  type Ref,
   computed,
+  inject,
   onErrorCaptured,
   ref,
   watchEffect
@@ -40,13 +34,17 @@ import {
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
-import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
+import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
+import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
+import { cn } from '@/utils/tailwindUtil'
 
+import LODFallback from './LODFallback.vue'
 import SlotConnectionDot from './SlotConnectionDot.vue'
 
 interface OutputSlotProps {
-  node?: LGraphNode
+  nodeType?: string
   nodeId?: string
   slotData: INodeSlot
   index: number
@@ -63,6 +61,20 @@ const renderError = ref<string | null>(null)
 
 const { toastErrorHandler } = useErrorHandling()
 
+const tooltipContainer =
+  inject<Ref<HTMLElement | undefined>>('tooltipContainer')
+const { getOutputSlotTooltip, createTooltipConfig } = useNodeTooltips(
+  props.nodeType || '',
+  tooltipContainer
+)
+
+const tooltipConfig = computed(() => {
+  const slotName = props.slotData.name || ''
+  const tooltipText = getOutputSlotTooltip(props.index)
+  const fallbackText = tooltipText || `Output: ${slotName}`
+  return createTooltipConfig(fallbackText)
+})
+
 onErrorCaptured((error) => {
   renderError.value = error.message
   toastErrorHandler(error)
@@ -72,6 +84,20 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
+const slotWrapperClass = computed(() =>
+  cn(
+    'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
+    props.readonly ? 'cursor-default opacity-70' : 'cursor-crosshair',
+    props.dotOnly
+      ? 'lg-slot--dot-only justify-center'
+      : 'pl-6 hover:bg-black/5 hover:dark:bg-white/5',
+    {
+      'lg-slot--connected': props.connected,
+      'lg-slot--compatible': props.compatible
+    }
+  )
+)
+
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)
@@ -90,4 +116,11 @@ useSlotElementTracking({
   type: 'output',
   element: slotElRef
 })
+
+const { onPointerDown } = useSlotLinkInteraction({
+  nodeId: props.nodeId ?? '',
+  index: props.index,
+  type: 'output',
+  readonly: props.readonly
+})
 </script>
diff --git a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
index d5b8b1ad8f..85c7ec17d1 100644
--- a/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
+++ b/src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
@@ -24,6 +24,7 @@ defineExpose({
   >
     <div
       ref="slot-el"
+      class="slot-dot"
       :style="{ backgroundColor: color }"
       :class="
         cn(
diff --git a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
index 95c8b40a37..370393e58a 100644
--- a/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
+++ b/src/renderer/extensions/vueNodes/components/widgets/LOD_IMPLEMENTATION_GUIDE.md
@@ -1,295 +1,141 @@
-# Level of Detail (LOD) Implementation Guide for Widgets
-
-## What is Level of Detail (LOD)?
-
-Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
-
-For ComfyUI nodes, this means:
-- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
-- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
-
-## Why LOD Matters
-
-Without LOD optimization:
-- 1000+ nodes with full detail = browser lag and poor performance
-- Text that's too small to read still gets rendered (wasted work)
-- Visual effects that are invisible at distance still consume GPU
-
-With LOD optimization:
-- Smooth performance even with large node graphs
-- Battery life improvement on laptops
-- Better user experience across different zoom levels
-
-## How to Implement LOD in Your Widget
-
-### Step 1: Get the LOD Context
-
-Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
-
-```vue
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
-
-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-  // ... other props
-}>()
-
-// Get LOD information
-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
-</script>
-```
-
-**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
-**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
-
-### Step 2: Choose What to Show at Different Zoom Levels
-
-#### Understanding the LOD Score
-- `lodScore` is a number from 0 to 1
-- 0 = completely zoomed out (show minimal detail)
-- 1 = fully zoomed in (show everything)
-- 0.5 = medium zoom (show some details)
-
-#### Understanding LOD Levels
-- `'minimal'` = zoom level 0.4 or below (very zoomed out)
-- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
-- `'full'` = zoom level 0.8 or above (zoomed in close)
-
-### Step 3: Implement Your Widget's LOD Strategy
-
-Here's a complete example of a slider widget with LOD:
-
-```vue
-<template>
-  <div class="number-widget">
-    <!-- The main control always shows -->
-    <input 
-      v-model="value"
-      type="range"
-      :min="widget.min"
-      :max="widget.max"
-      class="widget-slider"
-    />
-    
-    <!-- Show label only when zoomed in enough to read it -->
-    <label 
-      v-if="showLabel"
-      class="widget-label"
-    >
-      {{ widget.name }}
-    </label>
-    
-    <!-- Show precise value only when fully zoomed in -->
-    <span 
-      v-if="showValue"
-      class="widget-value"
-    >
-      {{ formattedValue }}
-    </span>
-    
-    <!-- Show description only at full detail -->
-    <div 
-      v-if="showDescription && widget.description"
-      class="widget-description"
-    >
-      {{ widget.description }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
-
-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-}>()
-
-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
-
-// Define when to show each element
-const showLabel = computed(() => {
-  // Show label when user can actually read it
-  return lodScore.value > 0.4  // Roughly 12px+ text size
-})
-
-const showValue = computed(() => {
-  // Show precise value only when zoomed in close
-  return lodScore.value > 0.7  // User is focused on this specific widget
-})
-
-const showDescription = computed(() => {
-  // Description only at full detail
-  return lodLevel.value === 'full'  // Maximum zoom level
-})
-
-// You can also use LOD for styling
-const widgetClasses = computed(() => {
-  const classes = ['number-widget']
-  
-  if (lodLevel.value === 'minimal') {
-    classes.push('widget--minimal')
-  }
-  
-  return classes
-})
-</script>
-
-<style scoped>
-/* Apply different styles based on LOD */
-.widget--minimal {
-  /* Simplified appearance when zoomed out */
-  .widget-slider {
-    height: 4px;  /* Thinner slider */
-    opacity: 0.9;
-  }
-}
-
-/* Normal styling */
-.widget-slider {
-  height: 8px;
-  transition: height 0.2s ease;
-}
-
-.widget-label {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.widget-value {
-  font-family: monospace;
-  font-size: 0.7rem;
-  color: var(--text-accent);
-}
-
-.widget-description {
-  font-size: 0.6rem;
-  color: var(--text-muted);
-  margin-top: 4px;
-}
-</style>
-```
-
-## Common LOD Patterns
-
-### Pattern 1: Essential vs. Nice-to-Have
-```typescript
-// Always show the main functionality
-const showMainControl = computed(() => true)
-
-// Granular control with lodScore
-const showLabels = computed(() => lodScore.value > 0.4)
-const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
-
-// Simple control with lodLevel  
-const showExtras = computed(() => lodLevel.value === 'full')
-```
-
-### Pattern 2: Smooth Opacity Transitions
-```typescript
-// Gradually fade elements based on zoom
-const labelOpacity = computed(() => {
-  // Fade in from zoom 0.3 to 0.6
-  return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
-})
-```
-
-### Pattern 3: Progressive Detail
-```typescript
-const detailLevel = computed(() => {
-  if (lodScore.value < 0.3) return 'none'
-  if (lodScore.value < 0.6) return 'basic'
-  if (lodScore.value < 0.8) return 'standard'
-  return 'full'
-})
-```
-
-## LOD Guidelines by Widget Type
-
-### Text Input Widgets
-- **Always show**: The input field itself
-- **Medium zoom**: Show label
-- **High zoom**: Show placeholder text, validation messages
-- **Full zoom**: Show character count, format hints
-
-### Button Widgets  
-- **Always show**: The button
-- **Medium zoom**: Show button text
-- **High zoom**: Show button description
-- **Full zoom**: Show keyboard shortcuts, tooltips
-
-### Selection Widgets (Dropdown, Radio)
-- **Always show**: The current selection
-- **Medium zoom**: Show option labels
-- **High zoom**: Show all options when expanded
-- **Full zoom**: Show option descriptions, icons
-
-### Complex Widgets (Color Picker, File Browser)
-- **Always show**: Simplified representation (color swatch, filename)
-- **Medium zoom**: Show basic controls
-- **High zoom**: Show full interface
-- **Full zoom**: Show advanced options, previews
-
-## Design Collaboration Guidelines
-
-### For Designers
-When designing widgets, consider creating variants for different zoom levels:
-
-1. **Minimal Design** (far away view)
-   - Essential elements only
-   - Higher contrast for visibility
-   - Simplified shapes and fewer details
-
-2. **Standard Design** (normal view)
-   - Balanced detail and simplicity
-   - Clear labels and readable text
-   - Good for most use cases
-
-3. **Full Detail Design** (close-up view)
-   - All labels, descriptions, and help text
-   - Rich visual effects and polish
-   - Maximum information density
-
-### Design Handoff Checklist
-- [ ] Specify which elements are essential vs. nice-to-have
-- [ ] Define minimum readable sizes for text elements
-- [ ] Provide simplified versions for distant viewing
-- [ ] Consider color contrast at different opacity levels
-- [ ] Test designs at multiple zoom levels
-
-## Testing Your LOD Implementation
-
-### Manual Testing
-1. Create a workflow with your widget
-2. Zoom out until nodes are very small
-3. Verify essential functionality still works
-4. Zoom in gradually and check that details appear smoothly
-5. Test performance with 50+ nodes containing your widget
-
-### Performance Considerations
-- Avoid complex calculations in LOD computed properties
-- Use `v-if` instead of `v-show` for elements that won't render
-- Consider using `v-memo` for expensive widget content
-- Test on lower-end devices
-
-### Common Mistakes
-❌ **Don't**: Hide the main widget functionality at any zoom level
-❌ **Don't**: Use complex animations that trigger at every zoom change  
-❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
-❌ **Don't**: Forget to test with real content and edge cases
-
-✅ **Do**: Keep essential functionality always visible
-✅ **Do**: Use smooth transitions between LOD levels
-✅ **Do**: Test with varying content lengths and types
-✅ **Do**: Consider accessibility at all zoom levels
-
-## Getting Help
-
-- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
-- Ask in the ComfyUI frontend Discord for LOD implementation questions
-- Test your changes with the LOD debug panel (top-right in GraphCanvas)
-- Profile performance impact using browser dev tools
\ No newline at end of file
+# ComfyUI Widget LOD System: Architecture and Implementation
+
+## Executive Summary
+
+The ComfyUI widget Level of Detail (LOD) system has evolved from a reactive, Vue-based approach to a CSS-driven, non-reactive implementation. This architectural shift was driven by performance requirements at scale (300-500+ nodes) and a deeper understanding of browser rendering pipelines. The current system prioritizes consistent performance over granular control, leveraging CSS visibility rules rather than component mounting/unmounting.
+
+## The Two Approaches: Reactive vs. Static LOD
+
+### Approach 1: Reactive LOD (Original Design)
+
+The original design envisioned a system where each widget would reactively respond to zoom level changes, controlling its own detail level through Vue's reactivity system. Widgets would import LOD utilities, compute what to show based on zoom level, and conditionally render elements using `v-if` and `v-show` directives.
+
+**The promise of this approach was compelling:** widgets could intelligently manage their complexity, progressively revealing detail as users zoomed in, much like how mapping applications work. Developers would have fine-grained control over performance optimization.
+
+### Approach 2: Static LOD with CSS (Current Implementation)
+
+The implemented system takes a fundamentally different approach. All widget content is loaded and remains in the DOM at all times. Visual simplification happens through CSS rules, primarily using `visibility: hidden` and simplified visual representations (gray rectangles) at distant zoom levels. No reactive updates occur when zoom changes—only CSS rules apply differently.
+
+**This approach seems counterintuitive at first:** aren't we wasting resources by keeping everything loaded? The answer reveals a deeper truth about modern browser rendering.
+
+## The GPU Texture Bottleneck
+
+The key insight driving the current architecture comes from understanding how browsers handle CSS transforms:
+
+When you apply a CSS transform to a parent element (the "transformpane" in ComfyUI's case), the browser promotes that entire subtree to a compositor layer. This creates a single GPU texture containing all the transformed content. Here's where traditional performance intuitions break down:
+
+### Traditional Assumption
+
+"If we render less content, we get better performance. Therefore, hiding complex widgets should improve zoom/pan performance."
+
+### Actual Browser Behavior
+
+When all nodes are children of a single transformed parent:
+
+1. The browser creates one large GPU texture for the entire node graph
+2. The texture dimensions are determined by the bounding box of all content
+3. Whether individual pixels are simple (solid rectangles) or complex (detailed widgets) has minimal impact
+4. The performance bottleneck is the texture size itself, not the complexity of rasterization
+
+This means that even if we reduce every node to a simple gray rectangle, we're still paying the cost of a massive GPU texture when viewing hundreds of nodes simultaneously. The texture dimensions remain the same whether it contains simple or complex content.
+
+## Two Distinct Performance Concerns
+
+The analysis reveals two often-conflated performance considerations that should be understood separately:
+
+### 1. Rendering Performance
+
+**Question:** How fast can the browser paint and composite the node graph during interactions?
+
+**Traditional thinking:** Show less content → render faster  
+**Reality with CSS transforms:** GPU texture size dominates performance, not content complexity
+
+The CSS transform approach means that zoom, pan, and drag operations are already optimized—they're just transforming an existing GPU texture. The cost is in the initial rasterization and texture upload, which happens regardless of content complexity when texture dimensions are fixed.
+
+### 2. Memory and Lifecycle Management
+
+**Question:** How much memory do widget instances consume, and what's the cost of maintaining them?
+
+This is where unmounting widgets might theoretically help:
+
+- Complex widgets (3D viewers, chart renderers) might hold significant memory
+- Event listeners and reactive watchers consume resources
+- Some widgets might run background processes or animations
+
+However, the cost of mounting/unmounting hundreds of widgets on zoom changes could create worse performance problems than the memory savings provide. Vue's virtual DOM diffing for hundreds of nodes is expensive, potentially causing noticeable lag during zoom transitions.
+
+## Design Philosophy and Trade-offs
+
+The current CSS-based approach makes several deliberate trade-offs:
+
+### What We Optimize For
+
+1. **Consistent, predictable performance** - No reactivity means no sudden performance cliffs
+2. **Smooth zoom/pan interactions** - CSS transforms are hardware-accelerated
+3. **Simple widget development** - Widget authors don't need to implement LOD logic
+4. **Reliable state preservation** - Widgets never lose state from unmounting
+
+### What We Accept
+
+1. **Higher baseline memory usage** - All widgets remain mounted
+2. **Less granular control** - Widgets can't optimize their own LOD behavior
+3. **Potential waste for exotic widgets** - A 3D renderer widget still runs when hidden
+
+## Open Questions and Future Considerations
+
+### Should widgets have any LOD control?
+
+The current system provides a uniform gray rectangle fallback with CSS visibility hiding. This works for 99% of widgets, but raises questions:
+
+**Scenario:** A widget renders a complex 3D scene or runs expensive computations  
+**Current behavior:** Hidden via CSS but still mounted  
+**Question:** Should such widgets be able to opt into unmounting at distance?
+
+The challenge is that introducing selective unmounting would require:
+
+- Maintaining widget state across mount/unmount cycles
+- Accepting the performance cost of remounting when zooming in
+- Adding complexity to the widget API
+
+### Could we reduce GPU texture size?
+
+Since texture dimensions are the limiting factor, could we:
+
+- Use multiple compositor layers for different regions (chunk the transformpane)?
+- Render the nodes using the canvas fallback when 500+ nodes and < 30% zoom.
+
+These approaches would require significant architectural changes and might introduce their own performance trade-offs.
+
+### Is there a hybrid approach?
+
+Could we identify specific threshold scenarios where reactive LOD makes sense?
+
+- When node count is low (< 50 nodes)
+- For specifically registered "expensive" widgets
+- At extreme zoom levels only
+
+## Implementation Guidelines
+
+Given the current architecture, here's how to work within the system:
+
+### For Widget Developers
+
+1. **Build widgets assuming they're always visible** - Don't rely on mount/unmount for cleanup
+2. **Use CSS classes for zoom-responsive styling** - Let CSS handle visual changes
+3. **Minimize background processing** - Assume your widget is always running
+4. **Consider requestAnimationFrame throttling** - For animations that won't be visible when zoomed out
+
+### For System Architects
+
+1. **Monitor GPU memory usage** - The single texture approach has memory implications
+2. **Consider viewport culling** - Not rendering off-screen nodes could reduce texture size
+3. **Profile real-world workflows** - Theoretical performance differs from actual usage patterns
+4. **Document the architecture clearly** - The non-obvious performance characteristics need explanation
+
+## Conclusion
+
+The ComfyUI LOD system represents a pragmatic choice: accepting higher memory usage and less granular control in exchange for predictable performance and implementation simplicity. By understanding that GPU texture dimensions—not rasterization complexity—drive performance in a CSS-transform-based architecture, the team has chosen an approach that may seem counterintuitive but actually aligns with browser rendering realities.
+
+The system works well for the common case of hundreds of relatively simple widgets. Edge cases involving genuinely expensive widgets may need future consideration, but the current approach provides a solid foundation that avoids the performance pitfalls of reactive LOD at scale.
+
+The key insight—that showing less doesn't necessarily mean rendering faster when everything lives in a single GPU texture—challenges conventional web performance wisdom and demonstrates the importance of understanding the full rendering pipeline when making architectural decisions.
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
index 8446496764..6adee1e894 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
@@ -8,19 +8,19 @@
  * - Layout mutations for visual feedback
  * - Integration with LiteGraph canvas selection system
  */
-import type { Ref } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 
-interface NodeManager {
-  getNode: (id: string) => any
-}
-
-export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
+function useNodeEventHandlersIndividual() {
   const canvasStore = useCanvasStore()
+  const { nodeManager } = useVueNodeLifecycle()
   const { bringNodeToFront } = useNodeZIndex()
+  const { shouldHandleNodePointerEvents } = useCanvasInteractions()
 
   /**
    * Handle node selection events
@@ -31,12 +31,14 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     nodeData: VueNodeData,
     wasDragging: boolean
   ) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
     if (!node) return
 
-    const isMultiSelect = event.ctrlKey || event.metaKey
+    const isMultiSelect = event.ctrlKey || event.metaKey || event.shiftKey
 
     if (isMultiSelect) {
       // Ctrl/Cmd+click -> toggle selection
@@ -69,6 +71,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Uses LiteGraph's native collapse method for proper state management
    */
   const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeId)
@@ -86,6 +90,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Updates the title in LiteGraph for persistence across sessions
    */
   const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeId)
@@ -103,6 +109,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     event: PointerEvent,
     nodeData: VueNodeData
   ) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -123,6 +131,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Integrates with LiteGraph's context menu system
    */
   const handleNodeRightClick = (event: PointerEvent, nodeData: VueNodeData) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -145,6 +155,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Prepares node for dragging and sets appropriate visual state
    */
   const handleNodeDragStart = (event: DragEvent, nodeData: VueNodeData) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -173,6 +185,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Useful for selection toolbox or area selection
    */
   const selectNodes = (nodeIds: string[], addToSelection = false) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     if (!addToSelection) {
@@ -193,6 +207,8 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Deselect specific nodes
    */
   const deselectNodes = (nodeIds: string[]) => {
+    if (!shouldHandleNodePointerEvents.value) return
+
     if (!canvasStore.canvas || !nodeManager.value) return
 
     nodeIds.forEach((nodeId) => {
@@ -219,3 +235,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     deselectNodes
   }
 }
+
+export const useNodeEventHandlers = createSharedComposable(
+  useNodeEventHandlersIndividual
+)
diff --git a/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
new file mode 100644
index 0000000000..f5ba083742
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useNodePointerInteractions.ts
@@ -0,0 +1,93 @@
+import { type MaybeRefOrGetter, computed, ref, toValue } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
+
+// Treat tiny pointer jitter as a click, not a drag
+const DRAG_THRESHOLD_PX = 4
+
+export function useNodePointerInteractions(
+  nodeDataMaybe: MaybeRefOrGetter<VueNodeData>,
+  onPointerUp: (
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    wasDragging: boolean
+  ) => void
+) {
+  const nodeData = toValue(nodeDataMaybe)
+
+  const { startDrag, endDrag, handleDrag } = useNodeLayout(nodeData.id)
+  // Use canvas interactions for proper wheel event handling and pointer event capture control
+  const { forwardEventToCanvas, shouldHandleNodePointerEvents } =
+    useCanvasInteractions()
+
+  // Drag state for styling
+  const isDragging = ref(false)
+  const dragStyle = computed(() => ({
+    cursor: isDragging.value ? 'grabbing' : 'grab'
+  }))
+  const lastX = ref(0)
+  const lastY = ref(0)
+
+  const handlePointerDown = (event: PointerEvent) => {
+    if (!nodeData) {
+      console.warn(
+        'LGraphNode: nodeData is null/undefined in handlePointerDown'
+      )
+      return
+    }
+
+    // Don't handle pointer events when canvas is in panning mode - forward to canvas instead
+    if (!shouldHandleNodePointerEvents.value) {
+      forwardEventToCanvas(event)
+      return
+    }
+
+    // Start drag using layout system
+    isDragging.value = true
+
+    // Set Vue node dragging state for selection toolbox
+    layoutStore.isDraggingVueNodes.value = true
+
+    startDrag(event)
+    lastY.value = event.clientY
+    lastX.value = event.clientX
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (isDragging.value) {
+      void handleDrag(event)
+    }
+  }
+
+  const handlePointerUp = (event: PointerEvent) => {
+    if (isDragging.value) {
+      isDragging.value = false
+      void endDrag(event)
+
+      // Clear Vue node dragging state for selection toolbox
+      layoutStore.isDraggingVueNodes.value = false
+    }
+
+    // Don't emit node-click when canvas is in panning mode - forward to canvas instead
+    if (!shouldHandleNodePointerEvents.value) {
+      forwardEventToCanvas(event)
+      return
+    }
+
+    // Emit node-click for selection handling in GraphCanvas
+    const dx = event.clientX - lastX.value
+    const dy = event.clientY - lastY.value
+    const wasDragging = Math.hypot(dx, dy) > DRAG_THRESHOLD_PX
+    onPointerUp(event, nodeData, wasDragging)
+  }
+  return {
+    isDragging,
+    dragStyle,
+    handlePointerMove,
+    handlePointerDown,
+    handlePointerUp
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
new file mode 100644
index 0000000000..6fbfb9733f
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts
@@ -0,0 +1,120 @@
+import { type MaybeRef, type Ref, computed, unref } from 'vue'
+
+import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager'
+import { st } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+/**
+ * Composable for managing Vue node tooltips
+ * Provides tooltip text for node headers, slots, and widgets
+ */
+export function useNodeTooltips(
+  nodeType: MaybeRef<string>,
+  containerRef?: Ref<HTMLElement | undefined>
+) {
+  const nodeDefStore = useNodeDefStore()
+  const settingsStore = useSettingStore()
+
+  // Check if tooltips are globally enabled
+  const tooltipsEnabled = computed(() =>
+    settingsStore.get('Comfy.EnableTooltips')
+  )
+
+  // Get node definition for tooltip data
+  const nodeDef = computed(() => nodeDefStore.nodeDefsByName[unref(nodeType)])
+
+  /**
+   * Get tooltip text for node description (header hover)
+   */
+  const getNodeDescription = computed(() => {
+    if (!tooltipsEnabled.value || !nodeDef.value) return ''
+
+    const key = `nodeDefs.${normalizeI18nKey(unref(nodeType))}.description`
+    return st(key, nodeDef.value.description || '')
+  })
+
+  /**
+   * Get tooltip text for input slots
+   */
+  const getInputSlotTooltip = (slotName: string) => {
+    if (!tooltipsEnabled.value || !nodeDef.value) return ''
+
+    const key = `nodeDefs.${normalizeI18nKey(unref(nodeType))}.inputs.${normalizeI18nKey(slotName)}.tooltip`
+    const inputTooltip = nodeDef.value.inputs?.[slotName]?.tooltip ?? ''
+    return st(key, inputTooltip)
+  }
+
+  /**
+   * Get tooltip text for output slots
+   */
+  const getOutputSlotTooltip = (slotIndex: number) => {
+    if (!tooltipsEnabled.value || !nodeDef.value) return ''
+
+    const key = `nodeDefs.${normalizeI18nKey(unref(nodeType))}.outputs.${slotIndex}.tooltip`
+    const outputTooltip = nodeDef.value.outputs?.[slotIndex]?.tooltip ?? ''
+    return st(key, outputTooltip)
+  }
+
+  /**
+   * Get tooltip text for widgets
+   */
+  const getWidgetTooltip = (widget: SafeWidgetData) => {
+    if (!tooltipsEnabled.value || !nodeDef.value) return ''
+
+    // First try widget-specific tooltip
+    const widgetTooltip = (widget as { tooltip?: string }).tooltip
+    if (widgetTooltip) return widgetTooltip
+
+    // Then try input-based tooltip lookup
+    const key = `nodeDefs.${normalizeI18nKey(unref(nodeType))}.inputs.${normalizeI18nKey(widget.name)}.tooltip`
+    const inputTooltip = nodeDef.value.inputs?.[widget.name]?.tooltip ?? ''
+    return st(key, inputTooltip)
+  }
+
+  /**
+   * Create tooltip configuration object for v-tooltip directive
+   */
+  const createTooltipConfig = (text: string) => {
+    const tooltipDelay = settingsStore.get('LiteGraph.Node.TooltipDelay')
+    const tooltipText = text || ''
+
+    const config: {
+      value: string
+      showDelay: number
+      disabled: boolean
+      appendTo?: HTMLElement
+      pt?: any
+    } = {
+      value: tooltipText,
+      showDelay: tooltipDelay as number,
+      disabled: !tooltipsEnabled.value || !tooltipText,
+      pt: {
+        text: {
+          class:
+            'bg-pure-white dark-theme:bg-charcoal-800 border dark-theme:border-slate-300 rounded-md px-4 py-2 text-charcoal-700 dark-theme:text-pure-white text-sm font-normal leading-tight max-w-75 shadow-none'
+        },
+        arrow: {
+          class: 'before:border-slate-300'
+        }
+      }
+    }
+
+    // If we have a container reference, append tooltips to it
+    if (containerRef?.value) {
+      config.appendTo = containerRef.value
+    }
+
+    return config
+  }
+
+  return {
+    tooltipsEnabled,
+    getNodeDescription,
+    getInputSlotTooltip,
+    getOutputSlotTooltip,
+    getWidgetTooltip,
+    createTooltipConfig
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
index 24f9ee8073..4b6cbf8117 100644
--- a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
@@ -150,7 +150,6 @@ export function useSlotElementTracking(options: {
       (el) => {
         if (!el) return
 
-        // Ensure node entry
         const node = nodeSlotRegistryStore.ensureNode(nodeId)
 
         if (!node.stopWatch) {
@@ -184,6 +183,8 @@ export function useSlotElementTracking(options: {
 
         // Register slot
         const slotKey = getSlotKey(nodeId, index, type === 'input')
+
+        el.dataset.slotKey = slotKey
         node.slots.set(slotKey, { el, index, type })
 
         // Seed initial sync from DOM
@@ -203,12 +204,15 @@ export function useSlotElementTracking(options: {
 
     // Remove this slot from registry and layout
     const slotKey = getSlotKey(nodeId, index, type === 'input')
-    node.slots.delete(slotKey)
+    const entry = node.slots.get(slotKey)
+    if (entry) {
+      delete entry.el.dataset.slotKey
+      node.slots.delete(slotKey)
+    }
     layoutStore.deleteSlotLayout(slotKey)
 
     // If node has no more slots, clean up
     if (node.slots.size === 0) {
-      // Stop the node-level watcher when the last slot is gone
       if (node.stopWatch) node.stopWatch()
       nodeSlotRegistryStore.deleteNode(nodeId)
     }
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
new file mode 100644
index 0000000000..f82deab7de
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
@@ -0,0 +1,247 @@
+import { type Fn, useEventListener } from '@vueuse/core'
+import { onBeforeUnmount } from 'vue'
+
+import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
+import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
+import { evaluateCompatibility } from '@/renderer/core/canvas/links/slotLinkCompatibility'
+import {
+  type SlotDropCandidate,
+  useSlotLinkDragState
+} from '@/renderer/core/canvas/links/slotLinkDragState'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { SlotLayout } from '@/renderer/core/layout/types'
+import { app } from '@/scripts/app'
+
+interface SlotInteractionOptions {
+  nodeId: string
+  index: number
+  type: 'input' | 'output'
+  readonly?: boolean
+}
+
+interface SlotInteractionHandlers {
+  onPointerDown: (event: PointerEvent) => void
+}
+
+interface PointerSession {
+  begin: (pointerId: number) => void
+  register: (...stops: Array<Fn | null | undefined>) => void
+  matches: (event: PointerEvent) => boolean
+  isActive: () => boolean
+  clear: () => void
+}
+
+function createPointerSession(): PointerSession {
+  let pointerId: number | null = null
+  let stops: Fn[] = []
+
+  const begin = (id: number) => {
+    pointerId = id
+  }
+
+  const register = (...newStops: Array<Fn | null | undefined>) => {
+    for (const stop of newStops) {
+      if (typeof stop === 'function') {
+        stops.push(stop)
+      }
+    }
+  }
+
+  const matches = (event: PointerEvent) =>
+    pointerId !== null && event.pointerId === pointerId
+
+  const isActive = () => pointerId !== null
+
+  const clear = () => {
+    for (const stop of stops) {
+      stop()
+    }
+    stops = []
+    pointerId = null
+  }
+
+  return { begin, register, matches, isActive, clear }
+}
+
+export function useSlotLinkInteraction({
+  nodeId,
+  index,
+  type,
+  readonly
+}: SlotInteractionOptions): SlotInteractionHandlers {
+  if (readonly) {
+    return {
+      onPointerDown: () => {}
+    }
+  }
+
+  const { state, beginDrag, endDrag, updatePointerPosition } =
+    useSlotLinkDragState()
+
+  function candidateFromTarget(
+    target: EventTarget | null
+  ): SlotDropCandidate | null {
+    if (!(target instanceof HTMLElement)) return null
+    const key = target.dataset['slotKey']
+    if (!key) return null
+
+    const layout = layoutStore.getSlotLayout(key)
+    if (!layout) return null
+
+    const candidate: SlotDropCandidate = { layout, compatible: false }
+
+    if (state.source) {
+      candidate.compatible = evaluateCompatibility(
+        state.source,
+        candidate
+      ).allowable
+    }
+
+    return candidate
+  }
+
+  const conversion = useSharedCanvasPositionConversion()
+
+  const pointerSession = createPointerSession()
+
+  const cleanupInteraction = () => {
+    pointerSession.clear()
+    endDrag()
+  }
+
+  const updatePointerState = (event: PointerEvent) => {
+    const clientX = event.clientX
+    const clientY = event.clientY
+    const [canvasX, canvasY] = conversion.clientPosToCanvasPos([
+      clientX,
+      clientY
+    ])
+
+    updatePointerPosition(clientX, clientY, canvasX, canvasY)
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    if (!pointerSession.matches(event)) return
+    updatePointerState(event)
+    app.canvas?.setDirty(true)
+  }
+
+  const connectSlots = (slotLayout: SlotLayout) => {
+    const canvas = app.canvas
+    const graph = canvas?.graph
+    const source = state.source
+    if (!canvas || !graph || !source) return
+
+    const sourceNode = graph.getNodeById(Number(source.nodeId))
+    const targetNode = graph.getNodeById(Number(slotLayout.nodeId))
+    if (!sourceNode || !targetNode) return
+
+    if (source.type === 'output' && slotLayout.type === 'input') {
+      const outputSlot = sourceNode.outputs?.[source.slotIndex]
+      const inputSlot = targetNode.inputs?.[slotLayout.index]
+      if (!outputSlot || !inputSlot) return
+      graph.beforeChange()
+      sourceNode.connectSlots(outputSlot, targetNode, inputSlot, undefined)
+      return
+    }
+
+    if (source.type === 'input' && slotLayout.type === 'output') {
+      const inputSlot = sourceNode.inputs?.[source.slotIndex]
+      const outputSlot = targetNode.outputs?.[slotLayout.index]
+      if (!inputSlot || !outputSlot) return
+      graph.beforeChange()
+      sourceNode.disconnectInput(source.slotIndex, true)
+      targetNode.connectSlots(outputSlot, sourceNode, inputSlot, undefined)
+    }
+  }
+
+  const finishInteraction = (event: PointerEvent) => {
+    if (!pointerSession.matches(event)) return
+    event.preventDefault()
+
+    if (state.source) {
+      const candidate = candidateFromTarget(event.target)
+      if (candidate?.compatible) {
+        connectSlots(candidate.layout)
+      }
+    }
+
+    cleanupInteraction()
+    app.canvas?.setDirty(true)
+  }
+
+  const handlePointerUp = (event: PointerEvent) => {
+    finishInteraction(event)
+  }
+
+  const handlePointerCancel = (event: PointerEvent) => {
+    if (!pointerSession.matches(event)) return
+    cleanupInteraction()
+    app.canvas?.setDirty(true)
+  }
+
+  const onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0) return
+    if (!nodeId) return
+    if (pointerSession.isActive()) return
+
+    const canvas = app.canvas
+    const graph = canvas?.graph
+    if (!canvas || !graph) return
+
+    const layout = layoutStore.getSlotLayout(
+      getSlotKey(nodeId, index, type === 'input')
+    )
+    if (!layout) return
+
+    const resolvedNode = graph.getNodeById(Number(nodeId))
+    const slot =
+      type === 'input'
+        ? resolvedNode?.inputs?.[index]
+        : resolvedNode?.outputs?.[index]
+
+    const direction =
+      slot?.dir ?? (type === 'input' ? LinkDirection.LEFT : LinkDirection.RIGHT)
+
+    beginDrag(
+      {
+        nodeId,
+        slotIndex: index,
+        type,
+        direction,
+        position: layout.position
+      },
+      event.pointerId
+    )
+
+    pointerSession.begin(event.pointerId)
+
+    updatePointerState(event)
+
+    pointerSession.register(
+      useEventListener(window, 'pointermove', handlePointerMove, {
+        capture: true
+      }),
+      useEventListener(window, 'pointerup', handlePointerUp, {
+        capture: true
+      }),
+      useEventListener(window, 'pointercancel', handlePointerCancel, {
+        capture: true
+      })
+    )
+    app.canvas?.setDirty(true)
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  onBeforeUnmount(() => {
+    if (pointerSession.isActive()) {
+      cleanupInteraction()
+    }
+  })
+
+  return {
+    onPointerDown
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
index 4ce9f8e62c..e8c38164d4 100644
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -8,7 +8,13 @@
  * Supports different element types (nodes, slots, widgets, etc.) with
  * customizable data attributes and update handlers.
  */
-import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
+import {
+  type MaybeRefOrGetter,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  toValue
+} from 'vue'
 
 import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -154,9 +160,10 @@ const resizeObserver = new ResizeObserver((entries) => {
  * ```
  */
 export function useVueElementTracking(
-  appIdentifier: string,
+  appIdentifierMaybe: MaybeRefOrGetter<string>,
   trackingType: string
 ) {
+  const appIdentifier = toValue(appIdentifierMaybe)
   onMounted(() => {
     const element = getCurrentInstance()?.proxy?.$el
     if (!(element instanceof HTMLElement) || !appIdentifier) return
diff --git a/src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts b/src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts
deleted file mode 100644
index aae08298a7..0000000000
--- a/src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { storeToRefs } from 'pinia'
-import { computed, provide } from 'vue'
-
-import {
-  ExecutingNodeIdsKey,
-  NodeProgressStatesKey
-} from '@/renderer/core/canvas/injectionKeys'
-import { useExecutionStore } from '@/stores/executionStore'
-
-/**
- * Composable for providing execution state to Vue node children
- *
- * This composable sets up the execution state providers that can be injected
- * by child Vue nodes using useNodeExecutionState.
- *
- * Should be used in the parent component that manages Vue nodes (e.g., GraphCanvas).
- */
-export const useExecutionStateProvider = () => {
-  const executionStore = useExecutionStore()
-  const { executingNodeIds: storeExecutingNodeIds, nodeProgressStates } =
-    storeToRefs(executionStore)
-
-  // Convert execution store data to the format expected by Vue nodes
-  const executingNodeIds = computed(
-    () => new Set(storeExecutingNodeIds.value.map(String))
-  )
-
-  // Provide the execution state to all child Vue nodes
-  provide(ExecutingNodeIdsKey, executingNodeIds)
-  provide(NodeProgressStatesKey, nodeProgressStates)
-
-  return {
-    executingNodeIds,
-    nodeProgressStates
-  }
-}
diff --git a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
index 8f03e29e1a..aa4867db9f 100644
--- a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
+++ b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
@@ -1,10 +1,7 @@
-import { computed, inject, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'
 
-import {
-  ExecutingNodeIdsKey,
-  NodeProgressStatesKey
-} from '@/renderer/core/canvas/injectionKeys'
-import type { NodeProgressState } from '@/schemas/apiSchema'
+import { useExecutionStore } from '@/stores/executionStore'
 
 /**
  * Composable for managing execution state of Vue-based nodes
@@ -12,18 +9,18 @@ import type { NodeProgressState } from '@/schemas/apiSchema'
  * Provides reactive access to execution state and progress for a specific node
  * by injecting execution data from the parent GraphCanvas provider.
  *
- * @param nodeId - The ID of the node to track execution state for
+ * @param nodeIdMaybe - The ID of the node to track execution state for
  * @returns Object containing reactive execution state and progress
  */
-export const useNodeExecutionState = (nodeId: string) => {
-  const executingNodeIds = inject(ExecutingNodeIdsKey, ref(new Set<string>()))
-  const nodeProgressStates = inject(
-    NodeProgressStatesKey,
-    ref<Record<string, NodeProgressState>>({})
-  )
+export const useNodeExecutionState = (
+  nodeIdMaybe: MaybeRefOrGetter<string>
+) => {
+  const nodeId = toValue(nodeIdMaybe)
+  const { uniqueExecutingNodeIdStrings, nodeProgressStates } =
+    storeToRefs(useExecutionStore())
 
   const executing = computed(() => {
-    return executingNodeIds.value.has(nodeId)
+    return uniqueExecutingNodeIdStrings.value.has(nodeId)
   })
 
   const progress = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
index 18a085641e..60e5a7fd8d 100644
--- a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -1,12 +1,13 @@
-/**
- * Composable for individual Vue node components
- *
- * Uses customRef for shared write access with Canvas renderer.
- * Provides dragging functionality and reactive layout state.
- */
-import { computed, inject } from 'vue'
-
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
+import { storeToRefs } from 'pinia'
+import {
+  type CSSProperties,
+  type MaybeRefOrGetter,
+  computed,
+  inject,
+  toValue
+} from 'vue'
+
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -16,15 +17,16 @@ import { LayoutSource, type Point } from '@/renderer/core/layout/types'
  * Composable for individual Vue node components
  * Uses customRef for shared write access with Canvas renderer
  */
-export function useNodeLayout(nodeId: string) {
-  const store = layoutStore
+export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
+  const nodeId = toValue(nodeIdMaybe)
   const mutations = useLayoutMutations()
+  const { selectedNodeIds } = storeToRefs(useCanvasStore())
 
   // Get transform utilities from TransformPane if available
   const transformState = inject(TransformStateKey)
 
   // Get the customRef for this node (shared write access)
-  const layoutRef = store.getNodeLayoutRef(nodeId)
+  const layoutRef = layoutStore.getNodeLayoutRef(nodeId)
 
   // Computed properties for easy access
   const position = computed(() => {
@@ -53,8 +55,6 @@ export function useNodeLayout(nodeId: string) {
   let dragStartMouse: Point | null = null
   let otherSelectedNodesStartPositions: Map<string, Point> | null = null
 
-  const selectedNodeIds = inject(SelectedNodeIdsKey, null)
-
   /**
    * Start dragging the node
    */
@@ -188,14 +188,16 @@ export function useNodeLayout(nodeId: string) {
     endDrag,
 
     // Computed styles for Vue templates
-    nodeStyle: computed(() => ({
-      position: 'absolute' as const,
-      left: `${position.value.x}px`,
-      top: `${position.value.y}px`,
-      width: `${size.value.width}px`,
-      height: `${size.value.height}px`,
-      zIndex: zIndex.value,
-      cursor: isDragging ? 'grabbing' : 'grab'
-    }))
+    nodeStyle: computed(
+      (): CSSProperties => ({
+        position: 'absolute' as const,
+        left: `${position.value.x}px`,
+        top: `${position.value.y}px`,
+        width: `${size.value.width}px`,
+        height: `${size.value.height}px`,
+        zIndex: zIndex.value,
+        cursor: isDragging ? 'grabbing' : 'grab'
+      })
+    )
   }
 }
diff --git a/src/renderer/extensions/vueNodes/lod/useLOD.ts b/src/renderer/extensions/vueNodes/lod/useLOD.ts
index 584e21f9a5..2f59ba020b 100644
--- a/src/renderer/extensions/vueNodes/lod/useLOD.ts
+++ b/src/renderer/extensions/vueNodes/lod/useLOD.ts
@@ -2,185 +2,33 @@
  * Level of Detail (LOD) composable for Vue-based node rendering
  *
  * Provides dynamic quality adjustment based on zoom level to maintain
- * performance with large node graphs. Uses zoom thresholds to determine
- * how much detail to render for each node component.
- *
- * ## LOD Levels
- *
- * - **FULL** (zoom > 0.8): Complete rendering with all widgets, slots, and content
- * - **REDUCED** (0.4 < zoom <= 0.8): Essential widgets only, simplified slots
- * - **MINIMAL** (zoom <= 0.4): Title only, no widgets or slots
- *
- * ## Performance Benefits
- *
- * - Reduces DOM element count by up to 80% at low zoom levels
- * - Minimizes layout calculations and paint operations
- * - Enables smooth performance with 1000+ nodes
- * - Maintains visual fidelity when detail is actually visible
- *
- * @example
- * ```typescript
- * const { lodLevel, shouldRenderWidgets, shouldRenderSlots } = useLOD(zoomRef)
- *
- * // In template
- * <NodeWidgets v-if="shouldRenderWidgets" />
- * <NodeSlots v-if="shouldRenderSlots" />
- * ```
- */
-import { type Ref, computed, readonly } from 'vue'
-
-export enum LODLevel {
-  MINIMAL = 'minimal', // zoom <= 0.4
-  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
-  FULL = 'full' // zoom > 0.8
+ * performance with large node graphs. Uses zoom threshold based on DPR
+ * to determine how much detail to render for each node component.
+ * Default minFontSize = 8px
+ * Default zoomThreshold = 0.57 (On a DPR = 1 monitor)
+ **/
+import { useDevicePixelRatio } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+interface Camera {
+  z: number // zoom level
 }
 
-interface LODConfig {
-  renderWidgets: boolean
-  renderSlots: boolean
-  renderContent: boolean
-  renderSlotLabels: boolean
-  renderWidgetLabels: boolean
-  cssClass: string
-}
-
-// LOD configuration for each level
-const LOD_CONFIGS: Record<LODLevel, LODConfig> = {
-  [LODLevel.FULL]: {
-    renderWidgets: true,
-    renderSlots: true,
-    renderContent: true,
-    renderSlotLabels: true,
-    renderWidgetLabels: true,
-    cssClass: 'lg-node--lod-full'
-  },
-  [LODLevel.REDUCED]: {
-    renderWidgets: true,
-    renderSlots: true,
-    renderContent: false,
-    renderSlotLabels: false,
-    renderWidgetLabels: false,
-    cssClass: 'lg-node--lod-reduced'
-  },
-  [LODLevel.MINIMAL]: {
-    renderWidgets: false,
-    renderSlots: false,
-    renderContent: false,
-    renderSlotLabels: false,
-    renderWidgetLabels: false,
-    cssClass: 'lg-node--lod-minimal'
-  }
-}
-
-/**
- * Create LOD (Level of Detail) state based on zoom level
- *
- * @param zoomRef - Reactive reference to current zoom level (camera.z)
- * @returns LOD state and configuration
- */
-export function useLOD(zoomRef: Ref<number>) {
-  // Continuous LOD score (0-1) for smooth transitions
-  const lodScore = computed(() => {
-    const zoom = zoomRef.value
-    return Math.max(0, Math.min(1, zoom))
-  })
+export function useLOD(camera: Camera) {
+  const isLOD = computed(() => {
+    const { pixelRatio } = useDevicePixelRatio()
+    const baseFontSize = 14
+    const dprAdjustment = Math.sqrt(pixelRatio.value)
 
-  // Determine current LOD level based on zoom
-  const lodLevel = computed<LODLevel>(() => {
-    const zoom = zoomRef.value
+    const settingStore = useSettingStore()
+    const minFontSize = settingStore.get('LiteGraph.Canvas.MinFontSizeForLOD') //default 8
+    const threshold =
+      Math.round((minFontSize / (baseFontSize * dprAdjustment)) * 100) / 100 //round to 2 decimal places i.e 0.86
 
-    if (zoom > 0.8) return LODLevel.FULL
-    if (zoom > 0.4) return LODLevel.REDUCED
-    return LODLevel.MINIMAL
+    return camera.z < threshold
   })
 
-  // Get configuration for current LOD level
-  const lodConfig = computed<LODConfig>(() => LOD_CONFIGS[lodLevel.value])
-
-  // Convenience computed properties for common rendering decisions
-  const shouldRenderWidgets = computed(() => lodConfig.value.renderWidgets)
-  const shouldRenderSlots = computed(() => lodConfig.value.renderSlots)
-  const shouldRenderContent = computed(() => lodConfig.value.renderContent)
-  const shouldRenderSlotLabels = computed(
-    () => lodConfig.value.renderSlotLabels
-  )
-  const shouldRenderWidgetLabels = computed(
-    () => lodConfig.value.renderWidgetLabels
-  )
-
-  // CSS class for styling based on LOD level
-  const lodCssClass = computed(() => lodConfig.value.cssClass)
-
-  // Get essential widgets for reduced LOD (only interactive controls)
-  const getEssentialWidgets = (widgets: unknown[]): unknown[] => {
-    if (lodLevel.value === LODLevel.FULL) return widgets
-    if (lodLevel.value === LODLevel.MINIMAL) return []
-
-    // For reduced LOD, filter to essential widget types only
-    return widgets.filter((widget: any) => {
-      const type = widget?.type?.toLowerCase()
-      return [
-        'combo',
-        'select',
-        'toggle',
-        'boolean',
-        'slider',
-        'number'
-      ].includes(type)
-    })
-  }
-
-  // Performance metrics for debugging
-  const lodMetrics = computed(() => ({
-    level: lodLevel.value,
-    zoom: zoomRef.value,
-    widgetCount: shouldRenderWidgets.value ? 'full' : 'none',
-    slotCount: shouldRenderSlots.value ? 'full' : 'none'
-  }))
-
-  return {
-    // Core LOD state
-    lodLevel: readonly(lodLevel),
-    lodConfig: readonly(lodConfig),
-    lodScore: readonly(lodScore),
-
-    // Rendering decisions
-    shouldRenderWidgets,
-    shouldRenderSlots,
-    shouldRenderContent,
-    shouldRenderSlotLabels,
-    shouldRenderWidgetLabels,
-
-    // Styling
-    lodCssClass,
-
-    // Utilities
-    getEssentialWidgets,
-    lodMetrics
-  }
-}
-
-/**
- * Get LOD level thresholds for configuration or debugging
- */
-export const LOD_THRESHOLDS = {
-  FULL_THRESHOLD: 0.8,
-  REDUCED_THRESHOLD: 0.4,
-  MINIMAL_THRESHOLD: 0.0
-} as const
-
-/**
- * Check if zoom level supports a specific feature
- */
-export function supportsFeatureAtZoom(
-  zoom: number,
-  feature: keyof LODConfig
-): boolean {
-  const level =
-    zoom > 0.8
-      ? LODLevel.FULL
-      : zoom > 0.4
-        ? LODLevel.REDUCED
-        : LODLevel.MINIMAL
-  return LOD_CONFIGS[level][feature] as boolean
+  return { isLOD }
 }
diff --git a/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
index 427cf20c04..cb997f2360 100644
--- a/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
+++ b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
@@ -1,16 +1,16 @@
 import { storeToRefs } from 'pinia'
-import { type Ref, computed } from 'vue'
+import { type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue'
 
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 
 export const useNodePreviewState = (
-  nodeId: string,
+  nodeIdMaybe: MaybeRefOrGetter<string>,
   options?: {
-    isMinimalLOD?: Ref<boolean>
     isCollapsed?: Ref<boolean>
   }
 ) => {
+  const nodeId = toValue(nodeIdMaybe)
   const workflowStore = useWorkflowStore()
   const { nodePreviewImages } = storeToRefs(useNodeOutputStore())
 
@@ -31,14 +31,10 @@ export const useNodePreviewState = (
   })
 
   const shouldShowPreviewImg = computed(() => {
-    if (!options?.isMinimalLOD || !options?.isCollapsed) {
+    if (!options?.isCollapsed) {
       return hasPreview.value
     }
-    return (
-      !options.isMinimalLOD.value &&
-      !options.isCollapsed.value &&
-      hasPreview.value
-    )
+    return !options.isCollapsed.value && hasPreview.value
   })
 
   return {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
new file mode 100644
index 0000000000..798d5ee39e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts
@@ -0,0 +1,337 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import ImageCompare from 'primevue/imagecompare'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetImageCompare, {
+  type ImageCompareValue
+} from './WidgetImageCompare.vue'
+
+describe('WidgetImageCompare Display', () => {
+  const createMockWidget = (
+    value: ImageCompareValue | string,
+    options: SimplifiedWidget['options'] = {}
+  ): SimplifiedWidget<ImageCompareValue | string> => ({
+    name: 'test_imagecompare',
+    type: 'object',
+    value,
+    options
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<ImageCompareValue | string>,
+    readonly = false
+  ) => {
+    return mount(WidgetImageCompare, {
+      global: {
+        plugins: [PrimeVue],
+        components: { ImageCompare }
+      },
+      props: {
+        widget,
+        readonly
+      }
+    })
+  }
+
+  describe('Component Rendering', () => {
+    it('renders imagecompare component with proper structure and styling', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      // Component exists
+      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
+      expect(imageCompare.exists()).toBe(true)
+
+      // Renders both images with correct URLs
+      const images = wrapper.findAll('img')
+      expect(images).toHaveLength(2)
+      expect(images[0].attributes('src')).toBe('https://example.com/before.jpg')
+      expect(images[1].attributes('src')).toBe('https://example.com/after.jpg')
+
+      // Images have proper styling classes
+      images.forEach((img) => {
+        expect(img.classes()).toContain('object-cover')
+        expect(img.classes()).toContain('w-full')
+        expect(img.classes()).toContain('h-full')
+      })
+    })
+  })
+
+  describe('Object Value Input', () => {
+    it('handles alt text correctly - custom, default, and empty', () => {
+      // Test custom alt text
+      const customAltValue: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg',
+        beforeAlt: 'Original design',
+        afterAlt: 'Updated design'
+      }
+      const customWrapper = mountComponent(createMockWidget(customAltValue))
+      const customImages = customWrapper.findAll('img')
+      expect(customImages[0].attributes('alt')).toBe('Original design')
+      expect(customImages[1].attributes('alt')).toBe('Updated design')
+
+      // Test default alt text
+      const defaultAltValue: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const defaultWrapper = mountComponent(createMockWidget(defaultAltValue))
+      const defaultImages = defaultWrapper.findAll('img')
+      expect(defaultImages[0].attributes('alt')).toBe('Before image')
+      expect(defaultImages[1].attributes('alt')).toBe('After image')
+
+      // Test empty string alt text (falls back to default)
+      const emptyAltValue: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg',
+        beforeAlt: '',
+        afterAlt: ''
+      }
+      const emptyWrapper = mountComponent(createMockWidget(emptyAltValue))
+      const emptyImages = emptyWrapper.findAll('img')
+      expect(emptyImages[0].attributes('alt')).toBe('Before image')
+      expect(emptyImages[1].attributes('alt')).toBe('After image')
+    })
+
+    it('handles missing and partial image URLs gracefully', () => {
+      // Missing URLs
+      const missingValue: ImageCompareValue = { before: '', after: '' }
+      const missingWrapper = mountComponent(createMockWidget(missingValue))
+      const missingImages = missingWrapper.findAll('img')
+      expect(missingImages[0].attributes('src')).toBe('')
+      expect(missingImages[1].attributes('src')).toBe('')
+
+      // Partial URLs
+      const partialValue: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: ''
+      }
+      const partialWrapper = mountComponent(createMockWidget(partialValue))
+      const partialImages = partialWrapper.findAll('img')
+      expect(partialImages[0].attributes('src')).toBe(
+        'https://example.com/before.jpg'
+      )
+      expect(partialImages[1].attributes('src')).toBe('')
+    })
+  })
+
+  describe('String Value Input', () => {
+    it('handles string value as before image only', () => {
+      const value = 'https://example.com/single.jpg'
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      expect(images[0].attributes('src')).toBe('https://example.com/single.jpg')
+      expect(images[1].attributes('src')).toBe('')
+    })
+
+    it('uses default alt text for string values', () => {
+      const value = 'https://example.com/single.jpg'
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      expect(images[0].attributes('alt')).toBe('Before image')
+      expect(images[1].attributes('alt')).toBe('After image')
+    })
+  })
+
+  describe('Widget Options Handling', () => {
+    it('passes through accessibility options', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value, {
+        tabindex: 1,
+        ariaLabel: 'Compare images',
+        ariaLabelledby: 'compare-label'
+      })
+      const wrapper = mountComponent(widget)
+
+      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
+      expect(imageCompare.props('tabindex')).toBe(1)
+      expect(imageCompare.props('ariaLabel')).toBe('Compare images')
+      expect(imageCompare.props('ariaLabelledby')).toBe('compare-label')
+    })
+
+    it('uses default tabindex when not provided', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
+      expect(imageCompare.props('tabindex')).toBe(0)
+    })
+
+    it('passes through PrimeVue specific options', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value, {
+        unstyled: true,
+        pt: { root: { class: 'custom-class' } },
+        ptOptions: { mergeSections: true }
+      })
+      const wrapper = mountComponent(widget)
+
+      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
+      expect(imageCompare.props('unstyled')).toBe(true)
+      expect(imageCompare.props('pt')).toEqual({
+        root: { class: 'custom-class' }
+      })
+      expect(imageCompare.props('ptOptions')).toEqual({ mergeSections: true })
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('renders normally in readonly mode (no interaction restrictions)', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget, true)
+
+      // ImageCompare is display-only, readonly doesn't affect rendering
+      const imageCompare = wrapper.findComponent({ name: 'ImageCompare' })
+      expect(imageCompare.exists()).toBe(true)
+
+      const images = wrapper.findAll('img')
+      expect(images).toHaveLength(2)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles null or undefined widget value', () => {
+      const widget = createMockWidget('')
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      expect(images[0].attributes('src')).toBe('')
+      expect(images[1].attributes('src')).toBe('')
+      expect(images[0].attributes('alt')).toBe('Before image')
+      expect(images[1].attributes('alt')).toBe('After image')
+    })
+
+    it('handles empty object value', () => {
+      const value: ImageCompareValue = {} as ImageCompareValue
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      expect(images[0].attributes('src')).toBe('')
+      expect(images[1].attributes('src')).toBe('')
+    })
+
+    it('handles malformed object value', () => {
+      const value = { randomProp: 'test', before: '', after: '' }
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      expect(images[0].attributes('src')).toBe('')
+      expect(images[1].attributes('src')).toBe('')
+    })
+
+    it('handles special content - long URLs, special characters, and long alt text', () => {
+      // Test very long URLs
+      const longUrl = 'https://example.com/' + 'a'.repeat(1000) + '.jpg'
+      const longUrlValue: ImageCompareValue = {
+        before: longUrl,
+        after: longUrl
+      }
+      const longUrlWrapper = mountComponent(createMockWidget(longUrlValue))
+      const longUrlImages = longUrlWrapper.findAll('img')
+      expect(longUrlImages[0].attributes('src')).toBe(longUrl)
+      expect(longUrlImages[1].attributes('src')).toBe(longUrl)
+
+      // Test special characters in URLs
+      const specialUrl =
+        'https://example.com/path with spaces & symbols!@#$.jpg'
+      const specialUrlValue: ImageCompareValue = {
+        before: specialUrl,
+        after: specialUrl
+      }
+      const specialUrlWrapper = mountComponent(
+        createMockWidget(specialUrlValue)
+      )
+      const specialUrlImages = specialUrlWrapper.findAll('img')
+      expect(specialUrlImages[0].attributes('src')).toBe(specialUrl)
+      expect(specialUrlImages[1].attributes('src')).toBe(specialUrl)
+
+      // Test very long alt text
+      const longAlt =
+        'Very long alt text that exceeds normal length: ' +
+        'description '.repeat(50)
+      const longAltValue: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg',
+        beforeAlt: longAlt,
+        afterAlt: longAlt
+      }
+      const longAltWrapper = mountComponent(createMockWidget(longAltValue))
+      const longAltImages = longAltWrapper.findAll('img')
+      expect(longAltImages[0].attributes('alt')).toBe(longAlt)
+      expect(longAltImages[1].attributes('alt')).toBe(longAlt)
+    })
+  })
+
+  describe('Template Structure', () => {
+    it('correctly assigns images to left and right template slots', () => {
+      const value: ImageCompareValue = {
+        before: 'https://example.com/before.jpg',
+        after: 'https://example.com/after.jpg'
+      }
+      const widget = createMockWidget(value)
+      const wrapper = mountComponent(widget)
+
+      const images = wrapper.findAll('img')
+      // First image (before) should be in left template slot
+      expect(images[0].attributes('src')).toBe('https://example.com/before.jpg')
+      // Second image (after) should be in right template slot
+      expect(images[1].attributes('src')).toBe('https://example.com/after.jpg')
+    })
+  })
+
+  describe('Integration', () => {
+    it('works with various URL types - data URLs and blob URLs', () => {
+      // Test data URLs
+      const dataUrl =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=='
+      const dataUrlValue: ImageCompareValue = {
+        before: dataUrl,
+        after: dataUrl
+      }
+      const dataUrlWrapper = mountComponent(createMockWidget(dataUrlValue))
+      const dataUrlImages = dataUrlWrapper.findAll('img')
+      expect(dataUrlImages[0].attributes('src')).toBe(dataUrl)
+      expect(dataUrlImages[1].attributes('src')).toBe(dataUrl)
+
+      // Test blob URLs
+      const blobUrl =
+        'blob:http://example.com/12345678-1234-1234-1234-123456789012'
+      const blobUrlValue: ImageCompareValue = {
+        before: blobUrl,
+        after: blobUrl
+      }
+      const blobUrlWrapper = mountComponent(createMockWidget(blobUrlValue))
+      const blobUrlImages = blobUrlWrapper.findAll('img')
+      expect(blobUrlImages[0].attributes('src')).toBe(blobUrl)
+      expect(blobUrlImages[1].attributes('src')).toBe(blobUrl)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index e51413a305..1cf455c780 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -30,7 +30,7 @@ import { computed } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-interface ImageCompareValue {
+export interface ImageCompareValue {
   before: string
   after: string
   beforeAlt?: string
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
index 45ce81aa1c..b5676f97a2 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
new file mode 100644
index 0000000000..d83f891423
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.test.ts
@@ -0,0 +1,208 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import InputNumber from 'primevue/inputnumber'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
+
+function createMockWidget(
+  value: number = 0,
+  type: 'int' | 'float' = 'int',
+  options: SimplifiedWidget['options'] = {},
+  callback?: (value: number) => void
+): SimplifiedWidget<number> {
+  return {
+    name: 'test_input_number',
+    type,
+    value,
+    options,
+    callback
+  }
+}
+
+function mountComponent(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  readonly = false
+) {
+  return mount(WidgetInputNumberInput, {
+    global: {
+      plugins: [PrimeVue],
+      components: { InputNumber }
+    },
+    props: {
+      widget,
+      modelValue,
+      readonly
+    }
+  })
+}
+
+function getNumberInput(wrapper: ReturnType<typeof mount>) {
+  const input = wrapper.get<HTMLInputElement>('input[inputmode="numeric"]')
+  return input.element
+}
+
+describe('WidgetInputNumberInput Value Binding', () => {
+  it('displays initial value in input field', () => {
+    const widget = createMockWidget(42, 'int')
+    const wrapper = mountComponent(widget, 42)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('42')
+  })
+
+  it('emits update:modelValue when value changes', async () => {
+    const widget = createMockWidget(10, 'int')
+    const wrapper = mountComponent(widget, 10)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    await inputNumber.vm.$emit('update:modelValue', 20)
+
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeDefined()
+    expect(emitted![0]).toContain(20)
+  })
+
+  it('handles negative values', () => {
+    const widget = createMockWidget(-5, 'int')
+    const wrapper = mountComponent(widget, -5)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('-5')
+  })
+
+  it('handles decimal values for float type', () => {
+    const widget = createMockWidget(3.14, 'float')
+    const wrapper = mountComponent(widget, 3.14)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('3.14')
+  })
+})
+
+describe('WidgetInputNumberInput Component Rendering', () => {
+  it('renders InputNumber component with show-buttons', () => {
+    const widget = createMockWidget(5, 'int')
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.exists()).toBe(true)
+    expect(inputNumber.props('showButtons')).toBe(true)
+  })
+
+  it('disables input when readonly', () => {
+    const widget = createMockWidget(5, 'int', {}, undefined)
+    const wrapper = mountComponent(widget, 5, true)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('disabled')).toBe(true)
+  })
+
+  it('sets button layout to horizontal', () => {
+    const widget = createMockWidget(5, 'int')
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('buttonLayout')).toBe('horizontal')
+  })
+
+  it('sets size to small', () => {
+    const widget = createMockWidget(5, 'int')
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('size')).toBe('small')
+  })
+})
+
+describe('WidgetInputNumberInput Step Value', () => {
+  it('defaults to 0 for unrestricted stepping', () => {
+    const widget = createMockWidget(5, 'int')
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('step')).toBe(0)
+  })
+
+  it('uses step2 value when provided', () => {
+    const widget = createMockWidget(5, 'int', { step2: 0.5 })
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('step')).toBe(0.5)
+  })
+
+  it('calculates step from precision for precision 0', () => {
+    const widget = createMockWidget(5, 'int', { precision: 0 })
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('step')).toBe(1)
+  })
+
+  it('calculates step from precision for precision 1', () => {
+    const widget = createMockWidget(5, 'float', { precision: 1 })
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('step')).toBe(0.1)
+  })
+
+  it('calculates step from precision for precision 2', () => {
+    const widget = createMockWidget(5, 'float', { precision: 2 })
+    const wrapper = mountComponent(widget, 5)
+
+    const inputNumber = wrapper.findComponent(InputNumber)
+    expect(inputNumber.props('step')).toBe(0.01)
+  })
+})
+
+describe('WidgetInputNumberInput Grouping Behavior', () => {
+  it('displays numbers without commas by default for int widgets', () => {
+    const widget = createMockWidget(1000, 'int')
+    const wrapper = mountComponent(widget, 1000)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('1000')
+    expect(input.value).not.toContain(',')
+  })
+
+  it('displays numbers without commas by default for float widgets', () => {
+    const widget = createMockWidget(1000.5, 'float')
+    const wrapper = mountComponent(widget, 1000.5)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('1000.5')
+    expect(input.value).not.toContain(',')
+  })
+
+  it('displays numbers with commas when grouping enabled', () => {
+    const widget = createMockWidget(1000, 'int', { useGrouping: true })
+    const wrapper = mountComponent(widget, 1000)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('1,000')
+    expect(input.value).toContain(',')
+  })
+
+  it('displays numbers without commas when grouping explicitly disabled', () => {
+    const widget = createMockWidget(1000, 'int', { useGrouping: false })
+    const wrapper = mountComponent(widget, 1000)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('1000')
+    expect(input.value).not.toContain(',')
+  })
+
+  it('displays numbers without commas when useGrouping option is undefined', () => {
+    const widget = createMockWidget(1000, 'int', { useGrouping: undefined })
+    const wrapper = mountComponent(widget, 1000)
+
+    const input = getNumberInput(wrapper)
+    expect(input.value).toBe('1000')
+    expect(input.value).not.toContain(',')
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 6e91171b32..4922ae1c22 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -2,7 +2,7 @@
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
-import { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 import {
   INPUT_EXCLUDED_PROPS,
@@ -48,6 +48,11 @@ const stepValue = computed(() => {
   // Default to 'any' for unrestricted stepping
   return 0
 })
+
+// Disable grouping separators by default unless explicitly enabled by the node author
+const useGrouping = computed(() => {
+  return props.widget.options?.useGrouping === true
+})
 </script>
 
 <template>
@@ -60,6 +65,7 @@ const stepValue = computed(() => {
       size="small"
       :disabled="readonly"
       :step="stepValue"
+      :use-grouping="useGrouping"
       :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
       :pt="{
         incrementButton:
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 35950aa5cb..7f3995f9e7 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
@@ -5,22 +5,21 @@
   >
     <!-- Display mode: Rendered markdown -->
     <div
-      v-if="!isEditing"
-      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      class="comfy-markdown-content hover:bg-[var(--p-content-hover-background)] text-sm min-h-[60px] w-full rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
+      :class="isEditing === false ? 'visible' : 'invisible'"
       v-html="renderedHtml"
     />
 
     <!-- Edit mode: Textarea -->
     <Textarea
-      v-else
+      v-show="isEditing"
       ref="textareaRef"
       v-model="localValue"
       :disabled="readonly"
-      class="w-full text-xs"
-      size="small"
-      :rows="6"
+      class="w-full min-h-[60px] absolute inset-0 resize-none"
       :pt="{
         root: {
+          class: 'text-sm w-full h-full',
           onBlur: handleBlur
         }
       }"
@@ -28,6 +27,7 @@
       @click.stop
       @keydown.stop
     />
+    <LODFallback />
   </div>
 </template>
 
@@ -39,6 +39,8 @@ import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
+import LODFallback from '../../components/LODFallback.vue'
+
 const props = defineProps<{
   widget: SimplifiedWidget<string>
   modelValue: string
@@ -89,7 +91,7 @@ const handleBlur = () => {
   border-radius: var(--p-border-radius);
 }
 
-.widget-markdown:hover:not(:has(textarea)) {
+.comfy-markdown-content:hover {
   background-color: var(--p-content-hover-background);
 }
 </style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 157da563ed..bd7ac78181 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
@@ -1,14 +1,17 @@
 <template>
-  <Textarea
-    v-model="localValue"
-    v-bind="filteredProps"
-    :disabled="readonly"
-    :class="cn(WidgetInputBaseClass, 'w-full text-xs')"
-    :placeholder="placeholder || widget.name || ''"
-    size="small"
-    rows="3"
-    @update:model-value="onChange"
-  />
+  <div class="relative">
+    <Textarea
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :class="cn(WidgetInputBaseClass, 'w-full text-xs lod-toggle')"
+      :placeholder="placeholder || widget.name || ''"
+      size="small"
+      rows="3"
+      @update:model-value="onChange"
+    />
+    <LODFallback />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -23,6 +26,7 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import LODFallback from '../../components/LODFallback.vue'
 import { WidgetInputBaseClass } from './layout'
 
 const props = defineProps<{
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
new file mode 100644
index 0000000000..738d620282
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
@@ -0,0 +1,507 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+
+import FormSelectButton from './FormSelectButton.vue'
+
+describe('FormSelectButton Core Component', () => {
+  // Type-safe helper for mounting component
+  const mountComponent = (
+    modelValue: string | null | undefined = null,
+    options: (string | number | Record<string, any>)[] = [],
+    props: Record<string, unknown> = {}
+  ) => {
+    return mount(FormSelectButton, {
+      global: {
+        plugins: [PrimeVue]
+      },
+      props: {
+        modelValue,
+        options: options as any,
+        ...props
+      }
+    })
+  }
+
+  const clickButton = async (
+    wrapper: ReturnType<typeof mount>,
+    buttonText: string
+  ) => {
+    const buttons = wrapper.findAll('button')
+    const targetButtonIndex = buttons.findIndex((button) =>
+      button.text().includes(buttonText)
+    )
+
+    if (targetButtonIndex === -1) {
+      throw new Error(`Button with text "${buttonText}" not found`)
+    }
+
+    // Use get() which throws if element doesn't exist, providing better error messages
+    const targetButton = buttons.at(targetButtonIndex)!
+    await targetButton.trigger('click')
+    return targetButton
+  }
+
+  describe('Basic Rendering', () => {
+    it('renders as a horizontal button group layout', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent(null, options)
+
+      const container = wrapper.find('div')
+      const buttons = wrapper.findAll('button')
+
+      // Verify layout behavior: container exists and contains buttons
+      expect(container.exists()).toBe(true)
+      expect(buttons).toHaveLength(2)
+
+      // Verify buttons are arranged horizontally (not vertically stacked)
+      // This tests the layout logic rather than specific CSS classes
+      buttons.forEach((button) => {
+        expect(button.exists()).toBe(true)
+        expect(button.element.tagName).toBe('BUTTON')
+      })
+    })
+
+    it('renders buttons for each option', () => {
+      const options = ['first', 'second', 'third']
+      const wrapper = mountComponent(null, options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(3)
+      expect(buttons[0].text()).toBe('first')
+      expect(buttons[1].text()).toBe('second')
+      expect(buttons[2].text()).toBe('third')
+    })
+
+    it('renders empty container when no options provided', () => {
+      const wrapper = mountComponent(null, [])
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(0)
+    })
+
+    it('applies proper button styling', () => {
+      const options = ['test']
+      const wrapper = mountComponent(null, options)
+
+      const button = wrapper.find('button')
+      expect(button.classes()).toContain('flex-1')
+      expect(button.classes()).toContain('h-6')
+      expect(button.classes()).toContain('px-5')
+      expect(button.classes()).toContain('py-[5px]')
+      expect(button.classes()).toContain('rounded')
+      expect(button.classes()).toContain('text-center')
+      expect(button.classes()).toContain('text-xs')
+      expect(button.classes()).toContain('font-normal')
+    })
+  })
+
+  describe('String Options', () => {
+    it('handles string array options', () => {
+      const options = ['apple', 'banana', 'cherry']
+      const wrapper = mountComponent('banana', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(3)
+      expect(buttons[0].text()).toBe('apple')
+      expect(buttons[1].text()).toBe('banana')
+      expect(buttons[2].text()).toBe('cherry')
+    })
+
+    it('emits correct string value when clicked', async () => {
+      const options = ['first', 'second', 'third']
+      const wrapper = mountComponent('first', options)
+
+      await clickButton(wrapper, 'second')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual(['second'])
+    })
+
+    it('highlights selected string option', () => {
+      const options = ['option1', 'option2', 'option3']
+      const wrapper = mountComponent('option2', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[1].classes()).toContain('bg-white')
+      expect(buttons[1].classes()).toContain('text-neutral-900')
+      expect(buttons[0].classes()).not.toContain('bg-white')
+      expect(buttons[2].classes()).not.toContain('bg-white')
+    })
+  })
+
+  describe('Number Options', () => {
+    it('handles number array options', () => {
+      const options = [1, 2, 3]
+      const wrapper = mountComponent('2', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(3)
+      expect(buttons[0].text()).toBe('1')
+      expect(buttons[1].text()).toBe('2')
+      expect(buttons[2].text()).toBe('3')
+    })
+
+    it('emits string representation of number when clicked', async () => {
+      const options = [10, 20, 30]
+      const wrapper = mountComponent('10', options)
+
+      await clickButton(wrapper, '20')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual(['20'])
+    })
+
+    it('highlights selected number option', () => {
+      const options = [100, 200, 300]
+      const wrapper = mountComponent('200', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[1].classes()).toContain('bg-white')
+      expect(buttons[1].classes()).toContain('text-neutral-900')
+    })
+  })
+
+  describe('Object Options', () => {
+    it('handles object array with label and value', () => {
+      const options = [
+        { label: 'First Option', value: 'first' },
+        { label: 'Second Option', value: 'second' }
+      ]
+      const wrapper = mountComponent('first', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(2)
+      expect(buttons[0].text()).toBe('First Option')
+      expect(buttons[1].text()).toBe('Second Option')
+    })
+
+    it('emits object value when object option clicked', async () => {
+      const options = [
+        { label: 'Apple', value: 'apple_val' },
+        { label: 'Banana', value: 'banana_val' }
+      ]
+      const wrapper = mountComponent('apple_val', options)
+
+      await clickButton(wrapper, 'Banana')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual(['banana_val'])
+    })
+
+    it('highlights selected object option by value', () => {
+      const options = [
+        { label: 'Small', value: 'sm' },
+        { label: 'Medium', value: 'md' },
+        { label: 'Large', value: 'lg' }
+      ]
+      const wrapper = mountComponent('md', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[1].classes()).toContain('bg-white') // Medium
+      expect(buttons[0].classes()).not.toContain('bg-white')
+      expect(buttons[2].classes()).not.toContain('bg-white')
+    })
+
+    it('handles objects without value field', () => {
+      const options = [
+        { label: 'First', name: 'first_name' },
+        { label: 'Second', name: 'second_name' }
+      ]
+      const wrapper = mountComponent('first_name', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('First')
+      expect(buttons[1].text()).toBe('Second')
+      expect(buttons[0].classes()).toContain('bg-white')
+    })
+
+    it('handles objects without label field', () => {
+      const options = [
+        { value: 'val1', name: 'Name 1' },
+        { value: 'val2', name: 'Name 2' }
+      ]
+      const wrapper = mountComponent('val1', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('Name 1')
+      expect(buttons[1].text()).toBe('Name 2')
+    })
+  })
+
+  describe('PrimeVue Compatibility', () => {
+    it('uses custom optionLabel prop', () => {
+      const options = [
+        { title: 'First Item', value: 'first' },
+        { title: 'Second Item', value: 'second' }
+      ]
+      const wrapper = mountComponent('first', options, { optionLabel: 'title' })
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('First Item')
+      expect(buttons[1].text()).toBe('Second Item')
+    })
+
+    it('uses custom optionValue prop', () => {
+      const options = [
+        { label: 'First', id: 'first_id' },
+        { label: 'Second', id: 'second_id' }
+      ]
+      const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).toContain('bg-white')
+      expect(buttons[1].classes()).not.toContain('bg-white')
+    })
+
+    it('emits custom optionValue when clicked', async () => {
+      const options = [
+        { label: 'First', id: 'first_id' },
+        { label: 'Second', id: 'second_id' }
+      ]
+      const wrapper = mountComponent('first_id', options, { optionValue: 'id' })
+
+      await clickButton(wrapper, 'Second')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual(['second_id'])
+    })
+  })
+
+  describe('Disabled State', () => {
+    it('disables all buttons when disabled prop is true', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: true })
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.element.disabled).toBe(true)
+        expect(button.classes()).toContain('opacity-50')
+        expect(button.classes()).toContain('cursor-not-allowed')
+      })
+    })
+
+    it('does not emit events when disabled', async () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: true })
+
+      await clickButton(wrapper, 'option2')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeUndefined()
+    })
+
+    it('does not apply hover styles when disabled', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: true })
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).not.toContain('hover:bg-zinc-200/50')
+        expect(button.classes()).not.toContain('cursor-pointer')
+      })
+    })
+
+    it('applies disabled styling to selected option', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: true })
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).not.toContain('bg-white') // Selected styling disabled
+      expect(buttons[0].classes()).toContain('opacity-50')
+      expect(buttons[0].classes()).toContain('text-zinc-500')
+    })
+  })
+
+  describe('Selection Logic', () => {
+    it('handles null modelValue', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent(null, options)
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).not.toContain('bg-white')
+      })
+    })
+
+    it('handles undefined modelValue', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent(undefined, options)
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).not.toContain('bg-white')
+      })
+    })
+
+    it('handles empty string modelValue', () => {
+      const options = ['', 'option1', 'option2']
+      const wrapper = mountComponent('', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
+      expect(buttons[1].classes()).not.toContain('bg-white')
+    })
+
+    it('compares values as strings', () => {
+      const options = [1, '2', 3]
+      const wrapper = mountComponent('1', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).toContain('bg-white') // '1' matches number 1 as string
+    })
+  })
+
+  describe('Visual States', () => {
+    it('applies selected styling to active option', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options)
+
+      const selectedButton = wrapper.findAll('button')[0]
+      expect(selectedButton.classes()).toContain('bg-white')
+      expect(selectedButton.classes()).toContain('text-neutral-900')
+    })
+
+    it('applies unselected styling to inactive options', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options)
+
+      const unselectedButton = wrapper.findAll('button')[1]
+      expect(unselectedButton.classes()).toContain('bg-transparent')
+      expect(unselectedButton.classes()).toContain('text-zinc-500')
+    })
+
+    it('applies hover effects to enabled unselected buttons', () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: false })
+
+      const unselectedButton = wrapper.findAll('button')[1]
+      expect(unselectedButton.classes()).toContain('hover:bg-zinc-200/50')
+      expect(unselectedButton.classes()).toContain('cursor-pointer')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles very long option text', () => {
+      const longText =
+        'This is a very long option text that might cause layout issues'
+      const options = ['short', longText, 'normal']
+      const wrapper = mountComponent('short', options)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[1].text()).toBe(longText)
+      expect(buttons).toHaveLength(3)
+    })
+
+    it('handles options with special characters', () => {
+      const specialOptions = ['@#$%^&*()', '{}[]|\\:";\'<>?,./']
+      const wrapper = mountComponent(specialOptions[0], specialOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('@#$%^&*()')
+      expect(buttons[0].classes()).toContain('bg-white')
+    })
+
+    it('handles unicode characters in options', () => {
+      const unicodeOptions = ['🎨 Art', '中文', 'العربية']
+      const wrapper = mountComponent('🎨 Art', unicodeOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('🎨 Art')
+      expect(buttons[0].classes()).toContain('bg-white')
+    })
+
+    it('handles duplicate option values', () => {
+      const duplicateOptions = ['duplicate', 'unique', 'duplicate']
+      const wrapper = mountComponent('duplicate', duplicateOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).toContain('bg-white')
+      expect(buttons[2].classes()).toContain('bg-white') // Both duplicates selected
+      expect(buttons[1].classes()).not.toContain('bg-white')
+    })
+
+    it('handles mixed type options safely', () => {
+      const mixedOptions: any[] = [
+        'string',
+        123,
+        { label: 'Object', value: 'obj' },
+        null
+      ]
+      const wrapper = mountComponent('123', mixedOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(4)
+      expect(buttons[1].classes()).toContain('bg-white') // Number 123 as string
+    })
+
+    it('handles objects with missing properties gracefully', () => {
+      const incompleteOptions = [
+        {}, // Empty object
+        { randomProp: 'value' }, // No standard props
+        { value: 'has_value' }, // No label
+        { label: 'has_label' } // No value
+      ]
+      const wrapper = mountComponent('has_value', incompleteOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(4)
+      expect(buttons[2].classes()).toContain('bg-white')
+    })
+
+    it('handles large number of options', () => {
+      const manyOptions = Array.from(
+        { length: 50 },
+        (_, i) => `Option ${i + 1}`
+      )
+      const wrapper = mountComponent('Option 25', manyOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(50)
+      expect(buttons[24].classes()).toContain('bg-white') // Option 25 at index 24
+    })
+
+    it('fallback to index when all object properties are missing', () => {
+      const problematicOptions = [
+        { someRandomProp: 'random1' },
+        { anotherRandomProp: 'random2' }
+      ]
+      const wrapper = mountComponent('0', problematicOptions)
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(2)
+      expect(buttons[0].classes()).toContain('bg-white') // Falls back to index 0
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('prevents click events when disabled', async () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options, { disabled: true })
+
+      const clickHandler = vi.fn()
+      wrapper.vm.$el.addEventListener('click', clickHandler)
+
+      await clickButton(wrapper, 'option2')
+
+      expect(clickHandler).not.toHaveBeenCalled()
+    })
+
+    it('allows repeated selection of same option', async () => {
+      const options = ['option1', 'option2']
+      const wrapper = mountComponent('option1', options)
+
+      await clickButton(wrapper, 'option1')
+      await clickButton(wrapper, 'option1')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toHaveLength(2)
+      expect(emitted![0]).toEqual(['option1'])
+      expect(emitted![1]).toEqual(['option1'])
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 9b41b204a1..905cc16fd3 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -46,7 +46,7 @@ import { WidgetInputBaseClass } from '../layout'
 
 interface Props {
   modelValue: string | null | undefined
-  options: T[] // Now using generic type instead of any[]
+  options: T[]
   optionLabel?: string // PrimeVue compatible prop
   optionValue?: string // PrimeVue compatible prop
   disabled?: boolean
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 8683b7aa41..e29e09437f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { noop } from 'es-toolkit'
 
-import { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import LODFallback from '../../../components/LODFallback.vue'
 
 defineProps<{
-  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
+  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name' | 'label'>
 }>()
 </script>
 
@@ -12,19 +14,25 @@ defineProps<{
   <div
     class="flex items-center justify-between gap-2 h-[30px] overscroll-contain"
   >
-    <p
-      v-if="widget.name"
-      class="text-sm text-stone-200 dark-theme:text-slate-200 font-normal flex-1 truncate w-20"
-    >
-      {{ widget.name }}
-    </p>
-    <div
-      class="w-75 cursor-default"
-      @pointerdown.stop="noop"
-      @pointermove.stop="noop"
-      @pointerup.stop="noop"
-    >
-      <slot />
+    <div class="relative h-6 flex items-center mr-4">
+      <p
+        v-if="widget.name"
+        class="text-sm text-stone-200 dark-theme:text-slate-200 font-normal flex-1 truncate w-20 lod-toggle"
+      >
+        {{ widget.label || widget.name }}
+      </p>
+      <LODFallback />
+    </div>
+    <div class="relative">
+      <div
+        class="w-75 cursor-default lod-toggle"
+        @pointerdown.stop="noop"
+        @pointermove.stop="noop"
+        @pointerup.stop="noop"
+      >
+        <slot />
+      </div>
+      <LODFallback />
     </div>
   </div>
 </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
index bc307e3b09..b2e0fbd015 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
@@ -3,7 +3,7 @@ import {
   type InputSpec,
   isBooleanInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 export const useBooleanWidget = () => {
   const widgetConstructor: ComfyWidgetConstructorV2 = (
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 01c3f31842..59705458cf 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -3,15 +3,14 @@ import { ref } from 'vue'
 import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type {
-  IBaseWidget,
-  IComboWidget
-} from '@/lib/litegraph/src/types/widgets'
+import { isAssetWidget, isComboWidget } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { assetService } from '@/platform/assets/services/assetService'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
+import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import {
-  ComboInputSpec,
   type InputSpec,
   isComboInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -73,11 +72,29 @@ const addComboWidget = (
     const currentValue = getDefaultValue(inputSpec)
     const displayLabel = currentValue ?? t('widgets.selectModel')
 
-    const widget = node.addWidget('asset', inputSpec.name, displayLabel, () => {
-      console.log(
-        `Asset Browser would open here for:\nNode: ${node.type}\nWidget: ${inputSpec.name}\nCurrent Value:${currentValue}`
-      )
-    })
+    const assetBrowserDialog = useAssetBrowserDialog()
+
+    const widget = node.addWidget(
+      'asset',
+      inputSpec.name,
+      displayLabel,
+      async () => {
+        if (!isAssetWidget(widget)) {
+          throw new Error(`Expected asset widget but received ${widget.type}`)
+        }
+        await assetBrowserDialog.show({
+          nodeType: node.comfyClass || '',
+          inputName: inputSpec.name,
+          currentValue: widget.value,
+          onAssetSelected: (filename: string) => {
+            const oldValue = widget.value
+            widget.value = filename
+            // Using onWidgetChanged prevents a callback race where asset selection could reopen the dialog
+            node.onWidgetChanged?.(widget.name, filename, oldValue, widget)
+          }
+        })
+      }
+    )
 
     return widget
   }
@@ -96,11 +113,14 @@ const addComboWidget = (
   )
 
   if (inputSpec.remote) {
+    if (!isComboWidget(widget)) {
+      throw new Error(`Expected combo widget but received ${widget.type}`)
+    }
     const remoteWidget = useRemoteWidget({
       remoteConfig: inputSpec.remote,
       defaultValue,
       node,
-      widget: widget as IComboWidget
+      widget
     })
     if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
 
@@ -116,16 +136,19 @@ const addComboWidget = (
   }
 
   if (inputSpec.control_after_generate) {
+    if (!isComboWidget(widget)) {
+      throw new Error(`Expected combo widget but received ${widget.type}`)
+    }
     widget.linkedWidgets = addValueControlWidgets(
       node,
-      widget as IComboWidget,
+      widget,
       undefined,
       undefined,
       transformInputSpecV2ToV1(inputSpec)
     )
   }
 
-  return widget as IBaseWidget
+  return widget
 }
 
 export const useComboWidget = () => {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
index 2ed1698b69..ac0f9e5e9f 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -7,7 +7,7 @@ import {
   type InputSpec,
   isFloatInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 function onFloatValueChange(this: INumericWidget, v: number) {
   const round = this.options.round
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
index c58c8db47a..d6e89af184 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -13,7 +13,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
 import { calculateImageGrid } from '@/scripts/ui/imagePreview'
-import { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
 
 const renderPreview = (
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
index bf4e18fcbe..28b1228cde 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts
@@ -3,7 +3,7 @@ import { useNodeImageUpload } from '@/composables/node/useNodeImageUpload'
 import { useValueTransform } from '@/composables/useValueTransform'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { IComboWidget } from '@/lib/litegraph/src/types/widgets'
+import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
 import type { ResultItem, ResultItemType } from '@/schemas/apiSchema'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
 import type { ComfyWidgetConstructor } from '@/scripts/widgets'
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
index fd91330bee..c3f200efa6 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
@@ -8,9 +8,9 @@ import TiptapStarterKit from '@tiptap/starter-kit'
 import { Markdown as TiptapMarkdown } from 'tiptap-markdown'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { type InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 function addMarkdownWidget(
   node: LGraphNode,
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
index 9022ab8c1f..36134e9283 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts
@@ -1,8 +1,8 @@
 import axios from 'axios'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { IWidget } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IWidget } from '@/lib/litegraph/src/litegraph'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
 
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
index 7f79031c09..c449295c4d 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
@@ -5,7 +5,7 @@ import {
   isStringInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 const TRACKPAD_DETECTION_THRESHOLD = 50
 
diff --git a/src/router.ts b/src/router.ts
index 69f1a249a5..f28b460303 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,5 @@
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 import {
-  NavigationGuardNext,
-  RouteLocationNormalized,
   createRouter,
   createWebHashHistory,
   createWebHistory
@@ -116,6 +115,12 @@ const router = createRouter({
           name: 'DesktopUpdateView',
           component: () => import('@/views/DesktopUpdateView.vue'),
           beforeEnter: guardElectronAccess
+        },
+        {
+          path: 'desktop-dialog/:dialogId',
+          name: 'DesktopDialogView',
+          component: () => import('@/views/DesktopDialogView.vue'),
+          beforeEnter: guardElectronAccess
         }
       ]
     }
diff --git a/src/schemas/nodeDef/migration.ts b/src/schemas/nodeDef/migration.ts
index e5aa6d4843..22d91c16e7 100644
--- a/src/schemas/nodeDef/migration.ts
+++ b/src/schemas/nodeDef/migration.ts
@@ -1,11 +1,13 @@
-import {
+import type {
   ComfyNodeDef as ComfyNodeDefV2,
   InputSpec as InputSpecV2,
   OutputSpec as OutputSpecV2
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import {
+import type {
   ComfyNodeDef as ComfyNodeDefV1,
-  InputSpec as InputSpecV1,
+  InputSpec as InputSpecV1
+} from '@/schemas/nodeDefSchema'
+import {
   getComboSpecComboOptions,
   isComboInputSpec,
   isComboInputSpecV1
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index 5c8dd209c4..40b4ce04d7 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -7,7 +7,7 @@ import type {
   ModelFolderInfo
 } from '@/platform/assets/schemas/assetSchema'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { WorkflowTemplates } from '@/platform/workflow/templates/types/template'
+import { type WorkflowTemplates } from '@/platform/workflow/templates/types/template'
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON,
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 0455f26ad3..d7583724aa 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -19,7 +19,7 @@ import { useWorkflowService } from '@/platform/workflow/core/services/workflowSe
 import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowValidation } from '@/platform/workflow/validation/composables/useWorkflowValidation'
 import {
-  ComfyApiWorkflow,
+  type ComfyApiWorkflow,
   type ComfyWorkflowJSON,
   type ModelFile,
   type NodeId,
@@ -61,9 +61,9 @@ import { useWidgetStore } from '@/stores/widgetStore'
 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 ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
+import { type ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 import {
@@ -596,7 +596,10 @@ export class ComfyApp {
         const keybindingStore = useKeybindingStore()
         const keybinding = keybindingStore.getKeybinding(keyCombo)
 
-        if (keybinding && keybinding.targetElementId === 'graph-canvas') {
+        if (
+          keybinding &&
+          keybinding.targetElementId === 'graph-canvas-container'
+        ) {
           useCommandStore().execute(keybinding.commandId)
 
           this.graph.change()
@@ -1121,6 +1124,13 @@ export class ComfyApp {
       nodes: ComfyWorkflowJSON['nodes'],
       path: string = ''
     ) => {
+      if (!Array.isArray(nodes)) {
+        console.warn(
+          'Workflow nodes data is missing or invalid, skipping node processing',
+          { nodes, path }
+        )
+        return
+      }
       for (let n of nodes) {
         // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
         if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
@@ -1768,9 +1778,8 @@ export class ComfyApp {
    * Clean current state
    */
   clean() {
-    this.nodeOutputs = {}
-    const { revokeAllPreviews } = useNodeOutputStore()
-    revokeAllPreviews()
+    const nodeOutputStore = useNodeOutputStore()
+    nodeOutputStore.resetAllOutputsAndPreviews()
     const executionStore = useExecutionStore()
     executionStore.lastNodeErrors = null
     executionStore.lastExecutionError = null
diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts
index 1b5f9c88e9..f2b2afc30b 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -10,6 +10,7 @@ import {
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 
 import { api } from './api'
@@ -86,7 +87,7 @@ export class ChangeTracker {
       app.canvas.ds.offset = this.ds.offset
     }
     if (this.nodeOutputs) {
-      app.nodeOutputs = this.nodeOutputs
+      useNodeOutputStore().restoreOutputs(this.nodeOutputs)
     }
     if (this.subgraphState) {
       const { navigation } = this.subgraphState
diff --git a/src/scripts/metadata/avif.ts b/src/scripts/metadata/avif.ts
index 70e5dcf627..c0d747d9e2 100644
--- a/src/scripts/metadata/avif.ts
+++ b/src/scripts/metadata/avif.ts
@@ -2,7 +2,7 @@ import {
   type AvifIinfBox,
   type AvifIlocBox,
   type AvifInfeBox,
-  ComfyMetadata,
+  type ComfyMetadata,
   ComfyMetadataTags,
   type IsobmffBoxContentRange
 } from '@/types/metadataTypes'
diff --git a/src/scripts/metadata/ebml.ts b/src/scripts/metadata/ebml.ts
index 29068ddd2b..835c2502d6 100644
--- a/src/scripts/metadata/ebml.ts
+++ b/src/scripts/metadata/ebml.ts
@@ -3,12 +3,12 @@ import {
   type ComfyWorkflowJSON
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import {
-  ComfyMetadata,
+  type ComfyMetadata,
   ComfyMetadataTags,
-  EbmlElementRange,
-  EbmlTagPosition,
-  TextRange,
-  VInt
+  type EbmlElementRange,
+  type EbmlTagPosition,
+  type TextRange,
+  type VInt
 } from '@/types/metadataTypes'
 
 const WEBM_SIGNATURE = [0x1a, 0x45, 0xdf, 0xa3]
diff --git a/src/scripts/metadata/gltf.ts b/src/scripts/metadata/gltf.ts
index da03cacc1e..83a5c3c3e7 100644
--- a/src/scripts/metadata/gltf.ts
+++ b/src/scripts/metadata/gltf.ts
@@ -1,14 +1,14 @@
 import {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
+  type ComfyApiWorkflow,
+  type ComfyWorkflowJSON
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import {
   ASCII,
-  ComfyMetadata,
+  type ComfyMetadata,
   ComfyMetadataTags,
-  GltfChunkHeader,
-  GltfHeader,
-  GltfJsonData,
+  type GltfChunkHeader,
+  type GltfHeader,
+  type GltfJsonData,
   GltfSizeBytes
 } from '@/types/metadataTypes'
 
diff --git a/src/scripts/metadata/isobmff.ts b/src/scripts/metadata/isobmff.ts
index 6e366c22c1..a9a7f88265 100644
--- a/src/scripts/metadata/isobmff.ts
+++ b/src/scripts/metadata/isobmff.ts
@@ -1,12 +1,12 @@
 import {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
+  type ComfyApiWorkflow,
+  type ComfyWorkflowJSON
 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import {
   ASCII,
-  ComfyMetadata,
+  type ComfyMetadata,
   ComfyMetadataTags,
-  IsobmffBoxContentRange
+  type IsobmffBoxContentRange
 } from '@/types/metadataTypes'
 
 // Set max read high, as atoms are stored near end of file
diff --git a/src/scripts/metadata/svg.ts b/src/scripts/metadata/svg.ts
index 90dc95b10b..e947956d38 100644
--- a/src/scripts/metadata/svg.ts
+++ b/src/scripts/metadata/svg.ts
@@ -1,4 +1,4 @@
-import { ComfyMetadata } from '@/types/metadataTypes'
+import { type ComfyMetadata } from '@/types/metadataTypes'
 
 export async function getSvgMetadata(file: File): Promise<ComfyMetadata> {
   const text = await file.text()
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index e9b9359c26..860e45caf1 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,6 +1,6 @@
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
-import { type StatusWsMessageStatus, TaskItem } from '@/schemas/apiSchema'
+import { type StatusWsMessageStatus, type TaskItem } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
diff --git a/src/scripts/ui/components/button.ts b/src/scripts/ui/components/button.ts
index d4601c868f..7a4aae6b67 100644
--- a/src/scripts/ui/components/button.ts
+++ b/src/scripts/ui/components/button.ts
@@ -1,10 +1,10 @@
-import { Settings } from '@/schemas/apiSchema'
+import { type Settings } from '@/schemas/apiSchema'
 import type { ComfyApp } from '@/scripts/app'
 
 import type { ComfyComponent } from '.'
 import { $el } from '../../ui'
 import { prop } from '../../utils'
-import { ClassList, applyClasses, toggleElement } from '../utils'
+import { type ClassList, applyClasses, toggleElement } from '../utils'
 import type { ComfyPopup } from './popup'
 
 type ComfyButtonProps = {
diff --git a/src/scripts/ui/components/popup.ts b/src/scripts/ui/components/popup.ts
index fbea5f2caa..04bb38149c 100644
--- a/src/scripts/ui/components/popup.ts
+++ b/src/scripts/ui/components/popup.ts
@@ -1,6 +1,6 @@
 import { $el } from '../../ui'
 import { prop } from '../../utils'
-import { ClassList, applyClasses } from '../utils'
+import { type ClassList, applyClasses } from '../utils'
 
 export class ComfyPopup extends EventTarget {
   element = $el('div.comfyui-popup')
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 11cf0a7dd8..cf32ee3b91 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -5,11 +5,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  Colors,
-  type Palette,
-  paletteSchema
-} from '@/schemas/colorPaletteSchema'
+import type { Colors } from '@/schemas/colorPaletteSchema'
+import { type Palette, paletteSchema } from '@/schemas/colorPaletteSchema'
 import { app } from '@/scripts/app'
 import { downloadBlob, uploadFile } from '@/scripts/utils'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
diff --git a/src/services/comfyRegistryService.ts b/src/services/comfyRegistryService.ts
index 0221bd00c5..753d9f23ff 100644
--- a/src/services/comfyRegistryService.ts
+++ b/src/services/comfyRegistryService.ts
@@ -1,4 +1,5 @@
-import axios, { AxiosError, AxiosResponse } from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+import axios from 'axios'
 import { ref } from 'vue'
 
 import type { components, operations } from '@/types/comfyRegistryTypes'
diff --git a/src/services/customerEventsService.ts b/src/services/customerEventsService.ts
index a951bacf7e..32eb9d6df1 100644
--- a/src/services/customerEventsService.ts
+++ b/src/services/customerEventsService.ts
@@ -1,10 +1,12 @@
-import axios, { AxiosError, AxiosResponse } from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+import axios from 'axios'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { COMFY_API_BASE_URL } from '@/config/comfyApi'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { type components, operations } from '@/types/comfyRegistryTypes'
+import type { operations } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { isAbortError } from '@/utils/typeGuardUtil'
 
 export enum EventType {
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 2214d805b6..fb844b4482 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -1,24 +1,16 @@
 import { merge } from 'es-toolkit/compat'
-import { Component } from 'vue'
+import type { Component } from 'vue'
 
 import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
-import ManagerProgressDialogContent from '@/components/dialog/content/ManagerProgressDialogContent.vue'
 import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
 import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
 import SignInContent from '@/components/dialog/content/SignInContent.vue'
 import TopUpCreditsDialogContent from '@/components/dialog/content/TopUpCreditsDialogContent.vue'
 import UpdatePasswordContent from '@/components/dialog/content/UpdatePasswordContent.vue'
-import ManagerDialogContent from '@/components/dialog/content/manager/ManagerDialogContent.vue'
-import ManagerHeader from '@/components/dialog/content/manager/ManagerHeader.vue'
-import NodeConflictDialogContent from '@/components/dialog/content/manager/NodeConflictDialogContent.vue'
-import NodeConflictFooter from '@/components/dialog/content/manager/NodeConflictFooter.vue'
-import NodeConflictHeader from '@/components/dialog/content/manager/NodeConflictHeader.vue'
-import ManagerProgressFooter from '@/components/dialog/footer/ManagerProgressFooter.vue'
 import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
-import ManagerProgressHeader from '@/components/dialog/header/ManagerProgressHeader.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import TemplateWorkflowsContent from '@/components/templates/TemplateWorkflowsContent.vue'
 import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkflowsDialogHeader.vue'
@@ -30,7 +22,15 @@ import {
   type ShowDialogOptions,
   useDialogStore
 } from '@/stores/dialogStore'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import ManagerProgressDialogContent from '@/workbench/extensions/manager/components/ManagerProgressDialogContent.vue'
+import ManagerProgressFooter from '@/workbench/extensions/manager/components/ManagerProgressFooter.vue'
+import ManagerProgressHeader from '@/workbench/extensions/manager/components/ManagerProgressHeader.vue'
+import ManagerDialogContent from '@/workbench/extensions/manager/components/manager/ManagerDialogContent.vue'
+import ManagerHeader from '@/workbench/extensions/manager/components/manager/ManagerHeader.vue'
+import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
+import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
+import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 export type ConfirmationDialogType =
   | 'default'
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 37c636e124..770d3991ee 100644
--- a/src/services/load3dService.ts
+++ b/src/services/load3dService.ts
@@ -4,7 +4,7 @@ import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 type Load3dReadyCallback = (load3d: Load3d | Load3dAnimation) => void
diff --git a/src/services/mediaCacheService.ts b/src/services/mediaCacheService.ts
index 65f87a43c2..b2e24c29ed 100644
--- a/src/services/mediaCacheService.ts
+++ b/src/services/mediaCacheService.ts
@@ -113,7 +113,7 @@ class MediaCacheService {
 
     try {
       // Fetch the media
-      const response = await fetch(src)
+      const response = await fetch(src, { cache: 'force-cache' })
       if (!response.ok) {
         throw new Error(`Failed to fetch: ${response.status}`)
       }
diff --git a/src/services/nodeOrganizationService.ts b/src/services/nodeOrganizationService.ts
index e96c61e5f4..be641610df 100644
--- a/src/services/nodeOrganizationService.ts
+++ b/src/services/nodeOrganizationService.ts
@@ -1,4 +1,5 @@
-import { ComfyNodeDefImpl, buildNodeDefTree } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { buildNodeDefTree } from '@/stores/nodeDefStore'
 import type {
   NodeGroupingStrategy,
   NodeOrganizationOptions,
diff --git a/src/services/nodeSearchService.ts b/src/services/nodeSearchService.ts
index 39bb23e57f..d2388fc7bf 100644
--- a/src/services/nodeSearchService.ts
+++ b/src/services/nodeSearchService.ts
@@ -1,7 +1,8 @@
-import { FuseSearchOptions } from 'fuse.js'
+import type { FuseSearchOptions } from 'fuse.js'
 
-import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { FuseFilter, FuseFilterWithValue, FuseSearch } from '@/utils/fuseUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
+import { FuseFilter, FuseSearch } from '@/utils/fuseUtil'
 
 export class NodeSearchService {
   public readonly nodeFuseSearch: FuseSearch<ComfyNodeDefImpl>
diff --git a/src/services/providers/algoliaSearchProvider.ts b/src/services/providers/algoliaSearchProvider.ts
index ee22ceb486..7edf985809 100644
--- a/src/services/providers/algoliaSearchProvider.ts
+++ b/src/services/providers/algoliaSearchProvider.ts
@@ -16,7 +16,6 @@ import type {
   SearchAttribute,
   SearchNodePacksParams
 } from '@/types/algoliaTypes'
-import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import type {
   NodePackSearchProvider,
@@ -24,6 +23,7 @@ import type {
   SortableField
 } from '@/types/searchServiceTypes'
 import { paramsToCacheKey } from '@/utils/formatUtil'
+import { SortableAlgoliaField } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 type RegistryNodePack = components['schemas']['Node']
 
diff --git a/src/services/subgraphService.ts b/src/services/subgraphService.ts
index 84285ef518..b16bf9ca96 100644
--- a/src/services/subgraphService.ts
+++ b/src/services/subgraphService.ts
@@ -1,7 +1,7 @@
-import {
-  type ExportedSubgraph,
-  type ExportedSubgraphInstance,
-  type Subgraph
+import type {
+  ExportedSubgraph,
+  ExportedSubgraphInstance,
+  Subgraph
 } from '@/lib/litegraph/src/litegraph'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
diff --git a/src/stores/aboutPanelStore.ts b/src/stores/aboutPanelStore.ts
index cdb626095b..de17df566a 100644
--- a/src/stores/aboutPanelStore.ts
+++ b/src/stores/aboutPanelStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
-import { AboutPageBadge } from '@/types/comfy'
+import type { AboutPageBadge } from '@/types/comfy'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
 import { useExtensionStore } from './extensionStore'
diff --git a/src/stores/apiKeyAuthStore.ts b/src/stores/apiKeyAuthStore.ts
index a167e758dc..77da8c41ba 100644
--- a/src/stores/apiKeyAuthStore.ts
+++ b/src/stores/apiKeyAuthStore.ts
@@ -6,8 +6,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { ApiKeyAuthHeader } from '@/types/authTypes'
-import { operations } from '@/types/comfyRegistryTypes'
+import type { ApiKeyAuthHeader } from '@/types/authTypes'
+import type { operations } from '@/types/comfyRegistryTypes'
 
 type ComfyApiUser =
   operations['createCustomer']['responses']['201']['content']['application/json']
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 46edebfa52..8791ab4e14 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -5,10 +5,8 @@ import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type {
   ComfyNode,
   ComfyWorkflowJSON,
@@ -45,6 +43,57 @@ interface QueuedPrompt {
   workflow?: ComfyWorkflow
 }
 
+const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
+  const node = graph.getNodeById(id)
+  if (node?.isSubgraphNode()) return node.subgraph
+}
+
+/**
+ * Recursively get the subgraph objects for the given subgraph instance IDs
+ * @param currentGraph The current graph
+ * @param subgraphNodeIds The instance IDs
+ * @param subgraphs The subgraphs
+ * @returns The subgraphs that correspond to each of the instance IDs.
+ */
+function getSubgraphsFromInstanceIds(
+  currentGraph: LGraph | Subgraph,
+  subgraphNodeIds: string[],
+  subgraphs: Subgraph[] = []
+): Subgraph[] {
+  // Last segment is the node portion; nothing to do.
+  if (subgraphNodeIds.length === 1) return subgraphs
+
+  const currentPart = subgraphNodeIds.shift()
+  if (currentPart === undefined) return subgraphs
+
+  const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
+  if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
+
+  subgraphs.push(subgraph)
+  return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
+}
+
+/**
+ * Convert execution context node IDs to NodeLocatorIds
+ * @param nodeId The node ID from execution context (could be execution ID)
+ * @returns The NodeLocatorId
+ */
+function executionIdToNodeLocatorId(nodeId: string | number): NodeLocatorId {
+  const nodeIdStr = String(nodeId)
+
+  if (!nodeIdStr.includes(':')) {
+    // It's a top-level node ID
+    return nodeIdStr
+  }
+
+  // It's an execution node ID
+  const parts = nodeIdStr.split(':')
+  const localNodeId = parts[parts.length - 1]
+  const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
+  const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
+  return nodeLocatorId
+}
+
 export const useExecutionStore = defineStore('execution', () => {
   const workflowStore = useWorkflowStore()
   const canvasStore = useCanvasStore()
@@ -57,29 +106,6 @@ export const useExecutionStore = defineStore('execution', () => {
   // This is the progress of all nodes in the currently executing workflow
   const nodeProgressStates = ref<Record<string, NodeProgressState>>({})
 
-  /**
-   * Convert execution context node IDs to NodeLocatorIds
-   * @param nodeId The node ID from execution context (could be execution ID)
-   * @returns The NodeLocatorId
-   */
-  const executionIdToNodeLocatorId = (
-    nodeId: string | number
-  ): NodeLocatorId => {
-    const nodeIdStr = String(nodeId)
-
-    if (!nodeIdStr.includes(':')) {
-      // It's a top-level node ID
-      return nodeIdStr
-    }
-
-    // It's an execution node ID
-    const parts = nodeIdStr.split(':')
-    const localNodeId = parts[parts.length - 1]
-    const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
-    const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
-    return nodeLocatorId
-  }
-
   const mergeExecutionProgressStates = (
     currentState: NodeProgressState | undefined,
     newState: NodeProgressState
@@ -141,9 +167,13 @@ export const useExecutionStore = defineStore('execution', () => {
 
   // @deprecated For backward compatibility - stores the primary executing node ID
   const executingNodeId = computed<NodeId | null>(() => {
-    return executingNodeIds.value.length > 0 ? executingNodeIds.value[0] : null
+    return executingNodeIds.value[0] ?? null
   })
 
+  const uniqueExecutingNodeIdStrings = computed(
+    () => new Set(executingNodeIds.value.map(String))
+  )
+
   // For backward compatibility - returns the primary executing node
   const executingNode = computed<ComfyNode | null>(() => {
     if (!executingNodeId.value) return null
@@ -161,36 +191,6 @@ export const useExecutionStore = defineStore('execution', () => {
     )
   })
 
-  const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
-    const node = graph.getNodeById(id)
-    if (node?.isSubgraphNode()) return node.subgraph
-  }
-
-  /**
-   * Recursively get the subgraph objects for the given subgraph instance IDs
-   * @param currentGraph The current graph
-   * @param subgraphNodeIds The instance IDs
-   * @param subgraphs The subgraphs
-   * @returns The subgraphs that correspond to each of the instance IDs.
-   */
-  const getSubgraphsFromInstanceIds = (
-    currentGraph: LGraph | Subgraph,
-    subgraphNodeIds: string[],
-    subgraphs: Subgraph[] = []
-  ): Subgraph[] => {
-    // Last segment is the node portion; nothing to do.
-    if (subgraphNodeIds.length === 1) return subgraphs
-
-    const currentPart = subgraphNodeIds.shift()
-    if (currentPart === undefined) return subgraphs
-
-    const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-    if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
-
-    subgraphs.push(subgraph)
-    return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
-  }
-
   // This is the progress of the currently executing node (for backward compatibility)
   const _executingNodeProgress = ref<ProgressWsMessage | null>(null)
   const executingNodeProgress = computed(() =>
@@ -425,66 +425,25 @@ export const useExecutionStore = defineStore('execution', () => {
   return {
     isIdle,
     clientId,
-    /**
-     * The id of the prompt that is currently being executed
-     */
     activePromptId,
-    /**
-     * The queued prompts
-     */
     queuedPrompts,
-    /**
-     * The node errors from the previous execution.
-     */
     lastNodeErrors,
-    /**
-     * The error from the previous execution.
-     */
     lastExecutionError,
-    /**
-     * Local node ID for the most recent execution error.
-     */
     lastExecutionErrorNodeId,
-    /**
-     * The id of the node that is currently being executed (backward compatibility)
-     */
     executingNodeId,
-    /**
-     * The list of all nodes that are currently executing
-     */
     executingNodeIds,
-    /**
-     * The prompt that is currently being executed
-     */
     activePrompt,
-    /**
-     * The total number of nodes to execute
-     */
     totalNodesToExecute,
-    /**
-     * The number of nodes that have been executed
-     */
     nodesExecuted,
-    /**
-     * The progress of the execution
-     */
     executionProgress,
-    /**
-     * The node that is currently being executed (backward compatibility)
-     */
     executingNode,
-    /**
-     * The progress of the executing node (backward compatibility)
-     */
     executingNodeProgress,
-    /**
-     * All node progress states from progress_state events
-     */
     nodeProgressStates,
     nodeLocationProgressStates,
     bindExecutionEvents,
     unbindExecutionEvents,
     storePrompt,
+    uniqueExecutingNodeIdStrings,
     // Raw executing progress data for backward compatibility in ComfyApp.
     _executingNodeProgress,
     // NodeLocatorId conversion helpers
diff --git a/src/stores/firebaseAuthStore.ts b/src/stores/firebaseAuthStore.ts
index 8f2af64399..698efff3e7 100644
--- a/src/stores/firebaseAuthStore.ts
+++ b/src/stores/firebaseAuthStore.ts
@@ -25,8 +25,8 @@ import { COMFY_API_BASE_URL } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
-import { type AuthHeader } from '@/types/authTypes'
-import { operations } from '@/types/comfyRegistryTypes'
+import type { AuthHeader } from '@/types/authTypes'
+import type { operations } from '@/types/comfyRegistryTypes'
 
 type CreditPurchaseResponse =
   operations['InitiateCreditPurchase']['responses']['201']['content']['application/json']
@@ -62,10 +62,12 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
 
   // Providers
   const googleProvider = new GoogleAuthProvider()
+  googleProvider.addScope('email')
   googleProvider.setCustomParameters({
     prompt: 'select_account'
   })
   const githubProvider = new GithubAuthProvider()
+  githubProvider.addScope('user:email')
   githubProvider.setCustomParameters({
     prompt: 'select_account'
   })
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index 4fc3adb80b..aebc23810a 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -2,13 +2,10 @@ import { useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-import {
-  LGraphNode,
-  Subgraph,
-  SubgraphNode
-} from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { Subgraph } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import {
+import type {
   ExecutedWsMessage,
   ResultItem,
   ResultItemType
@@ -331,6 +328,19 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     return hadOutputs
   }
 
+  function restoreOutputs(
+    outputs: Record<string, ExecutedWsMessage['output']>
+  ) {
+    app.nodeOutputs = outputs
+    nodeOutputs.value = outputs
+  }
+
+  function resetAllOutputsAndPreviews() {
+    app.nodeOutputs = {}
+    nodeOutputs.value = {}
+    revokeAllPreviews()
+  }
+
   return {
     // Getters
     getNodeOutputs,
@@ -349,6 +359,8 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     revokeAllPreviews,
     revokeSubgraphPreviews,
     removeNodeOutputs,
+    restoreOutputs,
+    resetAllOutputsAndPreviews,
 
     // State
     nodeOutputs,
diff --git a/src/stores/keybindingStore.ts b/src/stores/keybindingStore.ts
index d9c64af84e..76a21120cc 100644
--- a/src/stores/keybindingStore.ts
+++ b/src/stores/keybindingStore.ts
@@ -1,9 +1,10 @@
 import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
-import { Ref, computed, ref, toRaw } from 'vue'
+import type { Ref } from 'vue'
+import { computed, ref, toRaw } from 'vue'
 
 import { RESERVED_BY_TEXT_INPUT } from '@/constants/reservedKeyCombos'
-import { KeyCombo, Keybinding } from '@/schemas/keyBindingSchema'
+import type { KeyCombo, Keybinding } from '@/schemas/keyBindingSchema'
 
 export class KeybindingImpl implements Keybinding {
   commandId: string
diff --git a/src/stores/menuItemStore.ts b/src/stores/menuItemStore.ts
index 39066ac28c..0a24769a1d 100644
--- a/src/stores/menuItemStore.ts
+++ b/src/stores/menuItemStore.ts
@@ -3,7 +3,7 @@ import type { MenuItem } from 'primevue/menuitem'
 import { ref } from 'vue'
 
 import { CORE_MENU_COMMANDS } from '@/constants/coreMenuCommands'
-import { ComfyExtension } from '@/types/comfy'
+import type { ComfyExtension } from '@/types/comfy'
 
 import { useCommandStore } from './commandStore'
 
diff --git a/src/stores/modelToNodeStore.ts b/src/stores/modelToNodeStore.ts
index fc78dc1e59..4f79252942 100644
--- a/src/stores/modelToNodeStore.ts
+++ b/src/stores/modelToNodeStore.ts
@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 /** Helper class that defines how to construct a node from a model. */
 export class ModelNodeProvider {
@@ -32,12 +33,43 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
     )
   })
 
+  /** Internal computed for efficient reverse lookup: nodeType -> category */
+  const nodeTypeToCategory = computed(() => {
+    const lookup: Record<string, string> = {}
+    for (const [category, providers] of Object.entries(modelToNodeMap.value)) {
+      for (const provider of providers) {
+        // Only store the first category for each node type (matches current assetService behavior)
+        if (!lookup[provider.nodeDef.name]) {
+          lookup[provider.nodeDef.name] = category
+        }
+      }
+    }
+    return lookup
+  })
+
   /** Get set of all registered node types for efficient lookup */
   function getRegisteredNodeTypes(): Set<string> {
     registerDefaults()
     return registeredNodeTypes.value
   }
 
+  /**
+   * Get the category for a given node type.
+   * Performs efficient O(1) lookup using cached reverse map.
+   * @param nodeType The node type name to find the category for
+   * @returns The category name, or undefined if not found
+   */
+  function getCategoryForNodeType(nodeType: string): string | undefined {
+    registerDefaults()
+
+    // Handle invalid input gracefully
+    if (!nodeType || typeof nodeType !== 'string') {
+      return undefined
+    }
+
+    return nodeTypeToCategory.value[nodeType]
+  }
+
   /**
    * Get the node provider for the given model type name.
    * @param modelType The name of the model type to get the node provider for.
@@ -108,6 +140,7 @@ export const useModelToNodeStore = defineStore('modelToNode', () => {
   return {
     modelToNodeMap,
     getRegisteredNodeTypes,
+    getCategoryForNodeType,
     getNodeProvider,
     getAllNodeProviders,
     registerNodeProvider,
diff --git a/src/stores/nodeBookmarkStore.ts b/src/stores/nodeBookmarkStore.ts
index e56041ebd2..55ffebf239 100644
--- a/src/stores/nodeBookmarkStore.ts
+++ b/src/stores/nodeBookmarkStore.ts
@@ -7,7 +7,8 @@ import type { BookmarkCustomization } from '@/schemas/apiSchema'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 
 import { useNodeDefStore } from './nodeDefStore'
-import { ComfyNodeDefImpl, createDummyFolderNodeDef } from './nodeDefStore'
+import type { ComfyNodeDefImpl } from './nodeDefStore'
+import { createDummyFolderNodeDef } from './nodeDefStore'
 import { buildNodeDefTree } from './nodeDefStore'
 
 const BOOKMARK_SETTING_ID = 'Comfy.NodeLibrary.Bookmarks.V2'
diff --git a/src/stores/serverConfigStore.ts b/src/stores/serverConfigStore.ts
index 3781d0ab59..acbd61dd8f 100644
--- a/src/stores/serverConfigStore.ts
+++ b/src/stores/serverConfigStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
+import type { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
 
 type ServerConfigWithValue<T> = ServerConfig<T> & {
   /**
diff --git a/src/stores/subgraphStore.ts b/src/stores/subgraphStore.ts
index 9706ffc4f1..cf6962e335 100644
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -6,9 +6,9 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
   ComfyWorkflow,
-  LoadedComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
 import type {
@@ -26,7 +26,7 @@ import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
 import { useExecutionStore } from '@/stores/executionStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { UserFile } from '@/stores/userFileStore'
+import type { UserFile } from '@/stores/userFileStore'
 
 async function confirmOverwrite(name: string): Promise<boolean | null> {
   return await useDialogService().confirm({
diff --git a/src/stores/userFileStore.ts b/src/stores/userFileStore.ts
index 383bab6b02..f2742f3e3a 100644
--- a/src/stores/userFileStore.ts
+++ b/src/stores/userFileStore.ts
@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { UserDataFullInfo } from '@/schemas/apiSchema'
+import type { UserDataFullInfo } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
-import { TreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { getPathDetails } from '@/utils/formatUtil'
 import { syncEntities } from '@/utils/syncUtil'
 import { buildTree } from '@/utils/treeUtil'
diff --git a/src/stores/widgetStore.ts b/src/stores/widgetStore.ts
index b22ac17b73..be4f3efc82 100644
--- a/src/stores/widgetStore.ts
+++ b/src/stores/widgetStore.ts
@@ -6,7 +6,8 @@ import {
   type InputSpec as InputSpecV1,
   getInputSpecType
 } from '@/schemas/nodeDefSchema'
-import { ComfyWidgetConstructor, ComfyWidgets } from '@/scripts/widgets'
+import type { ComfyWidgetConstructor } from '@/scripts/widgets'
+import { ComfyWidgets } from '@/scripts/widgets'
 
 export const useWidgetStore = defineStore('widget', () => {
   const coreWidgets = ComfyWidgets
diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts
index 1fd95babee..017c2e0b29 100644
--- a/src/stores/workspace/bottomPanelStore.ts
+++ b/src/stores/workspace/bottomPanelStore.ts
@@ -7,7 +7,7 @@ import {
   useLogsTerminalTab
 } from '@/composables/bottomPanelTabs/useTerminalTabs'
 import { useCommandStore } from '@/stores/commandStore'
-import { ComfyExtension } from '@/types/comfy'
+import type { ComfyExtension } from '@/types/comfy'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index 3974641cf6..fec3df08b4 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -8,7 +8,7 @@ import { t, te } from '@/i18n'
 import { useWorkflowsSidebarTab } from '@/platform/workflow/management/composables/useWorkflowsSidebarTab'
 import { useCommandStore } from '@/stores/commandStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
-import { SidebarTabExtension } from '@/types/extensionTypes'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useSidebarTabStore = defineStore('sidebarTab', () => {
   const sidebarTabs = ref<SidebarTabExtension[]>([])
diff --git a/src/types/algoliasearch-lite.d.ts b/src/types/algoliasearch-lite.d.ts
index 1514d272af..6a2be58ae2 100644
--- a/src/types/algoliasearch-lite.d.ts
+++ b/src/types/algoliasearch-lite.d.ts
@@ -1,5 +1,8 @@
 declare module 'algoliasearch/dist/lite/builds/browser' {
-  import { LiteClient, ClientOptions } from 'algoliasearch/dist/lite/browser'
+  import type {
+    LiteClient,
+    ClientOptions
+  } from 'algoliasearch/dist/lite/browser'
 
   /**
    * Creates a new Algolia Search client that uses the Lite API Client (Browser version)
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 53ce42ce87..0ce8d89dc3 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -1,4 +1,4 @@
-import { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index 0ba93043bf..bc2b920ba9 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -1,4 +1,4 @@
-import { Component } from 'vue'
+import type { Component } from 'vue'
 
 import type { useDialogService } from '@/services/dialogService'
 import type { ComfyCommand } from '@/stores/commandStore'
diff --git a/src/types/index.ts b/src/types/index.ts
index 8b6242087a..6947f433fc 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,7 +14,7 @@ import type {
   UserData,
   UserDataFullInfo
 } from '@/schemas/apiSchema'
-import { ComfyApp } from '@/scripts/app'
+import type { ComfyApp } from '@/scripts/app'
 
 import type {
   BottomPanelExtension,
diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts
index d404ff88f7..0f5dee17df 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -82,7 +82,7 @@ declare module '@/lib/litegraph/src/litegraph' {
   }
 
   // Add interface augmentations into the class itself
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+
   interface BaseWidget extends IBaseWidget {}
 
   interface LGraphNode {
diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
index 27be67f11a..7dbc5f2707 100644
--- a/src/types/simplifiedWidget.ts
+++ b/src/types/simplifiedWidget.ts
@@ -27,6 +27,9 @@ export interface SimplifiedWidget<
   /** Current value of the widget */
   value: T
 
+  /** Localized display label (falls back to name if not provided) */
+  label?: string
+
   /** Widget options including filtered PrimeVue props */
   options?: O
 
diff --git a/src/types/widgetTypes.ts b/src/types/widgetTypes.ts
index 28d4bb15b6..06ef1e3e04 100644
--- a/src/types/widgetTypes.ts
+++ b/src/types/widgetTypes.ts
@@ -1,3 +1,3 @@
-import { InjectionKey } from 'vue'
+import type { InjectionKey } from 'vue'
 
 export const OnCloseKey: InjectionKey<() => void> = Symbol()
diff --git a/src/utils/envUtil.ts b/src/utils/envUtil.ts
index 9d28fac433..d31efdec7d 100644
--- a/src/utils/envUtil.ts
+++ b/src/utils/envUtil.ts
@@ -1,4 +1,4 @@
-import { ElectronAPI } from '@comfyorg/comfyui-electron-types'
+import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 
 export function isElectron() {
   return 'electronAPI' in window && window.electronAPI !== undefined
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index b89b284565..9d4f0c2702 100644
--- a/src/utils/formatUtil.ts
+++ b/src/utils/formatUtil.ts
@@ -1,4 +1,4 @@
-import { ResultItem } from '@/schemas/apiSchema'
+import type { ResultItem } from '@/schemas/apiSchema'
 import type { operations } from '@/types/comfyRegistryTypes'
 
 export function formatCamelCase(str: string): string {
@@ -364,39 +364,6 @@ export const downloadUrlToHfRepoUrl = (url: string): string => {
   }
 }
 
-export const isSemVer = (
-  version: string
-): version is `${number}.${number}.${number}` => {
-  const regex = /^\d+\.\d+\.\d+$/
-  return regex.test(version)
-}
-
-const normalizeVersion = (version: string) =>
-  version
-    .split(/[+.-]/)
-    .map(Number)
-    .filter((part) => !Number.isNaN(part))
-
-export function compareVersions(
-  versionA: string | undefined,
-  versionB: string | undefined
-): number {
-  versionA ??= '0.0.0'
-  versionB ??= '0.0.0'
-
-  const aParts = normalizeVersion(versionA)
-  const bParts = normalizeVersion(versionB)
-
-  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
-    const aPart = aParts[i] ?? 0
-    const bPart = bParts[i] ?? 0
-    if (aPart < bPart) return -1
-    if (aPart > bPart) return 1
-  }
-
-  return 0
-}
-
 /**
  * Converts Metronome's integer amount back to a formatted currency string.
  * For USD, converts from cents to dollars.
diff --git a/src/utils/fuseUtil.ts b/src/utils/fuseUtil.ts
index 313382d0e3..8967ccd2a4 100644
--- a/src/utils/fuseUtil.ts
+++ b/src/utils/fuseUtil.ts
@@ -1,4 +1,5 @@
-import Fuse, { FuseOptionKey, FuseSearchOptions, IFuseOptions } from 'fuse.js'
+import type { FuseOptionKey, FuseSearchOptions, IFuseOptions } from 'fuse.js'
+import Fuse from 'fuse.js'
 
 export type SearchAuxScore = number[]
 
diff --git a/src/utils/graphTraversalUtil.ts b/src/utils/graphTraversalUtil.ts
index 72f6f37333..4a573ed24c 100644
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -8,6 +8,23 @@ import { parseNodeLocatorId } from '@/types/nodeIdentification'
 
 import { isSubgraphIoNode } from './typeGuardUtil'
 
+interface NodeWithId {
+  id: string | number
+  subgraphId?: string | null
+}
+
+/**
+ * Constructs a locator ID from node data with optional subgraph context.
+ *
+ * @param nodeData - Node data containing id and optional subgraphId
+ * @returns The locator ID string
+ */
+export function getLocatorIdFromNodeData(nodeData: NodeWithId): string {
+  return nodeData.subgraphId
+    ? `${nodeData.subgraphId}:${String(nodeData.id)}`
+    : String(nodeData.id)
+}
+
 /**
  * Parses an execution ID into its component parts.
  *
diff --git a/src/utils/litegraphUtil.ts b/src/utils/litegraphUtil.ts
index 24503c2864..1c67969051 100644
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -1,6 +1,7 @@
 import _ from 'es-toolkit/compat'
 
-import { ColorOption, LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
+import type { ColorOption, LGraph } from '@/lib/litegraph/src/litegraph'
+import { Reroute } from '@/lib/litegraph/src/litegraph'
 import {
   LGraphGroup,
   LGraphNode,
diff --git a/src/utils/mapperUtil.ts b/src/utils/mapperUtil.ts
index 82d27fac44..4c9b3ce404 100644
--- a/src/utils/mapperUtil.ts
+++ b/src/utils/mapperUtil.ts
@@ -1,10 +1,10 @@
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
-import {
+import type {
   ComfyNodeDef as ComfyNodeDefV2,
   InputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
-import { components } from '@/types/comfyRegistryTypes'
+import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const registryToFrontendV2NodeOutputs = (
   registryDef: components['schemas']['ComfyNode']
diff --git a/src/utils/nodeDefOrderingUtil.ts b/src/utils/nodeDefOrderingUtil.ts
index 6e5102b5f1..2a39fa70c1 100644
--- a/src/utils/nodeDefOrderingUtil.ts
+++ b/src/utils/nodeDefOrderingUtil.ts
@@ -1,4 +1,4 @@
-import { TWidgetValue } from '@/lib/litegraph/src/litegraph'
+import type { TWidgetValue } from '@/lib/litegraph/src/litegraph'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
diff --git a/src/utils/tailwindUtil.ts b/src/utils/tailwindUtil.ts
index 78e3a3d1ae..dc275c6b17 100644
--- a/src/utils/tailwindUtil.ts
+++ b/src/utils/tailwindUtil.ts
@@ -1,8 +1 @@
-import clsx, { type ClassArray } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export type { ClassValue } from 'clsx'
-
-export function cn(...inputs: ClassArray) {
-  return twMerge(clsx(inputs))
-}
+export { cn, type ClassValue } from '@comfyorg/tailwind-utils'
diff --git a/src/utils/typeGuardUtil.ts b/src/utils/typeGuardUtil.ts
index decf35554b..40e3a41830 100644
--- a/src/utils/typeGuardUtil.ts
+++ b/src/utils/typeGuardUtil.ts
@@ -1,10 +1,7 @@
 import type { PrimitiveNode } from '@/extensions/core/widgetInputs'
-import {
-  type INodeSlot,
-  LGraph,
-  LGraphNode
-} from '@/lib/litegraph/src/litegraph'
-import { Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
 
 export function isPrimitiveNode(
   node: LGraphNode
diff --git a/src/utils/validationUtil.ts b/src/utils/validationUtil.ts
index a0b55ffe7d..b4f2317851 100644
--- a/src/utils/validationUtil.ts
+++ b/src/utils/validationUtil.ts
@@ -4,16 +4,3 @@ export enum ValidationState {
   VALID = 'VALID',
   INVALID = 'INVALID'
 }
-
-export const mergeValidationStates = (states: ValidationState[]) => {
-  if (states.some((state) => state === ValidationState.INVALID)) {
-    return ValidationState.INVALID
-  }
-  if (states.some((state) => state === ValidationState.LOADING)) {
-    return ValidationState.LOADING
-  }
-  if (states.every((state) => state === ValidationState.VALID)) {
-    return ValidationState.VALID
-  }
-  return ValidationState.IDLE
-}
diff --git a/src/utils/versionUtil.ts b/src/utils/versionUtil.ts
deleted file mode 100644
index 61337b2aa8..0000000000
--- a/src/utils/versionUtil.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as semver from 'semver'
-
-import type {
-  ConflictDetail,
-  ConflictType
-} from '@/types/conflictDetectionTypes'
-
-/**
- * Cleans a version string by removing common prefixes and normalizing format
- * @param version Raw version string (e.g., "v1.2.3", "1.2.3-alpha")
- * @returns Cleaned version string or original if cleaning fails
- */
-export function cleanVersion(version: string): string {
-  return semver.clean(version) || version
-}
-
-/**
- * Checks if a version satisfies a version range
- * @param version Current version
- * @param range Version range (e.g., ">=1.0.0", "^1.2.0", "1.0.0 - 2.0.0")
- * @returns true if version satisfies the range
- */
-export function satisfiesVersion(version: string, range: string): boolean {
-  try {
-    const cleanedVersion = cleanVersion(version)
-    return semver.satisfies(cleanedVersion, range)
-  } catch {
-    return false
-  }
-}
-
-/**
- * Checks version compatibility and returns conflict details.
- * Supports all semver ranges including >=, <=, >, <, ~, ^ operators.
- * @param type Conflict type (e.g., 'comfyui_version', 'frontend_version')
- * @param currentVersion Current version string
- * @param supportedVersion Required version range string
- * @returns ConflictDetail object if incompatible, null if compatible
- */
-export function utilCheckVersionCompatibility(
-  type: ConflictType,
-  currentVersion: string,
-  supportedVersion: string
-): ConflictDetail | null {
-  // If current version is unknown, assume compatible (no conflict)
-  if (!currentVersion || currentVersion === 'unknown') {
-    return null
-  }
-
-  // If no version requirement specified, assume compatible (no conflict)
-  if (!supportedVersion || supportedVersion.trim() === '') {
-    return null
-  }
-
-  try {
-    // Clean the current version using semver utilities
-    const cleanCurrent = cleanVersion(currentVersion)
-
-    // Check version compatibility using semver library
-    const isCompatible = satisfiesVersion(cleanCurrent, supportedVersion)
-
-    if (!isCompatible) {
-      return {
-        type,
-        current_value: currentVersion,
-        required_value: supportedVersion
-      }
-    }
-
-    return null
-  } catch (error) {
-    console.warn(
-      `[VersionUtil] Failed to parse version requirement: ${supportedVersion}`,
-      error
-    )
-    // On error, assume incompatible to be safe
-    return {
-      type,
-      current_value: currentVersion,
-      required_value: supportedVersion
-    }
-  }
-}
diff --git a/src/views/DesktopDialogView.vue b/src/views/DesktopDialogView.vue
new file mode 100644
index 0000000000..b250d1559f
--- /dev/null
+++ b/src/views/DesktopDialogView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
+    <h1 class="font-inter font-semibold text-xl m-0 italic">
+      {{ t(`desktopDialogs.${id}.title`, title) }}
+    </h1>
+    <p class="whitespace-pre-wrap">
+      {{ t(`desktopDialogs.${id}.message`, message) }}
+    </p>
+    <div class="flex w-full gap-2">
+      <Button
+        v-for="button in buttons"
+        :key="button.label"
+        class="rounded-lg first:mr-auto"
+        :label="
+          t(
+            `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
+            button.label
+          )
+        "
+        :severity="button.severity ?? 'secondary'"
+        @click="handleButtonClick(button)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRoute } from 'vue-router'
+
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+const route = useRoute()
+const { id, title, message, buttons } = getDialog(route.params.dialogId)
+
+const handleButtonClick = async (button: DialogAction) => {
+  await electronAPI().Dialog.clickButton(button.returnValue)
+}
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.p-button-secondary {
+  @apply text-white border-none bg-neutral-600;
+}
+
+.p-button-secondary:hover {
+  @apply bg-neutral-550;
+}
+
+.p-button-secondary:active {
+  @apply bg-neutral-500;
+}
+
+.p-button-danger {
+  @apply bg-coral-red-600;
+}
+
+.p-button-danger:hover {
+  @apply bg-coral-red-500;
+}
+
+.p-button-danger:active {
+  @apply bg-coral-red-400;
+}
+</style>
diff --git a/src/views/DesktopStartView.vue b/src/views/DesktopStartView.vue
index 9c66cad56d..93215d2a49 100644
--- a/src/views/DesktopStartView.vue
+++ b/src/views/DesktopStartView.vue
@@ -1,11 +1,11 @@
 <template>
   <BaseViewTemplate dark>
-    <ProgressSpinner class="m-8 w-48 h-48" />
+    <StartupDisplay :title="$t('desktopStart.initialising')" />
   </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
-import ProgressSpinner from 'primevue/progressspinner'
+import StartupDisplay from '@/components/common/StartupDisplay.vue'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 </script>
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 92a46b5b72..bbfca6ea0f 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -33,6 +33,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { runWhenGlobalIdle } from '@/base/common/async'
 import MenuHamburger from '@/components/MenuHamburger.vue'
 import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
@@ -48,7 +49,7 @@ import { i18n } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
 import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
-import { StatusWsMessageStatus } from '@/schemas/apiSchema'
+import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
@@ -253,33 +254,30 @@ void nextTick(() => {
 })
 
 const onGraphReady = () => {
-  requestIdleCallback(
-    () => {
-      // Setting values now available after comfyApp.setup.
-      // Load keybindings.
-      wrapWithErrorHandling(useKeybindingService().registerUserKeybindings)()
-
-      // Load server config
-      wrapWithErrorHandling(useServerConfigStore().loadServerConfig)(
-        SERVER_CONFIG_ITEMS,
-        settingStore.get('Comfy.Server.ServerConfigValues')
-      )
-
-      // Load model folders
-      void wrapWithErrorHandlingAsync(useModelStore().loadModelFolders)()
-
-      // Non-blocking load of node frequencies
-      void wrapWithErrorHandlingAsync(
-        useNodeFrequencyStore().loadNodeFrequencies
-      )()
-
-      // Node defs now available after comfyApp.setup.
-      // Explicitly initialize nodeSearchService to avoid indexing delay when
-      // node search is triggered
-      useNodeDefStore().nodeSearchService.searchNode('')
-    },
-    { timeout: 1000 }
-  )
+  runWhenGlobalIdle(() => {
+    // Setting values now available after comfyApp.setup.
+    // Load keybindings.
+    wrapWithErrorHandling(useKeybindingService().registerUserKeybindings)()
+
+    // Load server config
+    wrapWithErrorHandling(useServerConfigStore().loadServerConfig)(
+      SERVER_CONFIG_ITEMS,
+      settingStore.get('Comfy.Server.ServerConfigValues')
+    )
+
+    // Load model folders
+    void wrapWithErrorHandlingAsync(useModelStore().loadModelFolders)()
+
+    // Non-blocking load of node frequencies
+    void wrapWithErrorHandlingAsync(
+      useNodeFrequencyStore().loadNodeFrequencies
+    )()
+
+    // Node defs now available after comfyApp.setup.
+    // Explicitly initialize nodeSearchService to avoid indexing delay when
+    // node search is triggered
+    useNodeDefStore().nodeSearchService.searchNode('')
+  }, 1000)
 }
 </script>
 
diff --git a/src/views/InstallView.stories.ts b/src/views/InstallView.stories.ts
new file mode 100644
index 0000000000..9a5c65e799
--- /dev/null
+++ b/src/views/InstallView.stories.ts
@@ -0,0 +1,423 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { nextTick, provide } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import InstallView from './InstallView.vue'
+
+// Create a mock router for stories
+const createMockRouter = () =>
+  createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: { template: '<div>Home</div>' } },
+      {
+        path: '/server-start',
+        component: { template: '<div>Server Start</div>' }
+      },
+      {
+        path: '/manual-configuration',
+        component: { template: '<div>Manual Configuration</div>' }
+      }
+    ]
+  })
+
+const meta: Meta<typeof InstallView> = {
+  title: 'Desktop/Views/InstallView',
+  component: InstallView,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  },
+  decorators: [
+    (story) => {
+      // Create router for this story
+      const router = createMockRouter()
+
+      // Mock electron API
+      ;(window as any).electronAPI = {
+        getPlatform: () => 'darwin',
+        Config: {
+          getDetectedGpu: () => Promise.resolve('mps')
+        },
+        Events: {
+          trackEvent: (eventName: string, data?: any) => {
+            console.log('Track event:', eventName, data)
+          }
+        },
+        installComfyUI: (options: any) => {
+          console.log('Install ComfyUI with options:', options)
+        },
+        changeTheme: (theme: any) => {
+          console.log('Change theme:', theme)
+        },
+        getSystemPaths: () =>
+          Promise.resolve({
+            defaultInstallPath: '/Users/username/ComfyUI'
+          }),
+        validateInstallPath: () =>
+          Promise.resolve({
+            isValid: true,
+            exists: false,
+            canWrite: true,
+            freeSpace: 100000000000,
+            requiredSpace: 10000000000,
+            isNonDefaultDrive: false
+          }),
+        validateComfyUISource: () =>
+          Promise.resolve({
+            isValid: true
+          }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+
+      return {
+        setup() {
+          // Provide router for all child components
+          provide('router', router)
+          return {
+            story
+          }
+        },
+        template: '<div style="width: 100vw; height: 100vh;"><story /></div>'
+      }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story - start at GPU selection
+export const GpuSelection: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      // The component will automatically start at step 1
+      return {}
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the install location step
+export const InstallLocation: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn) {
+        nextBtn.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the migration step (currently empty)
+export const MigrationStep: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons1 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn1) {
+        nextBtn1.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 3
+      const buttons2 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn2) {
+        nextBtn2.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the desktop settings configuration
+export const DesktopSettings: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons1 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn1) {
+        nextBtn1.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 3
+      const buttons2 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn2) {
+        nextBtn2.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 4
+      const buttons3 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn3 = buttons3.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn3) {
+        nextBtn3.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with Windows platform (no Apple Metal option)
+export const WindowsPlatform: Story = {
+  render: () => {
+    // Override the platform to Windows
+    ;(window as any).electronAPI.getPlatform = () => 'win32'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+      Promise.resolve('nvidia')
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with macOS platform (Apple Metal option)
+export const MacOSPlatform: Story = {
+  name: 'macOS Platform',
+  render: () => {
+    // Override the platform to macOS
+    ;(window as any).electronAPI.getPlatform = () => 'darwin'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+      Promise.resolve('mps')
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with CPU selected
+export const CpuSelected: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Find and click the CPU hardware option
+      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
+      // CPU is the button with "CPU" text
+      for (const button of hardwareButtons) {
+        if (button.textContent?.includes('CPU')) {
+          button.click()
+          break
+        }
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with manual install selected
+export const ManualInstall: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Find and click the Manual Install hardware option
+      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
+      // Manual Install is the button with "Manual Install" text
+      for (const button of hardwareButtons) {
+        if (button.textContent?.includes('Manual Install')) {
+          button.click()
+          break
+        }
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with error state (invalid install path)
+export const ErrorState: Story = {
+  render: () => {
+    // Override validation to return an error
+    ;(window as any).electronAPI.validateInstallPath = () =>
+      Promise.resolve({
+        isValid: false,
+        exists: false,
+        canWrite: false,
+        freeSpace: 100000000000,
+        requiredSpace: 10000000000,
+        isNonDefaultDrive: false,
+        error: 'Story mock: Example error state'
+      })
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      async mounted() {
+        // Wait for component to be fully mounted
+        await nextTick()
+
+        // Select Apple Metal option to enable navigation
+        const hardwareOptions = this.$el.querySelectorAll(
+          '.p-selectbutton-option'
+        )
+        if (hardwareOptions.length > 0) {
+          hardwareOptions[0].click() // Click Apple Metal (first option)
+        }
+
+        await nextTick()
+
+        // Click Next to go to step 2 where error will be shown
+        const buttons = Array.from(
+          this.$el.querySelectorAll('button')
+        ) as HTMLButtonElement[]
+        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+        if (nextBtn) {
+          nextBtn.click()
+        }
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with warning state (non-default drive)
+export const WarningState: Story = {
+  render: () => {
+    // Override validation to return a warning about non-default drive
+    ;(window as any).electronAPI.validateInstallPath = () =>
+      Promise.resolve({
+        isValid: true,
+        exists: false,
+        canWrite: true,
+        freeSpace: 500_000_000_000,
+        requiredSpace: 10_000_000_000,
+        isNonDefaultDrive: true
+      })
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      async mounted() {
+        // Wait for component to be fully mounted
+        await nextTick()
+
+        // Select Apple Metal option to enable navigation
+        const hardwareOptions = this.$el.querySelectorAll('.hardware-option')
+        if (hardwareOptions.length > 0) {
+          hardwareOptions[0].click() // Click Apple Metal (first option)
+        }
+
+        await nextTick()
+
+        // Click Next to go to step 2 where warning will be shown
+        const buttons = Array.from(
+          this.$el.querySelectorAll('button')
+        ) as HTMLButtonElement[]
+        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+        if (nextBtn) {
+          nextBtn.click()
+        }
+      },
+      template: '<InstallView />'
+    }
+  }
+}
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index ed3da0a8ac..6b170937cb 100644
--- a/src/views/InstallView.vue
+++ b/src/views/InstallView.vue
@@ -1,111 +1,54 @@
 <template>
   <BaseViewTemplate dark>
-    <!-- h-full to make sure the stepper does not layout shift between steps
-    as for each step the stepper height is different. Inherit the center element
-    placement from BaseViewTemplate would cause layout shift. -->
-    <Stepper
-      class="h-full p-8 2xl:p-16"
-      value="0"
-      @update:value="handleStepChange"
-    >
-      <StepList class="select-none">
-        <Step value="0">
-          {{ $t('install.gpu') }}
-        </Step>
-        <Step value="1" :disabled="noGpu">
-          {{ $t('install.installLocation') }}
-        </Step>
-        <Step value="2" :disabled="noGpu || hasError || highestStep < 1">
-          {{ $t('install.migration') }}
-        </Step>
-        <Step value="3" :disabled="noGpu || hasError || highestStep < 2">
-          {{ $t('install.desktopSettings') }}
-        </Step>
-      </StepList>
-      <StepPanels>
-        <StepPanel v-slot="{ activateCallback }" value="0">
-          <GpuPicker v-model:device="device" />
-          <div class="flex pt-6 justify-end">
-            <Button
-              :label="$t('g.next')"
-              icon="pi pi-arrow-right"
-              icon-pos="right"
-              :disabled="typeof device !== 'string'"
-              @click="activateCallback('1')"
+    <!-- Fixed height container with flexbox layout for proper content management -->
+    <div class="w-full h-full flex flex-col">
+      <Stepper
+        v-model:value="currentStep"
+        class="flex flex-col h-full"
+        @update:value="handleStepChange"
+      >
+        <!-- Main content area that grows to fill available space -->
+        <StepPanels
+          class="flex-1 overflow-auto"
+          :style="{ scrollbarGutter: 'stable' }"
+        >
+          <StepPanel value="1" class="flex">
+            <GpuPicker v-model:device="device" />
+          </StepPanel>
+          <StepPanel value="2">
+            <InstallLocationPicker
+              v-model:install-path="installPath"
+              v-model:path-error="pathError"
+              v-model:migration-source-path="migrationSourcePath"
+              v-model:migration-item-ids="migrationItemIds"
+              v-model:python-mirror="pythonMirror"
+              v-model:pypi-mirror="pypiMirror"
+              v-model:torch-mirror="torchMirror"
+              :device="device"
             />
-          </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="1">
-          <InstallLocationPicker
-            v-model:install-path="installPath"
-            v-model:path-error="pathError"
-          />
-          <div class="flex pt-6 justify-between">
-            <Button
-              :label="$t('g.back')"
-              severity="secondary"
-              icon="pi pi-arrow-left"
-              @click="activateCallback('0')"
+          </StepPanel>
+          <StepPanel value="3">
+            <DesktopSettingsConfiguration
+              v-model:auto-update="autoUpdate"
+              v-model:allow-metrics="allowMetrics"
             />
-            <Button
-              :label="$t('g.next')"
-              icon="pi pi-arrow-right"
-              icon-pos="right"
-              :disabled="pathError !== ''"
-              @click="activateCallback('2')"
-            />
-          </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="2">
-          <MigrationPicker
-            v-model:source-path="migrationSourcePath"
-            v-model:migration-item-ids="migrationItemIds"
-          />
-          <div class="flex pt-6 justify-between">
-            <Button
-              :label="$t('g.back')"
-              severity="secondary"
-              icon="pi pi-arrow-left"
-              @click="activateCallback('1')"
-            />
-            <Button
-              :label="$t('g.next')"
-              icon="pi pi-arrow-right"
-              icon-pos="right"
-              @click="activateCallback('3')"
-            />
-          </div>
-        </StepPanel>
-        <StepPanel v-slot="{ activateCallback }" value="3">
-          <DesktopSettingsConfiguration
-            v-model:auto-update="autoUpdate"
-            v-model:allow-metrics="allowMetrics"
-          />
-          <MirrorsConfiguration
-            v-model:python-mirror="pythonMirror"
-            v-model:pypi-mirror="pypiMirror"
-            v-model:torch-mirror="torchMirror"
-            :device="device"
-            class="mt-6"
-          />
-          <div class="flex mt-6 justify-between">
-            <Button
-              :label="$t('g.back')"
-              severity="secondary"
-              icon="pi pi-arrow-left"
-              @click="activateCallback('2')"
-            />
-            <Button
-              :label="$t('g.install')"
-              icon="pi pi-check"
-              icon-pos="right"
-              :disabled="hasError"
-              @click="install()"
-            />
-          </div>
-        </StepPanel>
-      </StepPanels>
-    </Stepper>
+          </StepPanel>
+        </StepPanels>
+
+        <!-- Install footer with navigation -->
+        <InstallFooter
+          class="w-full max-w-2xl my-6 mx-auto"
+          :current-step
+          :can-proceed
+          :disable-location-step="noGpu"
+          :disable-migration-step="noGpu || hasError || highestStep < 2"
+          :disable-settings-step="noGpu || hasError || highestStep < 3"
+          @previous="goToPreviousStep"
+          @next="goToNextStep"
+          @install="install"
+        />
+      </Stepper>
+    </div>
   </BaseViewTemplate>
 </template>
 
@@ -114,9 +57,6 @@ import type {
   InstallOptions,
   TorchDeviceType
 } from '@comfyorg/comfyui-electron-types'
-import Button from 'primevue/button'
-import Step from 'primevue/step'
-import StepList from 'primevue/steplist'
 import StepPanel from 'primevue/steppanel'
 import StepPanels from 'primevue/steppanels'
 import Stepper from 'primevue/stepper'
@@ -125,9 +65,8 @@ import { useRouter } from 'vue-router'
 
 import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
 import GpuPicker from '@/components/install/GpuPicker.vue'
+import InstallFooter from '@/components/install/InstallFooter.vue'
 import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
-import MigrationPicker from '@/components/install/MigrationPicker.vue'
-import MirrorsConfiguration from '@/components/install/MirrorsConfiguration.vue'
 import { electronAPI } from '@/utils/envUtil'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
@@ -145,6 +84,9 @@ const pythonMirror = ref('')
 const pypiMirror = ref('')
 const torchMirror = ref('')
 
+/** Current step in the stepper */
+const currentStep = ref('1')
+
 /** Forces each install step to be visited at least once. */
 const highestStep = ref(0)
 
@@ -164,6 +106,40 @@ const setHighestStep = (value: string | number) => {
 const hasError = computed(() => pathError.value !== '')
 const noGpu = computed(() => typeof device.value !== 'string')
 
+// Computed property to determine if user can proceed to next step
+const regex = /^Insufficient space - minimum free space: \d+ GB$/
+
+const canProceed = computed(() => {
+  switch (currentStep.value) {
+    case '1':
+      return typeof device.value === 'string'
+    case '2':
+      return pathError.value === '' || regex.test(pathError.value)
+    case '3':
+      return !hasError.value
+    default:
+      return false
+  }
+})
+
+// Navigation methods
+const goToNextStep = () => {
+  const nextStep = (parseInt(currentStep.value) + 1).toString()
+  currentStep.value = nextStep
+  setHighestStep(nextStep)
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: nextStep
+  })
+}
+
+const goToPreviousStep = () => {
+  const prevStep = (parseInt(currentStep.value) - 1).toString()
+  currentStep.value = prevStep
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: prevStep
+  })
+}
+
 const electron = electronAPI()
 const router = useRouter()
 const install = async () => {
@@ -195,7 +171,7 @@ onMounted(async () => {
   }
 
   electronAPI().Events.trackEvent('install_stepper_change', {
-    step: '0',
+    step: currentStep.value,
     gpu: detectedGpu
   })
 })
@@ -205,6 +181,30 @@ onMounted(async () => {
 @reference '../assets/css/style.css';
 
 :deep(.p-steppanel) {
+  @apply mt-8 flex justify-center bg-transparent;
+}
+
+/* Remove default padding/margin from StepPanels to make scrollbar flush */
+:deep(.p-steppanels) {
+  @apply p-0 m-0;
+}
+
+/* Ensure StepPanel content container has no top/bottom padding */
+:deep(.p-steppanel-content) {
+  @apply p-0;
+}
+
+/* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
+:deep(.p-steppanels::-webkit-scrollbar) {
+  @apply w-4;
+}
+
+:deep(.p-steppanels::-webkit-scrollbar-track) {
   @apply bg-transparent;
 }
+
+:deep(.p-steppanels::-webkit-scrollbar-thumb) {
+  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  background-clip: content-box;
+}
 </style>
diff --git a/src/views/MaintenanceView.vue b/src/views/MaintenanceView.vue
index ea258c820b..facc08dfb5 100644
--- a/src/views/MaintenanceView.vue
+++ b/src/views/MaintenanceView.vue
@@ -100,7 +100,7 @@ import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
 import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
-import { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
+import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
 import { electronAPI } from '@/utils/envUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index dff101b583..dd6409991e 100644
--- a/src/views/ServerStartView.vue
+++ b/src/views/ServerStartView.vue
@@ -1,75 +1,205 @@
 <template>
-  <BaseViewTemplate dark class="flex-col">
-    <div class="flex flex-col w-full h-full items-center">
-      <h2 class="text-2xl font-bold">
-        {{ t(`serverStart.process.${status}`) }}
-        <span v-if="status === ProgressStatus.ERROR">
-          v{{ electronVersion }}
-        </span>
-      </h2>
-      <div
-        v-if="status === ProgressStatus.ERROR"
-        class="flex flex-col items-center gap-4"
-      >
-        <div class="flex items-center my-4 gap-2">
-          <Button
-            icon="pi pi-flag"
-            severity="secondary"
-            :label="t('serverStart.reportIssue')"
-            @click="reportIssue"
-          />
-          <Button
-            icon="pi pi-file"
-            severity="secondary"
-            :label="t('serverStart.openLogs')"
-            @click="openLogs"
-          />
-          <Button
-            icon="pi pi-wrench"
-            :label="t('serverStart.troubleshoot')"
-            @click="troubleshoot"
-          />
+  <BaseViewTemplate dark>
+    <div class="relative min-h-screen">
+      <!-- Terminal Background Layer (always visible during loading) -->
+      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
+        <div class="h-full w-full">
+          <BaseTerminal @created="terminalCreated" />
         </div>
-        <Button
-          v-if="!terminalVisible"
-          icon="pi pi-search"
-          severity="secondary"
-          :label="t('serverStart.showTerminal')"
-          @click="terminalVisible = true"
+      </div>
+
+      <!-- Semi-transparent overlay -->
+      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+
+      <!-- Smooth radial gradient overlay -->
+      <div
+        v-if="!isError"
+        class="fixed inset-0 z-8"
+        style="
+          background: radial-gradient(
+            ellipse 800px 600px at center,
+            rgba(23, 23, 23, 0.95) 0%,
+            rgba(23, 23, 23, 0.93) 10%,
+            rgba(23, 23, 23, 0.9) 20%,
+            rgba(23, 23, 23, 0.85) 30%,
+            rgba(23, 23, 23, 0.75) 40%,
+            rgba(23, 23, 23, 0.6) 50%,
+            rgba(23, 23, 23, 0.4) 60%,
+            rgba(23, 23, 23, 0.2) 70%,
+            rgba(23, 23, 23, 0.1) 80%,
+            rgba(23, 23, 23, 0.05) 90%,
+            transparent 100%
+          );
+        "
+      ></div>
+
+      <div class="relative z-10">
+        <!-- Main startup display using StartupDisplay component -->
+        <StartupDisplay
+          :title="displayTitle"
+          :status-text="displayStatusText"
+          :progress-percentage="installStageProgress"
+          :hide-progress="isError"
         />
+
+        <!-- Error Section (positioned at bottom) -->
+        <div
+          v-if="isError"
+          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+        >
+          <div class="flex gap-4 justify-center">
+            <Button
+              icon="pi pi-flag"
+              :label="$t('serverStart.reportIssue')"
+              severity="secondary"
+              @click="reportIssue"
+            />
+            <Button
+              icon="pi pi-file"
+              :label="$t('serverStart.openLogs')"
+              severity="secondary"
+              @click="openLogs"
+            />
+            <Button
+              icon="pi pi-wrench"
+              :label="$t('serverStart.troubleshoot')"
+              @click="troubleshoot"
+            />
+          </div>
+
+          <div class="text-center">
+            <button
+              v-if="!terminalVisible"
+              class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-2 mx-auto"
+              @click="terminalVisible = true"
+            >
+              <i class="pi pi-search"></i>
+              {{ $t('serverStart.showTerminal') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
+        <div
+          v-if="terminalVisible && isError"
+          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+        >
+          <div
+            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+          >
+            <BaseTerminal @created="terminalCreated" />
+          </div>
+        </div>
       </div>
-      <BaseTerminal v-show="terminalVisible" @created="terminalCreated" />
     </div>
   </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
-import { ProgressStatus } from '@comfyorg/comfyui-electron-types'
-import { Terminal } from '@xterm/xterm'
+import {
+  InstallStage,
+  type InstallStageInfo,
+  type InstallStageName,
+  ProgressStatus
+} from '@comfyorg/comfyui-electron-types'
+import type { Terminal } from '@xterm/xterm'
 import Button from 'primevue/button'
-import { Ref, onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+import StartupDisplay from '@/components/common/StartupDisplay.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
-const electron = electronAPI()
 const { t } = useI18n()
+const electron = electronAPI()
 
 const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
 const electronVersion = ref<string>('')
+const terminalVisible = ref(false)
+
+const installStage = ref<InstallStageName | null>(null)
+const installStageMessage = ref<string>('')
+const installStageProgress = ref<number | undefined>(undefined)
+
 let xterm: Terminal | undefined
 
-const terminalVisible = ref(true)
+/**
+ * Handles installation stage updates from the desktop
+ */
+const updateInstallStage = (stageInfo: InstallStageInfo) => {
+  console.warn('[InstallStage.onUpdate] Received:', {
+    stage: stageInfo.stage,
+    progress: stageInfo.progress,
+    message: stageInfo.message,
+    error: stageInfo.error,
+    timestamp: stageInfo.timestamp,
+    fullInfo: stageInfo
+  })
+
+  installStage.value = stageInfo.stage
+  installStageMessage.value = stageInfo.message || ''
+  installStageProgress.value = stageInfo.progress
+}
+
+const currentStatusLabel = computed(() => {
+  // Use the message from the Electron API if available
+  if (installStageMessage.value) {
+    return installStageMessage.value
+  }
+  return t(`serverStart.process.${status.value}`)
+})
+
+const isError = computed(
+  () =>
+    status.value === ProgressStatus.ERROR ||
+    installStage.value === InstallStage.ERROR
+)
+
+const isInstallationStage = computed(() => {
+  const installationStages: InstallStageName[] = [
+    InstallStage.WELCOME_SCREEN,
+    InstallStage.INSTALL_OPTIONS_SELECTION,
+    InstallStage.CREATING_DIRECTORIES,
+    InstallStage.INITIALIZING_CONFIG,
+    InstallStage.PYTHON_ENVIRONMENT_SETUP,
+    InstallStage.INSTALLING_REQUIREMENTS,
+    InstallStage.INSTALLING_PYTORCH,
+    InstallStage.INSTALLING_COMFYUI_REQUIREMENTS,
+    InstallStage.INSTALLING_MANAGER_REQUIREMENTS,
+    InstallStage.MIGRATING_CUSTOM_NODES
+  ]
+  return (
+    installStage.value !== null &&
+    installationStages.includes(installStage.value)
+  )
+})
+
+const displayTitle = computed(() => {
+  if (isError.value) {
+    return t('serverStart.errorMessage')
+  }
+  if (isInstallationStage.value) {
+    return t('serverStart.installation.title')
+  }
+  return t('serverStart.title')
+})
+
+const displayStatusText = computed(() => {
+  if (isError.value && electronVersion.value) {
+    return `v${electronVersion.value}`
+  }
+  return currentStatusLabel.value
+})
 
 const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
   status.value = newStatus
 
   // Make critical error screen more obvious.
   if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false
-  else xterm?.clear()
 }
 
 const terminalCreated = (
@@ -94,9 +224,30 @@ const reportIssue = () => {
 }
 const openLogs = () => electron.openLogsFolder()
 
+let cleanupInstallStageListener: (() => void) | undefined
+
 onMounted(async () => {
   electron.sendReady()
   electron.onProgressUpdate(updateProgress)
+  cleanupInstallStageListener =
+    electron.InstallStage.onUpdate(updateInstallStage)
+
+  const stageInfo = await electron.InstallStage.getCurrent()
+  updateInstallStage(stageInfo)
   electronVersion.value = await electron.getElectronVersion()
 })
+
+onUnmounted(() => {
+  xterm?.dispose()
+  cleanupInstallStageListener?.()
+})
 </script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+/* Hide the xterm scrollbar completely */
+:deep(.p-terminal) .xterm-viewport {
+  overflow: hidden !important;
+}
+</style>
diff --git a/src/views/UserSelectView.vue b/src/views/UserSelectView.vue
index e1f98c0134..46e9ca75c2 100644
--- a/src/views/UserSelectView.vue
+++ b/src/views/UserSelectView.vue
@@ -50,7 +50,8 @@ import Select from 'primevue/select'
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { User, useUserStore } from '@/stores/userStore'
+import type { User } from '@/stores/userStore'
+import { useUserStore } from '@/stores/userStore'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
 const userStore = useUserStore()
diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
index 597bc5a6b8..ad653e6a8e 100644
--- a/src/views/WelcomeView.vue
+++ b/src/views/WelcomeView.vue
@@ -1,21 +1,27 @@
 <template>
   <BaseViewTemplate dark>
-    <div class="flex flex-col items-center justify-center gap-8 p-8">
-      <!-- Header -->
-      <h1 class="animated-gradient-text text-glow select-none">
-        {{ $t('welcome.title') }}
-      </h1>
-
-      <!-- Get Started Button -->
-      <Button
-        :label="$t('welcome.getStarted')"
-        icon="pi pi-arrow-right"
-        icon-pos="right"
-        size="large"
-        rounded
-        class="p-4 text-lg fade-in-up"
-        @click="navigateTo('/install')"
-      />
+    <div class="flex items-center justify-center min-h-screen">
+      <div class="grid grid-rows-2 gap-8">
+        <!-- Top container: Logo -->
+        <div class="flex items-end justify-center">
+          <img
+            src="/assets/images/comfy-brand-mark.svg"
+            :alt="$t('g.logoAlt')"
+            class="w-60"
+          />
+        </div>
+        <!-- Bottom container: Title and button -->
+        <div class="flex flex-col items-center justify-center gap-4">
+          <Button
+            :label="$t('welcome.getStarted')"
+            class="px-8 mt-4 bg-brand-yellow hover:bg-brand-yellow/90 border-0 rounded-lg transition-colors"
+            :pt="{
+              label: { class: 'font-inter text-neutral-900 font-black' }
+            }"
+            @click="navigateTo('/install')"
+          />
+        </div>
+      </div>
     </div>
   </BaseViewTemplate>
 </template>
@@ -31,49 +37,3 @@ const navigateTo = async (path: string) => {
   await router.push(path)
 }
 </script>
-
-<style scoped>
-@reference '../assets/css/style.css';
-
-.animated-gradient-text {
-  @apply font-bold;
-  font-size: clamp(2rem, 8vw, 4rem);
-  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59, #12c2e9);
-  background-size: 300% auto;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient 8s linear infinite;
-}
-
-.text-glow {
-  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0% center;
-  }
-
-  100% {
-    background-position: 300% center;
-  }
-}
-
-.fade-in-up {
-  animation: fadeInUp 1.5s ease-out;
-  animation-fill-mode: both;
-}
-
-@keyframes fadeInUp {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
diff --git a/src/components/dialog/content/ManagerProgressDialogContent.test.ts b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts
similarity index 96%
rename from src/components/dialog/content/ManagerProgressDialogContent.test.ts
rename to src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts
index 0075c9dc5c..5b31975a3b 100644
--- a/src/components/dialog/content/ManagerProgressDialogContent.test.ts
+++ b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
@@ -28,7 +29,7 @@ const defaultMockTaskLogs = [
   { taskName: 'Task 2', logs: ['Log 3', 'Log 4'] }
 ]
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     taskLogs: [...defaultMockTaskLogs],
     succeededTasksLogs: [...defaultMockTaskLogs],
diff --git a/src/components/dialog/content/ManagerProgressDialogContent.vue b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
similarity index 98%
rename from src/components/dialog/content/ManagerProgressDialogContent.vue
rename to src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
index 6aad68a911..613d1e2a79 100644
--- a/src/components/dialog/content/ManagerProgressDialogContent.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
@@ -88,7 +88,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
-} from '@/stores/comfyManagerStore'
+} from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 const comfyManagerStore = useComfyManagerStore()
 const progressDialogContent = useManagerProgressDialogStore()
diff --git a/src/components/dialog/footer/ManagerProgressFooter.vue b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
similarity index 92%
rename from src/components/dialog/footer/ManagerProgressFooter.vue
rename to src/workbench/extensions/manager/components/ManagerProgressFooter.vue
index 57edcec242..cd51c0ceb7 100644
--- a/src/components/dialog/footer/ManagerProgressFooter.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressFooter.vue
@@ -74,24 +74,24 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { api } from '@/scripts/api'
-import { useComfyManagerService } from '@/services/comfyManagerService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
-} from '@/stores/comfyManagerStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
+} from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
 const settingStore = useSettingStore()
-const { performConflictDetection } = useConflictDetection()
+const { runFullConflictAnalysis } = useConflictDetection()
 
 // State management for restart process
 const isRestarting = ref<boolean>(false)
@@ -154,8 +154,8 @@ const handleRestart = async () => {
 
         await useWorkflowService().reloadCurrentWorkflow()
 
-        // Run conflict detection after restart completion
-        await performConflictDetection()
+        // Run conflict detection in background after restart completion
+        void runFullConflictAnalysis()
       } finally {
         await settingStore.set(
           'Comfy.Toast.DisableReconnectingToast',
diff --git a/src/components/dialog/header/ManagerProgressHeader.vue b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
similarity index 94%
rename from src/components/dialog/header/ManagerProgressHeader.vue
rename to src/workbench/extensions/manager/components/ManagerProgressHeader.vue
index be61295a8f..841119cd09 100644
--- a/src/components/dialog/header/ManagerProgressHeader.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
@@ -24,7 +24,7 @@ import { useI18n } from 'vue-i18n'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
-} from '@/stores/comfyManagerStore'
+} from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
diff --git a/src/components/dialog/content/manager/ManagerDialogContent.vue b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
similarity index 90%
rename from src/components/dialog/content/manager/ManagerDialogContent.vue
rename to src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index 6a54881f36..61047c8b46 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -143,24 +143,24 @@ import IconButton from '@/components/button/IconButton.vue'
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ManagerNavSidebar from '@/components/dialog/content/manager/ManagerNavSidebar.vue'
-import InfoPanel from '@/components/dialog/content/manager/infoPanel/InfoPanel.vue'
-import InfoPanelMultiItem from '@/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue'
-import PackCard from '@/components/dialog/content/manager/packCard/PackCard.vue'
-import RegistrySearchBar from '@/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue'
-import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
-import { useManagerStatePersistence } from '@/composables/manager/useManagerStatePersistence'
-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'
-import type { TabItem } from '@/types/comfyManagerTypes'
-import { ManagerTab } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import ManagerNavSidebar from '@/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue'
+import InfoPanel from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue'
+import InfoPanelMultiItem from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue'
+import PackCard from '@/workbench/extensions/manager/components/manager/packCard/PackCard.vue'
+import RegistrySearchBar from '@/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue'
+import GridSkeleton from '@/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { usePackUpdateStatus } from '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useManagerStatePersistence } from '@/workbench/extensions/manager/composables/useManagerStatePersistence'
+import { useRegistrySearch } from '@/workbench/extensions/manager/composables/useRegistrySearch'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { TabItem } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const { initialTab } = defineProps<{
   initialTab?: ManagerTab
diff --git a/src/workbench/extensions/manager/components/manager/ManagerHeader.test.ts b/src/workbench/extensions/manager/components/manager/ManagerHeader.test.ts
new file mode 100644
index 0000000000..11449f199d
--- /dev/null
+++ b/src/workbench/extensions/manager/components/manager/ManagerHeader.test.ts
@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json' with { type: '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]
+      }
+    })
+  }
+
+  it('renders the component title', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('h2').text()).toBe(
+      enMessages.manager.discoverCommunityContent
+    )
+  })
+
+  it('has proper structure with flex container', () => {
+    const wrapper = createWrapper()
+
+    const flexContainer = wrapper.find('.flex.items-center')
+    expect(flexContainer.exists()).toBe(true)
+
+    const title = flexContainer.find('h2')
+    expect(title.exists()).toBe(true)
+  })
+})
diff --git a/src/workbench/extensions/manager/components/manager/ManagerHeader.vue b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
new file mode 100644
index 0000000000..054f1fbf42
--- /dev/null
+++ b/src/workbench/extensions/manager/components/manager/ManagerHeader.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="w-full">
+    <div class="flex items-center">
+      <h2 class="text-lg font-normal text-left">
+        {{ $t('manager.discoverCommunityContent') }}
+      </h2>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/components/dialog/content/manager/ManagerNavSidebar.vue b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
similarity index 93%
rename from src/components/dialog/content/manager/ManagerNavSidebar.vue
rename to src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
index c84734a30b..0e643b445f 100644
--- a/src/components/dialog/content/manager/ManagerNavSidebar.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerNavSidebar.vue
@@ -32,7 +32,7 @@ import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
-import type { TabItem } from '@/types/comfyManagerTypes'
+import type { TabItem } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 defineProps<{
   tabs: TabItem[]
diff --git a/src/components/dialog/content/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
similarity index 96%
rename from src/components/dialog/content/manager/NodeConflictDialogContent.vue
rename to src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index ec00b42c53..5b6c15582e 100644
--- a/src/components/dialog/content/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -168,12 +168,12 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
-import {
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import type {
   ConflictDetail,
   ConflictDetectionResult
-} from '@/types/conflictDetectionTypes'
-import { getConflictMessage } from '@/utils/conflictMessageUtil'
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/workbench/extensions/manager/utils/conflictMessageUtil'
 
 const { showAfterWhatsNew = false, conflictedPackages } = defineProps<{
   showAfterWhatsNew?: boolean
diff --git a/src/components/dialog/content/manager/NodeConflictFooter.vue b/src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
similarity index 100%
rename from src/components/dialog/content/manager/NodeConflictFooter.vue
rename to src/workbench/extensions/manager/components/manager/NodeConflictFooter.vue
diff --git a/src/components/dialog/content/manager/NodeConflictHeader.vue b/src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue
similarity index 100%
rename from src/components/dialog/content/manager/NodeConflictHeader.vue
rename to src/workbench/extensions/manager/components/manager/NodeConflictHeader.vue
diff --git a/src/components/dialog/content/manager/PackStatusMessage.vue b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
similarity index 93%
rename from src/components/dialog/content/manager/PackStatusMessage.vue
rename to src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
index ab2b38a450..6f7a1ec3a1 100644
--- a/src/components/dialog/content/manager/PackStatusMessage.vue
+++ b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
@@ -19,8 +19,8 @@
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
-import { ImportFailedKey } from '@/types/importFailedTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']
 type PackStatus = components['schemas']['NodeStatus']
diff --git a/src/components/dialog/content/manager/PackVersionBadge.test.ts b/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
similarity index 94%
rename from src/components/dialog/content/manager/PackVersionBadge.test.ts
rename to src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
index f57c657601..d57b25f1fc 100644
--- a/src/components/dialog/content/manager/PackVersionBadge.test.ts
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
@@ -34,20 +35,25 @@ const mockInstalledPacks = {
 
 const mockIsPackEnabled = vi.fn(() => true)
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     installedPacks: mockInstalledPacks,
     isPackInstalled: (id: string) =>
       !!mockInstalledPacks[id as keyof typeof mockInstalledPacks],
-    isPackEnabled: mockIsPackEnabled
+    isPackEnabled: mockIsPackEnabled,
+    getInstalledPackVersion: (id: string) =>
+      mockInstalledPacks[id as keyof typeof mockInstalledPacks]?.ver
   }))
 }))
 
-vi.mock('@/composables/nodePack/usePackUpdateStatus', () => ({
-  usePackUpdateStatus: vi.fn(() => ({
-    isUpdateAvailable: false
-  }))
-}))
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus',
+  () => ({
+    usePackUpdateStatus: vi.fn(() => ({
+      isUpdateAvailable: false
+    }))
+  })
+)
 
 const mockToggle = vi.fn()
 const mockHide = vi.fn()
diff --git a/src/components/dialog/content/manager/PackVersionBadge.vue b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
similarity index 84%
rename from src/components/dialog/content/manager/PackVersionBadge.vue
rename to src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
index e0fc111ca6..5514688619 100644
--- a/src/components/dialog/content/manager/PackVersionBadge.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionBadge.vue
@@ -43,13 +43,13 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
+import { valid as validSemver } from 'semver'
 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 type { components } from '@/types/comfyRegistryTypes'
-import { isSemVer } from '@/utils/formatUtil'
+import PackVersionSelectorPopover from '@/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue'
+import { usePackUpdateStatus } from '@/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 const TRUNCATED_HASH_LENGTH = 7
 
@@ -81,7 +81,9 @@ const installedVersion = computed(() => {
     'nightly'
 
   // If Git hash, truncate to 7 characters
-  return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)
+  return validSemver(version)
+    ? version
+    : version.slice(0, TRUNCATED_HASH_LENGTH)
 })
 
 const toggleVersionSelector = (event: Event) => {
diff --git a/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.test.ts
similarity index 98%
rename from src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
rename to src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.test.ts
index 6b712f7434..4dfab9bc98 100644
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
@@ -63,7 +64,7 @@ vi.mock('@/services/comfyRegistryService', () => ({
 }))
 
 // Mock the manager store
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     installPack: {
       call: mockInstallPack,
@@ -75,11 +76,14 @@ vi.mock('@/stores/comfyManagerStore', () => ({
 }))
 
 // Mock the conflict detection composable
-vi.mock('@/composables/useConflictDetection', () => ({
-  useConflictDetection: vi.fn(() => ({
-    checkNodeCompatibility: mockCheckNodeCompatibility
-  }))
-}))
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictDetection',
+  () => ({
+    useConflictDetection: vi.fn(() => ({
+      checkNodeCompatibility: mockCheckNodeCompatibility
+    }))
+  })
+)
 
 const waitForPromises = async () => {
   await new Promise((resolve) => setTimeout(resolve, 16))
diff --git a/src/components/dialog/content/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
similarity index 93%
rename from src/components/dialog/content/manager/PackVersionSelectorPopover.vue
rename to src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index 8f7ed9b8d4..e5d1876e98 100644
--- a/src/components/dialog/content/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -84,19 +84,19 @@ import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
+import { valid as validSemver } from 'semver'
 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 { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
-import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
-import { isSemVer } from '@/utils/formatUtil'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import { getJoinedConflictMessages } from '@/workbench/extensions/manager/utils/conflictMessageUtil'
 
 type ManagerChannel = ManagerComponents['schemas']['ManagerChannel']
 type ManagerDatabaseSource =
@@ -142,7 +142,7 @@ onMounted(() => {
     getInitialSelectedVersion() ?? SelectedVersionValues.LATEST
   selectedVersion.value =
     // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersionValues.NIGHTLY
+    validSemver(initialVersion) ? initialVersion : SelectedVersionValues.NIGHTLY
 })
 
 const getInitialSelectedVersion = () => {
diff --git a/src/components/dialog/content/manager/button/PackEnableToggle.test.ts b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
similarity index 94%
rename from src/components/dialog/content/manager/button/PackEnableToggle.test.ts
rename to src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
index 30112a88bb..6df2e7142c 100644
--- a/src/components/dialog/content/manager/button/PackEnableToggle.test.ts
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'
@@ -7,7 +8,7 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 import PackEnableToggle from './PackEnableToggle.vue'
 
@@ -32,7 +33,7 @@ const mockNodePack = {
 const mockIsPackEnabled = vi.fn()
 const mockEnablePack = { call: vi.fn().mockResolvedValue(undefined) }
 const mockDisablePack = vi.fn().mockResolvedValue(undefined)
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     isPackEnabled: mockIsPackEnabled,
     enablePack: mockEnablePack,
diff --git a/src/components/dialog/content/manager/button/PackEnableToggle.vue b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
similarity index 90%
rename from src/components/dialog/content/manager/button/PackEnableToggle.vue
rename to src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
index be449afc64..f95af0c0b1 100644
--- a/src/components/dialog/content/manager/button/PackEnableToggle.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
@@ -34,12 +34,12 @@ 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 { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 
diff --git a/src/components/dialog/content/manager/button/PackInstallButton.vue b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
similarity index 87%
rename from src/components/dialog/content/manager/button/PackInstallButton.vue
rename to src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
index 2395e23b14..7164544dfd 100644
--- a/src/components/dialog/content/manager/button/PackInstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue
@@ -27,17 +27,15 @@ import { computed } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import {
-  type ConflictDetail,
-  ConflictDetectionResult
-} from '@/types/conflictDetectionTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 
diff --git a/src/components/dialog/content/manager/button/PackUninstallButton.vue b/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
similarity index 81%
rename from src/components/dialog/content/manager/button/PackUninstallButton.vue
rename to src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
index 4924572f97..1f8bce0ee0 100644
--- a/src/components/dialog/content/manager/button/PackUninstallButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue
@@ -16,10 +16,10 @@
 
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 
diff --git a/src/components/dialog/content/manager/button/PackUpdateButton.vue b/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
similarity index 95%
rename from src/components/dialog/content/manager/button/PackUpdateButton.vue
rename to src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
index 50222d105b..f62efd7a3b 100644
--- a/src/components/dialog/content/manager/button/PackUpdateButton.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue
@@ -22,8 +22,8 @@ import { ref } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 type NodePack = components['schemas']['Node']
 
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
similarity index 76%
rename from src/components/dialog/content/manager/infoPanel/InfoPanel.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
index 2dc64ba422..8696e837d4 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanel.vue
@@ -64,20 +64,20 @@ import { useScroll, whenever } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
-import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
-import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
-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'
+import type { components } from '@/types/comfyRegistryTypes'
+import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'
+import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
+import PackEnableToggle from '@/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue'
+import InfoPanelHeader from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue'
+import InfoTabs from '@/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue'
+import MetadataRow from '@/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import { IsInstallingKey } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 interface InfoItem {
   key: string
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
similarity index 76%
rename from src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
index 9aca47277e..fda685a506 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue
@@ -45,14 +45,14 @@
 import { computed, inject, ref, watch } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { useConflictDetection } from '@/composables/useConflictDetection'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetail } from '@/types/conflictDetectionTypes'
-import { ImportFailedKey } from '@/types/importFailedTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import PackUninstallButton from '@/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue'
+import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 const { nodePacks, hasConflict } = defineProps<{
   nodePacks: components['schemas']['Node'][]
diff --git a/src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
similarity index 78%
rename from src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
index f02a435be7..8e5b15d787 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoPanelMultiItem.vue
@@ -57,19 +57,19 @@
 import { useAsyncState } from '@vueuse/core'
 import { computed, onUnmounted, provide, toRef } from 'vue'
 
-import PackStatusMessage from '@/components/dialog/content/manager/PackStatusMessage.vue'
-import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
-import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
-import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
-import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
-import PackIconStacked from '@/components/dialog/content/manager/packIcon/PackIconStacked.vue'
-import { usePacksSelection } from '@/composables/nodePack/usePacksSelection'
-import { usePacksStatus } from '@/composables/nodePack/usePacksStatus'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetail } from '@/types/conflictDetectionTypes'
-import { ImportFailedKey } from '@/types/importFailedTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import PackStatusMessage from '@/workbench/extensions/manager/components/manager/PackStatusMessage.vue'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import PackUninstallButton from '@/workbench/extensions/manager/components/manager/button/PackUninstallButton.vue'
+import InfoPanelHeader from '@/workbench/extensions/manager/components/manager/infoPanel/InfoPanelHeader.vue'
+import MetadataRow from '@/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue'
+import PackIconStacked from '@/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue'
+import { usePacksSelection } from '@/workbench/extensions/manager/composables/nodePack/usePacksSelection'
+import { usePacksStatus } from '@/workbench/extensions/manager/composables/nodePack/usePacksStatus'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 const { nodePacks } = defineProps<{
   nodePacks: components['schemas']['Node'][]
diff --git a/src/components/dialog/content/manager/infoPanel/InfoTabs.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
similarity index 79%
rename from src/components/dialog/content/manager/infoPanel/InfoTabs.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
index 42851ad28f..d07f5e2675 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoTabs.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTabs.vue
@@ -45,12 +45,12 @@ import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
 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'
+import type { components } from '@/types/comfyRegistryTypes'
+import DescriptionTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue'
+import NodesTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue'
+import WarningTabPanel from '@/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/workbench/extensions/manager/types/importFailedTypes'
 
 const { nodePack, hasCompatibilityIssues, conflictResult } = defineProps<{
   nodePack: components['schemas']['Node']
diff --git a/src/components/dialog/content/manager/infoPanel/InfoTextSection.vue b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
similarity index 89%
rename from src/components/dialog/content/manager/infoPanel/InfoTextSection.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
index b7a2a6c1ec..ce78dabb70 100644
--- a/src/components/dialog/content/manager/infoPanel/InfoTextSection.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import MarkdownText from '@/components/dialog/content/manager/infoPanel/MarkdownText.vue'
+import MarkdownText from '@/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue'
 
 export interface TextSection {
   title: string
diff --git a/src/components/dialog/content/manager/infoPanel/MarkdownText.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
similarity index 100%
rename from src/components/dialog/content/manager/infoPanel/MarkdownText.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
diff --git a/src/components/dialog/content/manager/infoPanel/MetadataRow.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
similarity index 100%
rename from src/components/dialog/content/manager/infoPanel/MetadataRow.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
diff --git a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
similarity index 98%
rename from src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
rename to src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
index d8dd40c4e8..93e6d0ee80 100644
--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 import DescriptionTabPanel from './DescriptionTabPanel.vue'
 
diff --git a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
similarity index 96%
rename from src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
index d966325dc2..915ddcf377 100644
--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -26,11 +26,11 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { components } from '@/types/comfyRegistryTypes'
+import { isValidUrl } from '@/utils/formatUtil'
 import InfoTextSection, {
   type TextSection
-} from '@/components/dialog/content/manager/infoPanel/InfoTextSection.vue'
-import { components } from '@/types/comfyRegistryTypes'
-import { isValidUrl } from '@/utils/formatUtil'
+} from '@/workbench/extensions/manager/components/manager/infoPanel/InfoTextSection.vue'
 
 const { t } = useI18n()
 
diff --git a/src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
similarity index 97%
rename from src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
index 51ad06b93b..e832f11266 100644
--- a/src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -34,7 +34,7 @@ import { computed, ref, shallowRef, useId } from 'vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components, operations } from '@/types/comfyRegistryTypes'
+import type { components, operations } from '@/types/comfyRegistryTypes'
 import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'
 
 type ListComfyNodesResponse =
diff --git a/src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
similarity index 75%
rename from src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 30d1969130..a6fbc2c337 100644
--- a/src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -27,11 +27,11 @@
 <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'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/workbench/extensions/manager/utils/conflictMessageUtil'
 
 const { nodePack, conflictResult } = defineProps<{
   nodePack: components['schemas']['Node']
diff --git a/src/components/dialog/content/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
similarity index 95%
rename from src/components/dialog/content/manager/packBanner/PackBanner.vue
rename to src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index a7e81e8a97..e5b5ea60c9 100644
--- a/src/components/dialog/content/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
diff --git a/src/components/dialog/content/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
similarity index 90%
rename from src/components/dialog/content/manager/packCard/PackCard.vue
rename to src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index b28fbe9d85..da2f673380 100644
--- a/src/components/dialog/content/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -75,17 +75,17 @@ import Card from 'primevue/card'
 import { computed, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
-import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
-import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import PackVersionBadge from '@/workbench/extensions/manager/components/manager/PackVersionBadge.vue'
+import PackBanner from '@/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue'
+import PackCardFooter from '@/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import {
   IsInstallingKey,
   type MergedNodePack,
   type RegistryPack,
   isMergedNodePack
-} from '@/types/comfyManagerTypes'
+} from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const { nodePack, isSelected = false } = defineProps<{
   nodePack: MergedNodePack | RegistryPack
diff --git a/src/components/dialog/content/manager/packCard/PackCardFooter.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
similarity index 72%
rename from src/components/dialog/content/manager/packCard/PackCardFooter.vue
rename to src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
index 6e8d0d0586..57e6ccb2c5 100644
--- a/src/components/dialog/content/manager/packCard/PackCardFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
@@ -25,13 +25,13 @@
 import { computed, inject } from 'vue'
 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 { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+import PackEnableToggle from '@/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { IsInstallingKey } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
diff --git a/src/components/dialog/content/manager/packIcon/PackIcon.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
similarity index 95%
rename from src/components/dialog/content/manager/packIcon/PackIcon.vue
rename to src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
index ae6d188c20..e0dfc6497e 100644
--- a/src/components/dialog/content/manager/packIcon/PackIcon.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue
@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
diff --git a/src/components/dialog/content/manager/packIcon/PackIconStacked.vue b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
similarity index 81%
rename from src/components/dialog/content/manager/packIcon/PackIconStacked.vue
rename to src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
index 475d5b9f64..be9a7297ca 100644
--- a/src/components/dialog/content/manager/packIcon/PackIconStacked.vue
+++ b/src/workbench/extensions/manager/components/manager/packIcon/PackIconStacked.vue
@@ -18,8 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import PackIcon from '@/workbench/extensions/manager/components/manager/packIcon/PackIcon.vue'
 
 const {
   nodePacks,
diff --git a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
similarity index 81%
rename from src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
rename to src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
index dffaedb73e..0c66021692 100644
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
@@ -62,27 +62,26 @@
 
 <script setup lang="ts">
 import { stubTrue } from 'es-toolkit/compat'
-import AutoComplete, {
-  AutoCompleteOptionSelectEvent
-} from 'primevue/autocomplete'
+import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
+import AutoComplete from 'primevue/autocomplete'
 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
-} from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type {
   QuerySuggestion,
   SearchMode,
   SortableField
 } from '@/types/searchServiceTypes'
+import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import PackUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue'
+import SearchFilterDropdown from '@/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useUpdateAvailableNodes } from '@/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes'
+import {
+  type SearchOption,
+  SortableAlgoliaField
+} from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const { searchResults, sortOptions } = defineProps<{
   searchResults?: components['schemas']['Node'][]
diff --git a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
similarity index 90%
rename from src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
rename to src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
index e9ded729f6..e076e0cafb 100644
--- a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -22,7 +22,7 @@
 // eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
 import Dropdown from 'primevue/dropdown'
 
-import type { SearchOption } from '@/types/comfyManagerTypes'
+import type { SearchOption } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 defineProps<{
   options: SearchOption<T>[]
diff --git a/src/components/dialog/content/manager/skeleton/GridSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
similarity index 76%
rename from src/components/dialog/content/manager/skeleton/GridSkeleton.vue
rename to src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
index f26e7f57aa..54e12bd0ef 100644
--- a/src/components/dialog/content/manager/skeleton/GridSkeleton.vue
+++ b/src/workbench/extensions/manager/components/manager/skeleton/GridSkeleton.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import PackCardSkeleton from '@/components/dialog/content/manager/skeleton/PackCardSkeleton.vue'
+import PackCardSkeleton from '@/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue'
 
 const { skeletonCardCount = 12, gridStyle } = defineProps<{
   skeletonCardCount?: number
diff --git a/src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts b/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
similarity index 95%
rename from src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
rename to src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
index db1f2a13f4..1df7162d9a 100644
--- a/src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'
diff --git a/src/components/dialog/content/manager/skeleton/PackCardSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
similarity index 100%
rename from src/components/dialog/content/manager/skeleton/PackCardSkeleton.vue
rename to src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
diff --git a/src/composables/nodePack/useInstalledPacks.ts b/src/workbench/extensions/manager/composables/nodePack/useInstalledPacks.ts
similarity index 88%
rename from src/composables/nodePack/useInstalledPacks.ts
rename to src/workbench/extensions/manager/composables/nodePack/useInstalledPacks.ts
index 2503bf2817..74f9546ac1 100644
--- a/src/composables/nodePack/useInstalledPacks.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useInstalledPacks.ts
@@ -1,10 +1,10 @@
 import { whenever } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'
 
-import { useNodePacks } from '@/composables/nodePack/useNodePacks'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import { useNodePacks } from '@/workbench/extensions/manager/composables/nodePack/useNodePacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
   const comfyManagerStore = useComfyManagerStore()
diff --git a/src/composables/nodePack/useMissingNodes.ts b/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
similarity index 88%
rename from src/composables/nodePack/useMissingNodes.ts
rename to src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
index f6635078ce..3585d05c8d 100644
--- a/src/composables/nodePack/useMissingNodes.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
@@ -1,14 +1,14 @@
 import { groupBy } from 'es-toolkit/compat'
 import { computed, onMounted } from 'vue'
 
-import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
-import { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 /**
  * Composable to find missing NodePacks from workflow
diff --git a/src/composables/nodePack/useNodePacks.ts b/src/workbench/extensions/manager/composables/nodePack/useNodePacks.ts
similarity index 86%
rename from src/composables/nodePack/useNodePacks.ts
rename to src/workbench/extensions/manager/composables/nodePack/useNodePacks.ts
index e4fab9d692..2a8852ca20 100644
--- a/src/composables/nodePack/useNodePacks.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useNodePacks.ts
@@ -1,8 +1,8 @@
 import { get, useAsyncState } from '@vueuse/core'
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 /**
  * Handles fetching node packs from the registry given a list of node pack IDs
diff --git a/src/composables/nodePack/usePackUpdateStatus.ts b/src/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus.ts
similarity index 63%
rename from src/composables/nodePack/usePackUpdateStatus.ts
rename to src/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus.ts
index f8344cd2bc..5aec2700d9 100644
--- a/src/composables/nodePack/usePackUpdateStatus.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/usePackUpdateStatus.ts
@@ -1,8 +1,8 @@
+import { compare, valid } from 'semver'
 import { computed } from 'vue'
 
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 export const usePackUpdateStatus = (
   nodePack: components['schemas']['Node']
@@ -16,14 +16,19 @@ export const usePackUpdateStatus = (
   const latestVersion = computed(() => nodePack.latest_version?.version)
 
   const isNightlyPack = computed(
-    () => !!installedVersion.value && !isSemVer(installedVersion.value)
+    () => !!installedVersion.value && !valid(installedVersion.value)
   )
 
   const isUpdateAvailable = computed(() => {
-    if (!isInstalled.value || isNightlyPack.value || !latestVersion.value) {
+    if (
+      !isInstalled.value ||
+      isNightlyPack.value ||
+      !latestVersion.value ||
+      !installedVersion.value
+    ) {
       return false
     }
-    return compareVersions(latestVersion.value, installedVersion.value) > 0
+    return compare(latestVersion.value, installedVersion.value) > 0
   })
 
   return {
diff --git a/src/composables/nodePack/usePacksSelection.ts b/src/workbench/extensions/manager/composables/nodePack/usePacksSelection.ts
similarity index 93%
rename from src/composables/nodePack/usePacksSelection.ts
rename to src/workbench/extensions/manager/composables/nodePack/usePacksSelection.ts
index 7bfbaa4c30..a5d3827679 100644
--- a/src/composables/nodePack/usePacksSelection.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/usePacksSelection.ts
@@ -1,7 +1,7 @@
 import { type Ref, computed } from 'vue'
 
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 type NodePack = components['schemas']['Node']
 
diff --git a/src/composables/nodePack/usePacksStatus.ts b/src/workbench/extensions/manager/composables/nodePack/usePacksStatus.ts
similarity index 94%
rename from src/composables/nodePack/usePacksStatus.ts
rename to src/workbench/extensions/manager/composables/nodePack/usePacksStatus.ts
index 16101f243e..bd1bff3daf 100644
--- a/src/composables/nodePack/usePacksStatus.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/usePacksStatus.ts
@@ -1,7 +1,7 @@
 import { type Ref, computed } from 'vue'
 
-import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 
 type NodePack = components['schemas']['Node']
 type NodeStatus = components['schemas']['NodeStatus']
diff --git a/src/composables/nodePack/useUpdateAvailableNodes.ts b/src/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes.ts
similarity index 83%
rename from src/composables/nodePack/useUpdateAvailableNodes.ts
rename to src/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes.ts
index 593c867d54..c18fcdf610 100644
--- a/src/composables/nodePack/useUpdateAvailableNodes.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes.ts
@@ -1,9 +1,9 @@
+import { compare, valid } from 'semver'
 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'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 /**
  * Composable to find NodePacks that have updates available
@@ -25,13 +25,13 @@ export const useUpdateAvailableNodes = () => {
     )
     const latestVersion = pack.latest_version?.version
 
-    const isNightlyPack = !!installedVersion && !isSemVer(installedVersion)
+    const isNightlyPack = !!installedVersion && !valid(installedVersion)
 
-    if (isNightlyPack || !latestVersion) {
+    if (isNightlyPack || !latestVersion || !installedVersion) {
       return false
     }
 
-    return compareVersions(latestVersion, installedVersion) > 0
+    return compare(latestVersion, installedVersion) > 0
   }
 
   // Same filtering logic as ManagerDialogContent.vue
diff --git a/src/composables/nodePack/useWorkflowPacks.ts b/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
similarity index 92%
rename from src/composables/nodePack/useWorkflowPacks.ts
rename to src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
index b4e5639c6a..b7ff5b38dd 100644
--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
@@ -1,15 +1,15 @@
 import { computed, onUnmounted, ref } from 'vue'
 
-import { useNodePacks } from '@/composables/nodePack/useNodePacks'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { app } from '@/scripts/app'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useNodePacks } from '@/workbench/extensions/manager/composables/nodePack/useNodePacks'
+import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 type WorkflowPack = {
   id:
diff --git a/src/composables/useConflictAcknowledgment.ts b/src/workbench/extensions/manager/composables/useConflictAcknowledgment.ts
similarity index 96%
rename from src/composables/useConflictAcknowledgment.ts
rename to src/workbench/extensions/manager/composables/useConflictAcknowledgment.ts
index 788c9ccd53..0abec73e40 100644
--- a/src/composables/useConflictAcknowledgment.ts
+++ b/src/workbench/extensions/manager/composables/useConflictAcknowledgment.ts
@@ -1,7 +1,7 @@
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
-import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 
 /**
  * LocalStorage keys for conflict acknowledgment tracking
diff --git a/src/workbench/extensions/manager/composables/useConflictDetection.ts b/src/workbench/extensions/manager/composables/useConflictDetection.ts
new file mode 100644
index 0000000000..af8e35e124
--- /dev/null
+++ b/src/workbench/extensions/manager/composables/useConflictDetection.ts
@@ -0,0 +1,714 @@
+import { until } from '@vueuse/core'
+import { find } from 'es-toolkit/compat'
+import { computed, getCurrentInstance, onUnmounted, readonly, ref } from 'vue'
+
+import { useComfyRegistryService } from '@/services/comfyRegistryService'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type {
+  RegistryAccelerator,
+  RegistryOS
+} from '@/workbench/extensions/manager/types/compatibility.types'
+import type {
+  ConflictDetail,
+  ConflictDetectionResponse,
+  ConflictDetectionResult,
+  Node,
+  NodeRequirements,
+  SystemEnvironment
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import {
+  consolidateConflictsByPackage,
+  createBannedConflict,
+  createPendingConflict
+} from '@/workbench/extensions/manager/utils/conflictUtils'
+import {
+  checkAcceleratorCompatibility,
+  checkOSCompatibility,
+  normalizeOSList
+} from '@/workbench/extensions/manager/utils/systemCompatibility'
+import {
+  checkVersionCompatibility,
+  getFrontendVersion
+} from '@/workbench/extensions/manager/utils/versionUtil'
+
+/**
+ * Composable for conflict detection system.
+ * Error-resilient and asynchronous to avoid affecting other components.
+ */
+export function useConflictDetection() {
+  const managerStore = useComfyManagerStore()
+
+  const {
+    startFetchInstalled,
+    installedPacks,
+    installedPacksWithVersions,
+    isReady: installedPacksReady
+  } = useInstalledPacks()
+
+  const isDetecting = ref(false)
+  const lastDetectionTime = ref<string | null>(null)
+  const detectionError = ref<string | null>(null)
+
+  const systemEnvironment = ref<SystemEnvironment | null>(null)
+
+  const detectionResults = ref<ConflictDetectionResult[]>([])
+  // Store merged conflicts separately for testing
+  const storedMergedConflicts = ref<ConflictDetectionResult[]>([])
+
+  // Registry API request cancellation
+  const abortController = ref<AbortController | null>(null)
+
+  const acknowledgment = useConflictAcknowledgment()
+
+  const conflictStore = useConflictDetectionStore()
+
+  const hasConflicts = computed(() => conflictStore.hasConflicts)
+  const conflictedPackages = computed(() => {
+    return conflictStore.conflictedPackages
+  })
+
+  const bannedPackages = computed(() => conflictStore.bannedPackages)
+  const securityPendingPackages = computed(
+    () => conflictStore.securityPendingPackages
+  )
+
+  /**
+   * Collects current system environment information.
+   * Continues with default values even if errors occur.
+   * @returns Promise that resolves to system environment information
+   */
+  async function collectSystemEnvironment(): Promise<SystemEnvironment> {
+    try {
+      // Get system stats from store (primary source of system information)
+      // Wait for systemStats to be initialized if not already
+      const { systemStats, isInitialized: systemStatsInitialized } =
+        useSystemStatsStore()
+      await until(systemStatsInitialized)
+
+      const frontendVersion = getFrontendVersion()
+
+      const environment: SystemEnvironment = {
+        comfyui_version: systemStats?.system.comfyui_version ?? '',
+        frontend_version: frontendVersion,
+        os: systemStats?.system.os ?? '',
+        accelerator: systemStats?.devices?.[0]?.type ?? ''
+      }
+
+      systemEnvironment.value = environment
+      return environment
+    } catch (error) {
+      const fallbackEnvironment: SystemEnvironment = {
+        comfyui_version: undefined,
+        frontend_version: undefined,
+        os: undefined,
+        accelerator: undefined
+      }
+      systemEnvironment.value = fallbackEnvironment
+      return fallbackEnvironment
+    }
+  }
+
+  /**
+   * Fetches requirement information for installed packages using Registry Store.
+   *
+   * This function combines local installation data with Registry API compatibility metadata
+   * using the established store layer pattern with caching and batch requests.
+   *
+   * Process
+   * 1. Get locally installed packages
+   * 2. Batch fetch Registry data using store layer
+   * 3. Combine local + Registry data
+   * 4. Extract compatibility requirements
+   *
+   * @returns Promise that resolves to array of node pack requirements
+   */
+  async function buildNodeRequirements(): Promise<NodeRequirements[]> {
+    try {
+      // Step 1: Use installed packs composable instead of direct API calls
+      await startFetchInstalled() // Ensure data is loaded
+
+      if (
+        !installedPacksReady.value ||
+        !installedPacks.value ||
+        installedPacks.value.length === 0
+      ) {
+        console.warn(
+          '[ConflictDetection] No installed packages available from useInstalledPacks'
+        )
+        return []
+      }
+
+      // Step 2: Get Registry service for bulk API calls
+      const registryService = useComfyRegistryService()
+
+      // Step 3: Setup abort controller for request cancellation
+      abortController.value = new AbortController()
+
+      // Step 4: Use bulk API to fetch all version data in a single request
+      const versionDataMap = new Map<
+        string,
+        components['schemas']['NodeVersion']
+      >()
+
+      // Prepare bulk request with actual installed versions from Manager API
+      const nodeVersions = installedPacksWithVersions.value.map((pack) => ({
+        node_id: pack.id,
+        version: pack.version
+      }))
+
+      if (nodeVersions.length > 0) {
+        try {
+          const bulkResponse = await registryService.getBulkNodeVersions(
+            nodeVersions,
+            abortController.value?.signal
+          )
+
+          if (bulkResponse && bulkResponse.node_versions?.length > 0) {
+            // Process bulk response
+            bulkResponse.node_versions.forEach((result) => {
+              if (result.status === 'success' && result.node_version) {
+                versionDataMap.set(
+                  result.identifier.node_id,
+                  result.node_version
+                )
+              } else if (result.status === 'error') {
+                console.warn(
+                  `[ConflictDetection] Failed to fetch version data for ${result.identifier.node_id}@${result.identifier.version}:`,
+                  result.error_message
+                )
+              }
+            })
+          }
+        } catch (error) {
+          console.warn(
+            '[ConflictDetection] Failed to fetch bulk version data:',
+            error
+          )
+        }
+      }
+
+      // Step 5: Combine local installation data with Registry version data
+      const requirements: NodeRequirements[] = []
+
+      // IMPORTANT: Use installedPacksWithVersions to check ALL installed packages
+      // not just the ones that exist in Registry (installedPacks)
+      for (const installedPackVersion of installedPacksWithVersions.value) {
+        const versionData = versionDataMap.get(installedPackVersion.id)
+        const isEnabled = managerStore.isPackEnabled(installedPackVersion.id)
+
+        // Find the pack info from Registry if available
+        const packInfo = find(installedPacks.value, {
+          id: installedPackVersion.id
+        })
+
+        if (versionData) {
+          // Combine local installation data with version-specific Registry data
+          const requirement: NodeRequirements = {
+            // Basic package info
+            id: installedPackVersion.id,
+            name: packInfo?.name || installedPackVersion.id,
+            installed_version: installedPackVersion.version,
+            is_enabled: isEnabled,
+
+            // Version-specific compatibility data
+            supported_comfyui_version: versionData.supported_comfyui_version,
+            supported_comfyui_frontend_version:
+              versionData.supported_comfyui_frontend_version,
+            supported_os: normalizeOSList(
+              versionData.supported_os
+            ) as Node['supported_os'],
+            supported_accelerators: versionData.supported_accelerators,
+
+            // Status information
+            version_status: versionData.status,
+            is_banned: versionData.status === 'NodeVersionStatusBanned',
+            is_pending: versionData.status === 'NodeVersionStatusPending'
+          }
+
+          requirements.push(requirement)
+        } else {
+          console.warn(
+            `[ConflictDetection] No Registry data found for ${installedPackVersion.id}, using fallback`
+          )
+
+          // Create fallback requirement without Registry data
+          const fallbackRequirement: NodeRequirements = {
+            id: installedPackVersion.id,
+            name: packInfo?.name || installedPackVersion.id,
+            installed_version: installedPackVersion.version,
+            is_enabled: isEnabled,
+            is_banned: false,
+            is_pending: false
+          }
+
+          requirements.push(fallbackRequirement)
+        }
+      }
+
+      return requirements
+    } catch (error) {
+      console.warn(
+        '[ConflictDetection] Failed to fetch package requirements:',
+        error
+      )
+      return []
+    }
+  }
+
+  /**
+   * Detects conflicts for an individual package using Registry API data.
+   *
+   * @param packageReq Package requirements from Registry
+   * @param sysEnv Current system environment
+   * @returns Conflict detection result for the package
+   */
+  function analyzePackageConflicts(
+    packageReq: NodeRequirements,
+    systemEnvInfo: SystemEnvironment
+  ): ConflictDetectionResult {
+    const conflicts: ConflictDetail[] = []
+
+    // 1. ComfyUI version conflict check
+    const versionConflict = checkVersionCompatibility(
+      'comfyui_version',
+      systemEnvInfo.comfyui_version,
+      packageReq.supported_comfyui_version
+    )
+    if (versionConflict) conflicts.push(versionConflict)
+
+    // 2. Frontend version conflict check
+    const frontendConflict = checkVersionCompatibility(
+      'frontend_version',
+      systemEnvInfo.frontend_version,
+      packageReq.supported_comfyui_frontend_version
+    )
+    if (frontendConflict) conflicts.push(frontendConflict)
+
+    // 3. OS compatibility check
+    const osConflict = checkOSCompatibility(
+      packageReq.supported_os as RegistryOS[] | undefined,
+      systemEnvInfo.os
+    )
+    if (osConflict) conflicts.push(osConflict)
+
+    // 4. Accelerator compatibility check
+    const acceleratorConflict = checkAcceleratorCompatibility(
+      packageReq.supported_accelerators as RegistryAccelerator[] | undefined,
+      systemEnvInfo.accelerator
+    )
+    if (acceleratorConflict) conflicts.push(acceleratorConflict)
+
+    // 5. Banned package check using shared logic
+    const bannedConflict = createBannedConflict(packageReq.is_banned)
+    if (bannedConflict) {
+      conflicts.push(bannedConflict)
+    }
+
+    // 6. Registry data availability check using shared logic
+    const pendingConflict = createPendingConflict(packageReq.is_pending)
+    if (pendingConflict) {
+      conflicts.push(pendingConflict)
+    }
+
+    // Generate result
+    const hasConflict = conflicts.length > 0
+
+    return {
+      package_id: packageReq.id ?? '',
+      package_name: packageReq.name ?? '',
+      has_conflict: hasConflict,
+      conflicts,
+      is_compatible: !hasConflict
+    }
+  }
+
+  /**
+   * Fetches Python import failure information from ComfyUI Manager.
+   * Gets installed packages and checks each one for import failures using bulk API.
+   * @returns Promise that resolves to import failure data
+   */
+  async function fetchImportFailInfo(): Promise<Record<string, any>> {
+    try {
+      const comfyManagerService = useComfyManagerService()
+
+      // Use installedPacksWithVersions to match what versions bulk API uses
+      // This ensures both APIs check the same set of packages
+      if (
+        !installedPacksWithVersions.value ||
+        installedPacksWithVersions.value.length === 0
+      ) {
+        console.warn(
+          '[ConflictDetection] No installed packages available for import failure check'
+        )
+        return {}
+      }
+
+      const packageIds = installedPacksWithVersions.value.map((pack) => pack.id)
+
+      // Use bulk API to get import failure info for all packages at once
+      const bulkResult = await comfyManagerService.getImportFailInfoBulk(
+        { cnr_ids: packageIds },
+        abortController.value?.signal
+      )
+
+      if (bulkResult) {
+        // Filter out null values (packages without import failures)
+        const importFailures: Record<string, any> = {}
+
+        Object.entries(bulkResult).forEach(([packageId, failInfo]) => {
+          if (failInfo !== null) {
+            importFailures[packageId] = failInfo
+            console.debug(
+              `[ConflictDetection] Import failure found for ${packageId}:`,
+              failInfo
+            )
+          }
+        })
+
+        return importFailures
+      }
+
+      return {}
+    } catch (error) {
+      console.warn(
+        '[ConflictDetection] Failed to fetch import failure information:',
+        error
+      )
+      return {}
+    }
+  }
+
+  /**
+   * Detects runtime conflicts from Python import failures.
+   * @param importFailInfo Import failure data from Manager API
+   * @returns Array of conflict detection results for failed imports
+   */
+  function detectImportFailConflicts(
+    importFailInfo: Record<string, { msg: string; name: string; path: string }>
+  ): ConflictDetectionResult[] {
+    const results: ConflictDetectionResult[] = []
+    if (!importFailInfo || typeof importFailInfo !== 'object') {
+      return results
+    }
+
+    // Process import failures
+    for (const [packageId, failureInfo] of Object.entries(importFailInfo)) {
+      if (failureInfo && typeof failureInfo === 'object') {
+        // Extract error information from Manager API response
+        const errorMsg = failureInfo.msg || 'Unknown import error'
+        const modulePath = failureInfo.path || ''
+
+        results.push({
+          package_id: packageId,
+          package_name: packageId,
+          has_conflict: true,
+          conflicts: [
+            {
+              type: 'import_failed',
+              current_value: 'installed',
+              required_value: failureInfo.msg
+            }
+          ],
+          is_compatible: false
+        })
+
+        console.warn(
+          `[ConflictDetection] Python import failure detected for ${packageId}:`,
+          {
+            path: modulePath,
+            error: errorMsg
+          }
+        )
+      }
+    }
+
+    return results
+  }
+
+  /**
+   * Performs complete conflict detection.
+   * @returns Promise that resolves to conflict detection response
+   */
+  async function runFullConflictAnalysis(): Promise<ConflictDetectionResponse> {
+    if (isDetecting.value) {
+      return {
+        success: false,
+        error_message: 'Already detecting conflicts',
+        results: detectionResults.value
+      }
+    }
+
+    isDetecting.value = true
+    detectionError.value = null
+
+    try {
+      // 1. Collect system environment information
+      const systemEnvInfo = await collectSystemEnvironment()
+
+      // 2. Collect installed node requirement information
+      const installedNodeRequirements = await buildNodeRequirements()
+
+      // 3. Detect conflicts for each package (parallel processing)
+      const conflictDetectionTasks = installedNodeRequirements.map(
+        async (packageReq) => {
+          try {
+            return analyzePackageConflicts(packageReq, systemEnvInfo)
+          } catch (error) {
+            console.warn(
+              `[ConflictDetection] Failed to detect conflicts for package ${packageReq.name}:`,
+              error
+            )
+            // Return null for failed packages, will be filtered out
+            return null
+          }
+        }
+      )
+
+      const conflictResults = await Promise.allSettled(conflictDetectionTasks)
+      const packageResults: ConflictDetectionResult[] = conflictResults
+        .map((result) => (result.status === 'fulfilled' ? result.value : null))
+        .filter((result): result is ConflictDetectionResult => result !== null)
+
+      // 4. Detect Python import failures
+      const importFailInfo = await fetchImportFailInfo()
+      const importFailResults = detectImportFailConflicts(importFailInfo)
+
+      // 5. Combine all results
+      const allResults = [...packageResults, ...importFailResults]
+
+      // 6. Update state
+      detectionResults.value = allResults
+      lastDetectionTime.value = new Date().toISOString()
+
+      // Store conflict results for later UI display
+      // Dialog will be shown based on specific events, not on app mount
+      if (allResults.some((result) => result.has_conflict)) {
+        const conflictedResults = allResults.filter(
+          (result) => result.has_conflict
+        )
+
+        // Merge conflicts for packages with the same name
+        const mergedConflicts = consolidateConflictsByPackage(conflictedResults)
+
+        console.debug(
+          '[ConflictDetection] Conflicts detected (stored for UI):',
+          mergedConflicts
+        )
+
+        // Store merged conflicts in Pinia store for UI usage
+        conflictStore.setConflictedPackages(mergedConflicts)
+
+        // Also update local state for backward compatibility
+        detectionResults.value = [...mergedConflicts]
+        storedMergedConflicts.value = [...mergedConflicts]
+
+        // Use merged conflicts in response as well
+        const response: ConflictDetectionResponse = {
+          success: true,
+          results: mergedConflicts,
+          detected_system_environment: systemEnvInfo
+        }
+        return response
+      } else {
+        // No conflicts detected, clear the results
+        conflictStore.clearConflicts()
+        detectionResults.value = []
+      }
+
+      const response: ConflictDetectionResponse = {
+        success: true,
+        results: allResults,
+        detected_system_environment: systemEnvInfo
+      }
+
+      return response
+    } catch (error) {
+      console.error(
+        '[ConflictDetection] Error during conflict detection:',
+        error
+      )
+      detectionError.value =
+        error instanceof Error ? error.message : String(error)
+
+      return {
+        success: false,
+        error_message: detectionError.value,
+        results: []
+      }
+    } finally {
+      isDetecting.value = false
+      // Clear abort controller to prevent memory leaks
+      if (abortController.value) {
+        abortController.value = null
+      }
+    }
+  }
+
+  /**
+   * Error-resilient initialization (called on app mount).
+   * Async function that doesn't block UI setup.
+   * Ensures proper order: system_stats -> manager state -> installed -> versions bulk -> import_fail_info_bulk
+   */
+  async function initializeConflictDetection(): Promise<void> {
+    try {
+      // Check if manager is new Manager before proceeding
+      const { useManagerState } = await import(
+        '@/workbench/extensions/manager/composables/useManagerState'
+      )
+      const managerState = useManagerState()
+
+      if (!managerState.isNewManagerUI.value) {
+        return
+      }
+
+      // Manager is new Manager, perform conflict detection
+      // The useInstalledPacks will handle fetching installed list if needed
+      await runFullConflictAnalysis()
+    } catch (error) {
+      console.warn(
+        '[ConflictDetection] Error during initialization (ignored):',
+        error
+      )
+      // Errors do not affect other parts of the app
+    }
+  }
+
+  // Cleanup function for request cancellation
+  function cancelRequests(): void {
+    if (abortController.value) {
+      abortController.value.abort()
+      abortController.value = null
+    }
+  }
+
+  // Auto-cleanup on component unmount
+  // Only register lifecycle hooks if we're in a Vue component context
+  const instance = getCurrentInstance()
+  if (instance) {
+    onUnmounted(() => {
+      cancelRequests()
+    })
+  }
+
+  // Helper functions (implementations at the bottom of the file)
+
+  /**
+   * Check if conflicts should trigger modal display after "What's New" dismissal
+   */
+  async function shouldShowConflictModalAfterUpdate(): Promise<boolean> {
+    // Ensure conflict detection has run
+    if (detectionResults.value.length === 0) {
+      await runFullConflictAnalysis()
+    }
+
+    // Check if this is a version update scenario
+    // In a real scenario, this would check actual version change
+    // For now, we'll assume it's an update if we have conflicts and modal hasn't been dismissed
+    const hasActualConflicts = hasConflicts.value
+    const canShowModal = acknowledgment.shouldShowConflictModal.value
+
+    return hasActualConflicts && canShowModal
+  }
+
+  /**
+   * Check compatibility for a node.
+   * Used by components like PackVersionSelectorPopover.
+   */
+  function checkNodeCompatibility(
+    node: Node | components['schemas']['NodeVersion']
+  ) {
+    const conflicts: ConflictDetail[] = []
+
+    // Check OS compatibility
+    const osConflict = checkOSCompatibility(
+      normalizeOSList(node.supported_os),
+      systemEnvironment.value?.os
+    )
+    if (osConflict) {
+      conflicts.push(osConflict)
+    }
+
+    // Check Accelerator compatibility
+    const acceleratorConflict = checkAcceleratorCompatibility(
+      node.supported_accelerators as RegistryAccelerator[],
+      systemEnvironment.value?.accelerator
+    )
+    if (acceleratorConflict) {
+      conflicts.push(acceleratorConflict)
+    }
+
+    // Check ComfyUI version compatibility
+    const comfyUIVersionConflict = checkVersionCompatibility(
+      'comfyui_version',
+      systemEnvironment.value?.comfyui_version,
+      node.supported_comfyui_version
+    )
+    if (comfyUIVersionConflict) {
+      conflicts.push(comfyUIVersionConflict)
+    }
+
+    // Check ComfyUI Frontend version compatibility
+    const currentFrontendVersion = getFrontendVersion()
+    const frontendVersionConflict = checkVersionCompatibility(
+      'frontend_version',
+      currentFrontendVersion,
+      node.supported_comfyui_frontend_version
+    )
+    if (frontendVersionConflict) {
+      conflicts.push(frontendVersionConflict)
+    }
+
+    // Check banned package status using shared logic
+    const bannedConflict = createBannedConflict(
+      node.status === 'NodeStatusBanned' ||
+        node.status === 'NodeVersionStatusBanned'
+    )
+    if (bannedConflict) {
+      conflicts.push(bannedConflict)
+    }
+
+    // Check pending status using shared logic
+    const pendingConflict = createPendingConflict(
+      node.status === 'NodeVersionStatusPending'
+    )
+    if (pendingConflict) {
+      conflicts.push(pendingConflict)
+    }
+
+    return {
+      hasConflict: conflicts.length > 0,
+      conflicts
+    }
+  }
+
+  return {
+    // State
+    isDetecting: readonly(isDetecting),
+    lastDetectionTime: readonly(lastDetectionTime),
+    detectionError: readonly(detectionError),
+    systemEnvironment: readonly(systemEnvironment),
+    detectionResults: readonly(detectionResults),
+
+    // Computed
+    hasConflicts,
+    conflictedPackages,
+    bannedPackages,
+    securityPendingPackages,
+
+    // Methods
+    runFullConflictAnalysis,
+    collectSystemEnvironment,
+    initializeConflictDetection,
+    cancelRequests,
+    shouldShowConflictModalAfterUpdate,
+
+    // Helper functions for other components
+    checkNodeCompatibility
+  }
+}
diff --git a/src/composables/useImportFailedDetection.ts b/src/workbench/extensions/manager/composables/useImportFailedDetection.ts
similarity index 88%
rename from src/composables/useImportFailedDetection.ts
rename to src/workbench/extensions/manager/composables/useImportFailedDetection.ts
index b6cd8c7917..9b1fd9b0ea 100644
--- a/src/composables/useImportFailedDetection.ts
+++ b/src/workbench/extensions/manager/composables/useImportFailedDetection.ts
@@ -2,9 +2,9 @@ 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'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 /**
  * Extracting import failed conflicts from conflict list
diff --git a/src/composables/useManagerQueue.ts b/src/workbench/extensions/manager/composables/useManagerQueue.ts
similarity index 97%
rename from src/composables/useManagerQueue.ts
rename to src/workbench/extensions/manager/composables/useManagerQueue.ts
index 86fb8d947c..3886b40bf8 100644
--- a/src/composables/useManagerQueue.ts
+++ b/src/workbench/extensions/manager/composables/useManagerQueue.ts
@@ -1,11 +1,12 @@
 import { useEventListener } from '@vueuse/core'
 import { pickBy } from 'es-toolkit/compat'
-import { Ref, computed, ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
-import { components } from '@/types/generatedManagerTypes'
 import { normalizePackKeys } from '@/utils/packUtils'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type ManagerTaskHistory = Record<
   string,
diff --git a/src/composables/useManagerState.ts b/src/workbench/extensions/manager/composables/useManagerState.ts
similarity index 94%
rename from src/composables/useManagerState.ts
rename to src/workbench/extensions/manager/composables/useManagerState.ts
index 10a7f48193..f8b7e095b8 100644
--- a/src/composables/useManagerState.ts
+++ b/src/workbench/extensions/manager/composables/useManagerState.ts
@@ -7,7 +7,7 @@ import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { ManagerTab } from '@/types/comfyManagerTypes'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 export enum ManagerUIState {
   DISABLED = 'disabled',
@@ -42,7 +42,12 @@ export function useManagerState() {
       )
 
       // Check command line args first (highest priority)
-      if (systemStats.value?.system?.argv?.includes('--disable-manager')) {
+      // --enable-manager flag enables the manager (opposite of old --disable-manager)
+      const hasEnableManager =
+        systemStats.value?.system?.argv?.includes('--enable-manager')
+
+      // If --enable-manager is NOT present, manager is disabled
+      if (!hasEnableManager) {
         return ManagerUIState.DISABLED
       }
 
diff --git a/src/composables/manager/useManagerStatePersistence.ts b/src/workbench/extensions/manager/composables/useManagerStatePersistence.ts
similarity index 87%
rename from src/composables/manager/useManagerStatePersistence.ts
rename to src/workbench/extensions/manager/composables/useManagerStatePersistence.ts
index 1f2aad120f..babb60d288 100644
--- a/src/composables/manager/useManagerStatePersistence.ts
+++ b/src/workbench/extensions/manager/composables/useManagerStatePersistence.ts
@@ -1,8 +1,8 @@
+import type { ManagerState } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 import {
-  ManagerState,
   ManagerTab,
   SortableAlgoliaField
-} from '@/types/comfyManagerTypes'
+} from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const STORAGE_KEY = 'Comfy.Manager.UI.State'
 
diff --git a/src/composables/useRegistrySearch.ts b/src/workbench/extensions/manager/composables/useRegistrySearch.ts
similarity index 97%
rename from src/composables/useRegistrySearch.ts
rename to src/workbench/extensions/manager/composables/useRegistrySearch.ts
index 0a42e7b9a3..c6dc9e90ee 100644
--- a/src/composables/useRegistrySearch.ts
+++ b/src/workbench/extensions/manager/composables/useRegistrySearch.ts
@@ -5,9 +5,9 @@ import { computed, ref, watch } from 'vue'
 import { DEFAULT_PAGE_SIZE } from '@/constants/searchConstants'
 import { useRegistrySearchGateway } from '@/services/gateway/registrySearchGateway'
 import type { SearchAttribute } from '@/types/algoliaTypes'
-import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import type { QuerySuggestion, SearchMode } from '@/types/searchServiceTypes'
+import { SortableAlgoliaField } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 type RegistryNodePack = components['schemas']['Node']
 
diff --git a/src/services/comfyManagerService.ts b/src/workbench/extensions/manager/services/comfyManagerService.ts
similarity index 97%
rename from src/services/comfyManagerService.ts
rename to src/workbench/extensions/manager/services/comfyManagerService.ts
index 615ddda864..6e8f91ecd8 100644
--- a/src/services/comfyManagerService.ts
+++ b/src/workbench/extensions/manager/services/comfyManagerService.ts
@@ -1,11 +1,12 @@
-import axios, { AxiosError, AxiosResponse } from 'axios'
+import type { AxiosError, AxiosResponse } from 'axios'
+import axios from 'axios'
 import { v4 as uuidv4 } from 'uuid'
 import { ref } from 'vue'
 
-import { useManagerState } from '@/composables/useManagerState'
 import { api } from '@/scripts/api'
-import { components } from '@/types/generatedManagerTypes'
 import { isAbortError } from '@/utils/typeGuardUtil'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type ManagerQueueStatus = components['schemas']['QueueStatus']
 type InstallPackParams = components['schemas']['InstallPackParams']
diff --git a/src/stores/comfyManagerStore.ts b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
similarity index 97%
rename from src/stores/comfyManagerStore.ts
rename to src/workbench/extensions/manager/stores/comfyManagerStore.ts
index 9f2663a11a..f3391d1bb4 100644
--- a/src/stores/comfyManagerStore.ts
+++ b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
@@ -5,15 +5,15 @@ import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCachedRequest } from '@/composables/useCachedRequest'
-import { useManagerQueue } from '@/composables/useManagerQueue'
 import { useServerLogs } from '@/composables/useServerLogs'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
-import { TaskLog } from '@/types/comfyManagerTypes'
-import { components } from '@/types/generatedManagerTypes'
 import { normalizePackKeys } from '@/utils/packUtils'
+import { useManagerQueue } from '@/workbench/extensions/manager/composables/useManagerQueue'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import type { TaskLog } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type InstallPackParams = components['schemas']['InstallPackParams']
 type InstalledPacksResponse = components['schemas']['InstalledPacksResponse']
diff --git a/src/stores/conflictDetectionStore.ts b/src/workbench/extensions/manager/stores/conflictDetectionStore.ts
similarity index 94%
rename from src/stores/conflictDetectionStore.ts
rename to src/workbench/extensions/manager/stores/conflictDetectionStore.ts
index 598d178968..95908ac089 100644
--- a/src/stores/conflictDetectionStore.ts
+++ b/src/workbench/extensions/manager/stores/conflictDetectionStore.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 export const useConflictDetectionStore = defineStore(
   'conflictDetection',
diff --git a/src/types/comfyManagerTypes.ts b/src/workbench/extensions/manager/types/comfyManagerTypes.ts
similarity index 100%
rename from src/types/comfyManagerTypes.ts
rename to src/workbench/extensions/manager/types/comfyManagerTypes.ts
diff --git a/src/workbench/extensions/manager/types/compatibility.types.ts b/src/workbench/extensions/manager/types/compatibility.types.ts
new file mode 100644
index 0000000000..10e56ad24d
--- /dev/null
+++ b/src/workbench/extensions/manager/types/compatibility.types.ts
@@ -0,0 +1,10 @@
+/**
+ * System compatibility type definitions
+ * Registry supports exactly these values, null/undefined means compatible with all
+ */
+
+// Registry OS
+export type RegistryOS = 'Windows' | 'macOS' | 'Linux'
+
+// Registry Accelerator
+export type RegistryAccelerator = 'CUDA' | 'ROCm' | 'Metal' | 'CPU'
diff --git a/src/types/conflictDetectionTypes.ts b/src/workbench/extensions/manager/types/conflictDetectionTypes.ts
similarity index 68%
rename from src/types/conflictDetectionTypes.ts
rename to src/workbench/extensions/manager/types/conflictDetectionTypes.ts
index a176e0ea0d..ab7efe08a4 100644
--- a/src/types/conflictDetectionTypes.ts
+++ b/src/workbench/extensions/manager/types/conflictDetectionTypes.ts
@@ -5,7 +5,7 @@
  * This file extends and uses types from comfyRegistryTypes.ts to maintain consistency
  * with the Registry API schema.
  */
-import type { components } from './comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 // Re-export core types from Registry API
 export type Node = components['schemas']['Node']
@@ -18,7 +18,6 @@ export type ConflictType =
   | 'comfyui_version' // ComfyUI version mismatch
   | 'frontend_version' // Frontend version mismatch
   | 'import_failed'
-  // | 'python_version' // Python version mismatch
   | 'os' // Operating system incompatibility
   | 'accelerator' // GPU/accelerator incompatibility
   | 'banned' // Banned package
@@ -28,7 +27,7 @@ export type ConflictType =
  * Node Pack requirements from Registry API
  * Extends Node type with additional installation and compatibility metadata
  */
-export interface NodePackRequirements extends Node {
+export interface NodeRequirements extends Node {
   installed_version: string
   is_enabled: boolean
   is_banned: boolean
@@ -42,23 +41,12 @@ export interface NodePackRequirements extends Node {
  */
 export interface SystemEnvironment {
   // Version information
-  comfyui_version: string
-  frontend_version: string
-  // python_version: string
-
+  comfyui_version?: string
+  frontend_version?: string
   // Platform information
-  os: string
-  platform_details: string
-  architecture: string
-
+  os?: string
   // GPU/accelerator information
-  available_accelerators: Node['supported_accelerators']
-  primary_accelerator: string
-  gpu_memory_mb?: number
-
-  // Runtime information
-  node_env: 'development' | 'production'
-  user_agent: string
+  accelerator?: string
 }
 
 /**
@@ -81,27 +69,12 @@ export interface ConflictDetail {
   required_value: string
 }
 
-/**
- * Overall conflict detection summary
- */
-export interface ConflictDetectionSummary {
-  total_packages: number
-  compatible_packages: number
-  conflicted_packages: number
-  banned_packages: number
-  pending_packages: number
-  conflicts_by_type_details: Record<ConflictType, string[]>
-  last_check_timestamp: string
-  check_duration_ms: number
-}
-
 /**
  * Response payload from conflict detection API
  */
 export interface ConflictDetectionResponse {
   success: boolean
   error_message?: string
-  summary: ConflictDetectionSummary
   results: ConflictDetectionResult[]
   detected_system_environment?: Partial<SystemEnvironment>
 }
diff --git a/src/types/generatedManagerTypes.ts b/src/workbench/extensions/manager/types/generatedManagerTypes.ts
similarity index 100%
rename from src/types/generatedManagerTypes.ts
rename to src/workbench/extensions/manager/types/generatedManagerTypes.ts
diff --git a/src/types/importFailedTypes.ts b/src/workbench/extensions/manager/types/importFailedTypes.ts
similarity index 100%
rename from src/types/importFailedTypes.ts
rename to src/workbench/extensions/manager/types/importFailedTypes.ts
diff --git a/src/utils/conflictMessageUtil.ts b/src/workbench/extensions/manager/utils/conflictMessageUtil.ts
similarity index 94%
rename from src/utils/conflictMessageUtil.ts
rename to src/workbench/extensions/manager/utils/conflictMessageUtil.ts
index 2fa9133710..c175760b54 100644
--- a/src/utils/conflictMessageUtil.ts
+++ b/src/workbench/extensions/manager/utils/conflictMessageUtil.ts
@@ -1,4 +1,4 @@
-import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 /**
  * Generates a localized conflict message for a given conflict detail.
diff --git a/src/workbench/extensions/manager/utils/conflictUtils.ts b/src/workbench/extensions/manager/utils/conflictUtils.ts
new file mode 100644
index 0000000000..1a24ba3876
--- /dev/null
+++ b/src/workbench/extensions/manager/utils/conflictUtils.ts
@@ -0,0 +1,83 @@
+import { groupBy, uniqBy } from 'es-toolkit/compat'
+
+import { normalizePackId } from '@/utils/packUtils'
+import type {
+  ConflictDetail,
+  ConflictDetectionResult
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+/**
+ * Checks for banned package status conflicts.
+ */
+export function createBannedConflict(
+  isBanned?: boolean
+): ConflictDetail | null {
+  if (isBanned === true) {
+    return {
+      type: 'banned',
+      current_value: 'installed',
+      required_value: 'not_banned'
+    }
+  }
+  return null
+}
+
+/**
+ * Checks for pending package status conflicts.
+ */
+export function createPendingConflict(
+  isPending?: boolean
+): ConflictDetail | null {
+  if (isPending === true) {
+    return {
+      type: 'pending',
+      current_value: 'installed',
+      required_value: 'not_pending'
+    }
+  }
+  return null
+}
+
+/**
+ * Groups and deduplicates conflicts by normalized package name.
+ * Consolidates multiple conflict sources (registry checks, import failures, disabled packages with version suffix)
+ * into a single UI entry per package.
+ *
+ * Example:
+ * - Input: [{name: "pack@1_0_3", conflicts: [...]}, {name: "pack", conflicts: [...]}]
+ * - Output: [{name: "pack", conflicts: [...combined unique conflicts...]}]
+ *
+ * @param conflicts Array of conflict detection results (may have duplicate packages with version suffixes)
+ * @returns Array of deduplicated conflict results grouped by normalized package name
+ */
+export function consolidateConflictsByPackage(
+  conflicts: ConflictDetectionResult[]
+): ConflictDetectionResult[] {
+  // Group conflicts by normalized package name using es-toolkit
+  const grouped = groupBy(conflicts, (conflict) =>
+    normalizePackId(conflict.package_name)
+  )
+
+  // Merge conflicts for each group
+  return Object.entries(grouped).map(([packageName, packageConflicts]) => {
+    // Flatten all conflicts from the group
+    const allConflicts = packageConflicts.flatMap((pc) => pc.conflicts)
+
+    // Remove duplicate conflicts using uniqBy
+    const uniqueConflicts = uniqBy(
+      allConflicts,
+      (conflict) =>
+        `${conflict.type}|${conflict.current_value}|${conflict.required_value}`
+    )
+
+    // Use the first item as base and update with merged data
+    const baseItem = packageConflicts[0]
+    return {
+      ...baseItem,
+      package_name: packageName, // Use normalized name
+      conflicts: uniqueConflicts,
+      has_conflict: uniqueConflicts.length > 0,
+      is_compatible: uniqueConflicts.length === 0
+    }
+  })
+}
diff --git a/src/workbench/extensions/manager/utils/systemCompatibility.ts b/src/workbench/extensions/manager/utils/systemCompatibility.ts
new file mode 100644
index 0000000000..cdd1c31032
--- /dev/null
+++ b/src/workbench/extensions/manager/utils/systemCompatibility.ts
@@ -0,0 +1,125 @@
+import { isEmpty, isNil } from 'es-toolkit/compat'
+
+import type {
+  RegistryAccelerator,
+  RegistryOS
+} from '@/workbench/extensions/manager/types/compatibility.types'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+/**
+ * Maps system OS string to Registry OS format
+ * @param systemOS Raw OS string from system stats ('darwin', 'win32', 'linux', etc)
+ * @returns Registry OS or undefined if unknown
+ */
+function getRegistryOS(systemOS?: string): RegistryOS | undefined {
+  if (!systemOS) return undefined
+
+  const lower = systemOS.toLowerCase()
+  // Check darwin first to avoid matching 'win' in 'darwin'
+  if (lower.includes('darwin') || lower.includes('mac')) return 'macOS'
+  if (lower.includes('win')) return 'Windows'
+  if (lower.includes('linux')) return 'Linux'
+
+  return undefined
+}
+
+/**
+ * Maps device type to Registry accelerator format
+ * @param deviceType Raw device type from system stats ('cuda', 'mps', 'rocm', 'cpu', etc)
+ * @returns Registry accelerator
+ */
+function getRegistryAccelerator(deviceType?: string): RegistryAccelerator {
+  if (!deviceType) return 'CPU'
+
+  const lower = deviceType.toLowerCase()
+  if (lower === 'cuda') return 'CUDA'
+  if (lower === 'mps') return 'Metal'
+  if (lower === 'rocm') return 'ROCm'
+
+  return 'CPU'
+}
+
+/**
+ * Checks OS compatibility
+ * @param supported Supported OS list from Registry (null/undefined = all OS supported)
+ * @param current Current system OS
+ * @returns ConflictDetail if incompatible, null if compatible
+ */
+export function checkOSCompatibility(
+  supported?: RegistryOS[] | null,
+  current?: string
+): ConflictDetail | null {
+  // null/undefined/empty = all OS supported
+  if (isNil(supported) || isEmpty(supported)) return null
+
+  const currentOS = getRegistryOS(current)
+  if (!currentOS) {
+    return {
+      type: 'os',
+      current_value: 'Unknown',
+      required_value: supported.join(', ')
+    }
+  }
+
+  if (!supported.includes(currentOS)) {
+    return {
+      type: 'os',
+      current_value: currentOS,
+      required_value: supported.join(', ')
+    }
+  }
+
+  return null
+}
+
+/**
+ * Checks accelerator compatibility
+ * @param supported Supported accelerators from Registry (null/undefined = all accelerators supported)
+ * @param current Current device type
+ * @returns ConflictDetail if incompatible, null if compatible
+ */
+export function checkAcceleratorCompatibility(
+  supported?: RegistryAccelerator[] | null,
+  current?: string
+): ConflictDetail | null {
+  // null/undefined/empty = all accelerator supported
+  if (isNil(supported) || isEmpty(supported)) return null
+
+  const currentAcc = getRegistryAccelerator(current)
+
+  if (!supported.includes(currentAcc)) {
+    return {
+      type: 'accelerator',
+      current_value: currentAcc,
+      required_value: supported.join(', ')
+    }
+  }
+
+  return null
+}
+
+/**
+ * Normalizes OS values from Registry API
+ * Handles edge cases like "OS Independent"
+ * @returns undefined if all OS supported, otherwise filtered valid OS list
+ */
+export function normalizeOSList(
+  osValues?: string[] | null
+): RegistryOS[] | undefined {
+  if (isNil(osValues) || isEmpty(osValues)) return undefined
+
+  // "OS Independent" means all OS supported
+  if (osValues.some((os) => os.toLowerCase() === 'os independent')) {
+    return undefined
+  }
+
+  // Filter to valid Registry OS values only
+  const validOS: RegistryOS[] = []
+  osValues.forEach((os) => {
+    if (os === 'Windows' || os === 'macOS' || os === 'Linux') {
+      if (!validOS.includes(os)) validOS.push(os)
+    }
+  })
+
+  return validOS.length > 0 ? validOS : undefined
+}
diff --git a/src/workbench/extensions/manager/utils/versionUtil.ts b/src/workbench/extensions/manager/utils/versionUtil.ts
new file mode 100644
index 0000000000..a450963041
--- /dev/null
+++ b/src/workbench/extensions/manager/utils/versionUtil.ts
@@ -0,0 +1,73 @@
+import { isEmpty, isNil } from 'es-toolkit/compat'
+import { clean, satisfies } from 'semver'
+
+import config from '@/config'
+import type {
+  ConflictDetail,
+  ConflictType
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+/**
+ * Cleans a version string by removing common prefixes and normalizing format
+ * @param version Raw version string (e.g., "v1.2.3", "1.2.3-alpha")
+ * @returns Cleaned version string or original if cleaning fails
+ */
+function cleanVersion(version: string): string {
+  return clean(version) || version
+}
+
+/**
+ * Checks version compatibility and returns conflict details.
+ * Supports all semver ranges including >=, <=, >, <, ~, ^ operators.
+ * @param type Conflict type (e.g., 'comfyui_version', 'frontend_version')
+ * @param currentVersion Current version string
+ * @param supportedVersion Required version range string
+ * @returns ConflictDetail object if incompatible, null if compatible
+ */
+export function checkVersionCompatibility(
+  type: ConflictType,
+  currentVersion?: string,
+  supportedVersion?: string
+): ConflictDetail | null {
+  // If current version is unknown, assume compatible (no conflict)
+  if (isNil(currentVersion) || isEmpty(currentVersion)) {
+    return null
+  }
+
+  // If no version requirement specified, assume compatible (no conflict)
+  if (isNil(supportedVersion) || isEmpty(supportedVersion?.trim())) {
+    return null
+  }
+
+  // Clean and check version compatibility
+  const cleanCurrent = cleanVersion(currentVersion)
+
+  // Check if version satisfies the range
+  let isCompatible = false
+  try {
+    isCompatible = satisfies(cleanCurrent, supportedVersion)
+  } catch {
+    // If semver can't parse it, return conflict
+    return {
+      type,
+      current_value: currentVersion,
+      required_value: supportedVersion
+    }
+  }
+
+  if (isCompatible) return null
+
+  return {
+    type,
+    current_value: currentVersion,
+    required_value: supportedVersion
+  }
+}
+
+/**
+ * get frontend version from config.
+ * @returns frontend version string or undefined
+ */
+export function getFrontendVersion(): string | undefined {
+  return config.app_version || import.meta.env.VITE_APP_VERSION || undefined
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e5e39987be..98c7c4ea04 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,16 @@ import { iconCollection } from './build/customIconCollection'
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
+  safelist: [
+    'icon-[lucide--folder]',
+    'icon-[lucide--package]',
+    'icon-[lucide--image]',
+    'icon-[lucide--video]',
+    'icon-[lucide--box]',
+    'icon-[lucide--audio-waveform]',
+    'icon-[lucide--message-circle]'
+  ],
+
   plugins: [
     addDynamicIconSelectors({
       iconSets: {
diff --git a/tests-ui/CLAUDE.md b/tests-ui/CLAUDE.md
index 8685b6964d..10e5d660bb 100644
--- a/tests-ui/CLAUDE.md
+++ b/tests-ui/CLAUDE.md
@@ -1,5 +1,11 @@
 # Unit Testing Guidelines
 
+## Running Tests
+- Single file: `pnpm test:unit -- <filename>`
+- All tests: `pnpm test:unit`
+- Wrong Examples:
+  - Still runs all tests: `pnpm test:unit <filename>`
+
 ## Testing Approach
 
 - Write tests for new features
@@ -11,3 +17,7 @@
 - Check @tests-ui/README.md for guidelines
 - Use existing test utilities
 - Mock external dependencies
+
+## Mocking
+- Read: https://vitest.dev/api/mock.html
+- Critical: Always prefer vitest mock functions over writing verbose manual mocks
diff --git a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
new file mode 100644
index 0000000000..003f6e4a2a
--- /dev/null
+++ b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
@@ -0,0 +1,330 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
+import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+// Mock @/i18n for useAssetBrowser and AssetFilterBar
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key,
+  d: (date: Date) => date.toLocaleDateString()
+}))
+
+// Mock assetService for useAssetBrowser
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    getAssetDetails: vi.fn((id: string) =>
+      Promise.resolve({
+        id,
+        name: 'Test Model',
+        user_metadata: {
+          filename: 'Test Model'
+        }
+      })
+    )
+  }
+}))
+
+// Mock external dependencies with minimal functionality needed for business logic tests
+vi.mock('@/components/input/SearchBox.vue', () => ({
+  default: {
+    name: 'SearchBox',
+    props: ['modelValue', 'size', 'placeholder', 'class'],
+    emits: ['update:modelValue'],
+    template: `
+      <input
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+        data-testid="search-box"
+      />
+    `
+  }
+}))
+
+vi.mock('@/components/widget/layout/BaseModalLayout.vue', () => ({
+  default: {
+    name: 'BaseModalLayout',
+    props: ['contentTitle'],
+    emits: ['close'],
+    template: `
+      <div data-testid="base-modal-layout">
+        <div v-if="$slots.leftPanel" data-testid="left-panel">
+          <slot name="leftPanel" />
+        </div>
+        <div data-testid="header">
+          <slot name="header" />
+        </div>
+        <div data-testid="content">
+          <slot name="content" />
+        </div>
+      </div>
+    `
+  }
+}))
+
+vi.mock('@/components/widget/panel/LeftSidePanel.vue', () => ({
+  default: {
+    name: 'LeftSidePanel',
+    props: ['modelValue', 'navItems'],
+    emits: ['update:modelValue'],
+    template: `
+      <div data-testid="left-side-panel">
+        <button
+          v-for="item in navItems"
+          :key="item.id"
+          @click="$emit('update:modelValue', item.id)"
+          :data-testid="'nav-item-' + item.id"
+          :class="{ active: modelValue === item.id }"
+        >
+          {{ item.label }}
+        </button>
+      </div>
+    `
+  }
+}))
+
+vi.mock('@/platform/assets/components/AssetGrid.vue', () => ({
+  default: {
+    name: 'AssetGrid',
+    props: ['assets'],
+    emits: ['asset-select'],
+    template: `
+      <div data-testid="asset-grid">
+        <div
+          v-for="asset in assets"
+          :key="asset.id"
+          @click="$emit('asset-select', asset)"
+          :data-testid="'asset-' + asset.id"
+          class="asset-card"
+        >
+          {{ asset.name }}
+        </div>
+        <div v-if="assets.length === 0" data-testid="empty-state">
+          No assets found
+        </div>
+      </div>
+    `
+  }
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  }),
+  createI18n: () => ({
+    global: {
+      t: (key: string) => key
+    }
+  })
+}))
+
+describe('AssetBrowserModal', () => {
+  const createTestAsset = (
+    id: string,
+    name: string,
+    category: string
+  ): AssetItem => ({
+    id,
+    name,
+    asset_hash: `blake3:${id.padEnd(64, '0')}`,
+    size: 1024000,
+    mime_type: 'application/octet-stream',
+    tags: ['models', category, 'test'],
+    preview_url: `/api/assets/${id}/content`,
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    last_access_time: '2024-01-01T00:00:00Z',
+    user_metadata: {
+      description: `Test ${name}`,
+      base_model: 'sd15'
+    }
+  })
+
+  const createWrapper = (
+    assets: AssetItem[] = [],
+    props: Record<string, unknown> = {}
+  ) => {
+    const pinia = createPinia()
+    setActivePinia(pinia)
+
+    return mount(AssetBrowserModal, {
+      props: {
+        assets: assets,
+        ...props
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          'i-lucide:folder': {
+            template: '<div data-testid="folder-icon"></div>'
+          }
+        },
+        mocks: {
+          $t: (key: string) => key
+        }
+      }
+    })
+  }
+
+  describe('Search Functionality', () => {
+    it('filters assets when search query changes', async () => {
+      const assets = [
+        createTestAsset('asset1', 'Checkpoint Model A', 'checkpoints'),
+        createTestAsset('asset2', 'Checkpoint Model B', 'checkpoints'),
+        createTestAsset('asset3', 'LoRA Model C', 'loras')
+      ]
+      const wrapper = createWrapper(assets)
+
+      const searchBox = wrapper.find('[data-testid="search-box"]')
+
+      // Search for "Checkpoint"
+      await searchBox.setValue('Checkpoint')
+      await nextTick()
+
+      // Should filter to only checkpoint assets
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
+
+      expect(filteredAssets.length).toBe(2)
+      expect(
+        filteredAssets.every((asset: AssetDisplayItem) =>
+          asset.name.includes('Checkpoint')
+        )
+      ).toBe(true)
+    })
+
+    it('search is case insensitive', async () => {
+      const assets = [
+        createTestAsset('asset1', 'LoRA Model C', 'loras'),
+        createTestAsset('asset2', 'Checkpoint Model', 'checkpoints')
+      ]
+      const wrapper = createWrapper(assets)
+
+      const searchBox = wrapper.find('[data-testid="search-box"]')
+
+      // Search with different case
+      await searchBox.setValue('lora')
+      await nextTick()
+
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
+
+      expect(filteredAssets.length).toBe(1)
+      expect(filteredAssets[0].name).toContain('LoRA')
+    })
+
+    it('shows empty state when search has no results', async () => {
+      const assets = [
+        createTestAsset('asset1', 'Checkpoint Model', 'checkpoints')
+      ]
+      const wrapper = createWrapper(assets)
+
+      const searchBox = wrapper.find('[data-testid="search-box"]')
+
+      // Search for something that doesn't exist
+      await searchBox.setValue('nonexistent')
+      await nextTick()
+
+      expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(true)
+    })
+  })
+
+  describe('Category Navigation', () => {
+    it('filters assets by selected category', async () => {
+      const assets = [
+        createTestAsset('asset1', 'Checkpoint Model A', 'checkpoints'),
+        createTestAsset('asset2', 'LoRA Model C', 'loras'),
+        createTestAsset('asset3', 'VAE Model D', 'vae')
+      ]
+      const wrapper = createWrapper(assets, { showLeftPanel: true })
+
+      // Wait for Vue reactivity and component mounting
+      await nextTick()
+
+      // Check if left panel exists first (since we have multiple categories)
+      const leftPanel = wrapper.find('[data-testid="left-panel"]')
+      expect(leftPanel.exists()).toBe(true)
+
+      // Check if the nav item exists before clicking
+      const lorasNavItem = wrapper.find('[data-testid="nav-item-loras"]')
+      expect(lorasNavItem.exists()).toBe(true)
+
+      // Click the loras category
+      await lorasNavItem.trigger('click')
+      await nextTick()
+
+      // Should filter to only LoRA assets
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const filteredAssets = assetGrid.props('assets') as AssetDisplayItem[]
+
+      expect(filteredAssets.length).toBe(1)
+      expect(filteredAssets[0].name).toContain('LoRA')
+    })
+  })
+
+  describe('Asset Selection', () => {
+    it('emits asset-select event when asset is selected', async () => {
+      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
+      const wrapper = createWrapper(assets)
+
+      // Click on first asset
+      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
+
+      const emitted = wrapper.emitted('asset-select')
+      expect(emitted).toBeDefined()
+      expect(emitted).toHaveLength(1)
+
+      const emittedAsset = emitted![0][0] as AssetDisplayItem
+      expect(emittedAsset.id).toBe('asset1')
+    })
+
+    it('executes onSelect callback when provided', async () => {
+      const onSelectSpy = vi.fn()
+      const assets = [createTestAsset('asset1', 'Test Model', 'checkpoints')]
+      const wrapper = createWrapper(assets, { onSelect: onSelectSpy })
+
+      // Click on first asset
+      await wrapper.find('[data-testid="asset-asset1"]').trigger('click')
+
+      expect(onSelectSpy).toHaveBeenCalledWith('Test Model')
+    })
+  })
+
+  describe('Left Panel Conditional Logic', () => {
+    it('hides left panel by default when showLeftPanel prop is undefined', () => {
+      const singleCategoryAssets = [
+        createTestAsset('single1', 'Asset 1', 'checkpoints'),
+        createTestAsset('single2', 'Asset 2', 'checkpoints')
+      ]
+      const wrapper = createWrapper(singleCategoryAssets)
+
+      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(false)
+    })
+
+    it('shows left panel when showLeftPanel prop is explicitly true', () => {
+      const singleCategoryAssets = [
+        createTestAsset('single1', 'Asset 1', 'checkpoints')
+      ]
+
+      // Force show even with single category
+      const wrapper = createWrapper(singleCategoryAssets, {
+        showLeftPanel: true
+      })
+      expect(wrapper.find('[data-testid="left-panel"]').exists()).toBe(true)
+
+      // Force hide even with multiple categories
+      wrapper.unmount()
+      const multiCategoryAssets = [
+        createTestAsset('asset1', 'Checkpoint', 'checkpoints'),
+        createTestAsset('asset2', 'LoRA', 'loras')
+      ]
+      const wrapper2 = createWrapper(multiCategoryAssets, {
+        showLeftPanel: false
+      })
+      expect(wrapper2.find('[data-testid="left-panel"]').exists()).toBe(false)
+    })
+  })
+})
diff --git a/tests-ui/platform/assets/components/AssetFilterBar.test.ts b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
new file mode 100644
index 0000000000..8e659d24f3
--- /dev/null
+++ b/tests-ui/platform/assets/components/AssetFilterBar.test.ts
@@ -0,0 +1,268 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
+import type { FilterState } from '@/platform/assets/components/AssetFilterBar.vue'
+import {
+  createAssetWithSpecificBaseModel,
+  createAssetWithSpecificExtension,
+  createAssetWithoutBaseModel
+} from '@/platform/assets/fixtures/ui-mock-assets'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+// Mock @/i18n directly since component imports { t } from '@/i18n'
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+// Mock components with minimal functionality for business logic testing
+vi.mock('@/components/input/MultiSelect.vue', () => ({
+  default: {
+    name: 'MultiSelect',
+    props: {
+      modelValue: Array,
+      label: String,
+      options: Array,
+      class: String
+    },
+    emits: ['update:modelValue'],
+    template: `
+      <div data-testid="multi-select">
+        <select multiple @change="$emit('update:modelValue', Array.from($event.target.selectedOptions).map(o => ({ name: o.text, value: o.value })))">
+          <option v-for="option in options" :key="option.value" :value="option.value">
+            {{ option.name }}
+          </option>
+        </select>
+      </div>
+    `
+  }
+}))
+
+vi.mock('@/components/input/SingleSelect.vue', () => ({
+  default: {
+    name: 'SingleSelect',
+    props: {
+      modelValue: String,
+      label: String,
+      options: Array,
+      class: String
+    },
+    emits: ['update:modelValue'],
+    template: `
+      <div data-testid="single-select">
+        <select @change="$emit('update:modelValue', $event.target.value)">
+          <option v-for="option in options" :key="option.value" :value="option.value">
+            {{ option.name }}
+          </option>
+        </select>
+      </div>
+    `
+  }
+}))
+
+// Test factory functions
+function mountAssetFilterBar(props = {}) {
+  return mount(AssetFilterBar, {
+    props,
+    global: {
+      mocks: {
+        $t: (key: string) => key
+      }
+    }
+  })
+}
+
+describe('AssetFilterBar', () => {
+  describe('Filter State Management', () => {
+    it('maintains correct initial state', () => {
+      // Provide assets with options so filters are visible
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificBaseModel('sd15')
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      // Test initial state through component props
+      const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
+      const singleSelect = wrapper.findComponent({ name: 'SingleSelect' })
+
+      expect(multiSelects[0].props('modelValue')).toEqual([])
+      expect(multiSelects[1].props('modelValue')).toEqual([])
+      expect(singleSelect.props('modelValue')).toBe('name-asc')
+    })
+
+    it('handles multiple simultaneous filter changes correctly', async () => {
+      // Provide assets with options so filters are visible
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificBaseModel('sd15')
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      // Update file formats
+      const fileFormatSelect = wrapper.findAllComponents({
+        name: 'MultiSelect'
+      })[0]
+      await fileFormatSelect.vm.$emit('update:modelValue', [
+        { name: '.ckpt', value: 'ckpt' },
+        { name: '.safetensors', value: 'safetensors' }
+      ])
+
+      await nextTick()
+
+      // Update base models
+      const baseModelSelect = wrapper.findAllComponents({
+        name: 'MultiSelect'
+      })[1]
+      await baseModelSelect.vm.$emit('update:modelValue', [
+        { name: 'SD XL', value: 'sdxl' }
+      ])
+
+      await nextTick()
+
+      // Update sort
+      const sortSelect = wrapper.findComponent({ name: 'SingleSelect' })
+      await sortSelect.vm.$emit('update:modelValue', 'popular')
+
+      await nextTick()
+
+      const emitted = wrapper.emitted('filterChange')
+      expect(emitted).toHaveLength(3)
+
+      // Check final state
+      const finalState: FilterState = emitted![2][0] as FilterState
+      expect(finalState.fileFormats).toEqual(['ckpt', 'safetensors'])
+      expect(finalState.baseModels).toEqual(['sdxl'])
+      expect(finalState.sortBy).toBe('popular')
+    })
+
+    it('ensures FilterState interface compliance', async () => {
+      // Provide assets with options so filters are visible
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificBaseModel('sd15')
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const fileFormatSelect = wrapper.findAllComponents({
+        name: 'MultiSelect'
+      })[0]
+      await fileFormatSelect.vm.$emit('update:modelValue', [
+        { name: '.ckpt', value: 'ckpt' }
+      ])
+
+      await nextTick()
+
+      const emitted = wrapper.emitted('filterChange')
+      const filterState = emitted![0][0] as FilterState
+
+      // Type and structure assertions
+      expect(Array.isArray(filterState.fileFormats)).toBe(true)
+      expect(Array.isArray(filterState.baseModels)).toBe(true)
+      expect(typeof filterState.sortBy).toBe('string')
+
+      // Value type assertions
+      expect(filterState.fileFormats.every((f) => typeof f === 'string')).toBe(
+        true
+      )
+      expect(filterState.baseModels.every((m) => typeof m === 'string')).toBe(
+        true
+      )
+    })
+  })
+
+  describe('Dynamic Filter Options', () => {
+    it('should use dynamic file format options based on actual assets', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificExtension('ckpt'),
+        createAssetWithSpecificExtension('pt')
+      ]
+
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const fileFormatSelect = wrapper.findAllComponents({
+        name: 'MultiSelect'
+      })[0]
+      expect(fileFormatSelect.props('options')).toEqual([
+        { name: '.ckpt', value: 'ckpt' },
+        { name: '.pt', value: 'pt' },
+        { name: '.safetensors', value: 'safetensors' }
+      ])
+    })
+
+    it('should use dynamic base model options based on actual assets', () => {
+      const assets = [
+        createAssetWithSpecificBaseModel('sd15'),
+        createAssetWithSpecificBaseModel('sdxl'),
+        createAssetWithSpecificBaseModel('sd35')
+      ]
+
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const baseModelSelect = wrapper.findAllComponents({
+        name: 'MultiSelect'
+      })[1]
+      expect(baseModelSelect.props('options')).toEqual([
+        { name: 'sd15', value: 'sd15' },
+        { name: 'sd35', value: 'sd35' },
+        { name: 'sdxl', value: 'sdxl' }
+      ])
+    })
+  })
+
+  describe('Conditional Filter Visibility', () => {
+    it('hides file format filter when no options available', () => {
+      const assets: AssetItem[] = [] // No assets = no file format options
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const fileFormatSelects = wrapper
+        .findAllComponents({ name: 'MultiSelect' })
+        .filter(
+          (component) => component.props('label') === 'assetBrowser.fileFormats'
+        )
+
+      expect(fileFormatSelects).toHaveLength(0)
+    })
+
+    it('hides base model filter when no options available', () => {
+      const assets = [createAssetWithoutBaseModel()] // Asset without base model = no base model options
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const baseModelSelects = wrapper
+        .findAllComponents({ name: 'MultiSelect' })
+        .filter(
+          (component) => component.props('label') === 'assetBrowser.baseModels'
+        )
+
+      expect(baseModelSelects).toHaveLength(0)
+    })
+
+    it('shows both filters when options are available', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificBaseModel('sd15')
+      ]
+      const wrapper = mountAssetFilterBar({ assets })
+
+      const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
+      const fileFormatSelect = multiSelects.find(
+        (component) => component.props('label') === 'assetBrowser.fileFormats'
+      )
+      const baseModelSelect = multiSelects.find(
+        (component) => component.props('label') === 'assetBrowser.baseModels'
+      )
+
+      expect(fileFormatSelect).toBeDefined()
+      expect(baseModelSelect).toBeDefined()
+    })
+
+    it('hides both filters when no assets provided', () => {
+      const wrapper = mountAssetFilterBar()
+
+      const multiSelects = wrapper.findAllComponents({ name: 'MultiSelect' })
+      expect(multiSelects).toHaveLength(0)
+    })
+  })
+})
diff --git a/tests-ui/platform/assets/composables/useAssetBrowser.test.ts b/tests-ui/platform/assets/composables/useAssetBrowser.test.ts
new file mode 100644
index 0000000000..ab219d8339
--- /dev/null
+++ b/tests-ui/platform/assets/composables/useAssetBrowser.test.ts
@@ -0,0 +1,509 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    getAssetDetails: vi.fn()
+  }
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => {
+    const translations: Record<string, string> = {
+      'assetBrowser.allModels': 'All Models',
+      'assetBrowser.assets': 'Assets',
+      'assetBrowser.unknown': 'unknown'
+    }
+    return translations[key] || key
+  },
+  d: (date: Date) => date.toLocaleDateString()
+}))
+
+describe('useAssetBrowser', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  // Test fixtures - minimal data focused on functionality being tested
+  const createApiAsset = (overrides: Partial<AssetItem> = {}): AssetItem => ({
+    id: 'test-id',
+    name: 'test-asset.safetensors',
+    asset_hash: 'blake3:abc123',
+    size: 1024,
+    mime_type: 'application/octet-stream',
+    tags: ['models', 'checkpoints'],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    last_access_time: '2024-01-01T00:00:00Z',
+    ...overrides
+  })
+
+  describe('Asset Transformation', () => {
+    it('transforms API asset to include display properties', () => {
+      const apiAsset = createApiAsset({
+        size: 2147483648, // 2GB
+        user_metadata: { description: 'Test model' }
+      })
+
+      const { filteredAssets } = useAssetBrowser([apiAsset])
+      const result = filteredAssets.value[0] // Get the transformed asset from filteredAssets
+
+      // Preserves API properties
+      expect(result.id).toBe(apiAsset.id)
+      expect(result.name).toBe(apiAsset.name)
+
+      // Adds display properties
+      expect(result.description).toBe('Test model')
+      expect(result.formattedSize).toBe('2 GB')
+      expect(result.badges).toContainEqual({
+        label: 'checkpoints',
+        type: 'type'
+      })
+      expect(result.badges).toContainEqual({ label: '2 GB', type: 'size' })
+    })
+
+    it('creates fallback description from tags when metadata missing', () => {
+      const apiAsset = createApiAsset({
+        tags: ['models', 'loras'],
+        user_metadata: undefined
+      })
+
+      const { filteredAssets } = useAssetBrowser([apiAsset])
+      const result = filteredAssets.value[0]
+
+      expect(result.description).toBe('loras model')
+    })
+
+    it('formats various file sizes correctly', () => {
+      const testCases = [
+        { size: 512, expected: '512 B' },
+        { size: 1536, expected: '1.5 KB' },
+        { size: 2097152, expected: '2 MB' },
+        { size: 3221225472, expected: '3 GB' }
+      ]
+
+      testCases.forEach(({ size, expected }) => {
+        const asset = createApiAsset({ size })
+        const { filteredAssets } = useAssetBrowser([asset])
+        const result = filteredAssets.value[0]
+        expect(result.formattedSize).toBe(expected)
+      })
+    })
+  })
+
+  describe('Tag-Based Filtering', () => {
+    it('filters assets by category tag', async () => {
+      const assets = [
+        createApiAsset({ id: '1', tags: ['models', 'checkpoints'] }),
+        createApiAsset({ id: '2', tags: ['models', 'loras'] }),
+        createApiAsset({ id: '3', tags: ['models', 'checkpoints'] })
+      ]
+
+      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
+
+      selectedCategory.value = 'checkpoints'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+      expect(
+        filteredAssets.value.every((asset) =>
+          asset.tags.includes('checkpoints')
+        )
+      ).toBe(true)
+    })
+
+    it('returns all assets when category is "all"', async () => {
+      const assets = [
+        createApiAsset({ id: '1', tags: ['models', 'checkpoints'] }),
+        createApiAsset({ id: '2', tags: ['models', 'loras'] })
+      ]
+
+      const { selectedCategory, filteredAssets } = useAssetBrowser(assets)
+
+      selectedCategory.value = 'all'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+    })
+  })
+
+  describe('Search Functionality', () => {
+    it('searches across asset name', async () => {
+      const assets = [
+        createApiAsset({ name: 'realistic_vision.safetensors' }),
+        createApiAsset({ name: 'anime_style.ckpt' }),
+        createApiAsset({ name: 'photorealistic_v2.safetensors' })
+      ]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+
+      searchQuery.value = 'realistic'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(2)
+      expect(
+        filteredAssets.value.every((asset) =>
+          asset.name.toLowerCase().includes('realistic')
+        )
+      ).toBe(true)
+    })
+
+    it('searches in user metadata description', async () => {
+      const assets = [
+        createApiAsset({
+          name: 'model1.safetensors',
+          user_metadata: { description: 'fantasy artwork model' }
+        }),
+        createApiAsset({
+          name: 'model2.safetensors',
+          user_metadata: { description: 'portrait photography' }
+        })
+      ]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+
+      searchQuery.value = 'fantasy'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(1)
+      expect(filteredAssets.value[0].name).toBe('model1.safetensors')
+    })
+
+    it('handles empty search results', async () => {
+      const assets = [createApiAsset({ name: 'test.safetensors' })]
+
+      const { searchQuery, filteredAssets } = useAssetBrowser(assets)
+
+      searchQuery.value = 'nonexistent'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(0)
+    })
+  })
+
+  describe('Combined Search and Filtering', () => {
+    it('applies both search and category filter', async () => {
+      const assets = [
+        createApiAsset({
+          name: 'realistic_checkpoint.safetensors',
+          tags: ['models', 'checkpoints']
+        }),
+        createApiAsset({
+          name: 'realistic_lora.safetensors',
+          tags: ['models', 'loras']
+        }),
+        createApiAsset({
+          name: 'anime_checkpoint.safetensors',
+          tags: ['models', 'checkpoints']
+        })
+      ]
+
+      const { searchQuery, selectedCategory, filteredAssets } =
+        useAssetBrowser(assets)
+
+      searchQuery.value = 'realistic'
+      selectedCategory.value = 'checkpoints'
+      await nextTick()
+
+      expect(filteredAssets.value).toHaveLength(1)
+      expect(filteredAssets.value[0].name).toBe(
+        'realistic_checkpoint.safetensors'
+      )
+    })
+  })
+
+  describe('Sorting', () => {
+    it('sorts assets by name', async () => {
+      const assets = [
+        createApiAsset({ name: 'zebra.safetensors' }),
+        createApiAsset({ name: 'alpha.safetensors' }),
+        createApiAsset({ name: 'beta.safetensors' })
+      ]
+
+      const { updateFilters, filteredAssets } = useAssetBrowser(assets)
+
+      updateFilters({ sortBy: 'name', fileFormats: [], baseModels: [] })
+      await nextTick()
+
+      const names = filteredAssets.value.map((asset) => asset.name)
+      expect(names).toEqual([
+        'alpha.safetensors',
+        'beta.safetensors',
+        'zebra.safetensors'
+      ])
+    })
+
+    it('sorts assets by creation date', async () => {
+      const assets = [
+        createApiAsset({ created_at: '2024-03-01T00:00:00Z' }),
+        createApiAsset({ created_at: '2024-01-01T00:00:00Z' }),
+        createApiAsset({ created_at: '2024-02-01T00:00:00Z' })
+      ]
+
+      const { updateFilters, filteredAssets } = useAssetBrowser(assets)
+
+      updateFilters({ sortBy: 'recent', fileFormats: [], baseModels: [] })
+      await nextTick()
+
+      const dates = filteredAssets.value.map((asset) => asset.created_at)
+      expect(dates).toEqual([
+        '2024-03-01T00:00:00Z',
+        '2024-02-01T00:00:00Z',
+        '2024-01-01T00:00:00Z'
+      ])
+    })
+  })
+
+  describe('Async Asset Selection with Detail Fetching', () => {
+    it('should fetch asset details and call onSelect with filename when provided', async () => {
+      const onSelectSpy = vi.fn()
+      const asset = createApiAsset({
+        id: 'asset-123',
+        name: 'test-model.safetensors'
+      })
+
+      const detailAsset = createApiAsset({
+        id: 'asset-123',
+        name: 'test-model.safetensors',
+        user_metadata: { filename: 'checkpoints/test-model.safetensors' }
+      })
+      vi.mocked(assetService.getAssetDetails).mockResolvedValue(detailAsset)
+
+      const { selectAssetWithCallback } = useAssetBrowser([asset])
+
+      await selectAssetWithCallback(asset.id, onSelectSpy)
+
+      expect(assetService.getAssetDetails).toHaveBeenCalledWith('asset-123')
+      expect(onSelectSpy).toHaveBeenCalledWith(
+        'checkpoints/test-model.safetensors'
+      )
+    })
+
+    it('should handle missing user_metadata.filename as error', async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+      const onSelectSpy = vi.fn()
+      const asset = createApiAsset({ id: 'asset-456' })
+
+      const detailAsset = createApiAsset({
+        id: 'asset-456',
+        user_metadata: { filename: '' } // Invalid empty filename
+      })
+      vi.mocked(assetService.getAssetDetails).mockResolvedValue(detailAsset)
+
+      const { selectAssetWithCallback } = useAssetBrowser([asset])
+
+      await selectAssetWithCallback(asset.id, onSelectSpy)
+
+      expect(assetService.getAssetDetails).toHaveBeenCalledWith('asset-456')
+      expect(onSelectSpy).not.toHaveBeenCalled()
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Invalid asset filename:',
+        expect.arrayContaining([
+          expect.objectContaining({
+            message: 'Filename cannot be empty'
+          })
+        ]),
+        'for asset:',
+        'asset-456'
+      )
+    })
+
+    it('should handle API errors gracefully', async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+      const onSelectSpy = vi.fn()
+      const asset = createApiAsset({ id: 'asset-789' })
+
+      const apiError = new Error('API Error')
+      vi.mocked(assetService.getAssetDetails).mockRejectedValue(apiError)
+
+      const { selectAssetWithCallback } = useAssetBrowser([asset])
+
+      await selectAssetWithCallback(asset.id, onSelectSpy)
+
+      expect(assetService.getAssetDetails).toHaveBeenCalledWith('asset-789')
+      expect(onSelectSpy).not.toHaveBeenCalled()
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Failed to fetch asset details for asset-789'),
+        apiError
+      )
+    })
+
+    it('should not fetch details when no callback provided', async () => {
+      const asset = createApiAsset({ id: 'asset-no-callback' })
+
+      const { selectAssetWithCallback } = useAssetBrowser([asset])
+
+      await selectAssetWithCallback(asset.id)
+
+      expect(assetService.getAssetDetails).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Filename Validation Security', () => {
+    const createValidationTest = (filename: string) => {
+      const testAsset = createApiAsset({ id: 'validation-test' })
+      const detailAsset = createApiAsset({
+        id: 'validation-test',
+        user_metadata: { filename }
+      })
+      return { testAsset, detailAsset }
+    }
+
+    it('accepts valid file paths with forward slashes', async () => {
+      const onSelectSpy = vi.fn()
+      const { testAsset, detailAsset } = createValidationTest(
+        'models/checkpoints/v1/test-model.safetensors'
+      )
+      vi.mocked(assetService.getAssetDetails).mockResolvedValue(detailAsset)
+
+      const { selectAssetWithCallback } = useAssetBrowser([testAsset])
+      await selectAssetWithCallback(testAsset.id, onSelectSpy)
+
+      expect(onSelectSpy).toHaveBeenCalledWith(
+        'models/checkpoints/v1/test-model.safetensors'
+      )
+    })
+
+    it('rejects directory traversal attacks', async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+      const onSelectSpy = vi.fn()
+
+      const maliciousPaths = [
+        '../malicious-model.safetensors',
+        'models/../../../etc/passwd',
+        '/etc/passwd'
+      ]
+
+      for (const path of maliciousPaths) {
+        const { testAsset, detailAsset } = createValidationTest(path)
+        vi.mocked(assetService.getAssetDetails).mockResolvedValue(detailAsset)
+
+        const { selectAssetWithCallback } = useAssetBrowser([testAsset])
+        await selectAssetWithCallback(testAsset.id, onSelectSpy)
+
+        expect(onSelectSpy).not.toHaveBeenCalled()
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          'Invalid asset filename:',
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: 'Path must not start with / or contain ..'
+            })
+          ]),
+          'for asset:',
+          'validation-test'
+        )
+      }
+    })
+
+    it('rejects invalid filename characters', async () => {
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+      const onSelectSpy = vi.fn()
+
+      const invalidChars = ['\\', ':', '*', '?', '"', '<', '>', '|']
+
+      for (const char of invalidChars) {
+        const { testAsset, detailAsset } = createValidationTest(
+          `bad${char}filename.safetensors`
+        )
+        vi.mocked(assetService.getAssetDetails).mockResolvedValue(detailAsset)
+
+        const { selectAssetWithCallback } = useAssetBrowser([testAsset])
+        await selectAssetWithCallback(testAsset.id, onSelectSpy)
+
+        expect(onSelectSpy).not.toHaveBeenCalled()
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          'Invalid asset filename:',
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: 'Invalid filename characters'
+            })
+          ]),
+          'for asset:',
+          'validation-test'
+        )
+      }
+    })
+  })
+
+  describe('Dynamic Category Extraction', () => {
+    it('extracts categories from asset tags', () => {
+      const assets = [
+        createApiAsset({ tags: ['models', 'checkpoints'] }),
+        createApiAsset({ tags: ['models', 'loras'] }),
+        createApiAsset({ tags: ['models', 'checkpoints'] }) // duplicate
+      ]
+
+      const { availableCategories } = useAssetBrowser(assets)
+
+      expect(availableCategories.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+        {
+          id: 'checkpoints',
+          label: 'Checkpoints',
+          icon: 'icon-[lucide--package]'
+        },
+        { id: 'loras', label: 'Loras', icon: 'icon-[lucide--package]' }
+      ])
+    })
+
+    it('handles assets with no category tag', () => {
+      const assets = [
+        createApiAsset({ tags: ['models'] }), // No second tag
+        createApiAsset({ tags: ['models', 'vae'] })
+      ]
+
+      const { availableCategories } = useAssetBrowser(assets)
+
+      expect(availableCategories.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+        { id: 'vae', label: 'Vae', icon: 'icon-[lucide--package]' }
+      ])
+    })
+
+    it('ignores non-models root tags', () => {
+      const assets = [
+        createApiAsset({ tags: ['input', 'images'] }),
+        createApiAsset({ tags: ['models', 'checkpoints'] })
+      ]
+
+      const { availableCategories } = useAssetBrowser(assets)
+
+      expect(availableCategories.value).toEqual([
+        { id: 'all', label: 'All Models', icon: 'icon-[lucide--folder]' },
+        {
+          id: 'checkpoints',
+          label: 'Checkpoints',
+          icon: 'icon-[lucide--package]'
+        }
+      ])
+    })
+
+    it('computes content title from selected category', () => {
+      const assets = [createApiAsset({ tags: ['models', 'checkpoints'] })]
+      const { selectedCategory, contentTitle } = useAssetBrowser(assets)
+
+      // Default
+      expect(contentTitle.value).toBe('All Models')
+
+      // Set specific category
+      selectedCategory.value = 'checkpoints'
+      expect(contentTitle.value).toBe('Checkpoints')
+
+      // Unknown category
+      selectedCategory.value = 'unknown'
+      expect(contentTitle.value).toBe('Assets')
+    })
+  })
+})
diff --git a/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts b/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts
new file mode 100644
index 0000000000..102aa7a188
--- /dev/null
+++ b/tests-ui/platform/assets/composables/useAssetBrowserDialog.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+import { useDialogStore } from '@/stores/dialogStore'
+
+// Mock the dialog store
+vi.mock('@/stores/dialogStore')
+
+// Mock the asset service
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    getAssetsForNodeType: vi.fn().mockResolvedValue([])
+  }
+}))
+
+// Test factory functions
+interface AssetBrowserProps {
+  nodeType: string
+  inputName: string
+  onAssetSelected?: (filename: string) => void
+}
+
+function createAssetBrowserProps(
+  overrides: Partial<AssetBrowserProps> = {}
+): AssetBrowserProps {
+  return {
+    nodeType: 'CheckpointLoaderSimple',
+    inputName: 'ckpt_name',
+    ...overrides
+  }
+}
+
+describe('useAssetBrowserDialog', () => {
+  describe('Asset Selection Flow', () => {
+    it('auto-closes dialog when asset is selected', async () => {
+      // Create fresh mocks for this test
+      const mockShowDialog = vi.fn()
+      const mockCloseDialog = vi.fn()
+
+      vi.mocked(useDialogStore).mockReturnValue({
+        showDialog: mockShowDialog,
+        closeDialog: mockCloseDialog
+      } as Partial<ReturnType<typeof useDialogStore>> as ReturnType<
+        typeof useDialogStore
+      >)
+
+      const assetBrowserDialog = useAssetBrowserDialog()
+      const onAssetSelected = vi.fn()
+      const props = createAssetBrowserProps({ onAssetSelected })
+
+      await assetBrowserDialog.show(props)
+
+      // Get the onSelect handler that was passed to the dialog
+      const dialogCall = mockShowDialog.mock.calls[0][0]
+      const onSelectHandler = dialogCall.props.onSelect
+
+      // Simulate asset selection
+      onSelectHandler('selected-asset-path')
+
+      // Should call the original callback and trigger hide animation
+      expect(onAssetSelected).toHaveBeenCalledWith('selected-asset-path')
+      expect(mockCloseDialog).toHaveBeenCalledWith({
+        key: 'global-asset-browser'
+      })
+    })
+
+    it('closes dialog when close handler is called', async () => {
+      // Create fresh mocks for this test
+      const mockShowDialog = vi.fn()
+      const mockCloseDialog = vi.fn()
+
+      vi.mocked(useDialogStore).mockReturnValue({
+        showDialog: mockShowDialog,
+        closeDialog: mockCloseDialog
+      } as Partial<ReturnType<typeof useDialogStore>> as ReturnType<
+        typeof useDialogStore
+      >)
+
+      const assetBrowserDialog = useAssetBrowserDialog()
+      const props = createAssetBrowserProps()
+
+      await assetBrowserDialog.show(props)
+
+      // Get the onClose handler that was passed to the dialog
+      const dialogCall = mockShowDialog.mock.calls[0][0]
+      const onCloseHandler = dialogCall.props.onClose
+
+      // Simulate dialog close
+      onCloseHandler()
+
+      expect(mockCloseDialog).toHaveBeenCalledWith({
+        key: 'global-asset-browser'
+      })
+    })
+  })
+})
diff --git a/tests-ui/platform/assets/composables/useAssetFilterOptions.test.ts b/tests-ui/platform/assets/composables/useAssetFilterOptions.test.ts
new file mode 100644
index 0000000000..af1d1c9fb4
--- /dev/null
+++ b/tests-ui/platform/assets/composables/useAssetFilterOptions.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, it } from 'vitest'
+
+import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
+import {
+  createAssetWithSpecificBaseModel,
+  createAssetWithSpecificExtension,
+  createAssetWithoutBaseModel,
+  createAssetWithoutExtension,
+  createAssetWithoutUserMetadata
+} from '@/platform/assets/fixtures/ui-mock-assets'
+
+describe('useAssetFilterOptions', () => {
+  describe('File Format Extraction', () => {
+    it('extracts file formats from asset names', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificExtension('ckpt'),
+        createAssetWithSpecificExtension('pt')
+      ]
+
+      const { availableFileFormats } = useAssetFilterOptions(assets)
+
+      expect(availableFileFormats.value).toEqual([
+        { name: '.ckpt', value: 'ckpt' },
+        { name: '.pt', value: 'pt' },
+        { name: '.safetensors', value: 'safetensors' }
+      ])
+    })
+
+    it('handles duplicate file formats', () => {
+      const assets = [
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificExtension('safetensors'),
+        createAssetWithSpecificExtension('ckpt')
+      ]
+
+      const { availableFileFormats } = useAssetFilterOptions(assets)
+
+      expect(availableFileFormats.value).toEqual([
+        { name: '.ckpt', value: 'ckpt' },
+        { name: '.safetensors', value: 'safetensors' }
+      ])
+    })
+
+    it('handles assets with no file extension', () => {
+      const assets = [
+        createAssetWithoutExtension(),
+        createAssetWithSpecificExtension('safetensors')
+      ]
+
+      const { availableFileFormats } = useAssetFilterOptions(assets)
+
+      expect(availableFileFormats.value).toEqual([
+        { name: '.safetensors', value: 'safetensors' }
+      ])
+    })
+
+    it('handles empty asset list', () => {
+      const { availableFileFormats } = useAssetFilterOptions([])
+
+      expect(availableFileFormats.value).toEqual([])
+    })
+  })
+
+  describe('Base Model Extraction', () => {
+    it('extracts base models from user metadata', () => {
+      const assets = [
+        createAssetWithSpecificBaseModel('sd15'),
+        createAssetWithSpecificBaseModel('sdxl'),
+        createAssetWithSpecificBaseModel('sd35')
+      ]
+
+      const { availableBaseModels } = useAssetFilterOptions(assets)
+
+      expect(availableBaseModels.value).toEqual([
+        { name: 'sd15', value: 'sd15' },
+        { name: 'sd35', value: 'sd35' },
+        { name: 'sdxl', value: 'sdxl' }
+      ])
+    })
+
+    it('handles duplicate base models', () => {
+      const assets = [
+        createAssetWithSpecificBaseModel('sd15'),
+        createAssetWithSpecificBaseModel('sd15'),
+        createAssetWithSpecificBaseModel('sdxl')
+      ]
+
+      const { availableBaseModels } = useAssetFilterOptions(assets)
+
+      expect(availableBaseModels.value).toEqual([
+        { name: 'sd15', value: 'sd15' },
+        { name: 'sdxl', value: 'sdxl' }
+      ])
+    })
+
+    it('handles assets with missing user_metadata', () => {
+      const assets = [
+        createAssetWithoutUserMetadata(),
+        createAssetWithSpecificBaseModel('sd15')
+      ]
+
+      const { availableBaseModels } = useAssetFilterOptions(assets)
+
+      expect(availableBaseModels.value).toEqual([
+        { name: 'sd15', value: 'sd15' }
+      ])
+    })
+
+    it('handles assets with missing base_model field', () => {
+      const assets = [
+        createAssetWithoutBaseModel(),
+        createAssetWithSpecificBaseModel('sdxl')
+      ]
+
+      const { availableBaseModels } = useAssetFilterOptions(assets)
+
+      expect(availableBaseModels.value).toEqual([
+        { name: 'sdxl', value: 'sdxl' }
+      ])
+    })
+
+    it('handles empty asset list', () => {
+      const { availableBaseModels } = useAssetFilterOptions([])
+
+      expect(availableBaseModels.value).toEqual([])
+    })
+  })
+
+  describe('Reactivity', () => {
+    it('returns computed properties that can be reactive', () => {
+      const assets = [createAssetWithSpecificExtension('safetensors')]
+
+      const { availableFileFormats, availableBaseModels } =
+        useAssetFilterOptions(assets)
+
+      // These should be computed refs
+      expect(availableFileFormats.value).toBeDefined()
+      expect(availableBaseModels.value).toBeDefined()
+      expect(typeof availableFileFormats.value).toBe('object')
+      expect(typeof availableBaseModels.value).toBe('object')
+      expect(Array.isArray(availableFileFormats.value)).toBe(true)
+      expect(Array.isArray(availableBaseModels.value)).toBe(true)
+    })
+  })
+})
diff --git a/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts b/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
index 9f87433189..faa20f654d 100644
--- a/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
+++ b/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
diff --git a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
index 65c3a2fe98..bcb4d49543 100644
--- a/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
+++ b/tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
@@ -4,8 +4,8 @@ import Button from 'primevue/button'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 
-import NodeConflictDialogContent from '@/components/dialog/content/manager/NodeConflictDialogContent.vue'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 // Mock getConflictMessage utility
 vi.mock('@/utils/conflictMessageUtil', () => ({
@@ -34,11 +34,14 @@ vi.mock('vue-i18n', () => ({
 const mockConflictData = ref<ConflictDetectionResult[]>([])
 
 // Mock useConflictDetection composable
-vi.mock('@/composables/useConflictDetection', () => ({
-  useConflictDetection: () => ({
-    conflictedPackages: computed(() => mockConflictData.value)
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictDetection',
+  () => ({
+    useConflictDetection: () => ({
+      conflictedPackages: computed(() => mockConflictData.value)
+    })
   })
-}))
+)
 
 describe('NodeConflictDialogContent', () => {
   let pinia: ReturnType<typeof createPinia>
diff --git a/tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts b/tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts
index 42e717c1df..be8e10b5d4 100644
--- a/tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts
+++ b/tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts
@@ -4,8 +4,11 @@ import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import PackCard from '@/components/dialog/content/manager/packCard/PackCard.vue'
-import type { MergedNodePack, RegistryPack } from '@/types/comfyManagerTypes'
+import PackCard from '@/workbench/extensions/manager/components/manager/packCard/PackCard.vue'
+import type {
+  MergedNodePack,
+  RegistryPack
+} from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Mock dependencies
 vi.mock('vue-i18n', () => ({
@@ -21,7 +24,7 @@ vi.mock('vue-i18n', () => ({
   }))
 }))
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
     isPackInstalled: vi.fn(() => false),
     isPackEnabled: vi.fn(() => true),
@@ -42,7 +45,8 @@ vi.mock('@vueuse/core', async () => {
     whenever: vi.fn(),
     useStorage: vi.fn((_key, defaultValue) => {
       return ref(defaultValue)
-    })
+    }),
+    createSharedComposable: vi.fn((fn) => fn)
   }
 })
 
diff --git a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
index e3ff5afb08..30253fda7d 100644
--- a/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
+++ b/tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts
@@ -5,29 +5,32 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import ManagerProgressFooter from '@/components/dialog/footer/ManagerProgressFooter.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useComfyManagerService } from '@/services/comfyManagerService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import ManagerProgressFooter from '@/workbench/extensions/manager/components/ManagerProgressFooter.vue'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
-} from '@/stores/comfyManagerStore'
-import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
-import { TaskLog } from '@/types/comfyManagerTypes'
+} from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { TaskLog } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Mock modules
-vi.mock('@/stores/comfyManagerStore')
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore')
 vi.mock('@/stores/dialogStore')
 vi.mock('@/platform/settings/settingStore')
 vi.mock('@/stores/commandStore')
-vi.mock('@/services/comfyManagerService')
-vi.mock('@/composables/useConflictDetection', () => ({
-  useConflictDetection: vi.fn(() => ({
-    conflictedPackages: { value: [] },
-    performConflictDetection: vi.fn().mockResolvedValue(undefined)
-  }))
-}))
+vi.mock('@/workbench/extensions/manager/services/comfyManagerService')
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictDetection',
+  () => ({
+    useConflictDetection: vi.fn(() => ({
+      conflictedPackages: { value: [] },
+      runFullConflictAnalysis: vi.fn().mockResolvedValue(undefined)
+    }))
+  })
+)
 
 // Mock useEventListener to capture the event handler
 let reconnectHandler: (() => void) | null = null
diff --git a/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts
deleted file mode 100644
index 1346c3e529..0000000000
--- a/tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
-
-// Mock canvas store
-let mockGetCanvas = vi.fn()
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn(() => ({
-    getCanvas: mockGetCanvas
-  }))
-}))
-
-describe('useCanvasTransformSync', () => {
-  let mockCanvas: { ds: { scale: number; offset: [number, number] } }
-  let syncFn: ReturnType<typeof vi.fn>
-
-  beforeEach(() => {
-    mockCanvas = {
-      ds: {
-        scale: 1,
-        offset: [0, 0]
-      }
-    }
-    syncFn = vi.fn()
-    mockGetCanvas = vi.fn(() => mockCanvas)
-    vi.clearAllMocks()
-  })
-
-  it('should not call syncFn when transform has not changed', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    // Should call once initially
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Wait for next RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    // Should not call again since transform didn't change
-    expect(syncFn).toHaveBeenCalledTimes(1)
-  })
-
-  it('should call syncFn when scale changes', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Change scale
-    mockCanvas.ds.scale = 2
-
-    // Wait for next RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    expect(syncFn).toHaveBeenCalledTimes(2)
-  })
-
-  it('should call syncFn when offset changes', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Change offset
-    mockCanvas.ds.offset = [10, 20]
-
-    // Wait for next RAF cycles
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    expect(syncFn).toHaveBeenCalledTimes(2)
-  })
-
-  it('should stop calling syncFn after stopSync is called', async () => {
-    const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
-      autoStart: false
-    })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    stopSync()
-
-    // Change transform after stopping
-    mockCanvas.ds.scale = 2
-
-    // Wait for RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    // Should not call again
-    expect(syncFn).toHaveBeenCalledTimes(1)
-  })
-
-  it('should handle null canvas gracefully', async () => {
-    mockGetCanvas.mockReturnValue(null)
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    // Should not call syncFn with null canvas
-    expect(syncFn).not.toHaveBeenCalled()
-  })
-
-  it('should call onStart and onStop callbacks', () => {
-    const onStart = vi.fn()
-    const onStop = vi.fn()
-
-    const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
-      autoStart: false,
-      onStart,
-      onStop
-    })
-
-    startSync()
-    expect(onStart).toHaveBeenCalledTimes(1)
-
-    stopSync()
-    expect(onStop).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts b/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts
index 2b248edddc..303dddc080 100644
--- a/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts
+++ b/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts
@@ -2,10 +2,10 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import {
   LGraphEventMode,
-  LGraphNode,
-  Positionable,
+  type Positionable,
   Reroute
 } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
diff --git a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts b/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
deleted file mode 100644
index c9c8831d59..0000000000
--- a/tests-ui/tests/composables/graph/useCanvasTransformSync.test.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import { useCanvasTransformSync } from '@/renderer/core/layout/transform/useCanvasTransformSync'
-
-import type { LGraphCanvas } from '../../../../src/lib/litegraph/src/litegraph'
-
-// Mock LiteGraph canvas
-const createMockCanvas = (): Partial<LGraphCanvas> => ({
-  canvas: document.createElement('canvas'),
-  ds: {
-    offset: [0, 0],
-    scale: 1
-  } as any // Mock the DragAndScale type
-})
-
-describe('useCanvasTransformSync', () => {
-  let mockCanvas: LGraphCanvas
-  let syncFn: ReturnType<typeof vi.fn>
-  let callbacks: {
-    onStart: ReturnType<typeof vi.fn>
-    onUpdate: ReturnType<typeof vi.fn>
-    onStop: ReturnType<typeof vi.fn>
-  }
-
-  beforeEach(() => {
-    vi.useFakeTimers()
-    mockCanvas = createMockCanvas() as LGraphCanvas
-    syncFn = vi.fn()
-    callbacks = {
-      onStart: vi.fn(),
-      onUpdate: vi.fn(),
-      onStop: vi.fn()
-    }
-
-    // Mock requestAnimationFrame
-    global.requestAnimationFrame = vi.fn((cb) => {
-      setTimeout(cb, 16) // Simulate 60fps
-      return 1
-    })
-    global.cancelAnimationFrame = vi.fn()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-    vi.restoreAllMocks()
-  })
-
-  it('should auto-start sync when canvas is provided', async () => {
-    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
-
-    await nextTick()
-
-    expect(isActive.value).toBe(true)
-    expect(callbacks.onStart).toHaveBeenCalledOnce()
-    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
-  })
-
-  it('should not auto-start when autoStart is false', async () => {
-    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
-      autoStart: false
-    })
-
-    await nextTick()
-
-    expect(isActive.value).toBe(false)
-    expect(callbacks.onStart).not.toHaveBeenCalled()
-    expect(syncFn).not.toHaveBeenCalled()
-  })
-
-  it('should not start when canvas is null', async () => {
-    const { isActive } = useCanvasTransformSync(null, syncFn, callbacks)
-
-    await nextTick()
-
-    expect(isActive.value).toBe(false)
-    expect(callbacks.onStart).not.toHaveBeenCalled()
-  })
-
-  it('should manually start and stop sync', async () => {
-    const { isActive, startSync, stopSync } = useCanvasTransformSync(
-      mockCanvas,
-      syncFn,
-      callbacks,
-      { autoStart: false }
-    )
-
-    // Start manually
-    startSync()
-    await nextTick()
-
-    expect(isActive.value).toBe(true)
-    expect(callbacks.onStart).toHaveBeenCalledOnce()
-
-    // Stop manually
-    stopSync()
-    await nextTick()
-
-    expect(isActive.value).toBe(false)
-    expect(callbacks.onStop).toHaveBeenCalledOnce()
-  })
-
-  it('should call sync function on each frame', async () => {
-    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
-
-    await nextTick()
-
-    // Advance timers to trigger additional frames (initial call + 3 more = 4 total)
-    vi.advanceTimersByTime(48) // 3 additional frames at 16ms each
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(4) // Initial call + 3 timed calls
-    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
-  })
-
-  it('should provide timing information in onUpdate callback', async () => {
-    // Mock performance.now to return predictable values
-    const mockNow = vi.spyOn(performance, 'now')
-    mockNow.mockReturnValueOnce(0).mockReturnValueOnce(5) // 5ms duration
-
-    useCanvasTransformSync(mockCanvas, syncFn, callbacks)
-
-    await nextTick()
-
-    expect(callbacks.onUpdate).toHaveBeenCalledWith(5)
-  })
-
-  it('should handle sync function that throws errors', async () => {
-    const errorSyncFn = vi.fn().mockImplementation(() => {
-      throw new Error('Sync failed')
-    })
-
-    // Creating the composable should not throw
-    expect(() => {
-      useCanvasTransformSync(mockCanvas, errorSyncFn, callbacks)
-    }).not.toThrow()
-
-    await nextTick()
-
-    // Even though sync function throws, the composable should handle it gracefully
-    expect(errorSyncFn).toHaveBeenCalled()
-    expect(callbacks.onStart).toHaveBeenCalled()
-  })
-
-  it('should not start if already active', async () => {
-    const { startSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
-
-    await nextTick()
-
-    // Try to start again
-    startSync()
-    await nextTick()
-
-    // Should only be called once from auto-start
-    expect(callbacks.onStart).toHaveBeenCalledOnce()
-  })
-
-  it('should not stop if already inactive', async () => {
-    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks, {
-      autoStart: false
-    })
-
-    // Try to stop when not started
-    stopSync()
-    await nextTick()
-
-    expect(callbacks.onStop).not.toHaveBeenCalled()
-  })
-
-  it('should clean up on component unmount', async () => {
-    const TestComponent = {
-      setup() {
-        const { isActive } = useCanvasTransformSync(
-          mockCanvas,
-          syncFn,
-          callbacks
-        )
-        return { isActive }
-      },
-      template: '<div>{{ isActive }}</div>'
-    }
-
-    const wrapper = mount(TestComponent)
-    await nextTick()
-
-    expect(callbacks.onStart).toHaveBeenCalled()
-
-    // Unmount component
-    wrapper.unmount()
-    await nextTick()
-
-    expect(callbacks.onStop).toHaveBeenCalled()
-    expect(global.cancelAnimationFrame).toHaveBeenCalled()
-  })
-
-  it('should work without callbacks', async () => {
-    const { isActive } = useCanvasTransformSync(mockCanvas, syncFn)
-
-    await nextTick()
-
-    expect(isActive.value).toBe(true)
-    expect(syncFn).toHaveBeenCalledWith(mockCanvas)
-  })
-
-  it('should stop sync when canvas becomes null during sync', async () => {
-    let currentCanvas: any = mockCanvas
-    const dynamicSyncFn = vi.fn(() => {
-      // Simulate canvas becoming null during sync
-      currentCanvas = null
-    })
-
-    const { isActive } = useCanvasTransformSync(
-      currentCanvas,
-      dynamicSyncFn,
-      callbacks
-    )
-
-    await nextTick()
-
-    expect(isActive.value).toBe(true)
-
-    // Advance time to trigger sync
-    vi.advanceTimersByTime(16)
-    await nextTick()
-
-    // Should handle null canvas gracefully
-    expect(dynamicSyncFn).toHaveBeenCalled()
-  })
-
-  it('should use cancelAnimationFrame when stopping', async () => {
-    const { stopSync } = useCanvasTransformSync(mockCanvas, syncFn, callbacks)
-
-    await nextTick()
-
-    stopSync()
-
-    expect(global.cancelAnimationFrame).toHaveBeenCalledWith(1)
-  })
-})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 6cd76cb75b..32b18ed680 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -1894,4 +1894,159 @@ describe('useNodePricing', () => {
       expect(getNodeDisplayPrice(missingDuration)).toBe('Token-based')
     })
   })
+
+  describe('dynamic pricing - WanTextToVideoApi', () => {
+    it('should return $1.50 for 10s at 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'size', value: '1080p: 4:3 (1632x1248)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.50/Run') // 0.15 * 10
+    })
+
+    it('should return $0.50 for 5s at 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: 5 },
+        { name: 'size', value: '720p: 16:9 (1280x720)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.50/Run') // 0.10 * 5
+    })
+
+    it('should return $0.15 for 3s at 480p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '3' },
+        { name: 'size', value: '480p: 1:1 (624x624)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.15/Run') // 0.05 * 3
+    })
+
+    it('should fall back when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const missingBoth = createMockNode('WanTextToVideoApi', [])
+      const missingSize = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '5' }
+      ])
+      const missingDuration = createMockNode('WanTextToVideoApi', [
+        { name: 'size', value: '1080p' }
+      ])
+
+      expect(getNodeDisplayPrice(missingBoth)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingSize)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingDuration)).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on invalid duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: 'invalid' },
+        { name: 'size', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on unknown resolution', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'size', value: '2K' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+  })
+
+  describe('dynamic pricing - WanImageToVideoApi', () => {
+    it('should return $0.80 for 8s at 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: 8 },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.80/Run') // 0.10 * 8
+    })
+
+    it('should return $0.60 for 12s at 480P', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '12' },
+        { name: 'resolution', value: '480P' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.60/Run') // 0.05 * 12
+    })
+
+    it('should return $1.50 for 10s at 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.50/Run') // 0.15 * 10
+    })
+
+    it('should handle "5s" string duration at 1080P', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '1080P' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.75/Run') // 0.15 * 5
+    })
+
+    it('should fall back when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const missingBoth = createMockNode('WanImageToVideoApi', [])
+      const missingRes = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '5' }
+      ])
+      const missingDuration = createMockNode('WanImageToVideoApi', [
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      expect(getNodeDisplayPrice(missingBoth)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingRes)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingDuration)).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on invalid duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: 'invalid' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on unknown resolution', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: 'weird-res' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+  })
 })
diff --git a/tests-ui/tests/composables/nodePack/usePacksSelection.test.ts b/tests-ui/tests/composables/nodePack/usePacksSelection.test.ts
index 9605bd6734..01a635a889 100644
--- a/tests-ui/tests/composables/nodePack/usePacksSelection.test.ts
+++ b/tests-ui/tests/composables/nodePack/usePacksSelection.test.ts
@@ -2,9 +2,9 @@ import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { usePacksSelection } from '@/composables/nodePack/usePacksSelection'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { usePacksSelection } from '@/workbench/extensions/manager/composables/nodePack/usePacksSelection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 vi.mock('vue-i18n', async () => {
   const actual = await vi.importActual('vue-i18n')
diff --git a/tests-ui/tests/composables/nodePack/usePacksStatus.test.ts b/tests-ui/tests/composables/nodePack/usePacksStatus.test.ts
index e56ad46bf6..2fbabb3fbf 100644
--- a/tests-ui/tests/composables/nodePack/usePacksStatus.test.ts
+++ b/tests-ui/tests/composables/nodePack/usePacksStatus.test.ts
@@ -2,10 +2,10 @@ import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { usePacksStatus } from '@/composables/nodePack/usePacksStatus'
-import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { usePacksStatus } from '@/workbench/extensions/manager/composables/nodePack/usePacksStatus'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 type NodePack = components['schemas']['Node']
 type NodeStatus = components['schemas']['NodeStatus']
diff --git a/tests-ui/tests/composables/useConflictAcknowledgment.test.ts b/tests-ui/tests/composables/useConflictAcknowledgment.test.ts
index 20827985cd..419052bab5 100644
--- a/tests-ui/tests/composables/useConflictAcknowledgment.test.ts
+++ b/tests-ui/tests/composables/useConflictAcknowledgment.test.ts
@@ -19,7 +19,7 @@ describe('useConflictAcknowledgment', () => {
     it('should load empty state when localStorage is empty', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { acknowledgmentState } = useConflictAcknowledgment()
 
@@ -45,7 +45,7 @@ describe('useConflictAcknowledgment', () => {
       // Need to import the module after localStorage is set
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { acknowledgmentState } = useConflictAcknowledgment()
 
@@ -61,7 +61,7 @@ describe('useConflictAcknowledgment', () => {
     it('should mark conflicts as seen with unified function', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { markConflictsAsSeen, acknowledgmentState } =
         useConflictAcknowledgment()
@@ -74,7 +74,7 @@ describe('useConflictAcknowledgment', () => {
     it('should dismiss red dot notification', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { dismissRedDotNotification, acknowledgmentState } =
         useConflictAcknowledgment()
@@ -87,7 +87,7 @@ describe('useConflictAcknowledgment', () => {
     it('should dismiss warning banner', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { dismissWarningBanner, acknowledgmentState } =
         useConflictAcknowledgment()
@@ -100,7 +100,7 @@ describe('useConflictAcknowledgment', () => {
     it('should mark all conflicts as seen', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { markConflictsAsSeen, acknowledgmentState } =
         useConflictAcknowledgment()
@@ -118,7 +118,7 @@ describe('useConflictAcknowledgment', () => {
       // Need fresh module import to ensure clean state
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { shouldShowConflictModal, markConflictsAsSeen } =
         useConflictAcknowledgment()
@@ -132,7 +132,7 @@ describe('useConflictAcknowledgment', () => {
     it('should calculate shouldShowRedDot correctly based on conflicts', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { shouldShowRedDot, dismissRedDotNotification } =
         useConflictAcknowledgment()
@@ -147,7 +147,7 @@ describe('useConflictAcknowledgment', () => {
     it('should calculate shouldShowManagerBanner correctly', async () => {
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { shouldShowManagerBanner, dismissWarningBanner } =
         useConflictAcknowledgment()
@@ -165,7 +165,7 @@ describe('useConflictAcknowledgment', () => {
       // Need fresh module import to ensure clean state
       vi.resetModules()
       const { useConflictAcknowledgment } = await import(
-        '@/composables/useConflictAcknowledgment'
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
       )
       const { markConflictsAsSeen, dismissWarningBanner } =
         useConflictAcknowledgment()
diff --git a/tests-ui/tests/composables/useConflictDetection.test.ts b/tests-ui/tests/composables/useConflictDetection.test.ts
index 52935f65bb..d3079219e9 100644
--- a/tests-ui/tests/composables/useConflictDetection.test.ts
+++ b/tests-ui/tests/composables/useConflictDetection.test.ts
@@ -1,33 +1,21 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { computed, ref } from 'vue'
 
-import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useComfyRegistryService } from '@/services/comfyRegistryService'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
-
-type InstalledPacksResponse =
-  ManagerComponents['schemas']['InstalledPacksResponse']
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { checkVersionCompatibility } from '@/workbench/extensions/manager/utils/versionUtil'
 
 // Mock dependencies
-vi.mock('@/scripts/api', () => ({
-  api: {
-    fetchApi: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    interrupt: vi.fn(),
-    init: vi.fn(),
-    internalURL: vi.fn(),
-    apiURL: vi.fn(),
-    fileURL: vi.fn(),
-    dispatchCustomEvent: vi.fn(),
-    dispatchEvent: vi.fn(),
-    getExtensions: vi.fn(),
-    freeMemory: vi.fn()
-  }
-}))
-
-vi.mock('@/services/comfyManagerService', () => ({
+vi.mock('@/workbench/extensions/manager/services/comfyManagerService', () => ({
   useComfyManagerService: vi.fn()
 }))
 
@@ -39,968 +27,443 @@ vi.mock('@/stores/systemStatsStore', () => ({
   useSystemStatsStore: vi.fn()
 }))
 
-vi.mock('@/config', () => ({
-  default: {
-    app_version: '1.24.0-1'
-  }
+vi.mock('@/workbench/extensions/manager/utils/versionUtil', () => ({
+  getFrontendVersion: vi.fn(() => '1.24.0'),
+  checkVersionCompatibility: vi.fn()
 }))
 
-vi.mock('@/composables/useConflictAcknowledgment', () => ({
-  useConflictAcknowledgment: vi.fn()
+vi.mock('@/workbench/extensions/manager/utils/systemCompatibility', () => ({
+  checkOSCompatibility: vi.fn(),
+  checkAcceleratorCompatibility: vi.fn(),
+  normalizeOSList: vi.fn((list) => list)
 }))
 
-vi.mock('@/composables/nodePack/useInstalledPacks', () => ({
-  useInstalledPacks: vi.fn(() => ({
-    installedPacks: { value: [] },
-    refreshInstalledPacks: vi.fn(),
-    startFetchInstalled: vi.fn()
+vi.mock('@/workbench/extensions/manager/utils/conflictUtils', () => ({
+  consolidateConflictsByPackage: vi.fn((results) => results),
+  createBannedConflict: vi.fn((isBanned) =>
+    isBanned
+      ? {
+          type: 'banned',
+          current_value: 'installed',
+          required_value: 'not_banned'
+        }
+      : null
+  ),
+  createPendingConflict: vi.fn((isPending) =>
+    isPending
+      ? {
+          type: 'pending',
+          current_value: 'installed',
+          required_value: 'not_pending'
+        }
+      : null
+  ),
+  generateConflictSummary: vi.fn((results, duration) => ({
+    total_packages: results.length,
+    compatible_packages: results.filter(
+      (r: ConflictDetectionResult) => r.is_compatible
+    ).length,
+    conflicted_packages: results.filter(
+      (r: ConflictDetectionResult) => r.has_conflict
+    ).length,
+    banned_packages: 0,
+    pending_packages: 0,
+    conflicts_by_type_details: {},
+    last_check_timestamp: new Date().toISOString(),
+    check_duration_ms: duration
   }))
 }))
 
-vi.mock('@/stores/comfyManagerStore', () => ({
-  useComfyManagerStore: vi.fn(() => ({
-    isPackInstalled: vi.fn(),
-    installedPacks: { value: [] }
-  }))
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictAcknowledgment',
+  () => ({
+    useConflictAcknowledgment: vi.fn()
+  })
+)
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks',
+  () => ({
+    useInstalledPacks: vi.fn()
+  })
+)
+
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: vi.fn()
+}))
+
+vi.mock('@/workbench/extensions/manager/stores/conflictDetectionStore', () => ({
+  useConflictDetectionStore: vi.fn()
 }))
 
-vi.mock('@/stores/conflictDetectionStore', () => ({
-  useConflictDetectionStore: vi.fn(() => ({
-    conflictResults: { value: [] },
-    updateConflictResults: vi.fn(),
-    clearConflicts: vi.fn(),
-    setConflictResults: vi.fn()
+vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: vi.fn(() => ({
+    isNewManagerUI: { value: true }
   }))
 }))
 
-describe.skip('useConflictDetection with Registry Store', () => {
+describe('useConflictDetection', () => {
   let pinia: ReturnType<typeof createPinia>
 
   const mockComfyManagerService = {
-    listInstalledPacks: vi.fn(),
-    getImportFailInfo: vi.fn()
-  }
+    getImportFailInfoBulk: vi.fn(),
+    isLoading: ref(false),
+    error: ref<string | null>(null)
+  } as unknown as ReturnType<typeof useComfyManagerService>
 
   const mockRegistryService = {
-    getPackByVersion: vi.fn()
-  }
-
-  const mockAcknowledgment = {
-    checkComfyUIVersionChange: vi.fn(),
-    shouldShowConflictModal: { value: true },
-    shouldShowRedDot: { value: true },
-    acknowledgedPackageIds: { value: [] },
-    dismissConflictModal: vi.fn(),
-    dismissRedDotNotification: vi.fn(),
-    acknowledgeConflict: vi.fn()
-  }
+    getBulkNodeVersions: vi.fn(),
+    isLoading: ref(false),
+    error: ref<string | null>(null)
+  } as unknown as ReturnType<typeof useComfyRegistryService>
+
+  // Create a ref that can be modified in tests
+  const mockInstalledPacksWithVersions = ref<{ id: string; version: string }[]>(
+    []
+  )
+
+  const mockInstalledPacks = {
+    startFetchInstalled: vi.fn(),
+    installedPacks: ref<components['schemas']['Node'][]>([]),
+    installedPacksWithVersions: computed(
+      () => mockInstalledPacksWithVersions.value
+    ),
+    isReady: ref(false),
+    isLoading: ref(false),
+    error: ref<unknown>(null)
+  } as unknown as ReturnType<typeof useInstalledPacks>
+
+  const mockManagerStore = {
+    isPackEnabled: vi.fn()
+  } as unknown as ReturnType<typeof useComfyManagerStore>
+
+  // Create refs that can be used to control computed properties
+  const mockConflictedPackages = ref<ConflictDetectionResult[]>([])
+
+  const mockConflictStore = {
+    hasConflicts: computed(() =>
+      mockConflictedPackages.value.some((p) => p.has_conflict)
+    ),
+    conflictedPackages: mockConflictedPackages,
+    bannedPackages: computed(() =>
+      mockConflictedPackages.value.filter((p) =>
+        p.conflicts?.some((c) => c.type === 'banned')
+      )
+    ),
+    securityPendingPackages: computed(() =>
+      mockConflictedPackages.value.filter((p) =>
+        p.conflicts?.some((c) => c.type === 'pending')
+      )
+    ),
+    setConflictedPackages: vi.fn(),
+    clearConflicts: vi.fn()
+  } as unknown as ReturnType<typeof useConflictDetectionStore>
 
   const mockSystemStatsStore = {
-    refetchSystemStats: vi.fn(),
     systemStats: {
       system: {
+        os: 'darwin', // sys.platform returns 'darwin' for macOS
+        ram_total: 17179869184,
+        ram_free: 8589934592,
         comfyui_version: '0.3.41',
-        os: 'Darwin'
+        required_frontend_version: '1.24.0',
+        python_version:
+          '3.11.0 (main, Oct 13 2023, 09:34:16) [Clang 15.0.0 (clang-1500.0.40.1)]',
+        pytorch_version: '2.1.0',
+        embedded_python: false,
+        argv: []
       },
       devices: [
         {
           name: 'Apple M1 Pro',
           type: 'mps',
-          vram_total: 17179869184
+          index: 0,
+          vram_total: 17179869184,
+          vram_free: 8589934592,
+          torch_vram_total: 17179869184,
+          torch_vram_free: 8589934592
         }
       ]
-    } as any
-  }
+    },
+    isInitialized: ref(true),
+    $state: {} as never,
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $onAction: vi.fn(),
+    $dispose: vi.fn(),
+    $id: 'systemStats',
+    _customProperties: new Set<string>()
+  } as unknown as ReturnType<typeof useSystemStatsStore>
 
-  beforeEach(async () => {
+  const mockAcknowledgment = {
+    checkComfyUIVersionChange: vi.fn(),
+    acknowledgmentState: computed(() => ({})),
+    shouldShowConflictModal: computed(() => false),
+    shouldShowRedDot: computed(() => false),
+    shouldShowManagerBanner: computed(() => false),
+    dismissRedDotNotification: vi.fn(),
+    dismissWarningBanner: vi.fn(),
+    markConflictsAsSeen: vi.fn()
+  } as unknown as ReturnType<typeof useConflictAcknowledgment>
+
+  beforeEach(() => {
     vi.clearAllMocks()
     pinia = createPinia()
     setActivePinia(pinia)
 
-    // Reset mock system stats to default state
-    mockSystemStatsStore.systemStats = {
-      system: {
-        comfyui_version: '0.3.41',
-        os: 'Darwin'
-      },
-      devices: [
-        {
-          name: 'Apple M1 Pro',
-          type: 'mps',
-          vram_total: 17179869184
-        }
-      ]
-    } as any
-
-    // Reset mock functions
-    mockSystemStatsStore.refetchSystemStats.mockResolvedValue(undefined)
-    mockComfyManagerService.listInstalledPacks.mockReset()
-    mockComfyManagerService.getImportFailInfo.mockReset()
-    mockRegistryService.getPackByVersion.mockReset()
-
-    // Mock useComfyManagerService
-    const { useComfyManagerService } = await import(
-      '@/services/comfyManagerService'
-    )
-    vi.mocked(useComfyManagerService).mockReturnValue(
-      mockComfyManagerService as any
-    )
-
-    // Mock useComfyRegistryService
-    const { useComfyRegistryService } = await import(
-      '@/services/comfyRegistryService'
+    // Setup mocks
+    vi.mocked(useComfyManagerService).mockReturnValue(mockComfyManagerService)
+    vi.mocked(useComfyRegistryService).mockReturnValue(mockRegistryService)
+    vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore)
+    vi.mocked(useConflictAcknowledgment).mockReturnValue(mockAcknowledgment)
+    vi.mocked(useInstalledPacks).mockReturnValue(mockInstalledPacks)
+    vi.mocked(useComfyManagerStore).mockReturnValue(mockManagerStore)
+    vi.mocked(useConflictDetectionStore).mockReturnValue(mockConflictStore)
+
+    // Reset mock implementations
+    vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+      undefined
     )
-    vi.mocked(useComfyRegistryService).mockReturnValue(
-      mockRegistryService as any
+    vi.mocked(mockManagerStore.isPackEnabled).mockReturnValue(true)
+    vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+      node_versions: []
+    })
+    vi.mocked(mockComfyManagerService.getImportFailInfoBulk).mockResolvedValue(
+      {}
     )
 
-    // Mock useSystemStatsStore
-    const { useSystemStatsStore } = await import('@/stores/systemStatsStore')
-    vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore as any)
-
-    // Mock useConflictAcknowledgment
-    const { useConflictAcknowledgment } = await import(
-      '@/composables/useConflictAcknowledgment'
-    )
-    vi.mocked(useConflictAcknowledgment).mockReturnValue(
-      mockAcknowledgment as any
-    )
+    // Reset the installedPacksWithVersions data
+    mockInstalledPacksWithVersions.value = []
+    // Reset conflicted packages
+    mockConflictedPackages.value = []
   })
 
   afterEach(() => {
     vi.restoreAllMocks()
   })
 
-  describe('system environment detection', () => {
-    it('should collect system environment information successfully', async () => {
-      const { detectSystemEnvironment } = useConflictDetection()
-      const environment = await detectSystemEnvironment()
-
-      expect(environment.comfyui_version).toBe('0.3.41')
-      expect(environment.frontend_version).toBe('1.24.0-1')
-      expect(environment.available_accelerators).toContain('Metal')
-      expect(environment.available_accelerators).toContain('CPU')
-      expect(environment.primary_accelerator).toBe('Metal')
-    })
-
-    it('should return fallback environment information when systemStatsStore fails', async () => {
-      // Mock systemStatsStore failure
-      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
-        new Error('Store failure')
-      )
-      mockSystemStatsStore.systemStats = null
-
-      const { detectSystemEnvironment } = useConflictDetection()
-      const environment = await detectSystemEnvironment()
-
-      expect(environment.comfyui_version).toBe('unknown')
-      expect(environment.frontend_version).toBe('1.24.0-1')
-      expect(environment.available_accelerators).toEqual(['CPU'])
-    })
-  })
-
-  describe('package requirements detection with Registry Store', () => {
-    it('should fetch and combine local + Registry data successfully', async () => {
-      // Mock installed packages
-      const mockInstalledPacks: InstalledPacksResponse = {
-        'ComfyUI-Manager': {
-          ver: 'cb0fa5829d5378e5dddb8e8515b30a3ff20e1471',
-          cnr_id: '',
-          aux_id: 'viva-jinyi/ComfyUI-Manager',
-          enabled: true
-        },
-        'ComfyUI-TestNode': {
-          ver: '1.0.0',
-          cnr_id: 'test-node',
-          aux_id: null,
-          enabled: false
-        }
-      }
-
-      // Mock Registry data
-      const mockRegistryPacks: components['schemas']['Node'][] = [
-        {
-          id: 'ComfyUI-Manager',
-          name: 'ComfyUI Manager',
-          supported_os: ['Windows', 'Linux', 'macOS'],
-          supported_accelerators: ['CUDA', 'Metal', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node'],
-        {
-          id: 'ComfyUI-TestNode',
-          name: 'Test Node',
-          supported_os: ['Windows', 'Linux'],
-          supported_accelerators: ['CUDA'],
-          supported_comfyui_version: '>=0.2.0',
-          status: 'NodeStatusBanned'
-        } as components['schemas']['Node']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-
-      // Mock Registry Service individual calls
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockRegistryPacks.find(
-            (p) => p.id === packageName
-          )
-          if (packageData) {
-            return Promise.resolve({
-              ...packageData,
-              supported_comfyui_version: packageData.supported_comfyui_version,
-              supported_os: packageData.supported_os,
-              supported_accelerators: packageData.supported_accelerators,
-              status: packageData.status
-            })
-          }
-          return Promise.resolve(null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBeGreaterThanOrEqual(1)
-      expect(result.results.length).toBeGreaterThanOrEqual(1)
-
-      // Verify individual calls were made
-      expect(mockRegistryService.getPackByVersion).toHaveBeenCalledWith(
-        'ComfyUI-Manager',
-        'cb0fa5829d5378e5dddb8e8515b30a3ff20e1471',
-        expect.anything()
-      )
-      expect(mockRegistryService.getPackByVersion).toHaveBeenCalledWith(
-        'ComfyUI-TestNode',
-        '1.0.0',
-        expect.anything()
-      )
-
-      // Check that at least one package was processed
-      expect(result.results.length).toBeGreaterThan(0)
+  describe('system environment collection', () => {
+    it('should collect system environment correctly', async () => {
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
 
-      // If we have results, check their structure
-      if (result.results.length > 0) {
-        const firstResult = result.results[0]
-        expect(firstResult).toHaveProperty('package_id')
-        expect(firstResult).toHaveProperty('conflicts')
-        expect(firstResult).toHaveProperty('is_compatible')
-      }
-    })
-
-    it('should handle Registry Store failures gracefully', async () => {
-      // Mock installed packages
-      const mockInstalledPacks: InstalledPacksResponse = {
-        'Unknown-Package': {
-          ver: '1.0.0',
-          cnr_id: 'unknown',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-
-      // Mock Registry Service returning null (no packages found)
-      mockRegistryService.getPackByVersion.mockResolvedValue(null)
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBe(1)
-      expect(result.results).toHaveLength(1)
-
-      // Should have warning about missing Registry data
-      const unknownPackage = result.results[0]
-      expect(unknownPackage.conflicts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            type: 'pending',
-            current_value: 'no_registry_data',
-            required_value: 'registry_data_available'
-          })
-        ])
-      )
+      expect(environment).toEqual({
+        comfyui_version: '0.3.41',
+        frontend_version: '1.24.0',
+        os: 'darwin',
+        accelerator: 'mps'
+      })
     })
 
-    it('should return empty array when local package information cannot be retrieved', async () => {
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(null)
+    it('should handle missing system stats gracefully', async () => {
+      mockSystemStatsStore.systemStats = null as never
 
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
 
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBe(0)
-      expect(result.results).toHaveLength(0)
+      // When systemStats is null, empty strings are used as fallback
+      expect(environment).toEqual({
+        comfyui_version: '',
+        frontend_version: '1.24.0',
+        os: '',
+        accelerator: ''
+      })
     })
   })
 
-  describe('conflict detection logic with Registry Store', () => {
-    it('should detect no conflicts for fully compatible packages', async () => {
-      // Mock compatible package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        CompatibleNode: {
-          ver: '1.0.0',
-          cnr_id: 'compatible-node',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockCompatibleRegistryPacks: components['schemas']['Node'][] = [
+  describe('conflict detection', () => {
+    it('should detect version conflicts', async () => {
+      // Setup installed packages
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacks.installedPacks.value = [
         {
-          id: 'CompatibleNode',
-          name: 'Compatible Node',
-          supported_os: ['Windows', 'Linux', 'macOS'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
+          id: 'test-pack',
+          name: 'Test Pack',
+          latest_version: { version: '1.0.0' }
         } as components['schemas']['Node']
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      // Mock Registry Service for compatible package
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockCompatibleRegistryPacks.find(
-            (p) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.conflicted_packages).toBe(0)
-      expect(result.summary.compatible_packages).toBe(1)
-      expect(result.results[0].conflicts).toHaveLength(0)
-    })
-
-    it('should detect OS incompatibility conflicts', async () => {
-      // Mock OS-incompatible package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        WindowsOnlyNode: {
-          ver: '1.0.0',
-          cnr_id: 'windows-only',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockWindowsOnlyRegistryPacks: components['schemas']['Node'][] = [
+      mockInstalledPacksWithVersions.value = [
         {
-          id: 'WindowsOnlyNode',
-          name: 'Windows Only Node',
-          supported_os: ['Windows'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockWindowsOnlyRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
+          id: 'test-pack',
+          version: '1.0.0'
         }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.conflicted_packages).toBe(1)
-
-      const windowsNode = result.results[0]
-      expect(windowsNode.conflicts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            type: 'os',
-            current_value: 'macOS',
-            required_value: expect.stringContaining('Windows')
-          })
-        ])
-      )
-    })
-
-    it('should detect accelerator incompatibility conflicts', async () => {
-      // Mock CUDA-only package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        CudaOnlyNode: {
-          ver: '1.0.0',
-          cnr_id: 'cuda-only',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockCudaOnlyRegistryPacks: components['schemas']['Node'][] = [
-        {
-          id: 'CudaOnlyNode',
-          name: 'CUDA Only Node',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['CUDA'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockCudaOnlyRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.conflicted_packages).toBe(1)
-
-      const cudaNode = result.results[0]
-      expect(cudaNode.conflicts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            type: 'accelerator',
-            current_value: expect.any(String),
-            required_value: expect.stringContaining('CUDA')
-          })
-        ])
-      )
-    })
-
-    it('should treat Registry-banned packages as conflicts', async () => {
-      // Mock Registry-banned package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        BannedNode: {
-          ver: '1.0.0',
-          cnr_id: 'banned-node',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockBannedRegistryPacks: components['schemas']['NodeVersion'][] = [
-        {
-          id: 'BannedNode',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeVersionStatusBanned'
-        } as components['schemas']['NodeVersion']
-      ]
+      // Mock registry response with version requirements
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: [
+          {
+            status: 'success' as const,
+            identifier: { node_id: 'test-pack', version: '1.0.0' },
+            node_version: {
+              supported_comfyui_version: '>=0.4.0',
+              supported_comfyui_frontend_version: '>=2.0.0',
+              supported_os: ['Windows', 'Linux', 'macOS'],
+              supported_accelerators: ['CUDA', 'Metal', 'CPU'],
+              status: 'NodeVersionStatusActive' as const,
+              version: '1.0.0',
+              publisher_id: 'test-publisher',
+              node_id: 'test-pack',
+              created_at: '2024-01-01T00:00:00Z'
+            } as components['schemas']['NodeVersion']
+          }
+        ]
+      })
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockBannedRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
+      // Mock version checks to return conflicts
+      vi.mocked(checkVersionCompatibility).mockImplementation(
+        (type, current, required) => {
+          if (type === 'comfyui_version' && required === '>=0.4.0') {
+            return {
+              type: 'comfyui_version',
+              current_value: current || '0.3.41',
+              required_value: '>=0.4.0'
+            }
+          }
+          return null
         }
       )
 
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
 
       expect(result.success).toBe(true)
-      expect(result.summary.banned_packages).toBe(1)
-
-      const bannedNode = result.results[0]
-      expect(bannedNode.conflicts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            type: 'banned',
-            current_value: 'installed',
-            required_value: 'not_banned'
-          })
-        ])
-      )
-      // Banned nodes should have 'banned' conflict type
-      expect(bannedNode.conflicts.some((c) => c.type === 'banned')).toBe(true)
+      expect(result.results).toHaveLength(1)
+      expect(result.results[0].has_conflict).toBe(true)
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'comfyui_version',
+        current_value: '0.3.41',
+        required_value: '>=0.4.0'
+      })
     })
 
-    it('should treat locally disabled packages as banned', async () => {
-      // Mock locally disabled package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        DisabledNode: {
-          ver: '1.0.0',
-          cnr_id: 'disabled-node',
-          aux_id: null,
-          enabled: false
-        }
-      }
-
-      const mockActiveRegistryPacks: components['schemas']['Node'][] = [
+    it('should detect banned packages', async () => {
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacks.installedPacks.value = [
         {
-          id: 'DisabledNode',
-          name: 'Disabled Node',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
+          id: 'banned-pack',
+          name: 'Banned Pack'
         } as components['schemas']['Node']
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockActiveRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.banned_packages).toBe(1)
-
-      const disabledNode = result.results[0]
-      expect(disabledNode.conflicts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            type: 'banned',
-            current_value: 'installed',
-            required_value: 'not_banned'
-          })
-        ])
-      )
-      // Disabled nodes should have 'banned' conflict type
-      expect(disabledNode.conflicts.some((c) => c.type === 'banned')).toBe(true)
-    })
-  })
-
-  describe('computed properties with Registry Store', () => {
-    it('should return true for hasConflicts when Registry conflicts exist', async () => {
-      // Mock package with OS incompatibility
-      const mockInstalledPacks: InstalledPacksResponse = {
-        ConflictedNode: {
-          ver: '1.0.0',
-          cnr_id: 'conflicted-node',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockConflictedRegistryPacks: components['schemas']['Node'][] = [
+      mockInstalledPacksWithVersions.value = [
         {
-          id: 'ConflictedNode',
-          name: 'Conflicted Node',
-          supported_os: ['Windows'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockConflictedRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { hasConflicts, performConflictDetection } = useConflictDetection()
-
-      // Initial value should be false
-      expect(hasConflicts.value).toBe(false)
-
-      // Execute conflict detection
-      await performConflictDetection()
-      await nextTick()
-
-      // Should be true when conflicts are detected
-      expect(hasConflicts.value).toBe(true)
-    })
-
-    it('should return packages with conflicts', async () => {
-      // Mock package with conflicts
-      const mockInstalledPacks: InstalledPacksResponse = {
-        ErrorNode: {
-          ver: '1.0.0',
-          cnr_id: 'error-node',
-          aux_id: null,
-          enabled: true
+          id: 'banned-pack',
+          version: '1.0.0'
         }
-      }
-
-      const mockErrorRegistryPacks: components['schemas']['Node'][] = [
-        {
-          id: 'ErrorNode',
-          name: 'Error Node',
-          supported_os: ['Windows'],
-          supported_accelerators: ['CUDA'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockErrorRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { conflictedPackages, performConflictDetection } =
-        useConflictDetection()
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: [
+          {
+            status: 'success' as const,
+            identifier: { node_id: 'banned-pack', version: '1.0.0' },
+            node_version: {
+              status: 'NodeVersionStatusBanned' as const,
+              version: '1.0.0',
+              publisher_id: 'test-publisher',
+              node_id: 'banned-pack',
+              created_at: '2024-01-01T00:00:00Z',
+              supported_comfyui_version: undefined,
+              supported_comfyui_frontend_version: undefined,
+              supported_os: undefined,
+              supported_accelerators: undefined
+            } as components['schemas']['NodeVersion']
+          }
+        ]
+      })
 
-      await performConflictDetection()
-      await nextTick()
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
 
-      expect(conflictedPackages.value.length).toBeGreaterThan(0)
-      expect(
-        conflictedPackages.value.every((result) => result.has_conflict === true)
-      ).toBe(true)
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'banned',
+        current_value: 'installed',
+        required_value: 'not_banned'
+      })
     })
 
-    it('should return only banned packages for bannedPackages', async () => {
-      // Mock one banned and one normal package
-      const mockInstalledPacks: InstalledPacksResponse = {
-        BannedNode: {
-          ver: '1.0.0',
-          cnr_id: 'banned-node',
-          aux_id: null,
-          enabled: false
-        },
-        NormalNode: {
-          ver: '1.0.0',
-          cnr_id: 'normal-node',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockRegistryPacks: components['schemas']['Node'][] = [
-        {
-          id: 'BannedNode',
-          name: 'Banned Node',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node'],
+    it('should detect import failures', async () => {
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacksWithVersions.value = [
         {
-          id: 'NormalNode',
-          name: 'Normal Node',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { bannedPackages, performConflictDetection } =
-        useConflictDetection()
-
-      await performConflictDetection()
-      await nextTick()
-
-      expect(bannedPackages.value).toHaveLength(1)
-      expect(bannedPackages.value[0].package_id).toBe('BannedNode')
-    })
-  })
-
-  describe('error resilience with Registry Store', () => {
-    it('should continue execution even when system environment detection fails', async () => {
-      // Mock system stats store failure
-      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
-        new Error('Store error')
-      )
-      mockSystemStatsStore.systemStats = null
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue({})
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = [].find((p: any) => p.id === packageName)
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.detected_system_environment?.comfyui_version).toBe(
-        'unknown'
-      )
-    })
-
-    it('should continue system operation even when local package information fails', async () => {
-      // Mock local package service failure
-      mockComfyManagerService.listInstalledPacks.mockRejectedValue(
-        new Error('Service error')
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBe(0)
-    })
-
-    it('should handle Registry Store partial data gracefully', async () => {
-      // Mock successful local data but partial Registry data
-      const mockInstalledPacks: InstalledPacksResponse = {
-        'Package-A': {
-          ver: '1.0.0',
-          cnr_id: 'a',
-          aux_id: null,
-          enabled: true
-        },
-        'Package-B': {
-          ver: '2.0.0',
-          cnr_id: 'b',
-          aux_id: null,
-          enabled: true
+          id: 'fail-pack',
+          version: '1.0.0'
         }
-      }
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-
-      // Only first package found in Registry / Registry에서 첫 번째 패키지만 찾음
-      const mockPartialRegistryPacks: components['schemas']['Node'][] = [
-        {
-          id: 'Package-A',
-          name: 'Package A',
-          supported_os: ['windows', 'linux', 'macos'],
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
-        // Package-B is missing from Registry results
       ]
 
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockPartialRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBeGreaterThanOrEqual(1)
-
-      // Check that packages were processed
-      expect(result.results.length).toBeGreaterThan(0)
-
-      // If packages exist, verify they have proper structure
-      if (result.results.length > 0) {
-        for (const pkg of result.results) {
-          expect(pkg).toHaveProperty('package_id')
-          expect(pkg).toHaveProperty('conflicts')
-          expect(Array.isArray(pkg.conflicts)).toBe(true)
-        }
-      }
-    })
-
-    it('should handle complete system failure gracefully', async () => {
-      // Mock all stores/services failing
-      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
-        new Error('Critical error')
-      )
-      mockSystemStatsStore.systemStats = null
-      mockComfyManagerService.listInstalledPacks.mockRejectedValue(
-        new Error('Critical error')
-      )
-      mockRegistryService.getPackByVersion.mockRejectedValue(
-        new Error('Critical error')
-      )
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true) // Error resilience maintains success
-      expect(result.summary.total_packages).toBe(0)
-    })
-  })
-
-  describe('acknowledgment integration', () => {
-    it('should check ComfyUI version change during conflict detection', async () => {
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue({
-        TestNode: {
-          ver: '1.0.0',
-          cnr_id: 'test-node',
-          aux_id: null,
-          enabled: true
-        }
+      vi.mocked(
+        mockComfyManagerService.getImportFailInfoBulk
+      ).mockResolvedValue({
+        'fail-pack': {
+          msg: 'Import error',
+          name: 'fail-pack',
+          path: '/path/to/pack'
+        } as any // The actual API returns different structure than types
       })
 
-      mockRegistryService.getPackByVersion.mockResolvedValue({
-        id: 'TestNode',
-        supported_os: ['Windows'],
-        supported_accelerators: ['CUDA'],
-        supported_comfyui_version: '>=0.3.0',
-        status: 'NodeVersionStatusActive'
+      // Mock registry response for the package
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: []
       })
 
-      const { performConflictDetection } = useConflictDetection()
-      await performConflictDetection()
-
-      expect(mockAcknowledgment.checkComfyUIVersionChange).toHaveBeenCalledWith(
-        '0.3.41'
-      )
-    })
-
-    it('should expose conflict modal display method', () => {
-      const { shouldShowConflictModalAfterUpdate } = useConflictDetection()
-
-      expect(shouldShowConflictModalAfterUpdate).toBeDefined()
-    })
-
-    it('should determine conflict modal display after update correctly', async () => {
-      const { shouldShowConflictModalAfterUpdate } = useConflictDetection()
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
 
-      // With no conflicts initially, should return false
-      const result = await shouldShowConflictModalAfterUpdate()
-      expect(result).toBe(false) // No conflicts initially
+      expect(result.results).toHaveLength(1)
+      // Import failure should match the actual implementation
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'import_failed',
+        current_value: 'installed',
+        required_value: 'Import error'
+      })
     })
+  })
 
-    it('should show conflict modal after update when conflicts exist', async () => {
-      // Mock package with conflicts
-      const mockInstalledPacks: InstalledPacksResponse = {
-        ConflictedNode: {
-          ver: '1.0.0',
-          cnr_id: 'conflicted-node',
-          aux_id: null,
-          enabled: true
-        }
-      }
-
-      const mockConflictedRegistryPacks: components['schemas']['Node'][] = [
+  describe('computed properties', () => {
+    it('should expose conflict status from store', () => {
+      mockConflictedPackages.value = [
         {
-          id: 'ConflictedNode',
-          name: 'Conflicted Node',
-          supported_os: ['Windows'], // Will conflict with macOS
-          supported_accelerators: ['Metal', 'CUDA', 'CPU'],
-          supported_comfyui_version: '>=0.3.0',
-          status: 'NodeStatusActive'
-        } as components['schemas']['Node']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockConflictedRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
+          package_id: 'test',
+          package_name: 'Test',
+          has_conflict: true,
+          is_compatible: false,
+          conflicts: []
         }
-      )
-
-      const { shouldShowConflictModalAfterUpdate, performConflictDetection } =
-        useConflictDetection()
-
-      // First run conflict detection to populate conflicts
-      await performConflictDetection()
-      await nextTick()
-
-      // Now check if modal should show after update
-      const result = await shouldShowConflictModalAfterUpdate()
-      expect(result).toBe(true) // Should show modal when conflicts exist and not dismissed
-    })
-
-    it('should detect system environment correctly', async () => {
-      // Mock system environment
-      mockSystemStatsStore.systemStats = {
-        system: {
-          comfyui_version: '0.3.41',
-          os: 'Darwin'
-        },
-        devices: []
-      }
-
-      const { detectSystemEnvironment } = useConflictDetection()
+      ]
 
-      // Detect system environment
-      const environment = await detectSystemEnvironment()
+      useConflictDetection()
 
-      expect(environment.comfyui_version).toBe('0.3.41')
+      // The hasConflicts computed should be true since we have a conflict
+      expect(mockConflictedPackages.value).toHaveLength(1)
+      expect(mockConflictedPackages.value[0].has_conflict).toBe(true)
     })
   })
 
   describe('initialization', () => {
-    it('should execute initializeConflictDetection without errors', async () => {
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue({})
+    it('should initialize without errors', async () => {
+      // Mock that installed packs are ready
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacksWithVersions.value = []
 
-      const { initializeConflictDetection } = useConflictDetection()
+      // Ensure startFetchInstalled resolves
+      vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+        undefined
+      )
 
-      await expect(initializeConflictDetection()).resolves.not.toThrow()
-    })
+      const { initializeConflictDetection } = useConflictDetection()
 
-    it('should set initial state values correctly', () => {
-      const {
-        isDetecting,
-        lastDetectionTime,
-        detectionError,
-        systemEnvironment,
-        detectionResults,
-        detectionSummary
-      } = useConflictDetection()
-
-      expect(isDetecting.value).toBe(false)
-      expect(lastDetectionTime.value).toBeNull()
-      expect(detectionError.value).toBeNull()
-      expect(systemEnvironment.value).toBeNull()
-      expect(detectionResults.value).toEqual([])
-      expect(detectionSummary.value).toBeNull()
+      // Set a timeout to prevent hanging
+      await expect(
+        Promise.race([
+          initializeConflictDetection(),
+          new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('Timeout')), 1000)
+          )
+        ])
+      ).resolves.not.toThrow()
     })
   })
 })
diff --git a/tests-ui/tests/composables/useImportFailedDetection.test.ts b/tests-ui/tests/composables/useImportFailedDetection.test.ts
index d8d4ff3625..5a6614ca0e 100644
--- a/tests-ui/tests/composables/useImportFailedDetection.test.ts
+++ b/tests-ui/tests/composables/useImportFailedDetection.test.ts
@@ -2,14 +2,14 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 
-import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import * as dialogService from '@/services/dialogService'
-import * as comfyManagerStore from '@/stores/comfyManagerStore'
-import * as conflictDetectionStore from '@/stores/conflictDetectionStore'
+import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
+import * as comfyManagerStore from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import * as conflictDetectionStore from '@/workbench/extensions/manager/stores/conflictDetectionStore'
 
 // Mock the stores and services
-vi.mock('@/stores/comfyManagerStore')
-vi.mock('@/stores/conflictDetectionStore')
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore')
+vi.mock('@/workbench/extensions/manager/stores/conflictDetectionStore')
 vi.mock('@/services/dialogService')
 vi.mock('vue-i18n', async (importOriginal) => {
   const actual = await importOriginal<typeof import('vue-i18n')>()
@@ -22,22 +22,30 @@ vi.mock('vue-i18n', async (importOriginal) => {
 })
 
 describe('useImportFailedDetection', () => {
-  let mockComfyManagerStore: any
-  let mockConflictDetectionStore: any
-  let mockDialogService: any
+  let mockComfyManagerStore: ReturnType<
+    typeof comfyManagerStore.useComfyManagerStore
+  >
+  let mockConflictDetectionStore: ReturnType<
+    typeof conflictDetectionStore.useConflictDetectionStore
+  >
+  let mockDialogService: ReturnType<typeof dialogService.useDialogService>
 
   beforeEach(() => {
     setActivePinia(createPinia())
 
     mockComfyManagerStore = {
       isPackInstalled: vi.fn()
-    }
+    } as unknown as ReturnType<typeof comfyManagerStore.useComfyManagerStore>
+
     mockConflictDetectionStore = {
       getConflictsForPackageByID: vi.fn()
-    }
+    } as unknown as ReturnType<
+      typeof conflictDetectionStore.useConflictDetectionStore
+    >
+
     mockDialogService = {
       showErrorDialog: vi.fn()
-    }
+    } as unknown as ReturnType<typeof dialogService.useDialogService>
 
     vi.mocked(comfyManagerStore.useComfyManagerStore).mockReturnValue(
       mockComfyManagerStore
@@ -49,7 +57,7 @@ describe('useImportFailedDetection', () => {
   })
 
   it('should return false for importFailed when package is not installed', () => {
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(false)
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(false)
 
     const { importFailed } = useImportFailedDetection('test-package')
 
@@ -57,8 +65,10 @@ describe('useImportFailedDetection', () => {
   })
 
   it('should return false for importFailed when no conflicts exist', () => {
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue(null)
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue(undefined)
 
     const { importFailed } = useImportFailedDetection('test-package')
 
@@ -66,12 +76,25 @@ describe('useImportFailedDetection', () => {
   })
 
   it('should return false for importFailed when conflicts exist but no import_failed type', () => {
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue({
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
       package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
       conflicts: [
-        { type: 'dependency', message: 'Dependency conflict' },
-        { type: 'version', message: 'Version conflict' }
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        },
+        {
+          type: 'frontend_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
       ]
     })
 
@@ -81,16 +104,25 @@ describe('useImportFailedDetection', () => {
   })
 
   it('should return true for importFailed when import_failed conflicts exist', () => {
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue({
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
       package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
       conflicts: [
         {
           type: 'import_failed',
-          message: 'Import failed',
+          current_value: 'current',
           required_value: 'Error details'
         },
-        { type: 'dependency', message: 'Dependency conflict' }
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
       ]
     })
 
@@ -101,13 +133,18 @@ describe('useImportFailedDetection', () => {
 
   it('should work with computed ref packageId', () => {
     const packageId = ref('test-package')
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue({
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
       package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
       conflicts: [
         {
           type: 'import_failed',
-          message: 'Import failed',
+          current_value: 'current',
           required_value: 'Error details'
         }
       ]
@@ -121,7 +158,9 @@ describe('useImportFailedDetection', () => {
 
     // Change packageId
     packageId.value = 'another-package'
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue(null)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue(undefined)
 
     expect(importFailed.value).toBe(false)
   })
@@ -129,23 +168,32 @@ describe('useImportFailedDetection', () => {
   it('should return correct importFailedInfo', () => {
     const importFailedConflicts = [
       {
-        type: 'import_failed',
-        message: 'Import failed 1',
+        type: 'import_failed' as const,
+        current_value: 'current',
         required_value: 'Error 1'
       },
       {
-        type: 'import_failed',
-        message: 'Import failed 2',
+        type: 'import_failed' as const,
+        current_value: 'current',
         required_value: 'Error 2'
       }
     ]
 
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue({
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
       package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
       conflicts: [
         ...importFailedConflicts,
-        { type: 'dependency', message: 'Dependency conflict' }
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
       ]
     })
 
@@ -157,15 +205,20 @@ describe('useImportFailedDetection', () => {
   it('should show error dialog when showImportFailedDialog is called', () => {
     const importFailedConflicts = [
       {
-        type: 'import_failed',
-        message: 'Import failed',
+        type: 'import_failed' as const,
+        current_value: 'current',
         required_value: 'Error details'
       }
     ]
 
-    mockComfyManagerStore.isPackInstalled.mockReturnValue(true)
-    mockConflictDetectionStore.getConflictsForPackageByID.mockReturnValue({
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
       package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
       conflicts: importFailedConflicts
     })
 
diff --git a/tests-ui/tests/composables/useManagerQueue.test.ts b/tests-ui/tests/composables/useManagerQueue.test.ts
index 0d9313446a..502867b8bc 100644
--- a/tests-ui/tests/composables/useManagerQueue.test.ts
+++ b/tests-ui/tests/composables/useManagerQueue.test.ts
@@ -1,8 +1,8 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { useManagerQueue } from '@/composables/useManagerQueue'
-import { components } from '@/types/generatedManagerTypes'
+import { useManagerQueue } from '@/workbench/extensions/manager/composables/useManagerQueue'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 // Mock dialog service
 vi.mock('@/services/dialogService', () => ({
diff --git a/tests-ui/tests/composables/useManagerState.test.ts b/tests-ui/tests/composables/useManagerState.test.ts
index dafb48a6fa..c2f0f83c84 100644
--- a/tests-ui/tests/composables/useManagerState.test.ts
+++ b/tests-ui/tests/composables/useManagerState.test.ts
@@ -2,10 +2,13 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { ManagerUIState, useManagerState } from '@/composables/useManagerState'
 import { api } from '@/scripts/api'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import {
+  ManagerUIState,
+  useManagerState
+} from '@/workbench/extensions/manager/composables/useManagerState'
 
 // Mock dependencies
 vi.mock('@/scripts/api', () => ({
@@ -56,10 +59,10 @@ describe('useManagerState', () => {
   })
 
   describe('managerUIState property', () => {
-    it('should return DISABLED state when --disable-manager is present', () => {
+    it('should return DISABLED state when --enable-manager is NOT present', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py', '--disable-manager'] }
+          system: { argv: ['python', 'main.py'] } // No --enable-manager flag
         }),
         isInitialized: ref(true)
       } as any)
@@ -76,7 +79,14 @@ describe('useManagerState', () => {
     it('should return LEGACY_UI state when --enable-manager-legacy-ui is present', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
+          system: {
+            argv: [
+              'python',
+              'main.py',
+              '--enable-manager',
+              '--enable-manager-legacy-ui'
+            ]
+          } // Both flags needed
         }),
         isInitialized: ref(true)
       } as any)
@@ -92,7 +102,9 @@ describe('useManagerState', () => {
 
     it('should return NEW_UI state when client and server both support v4', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -114,7 +126,9 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when server supports v4 but client does not', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -136,7 +150,9 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when legacy manager extension exists', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -155,7 +171,9 @@ describe('useManagerState', () => {
 
     it('should return NEW_UI state when server feature flags are undefined', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -175,7 +193,9 @@ describe('useManagerState', () => {
 
     it('should return LEGACY_UI state when server does not support v4', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
@@ -212,14 +232,17 @@ describe('useManagerState', () => {
 
       const managerState = useManagerState()
 
-      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+      // When systemStats is null, we can't check for --enable-manager flag, so manager is disabled
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.DISABLED)
     })
   })
 
   describe('helper properties', () => {
     it('isManagerEnabled should return true when state is not DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -237,7 +260,7 @@ describe('useManagerState', () => {
     it('isManagerEnabled should return false when state is DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py', '--disable-manager'] }
+          system: { argv: ['python', 'main.py'] } // No --enable-manager flag means disabled
         }),
         isInitialized: ref(true)
       } as any)
@@ -252,7 +275,9 @@ describe('useManagerState', () => {
 
     it('isNewManagerUI should return true when state is NEW_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -270,7 +295,14 @@ describe('useManagerState', () => {
     it('isLegacyManagerUI should return true when state is LEGACY_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
         systemStats: ref({
-          system: { argv: ['python', 'main.py', '--enable-manager-legacy-ui'] }
+          system: {
+            argv: [
+              'python',
+              'main.py',
+              '--enable-manager',
+              '--enable-manager-legacy-ui'
+            ]
+          } // Both flags needed
         }),
         isInitialized: ref(true)
       } as any)
@@ -285,7 +317,9 @@ describe('useManagerState', () => {
 
     it('shouldShowInstallButton should return true only for NEW_UI', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
@@ -302,7 +336,9 @@ describe('useManagerState', () => {
 
     it('shouldShowManagerButtons should return true when not DISABLED', () => {
       vi.mocked(useSystemStatsStore).mockReturnValue({
-        systemStats: ref({ system: { argv: ['python', 'main.py'] } }),
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
         isInitialized: ref(true)
       } as any)
       vi.mocked(api.getClientFeatureFlags).mockReturnValue({
diff --git a/tests-ui/tests/composables/useMissingNodes.test.ts b/tests-ui/tests/composables/useMissingNodes.test.ts
index e83bc7ff07..a04bb60414 100644
--- a/tests-ui/tests/composables/useMissingNodes.test.ts
+++ b/tests-ui/tests/composables/useMissingNodes.test.ts
@@ -1,13 +1,13 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 // Mock Vue's onMounted to execute immediately for testing
 vi.mock('vue', async () => {
@@ -19,11 +19,14 @@ vi.mock('vue', async () => {
 })
 
 // Mock the dependencies
-vi.mock('@/composables/nodePack/useWorkflowPacks', () => ({
-  useWorkflowPacks: vi.fn()
-}))
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks',
+  () => ({
+    useWorkflowPacks: vi.fn()
+  })
+)
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn()
 }))
 
diff --git a/tests-ui/tests/composables/useNodeChatHistory.test.ts b/tests-ui/tests/composables/useNodeChatHistory.test.ts
index 0b47fabb6a..4389b8c800 100644
--- a/tests-ui/tests/composables/useNodeChatHistory.test.ts
+++ b/tests-ui/tests/composables/useNodeChatHistory.test.ts
@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 vi.mock(
   '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
diff --git a/tests-ui/tests/composables/useServerLogs.test.ts b/tests-ui/tests/composables/useServerLogs.test.ts
index 3af4f0faac..c056b6f3a0 100644
--- a/tests-ui/tests/composables/useServerLogs.test.ts
+++ b/tests-ui/tests/composables/useServerLogs.test.ts
@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useServerLogs } from '@/composables/useServerLogs'
-import { LogsWsMessage } from '@/schemas/apiSchema'
+import type { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 vi.mock('@/scripts/api', () => ({
diff --git a/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts b/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
index 3e88963d68..c15b96ef6f 100644
--- a/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
+++ b/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
@@ -1,11 +1,11 @@
+import { compare, valid } from 'semver'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
-import { useUpdateAvailableNodes } from '@/composables/nodePack/useUpdateAvailableNodes'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-// Import mocked utils
-import { compareVersions, isSemVer } from '@/utils/formatUtil'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useUpdateAvailableNodes } from '@/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 // Mock Vue's onMounted to execute immediately for testing
 vi.mock('vue', async () => {
@@ -17,24 +17,27 @@ vi.mock('vue', async () => {
 })
 
 // Mock the dependencies
-vi.mock('@/composables/nodePack/useInstalledPacks', () => ({
-  useInstalledPacks: vi.fn()
-}))
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks',
+  () => ({
+    useInstalledPacks: vi.fn()
+  })
+)
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn()
 }))
 
-vi.mock('@/utils/formatUtil', () => ({
-  compareVersions: vi.fn(),
-  isSemVer: vi.fn()
+vi.mock('semver', () => ({
+  compare: vi.fn(),
+  valid: vi.fn()
 }))
 
 const mockUseInstalledPacks = vi.mocked(useInstalledPacks)
 const mockUseComfyManagerStore = vi.mocked(useComfyManagerStore)
 
-const mockCompareVersions = vi.mocked(compareVersions)
-const mockIsSemVer = vi.mocked(isSemVer)
+const mockSemverCompare = vi.mocked(compare)
+const mockSemverValid = vi.mocked(valid)
 
 describe('useUpdateAvailableNodes', () => {
   const mockInstalledPacks = [
@@ -42,22 +45,22 @@ describe('useUpdateAvailableNodes', () => {
       id: 'pack-1',
       name: 'Outdated Pack',
       latest_version: { version: '2.0.0' }
-    },
+    } as components['schemas']['Node'],
     {
       id: 'pack-2',
       name: 'Up to Date Pack',
       latest_version: { version: '1.0.0' }
-    },
+    } as components['schemas']['Node'],
     {
       id: 'pack-3',
       name: 'Nightly Pack',
       latest_version: { version: '1.5.0' }
-    },
+    } as components['schemas']['Node'],
     {
       id: 'pack-4',
       name: 'No Latest Version',
-      latest_version: null
-    }
+      latest_version: undefined
+    } as components['schemas']['Node']
   ]
 
   const mockStartFetchInstalled = vi.fn()
@@ -86,32 +89,35 @@ describe('useUpdateAvailableNodes', () => {
       }
     })
 
-    mockIsSemVer.mockImplementation(
-      (version: string): version is `${number}.${number}.${number}` => {
-        return !version.includes('nightly')
-      }
-    )
+    mockSemverValid.mockImplementation((version) => {
+      return version &&
+        typeof version === 'string' &&
+        !version.includes('nightly')
+        ? version
+        : null
+    })
 
-    mockCompareVersions.mockImplementation(
-      (latest: string | undefined, installed: string | undefined) => {
-        if (latest === '2.0.0' && installed === '1.0.0') return 1 // outdated
-        if (latest === '1.0.0' && installed === '1.0.0') return 0 // up to date
-        return 0
-      }
-    )
+    mockSemverCompare.mockImplementation((latest, installed) => {
+      if (latest === '2.0.0' && installed === '1.0.0') return 1 // outdated
+      if (latest === '1.0.0' && installed === '1.0.0') return 0 // up to date
+      return 0
+    })
 
     mockUseComfyManagerStore.mockReturnValue({
       isPackInstalled: mockIsPackInstalled,
       getInstalledPackVersion: mockGetInstalledPackVersion,
       isPackEnabled: mockIsPackEnabled
-    } as any)
+    } as unknown as ReturnType<typeof useComfyManagerStore>)
 
     mockUseInstalledPacks.mockReturnValue({
       installedPacks: ref([]),
       isLoading: ref(false),
+      isReady: ref(false),
       error: ref(null),
-      startFetchInstalled: mockStartFetchInstalled
-    } as any)
+      startFetchInstalled: mockStartFetchInstalled,
+      installedPacksWithVersions: ref([]),
+      filterInstalledPack: vi.fn()
+    } as unknown as ReturnType<typeof useInstalledPacks>)
   })
 
   describe('core filtering logic', () => {
@@ -119,9 +125,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref(mockInstalledPacks),
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -134,9 +143,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -147,9 +159,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[2]]), // pack-3: nightly
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -160,9 +175,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[3]]), // pack-4: no latest version
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -174,9 +192,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref(mockInstalledPacks),
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -196,8 +217,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasUpdateAvailable } = useUpdateAvailableNodes()
 
@@ -208,9 +232,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasUpdateAvailable } = useUpdateAvailableNodes()
 
@@ -229,9 +256,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref(mockInstalledPacks),
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       useUpdateAvailableNodes()
 
@@ -243,8 +273,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([]),
         isLoading: ref(true),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       useUpdateAvailableNodes()
 
@@ -258,8 +291,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([]),
         isLoading: ref(true),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { isLoading } = useUpdateAvailableNodes()
 
@@ -272,8 +308,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([]),
         isLoading: ref(false),
         error: ref(testError),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { error } = useUpdateAvailableNodes()
 
@@ -283,13 +322,16 @@ describe('useUpdateAvailableNodes', () => {
 
   describe('reactivity', () => {
     it('updates when installed packs change', async () => {
-      const installedPacksRef = ref([])
+      const installedPacksRef = ref<components['schemas']['Node'][]>([])
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: installedPacksRef,
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks, hasUpdateAvailable } =
         useUpdateAvailableNodes()
@@ -299,7 +341,7 @@ describe('useUpdateAvailableNodes', () => {
       expect(hasUpdateAvailable.value).toBe(false)
 
       // Update installed packs
-      installedPacksRef.value = [mockInstalledPacks[0]] as any // pack-1: outdated
+      installedPacksRef.value = [mockInstalledPacks[0]]
       await nextTick()
 
       // Should update available updates
@@ -314,40 +356,49 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
       // Access the computed to trigger the logic
       expect(updateAvailableNodePacks.value).toBeDefined()
 
-      expect(mockCompareVersions).toHaveBeenCalledWith('2.0.0', '1.0.0')
+      expect(mockSemverCompare).toHaveBeenCalledWith('2.0.0', '1.0.0')
     })
 
-    it('calls isSemVer to check nightly versions', () => {
+    it('calls semver.valid to check nightly versions', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[2]]), // pack-3: nightly
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
       // Access the computed to trigger the logic
       expect(updateAvailableNodePacks.value).toBeDefined()
 
-      expect(mockIsSemVer).toHaveBeenCalledWith('nightly-abc123')
+      expect(mockSemverValid).toHaveBeenCalledWith('nightly-abc123')
     })
 
     it('calls isPackInstalled for each pack', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref(mockInstalledPacks),
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks } = useUpdateAvailableNodes()
 
@@ -372,8 +423,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0], mockInstalledPacks[1]]),
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
         useUpdateAvailableNodes()
@@ -391,8 +445,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
         useUpdateAvailableNodes()
@@ -414,8 +471,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
 
@@ -427,8 +487,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
 
@@ -439,9 +502,12 @@ describe('useUpdateAvailableNodes', () => {
       mockUseInstalledPacks.mockReturnValue({
         installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
         isLoading: ref(false),
+        isReady: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
 
@@ -457,8 +523,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasUpdateAvailable } = useUpdateAvailableNodes()
 
@@ -475,8 +544,11 @@ describe('useUpdateAvailableNodes', () => {
         installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
         isLoading: ref(false),
         error: ref(null),
-        startFetchInstalled: mockStartFetchInstalled
-      } as any)
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
 
       const { hasUpdateAvailable } = useUpdateAvailableNodes()
 
diff --git a/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts b/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts
index f0470890eb..9570765261 100644
--- a/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts
+++ b/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts
@@ -5,7 +5,7 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { MovingOutputLink } from '@/lib/litegraph/src/litegraph'
 import { ToOutputRenderLink } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
 
 import { createTestSubgraph } from '../subgraph/fixtures/subgraphHelpers'
 
diff --git a/tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts b/tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts
index c88c6cfb2b..6599d6562a 100644
--- a/tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts
+++ b/tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 describe('LGraphNode Title Buttons', () => {
diff --git a/tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts b/tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts
index c829a8ba71..da99d9135d 100644
--- a/tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts
+++ b/tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts
@@ -1,13 +1,12 @@
 // TODO: Fix these tests after migration
 import { afterEach, describe, expect, vi } from 'vitest'
 
+import type { LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
 import {
   type CanvasPointerEvent,
-  LGraph,
   LGraphNode,
   LLink,
   LinkConnector,
-  Reroute,
   type RerouteId
 } from '@/lib/litegraph/src/litegraph'
 
diff --git a/tests-ui/tests/litegraph/core/NodeSlot.test.ts b/tests-ui/tests/litegraph/core/NodeSlot.test.ts
index e06a44bc56..15215cbf0f 100644
--- a/tests-ui/tests/litegraph/core/NodeSlot.test.ts
+++ b/tests-ui/tests/litegraph/core/NodeSlot.test.ts
@@ -1,6 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
-import { INodeInputSlot, INodeOutputSlot } from '@/lib/litegraph/src/litegraph'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/litegraph'
 import {
   inputAsSerialisable,
   outputAsSerialisable
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts
index 824c06e576..01a6ceb509 100644
--- a/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts
+++ b/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts
@@ -1,9 +1,9 @@
 // TODO: Fix these tests after migration
 import { assert, describe, expect, it } from 'vitest'
 
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import {
-  ISlotType,
-  LGraph,
+  type ISlotType,
   LGraphGroup,
   LGraphNode,
   LiteGraph
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts
index 514a52c405..9bc64802c8 100644
--- a/tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts
+++ b/tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts
@@ -2,7 +2,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 import {
   createTestSubgraph,
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts
index a82fddc0e8..0c10b782a7 100644
--- a/tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts
+++ b/tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts
@@ -5,8 +5,8 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/litegraph'
 import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, type LinkNetwork } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
-import { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
 import {
   isSubgraphInput,
   isSubgraphOutput
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts
index 75c20c0ba4..36793829d4 100644
--- a/tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts
+++ b/tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts
@@ -1,8 +1,8 @@
 // TODO: Fix these tests after migration
 import { describe, expect, it } from 'vitest'
 
-import type { ISlotType } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { ISlotType, Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { TWidgetType } from '@/lib/litegraph/src/litegraph'
 import { BaseWidget } from '@/lib/litegraph/src/litegraph'
 
diff --git a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
index b90a781e2c..02134868c2 100644
--- a/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
+++ b/tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts
@@ -5,8 +5,9 @@
  * in their test files. Each fixture provides a clean, pre-configured subgraph
  * setup for different testing scenarios.
  */
-import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 
 import { test } from '../../core/fixtures/testExtensions'
 import {
diff --git a/tests-ui/tests/minimap/MinimapDataSource.test.ts b/tests-ui/tests/minimap/MinimapDataSource.test.ts
new file mode 100644
index 0000000000..eff6ba771b
--- /dev/null
+++ b/tests-ui/tests/minimap/MinimapDataSource.test.ts
@@ -0,0 +1,174 @@
+import { describe, expect, it, vi } from 'vitest'
+import { type ComputedRef, computed } from 'vue'
+
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraph, LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { NodeLayout } from '@/renderer/core/layout/types'
+import { MinimapDataSourceFactory } from '@/renderer/extensions/minimap/data/MinimapDataSourceFactory'
+
+// Mock layoutStore
+vi.mock('@/renderer/core/layout/store/layoutStore', () => ({
+  layoutStore: {
+    getAllNodes: vi.fn()
+  }
+}))
+
+// Helper to create mock links that satisfy LGraph['links'] type
+function createMockLinks(): LGraph['links'] {
+  const map = new Map<number, LLink>()
+  return Object.assign(map, {}) as LGraph['links']
+}
+
+describe('MinimapDataSource', () => {
+  describe('MinimapDataSourceFactory', () => {
+    it('should create LayoutStoreDataSource when LayoutStore has data', () => {
+      // Arrange
+      const mockNodes = new Map<string, NodeLayout>([
+        [
+          'node1',
+          {
+            id: 'node1',
+            position: { x: 0, y: 0 },
+            size: { width: 100, height: 50 },
+            zIndex: 0,
+            visible: true,
+            bounds: { x: 0, y: 0, width: 100, height: 50 }
+          }
+        ]
+      ])
+
+      // Create a computed ref that returns the map
+      const computedNodes: ComputedRef<ReadonlyMap<string, NodeLayout>> =
+        computed(() => mockNodes)
+      vi.mocked(layoutStore.getAllNodes).mockReturnValue(computedNodes)
+
+      const mockGraph: Pick<LGraph, '_nodes' | '_groups' | 'links'> = {
+        _nodes: [],
+        _groups: [],
+        links: createMockLinks()
+      }
+
+      // Act
+      const dataSource = MinimapDataSourceFactory.create(mockGraph as LGraph)
+
+      // Assert
+      expect(dataSource).toBeDefined()
+      expect(dataSource.hasData()).toBe(true)
+      expect(dataSource.getNodeCount()).toBe(1)
+    })
+
+    it('should create LiteGraphDataSource when LayoutStore is empty', () => {
+      // Arrange
+      const emptyMap = new Map<string, NodeLayout>()
+      const computedEmpty: ComputedRef<ReadonlyMap<string, NodeLayout>> =
+        computed(() => emptyMap)
+      vi.mocked(layoutStore.getAllNodes).mockReturnValue(computedEmpty)
+
+      const mockNode: Pick<
+        LGraphNode,
+        'id' | 'pos' | 'size' | 'bgcolor' | 'mode' | 'has_errors' | 'outputs'
+      > = {
+        id: 'node1' as NodeId,
+        pos: [0, 0],
+        size: [100, 50],
+        bgcolor: '#fff',
+        mode: 0,
+        has_errors: false,
+        outputs: []
+      }
+
+      const mockGraph: Pick<LGraph, '_nodes' | '_groups' | 'links'> = {
+        _nodes: [mockNode as LGraphNode],
+        _groups: [],
+        links: createMockLinks()
+      }
+
+      // Act
+      const dataSource = MinimapDataSourceFactory.create(mockGraph as LGraph)
+
+      // Assert
+      expect(dataSource).toBeDefined()
+      expect(dataSource.hasData()).toBe(true)
+      expect(dataSource.getNodeCount()).toBe(1)
+
+      const nodes = dataSource.getNodes()
+      expect(nodes).toHaveLength(1)
+      expect(nodes[0]).toMatchObject({
+        id: 'node1',
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 50
+      })
+    })
+
+    it('should handle empty graph correctly', () => {
+      // Arrange
+      const emptyMap = new Map<string, NodeLayout>()
+      const computedEmpty: ComputedRef<ReadonlyMap<string, NodeLayout>> =
+        computed(() => emptyMap)
+      vi.mocked(layoutStore.getAllNodes).mockReturnValue(computedEmpty)
+
+      const mockGraph: Pick<LGraph, '_nodes' | '_groups' | 'links'> = {
+        _nodes: [],
+        _groups: [],
+        links: createMockLinks()
+      }
+
+      // Act
+      const dataSource = MinimapDataSourceFactory.create(mockGraph as LGraph)
+
+      // Assert
+      expect(dataSource.hasData()).toBe(false)
+      expect(dataSource.getNodeCount()).toBe(0)
+      expect(dataSource.getNodes()).toEqual([])
+      expect(dataSource.getLinks()).toEqual([])
+      expect(dataSource.getGroups()).toEqual([])
+    })
+  })
+
+  describe('Bounds calculation', () => {
+    it('should calculate correct bounds from nodes', () => {
+      // Arrange
+      const emptyMap = new Map<string, NodeLayout>()
+      const computedEmpty: ComputedRef<ReadonlyMap<string, NodeLayout>> =
+        computed(() => emptyMap)
+      vi.mocked(layoutStore.getAllNodes).mockReturnValue(computedEmpty)
+
+      const mockNode1: Pick<LGraphNode, 'id' | 'pos' | 'size' | 'outputs'> = {
+        id: 'node1' as NodeId,
+        pos: [0, 0],
+        size: [100, 50],
+        outputs: []
+      }
+
+      const mockNode2: Pick<LGraphNode, 'id' | 'pos' | 'size' | 'outputs'> = {
+        id: 'node2' as NodeId,
+        pos: [200, 100],
+        size: [150, 75],
+        outputs: []
+      }
+
+      const mockGraph: Pick<LGraph, '_nodes' | '_groups' | 'links'> = {
+        _nodes: [mockNode1 as LGraphNode, mockNode2 as LGraphNode],
+        _groups: [],
+        links: createMockLinks()
+      }
+
+      // Act
+      const dataSource = MinimapDataSourceFactory.create(mockGraph as LGraph)
+      const bounds = dataSource.getBounds()
+
+      // Assert
+      expect(bounds).toEqual({
+        minX: 0,
+        minY: 0,
+        maxX: 350,
+        maxY: 175,
+        width: 350,
+        height: 175
+      })
+    })
+  })
+})
diff --git a/tests-ui/tests/nodeSearchService.test.ts b/tests-ui/tests/nodeSearchService.test.ts
index 7f6c1f377d..75e4095010 100644
--- a/tests-ui/tests/nodeSearchService.test.ts
+++ b/tests-ui/tests/nodeSearchService.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { NodeSearchService } from '@/services/nodeSearchService'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 
diff --git a/tests-ui/tests/performance/transformPerformance.test.ts b/tests-ui/tests/performance/transformPerformance.test.ts
index e9f995e979..1f2fb83f70 100644
--- a/tests-ui/tests/performance/transformPerformance.test.ts
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -14,7 +14,7 @@ const createMockCanvasContext = () => ({
 const isCI = Boolean(process.env.CI)
 const describeIfNotCI = isCI ? describe.skip : describe
 
-describeIfNotCI('Transform Performance', () => {
+describeIfNotCI.skip('Transform Performance', () => {
   let transformState: ReturnType<typeof useTransformState>
   let mockCanvas: any
 
diff --git a/tests-ui/tests/platform/assets/utils/assetMetadataUtils.test.ts b/tests-ui/tests/platform/assets/utils/assetMetadataUtils.test.ts
new file mode 100644
index 0000000000..54551f5951
--- /dev/null
+++ b/tests-ui/tests/platform/assets/utils/assetMetadataUtils.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import {
+  getAssetBaseModel,
+  getAssetDescription
+} from '@/platform/assets/utils/assetMetadataUtils'
+
+describe('assetMetadataUtils', () => {
+  const mockAsset: AssetItem = {
+    id: 'test-id',
+    name: 'test-model',
+    asset_hash: 'hash123',
+    size: 1024,
+    mime_type: 'application/octet-stream',
+    tags: ['models', 'checkpoints'],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    last_access_time: '2024-01-01T00:00:00Z'
+  }
+
+  describe('getAssetDescription', () => {
+    it('should return string description when present', () => {
+      const asset = {
+        ...mockAsset,
+        user_metadata: { description: 'A test model' }
+      }
+      expect(getAssetDescription(asset)).toBe('A test model')
+    })
+
+    it('should return null when description is not a string', () => {
+      const asset = {
+        ...mockAsset,
+        user_metadata: { description: 123 }
+      }
+      expect(getAssetDescription(asset)).toBeNull()
+    })
+
+    it('should return null when no metadata', () => {
+      expect(getAssetDescription(mockAsset)).toBeNull()
+    })
+  })
+
+  describe('getAssetBaseModel', () => {
+    it('should return string base_model when present', () => {
+      const asset = {
+        ...mockAsset,
+        user_metadata: { base_model: 'SDXL' }
+      }
+      expect(getAssetBaseModel(asset)).toBe('SDXL')
+    })
+
+    it('should return null when base_model is not a string', () => {
+      const asset = {
+        ...mockAsset,
+        user_metadata: { base_model: 123 }
+      }
+      expect(getAssetBaseModel(asset)).toBeNull()
+    })
+
+    it('should return null when no metadata', () => {
+      expect(getAssetBaseModel(mockAsset)).toBeNull()
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts b/tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts
similarity index 98%
rename from tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
rename to tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts
index 4463819705..b1287a2e75 100644
--- a/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
+++ b/tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts
@@ -1,9 +1,9 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 
 // Mock stores
 vi.mock('@/renderer/core/canvas/canvasStore', () => {
diff --git a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapViewport.test.ts b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapViewport.test.ts
index dafc5eaaad..d4f7c420af 100644
--- a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapViewport.test.ts
+++ b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapViewport.test.ts
@@ -1,12 +1,12 @@
+import { useRafFn } from '@vueuse/core'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useMinimapViewport } from '@/renderer/extensions/minimap/composables/useMinimapViewport'
 import type { MinimapCanvas } from '@/renderer/extensions/minimap/types'
 
-vi.mock('@/composables/canvas/useCanvasTransformSync')
+vi.mock('@vueuse/core')
 vi.mock('@/renderer/core/spatial/boundsCalculator', () => ({
   calculateNodeBounds: vi.fn(),
   calculateMinimapScale: vi.fn(),
@@ -41,10 +41,10 @@ describe('useMinimapViewport', () => {
       ]
     } as any
 
-    vi.mocked(useCanvasTransformSync).mockReturnValue({
-      startSync: vi.fn(),
-      stopSync: vi.fn()
-    } as any)
+    vi.mocked(useRafFn, { partial: true }).mockReturnValue({
+      resume: vi.fn(),
+      pause: vi.fn()
+    })
   })
 
   it('should initialize with default bounds', () => {
@@ -206,10 +206,10 @@ describe('useMinimapViewport', () => {
     const startSyncMock = vi.fn()
     const stopSyncMock = vi.fn()
 
-    vi.mocked(useCanvasTransformSync).mockReturnValue({
-      startSync: startSyncMock,
-      stopSync: stopSyncMock
-    } as any)
+    vi.mocked(useRafFn, { partial: true }).mockReturnValue({
+      resume: startSyncMock,
+      pause: stopSyncMock
+    })
 
     const canvasRef = ref(mockCanvas as any)
     const graphRef = ref(mockGraph as any)
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
index 07c0a30819..4800658f88 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
@@ -1,14 +1,38 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
+import { computed, toValue } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
-import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
+
+const mockData = vi.hoisted(() => ({
+  mockNodeIds: new Set<string>(),
+  mockExecuting: false
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => {
+  const getCanvas = vi.fn()
+  const useCanvasStore = () => ({
+    getCanvas,
+    selectedNodeIds: computed(() => mockData.mockNodeIds)
+  })
+  return {
+    useCanvasStore
+  }
+})
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers',
+  () => {
+    const handleNodeSelect = vi.fn()
+    return { useNodeEventHandlers: () => ({ handleNodeSelect }) }
+  }
+)
 
 vi.mock(
   '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking',
@@ -26,28 +50,18 @@ vi.mock('@/composables/useErrorHandling', () => ({
 vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
   useNodeLayout: () => ({
     position: { x: 100, y: 50 },
+    size: { width: 200, height: 100 },
     startDrag: vi.fn(),
     handleDrag: vi.fn(),
     endDrag: vi.fn()
   })
 }))
 
-vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
-  useLOD: () => ({
-    lodLevel: { value: 0 },
-    shouldRenderWidgets: { value: true },
-    shouldRenderSlots: { value: true },
-    shouldRenderContent: { value: false },
-    lodCssClass: { value: '' }
-  }),
-  LODLevel: { MINIMAL: 0 }
-}))
-
 vi.mock(
   '@/renderer/extensions/vueNodes/execution/useNodeExecutionState',
   () => ({
     useNodeExecutionState: vi.fn(() => ({
-      executing: computed(() => false),
+      executing: computed(() => mockData.mockExecuting),
       progress: computed(() => undefined),
       progressPercentage: computed(() => undefined),
       progressState: computed(() => undefined as any),
@@ -72,61 +86,56 @@ const i18n = createI18n({
     }
   }
 })
-
-describe('LGraphNode', () => {
-  const mockNodeData: VueNodeData = {
-    id: 'test-node-123',
-    title: 'Test Node',
-    type: 'TestNode',
-    mode: 0,
-    flags: {},
-    inputs: [],
-    outputs: [],
-    widgets: [],
-    selected: false,
-    executing: false
-  }
-
-  const mountLGraphNode = (props: any, selectedNodeIds = new Set()) => {
-    return mount(LGraphNode, {
-      props,
-      global: {
-        plugins: [
-          createTestingPinia({
-            createSpy: vi.fn
-          }),
-          i18n
-        ],
-        provide: {
-          [SelectedNodeIdsKey as symbol]: ref(selectedNodeIds)
-        },
-        stubs: {
-          NodeHeader: true,
-          NodeSlots: true,
-          NodeWidgets: true,
-          NodeContent: true,
-          SlotConnectionDot: true
-        }
+function mountLGraphNode(props: ComponentProps<typeof LGraphNode>) {
+  return mount(LGraphNode, {
+    props,
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn
+        }),
+        i18n
+      ],
+      stubs: {
+        NodeHeader: true,
+        NodeSlots: true,
+        NodeWidgets: true,
+        NodeContent: true,
+        SlotConnectionDot: true
       }
-    })
-  }
+    }
+  })
+}
+const mockNodeData: VueNodeData = {
+  id: 'test-node-123',
+  title: 'Test Node',
+  type: 'TestNode',
+  mode: 0,
+  flags: {},
+  inputs: [],
+  outputs: [],
+  widgets: [],
+  selected: false,
+  executing: false
+}
 
+describe('LGraphNode', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    // Reset to default mock
-    vi.mocked(useNodeExecutionState).mockReturnValue({
-      executing: computed(() => false),
-      progress: computed(() => undefined),
-      progressPercentage: computed(() => undefined),
-      progressState: computed(() => undefined as any),
-      executionState: computed(() => 'idle' as const)
-    })
+    vi.resetAllMocks()
+    mockData.mockNodeIds = new Set()
+    mockData.mockExecuting = false
   })
 
   it('should call resize tracking composable with node ID', () => {
     mountLGraphNode({ nodeData: mockNodeData })
 
-    expect(useVueElementTracking).toHaveBeenCalledWith('test-node-123', 'node')
+    expect(useVueElementTracking).toHaveBeenCalledWith(
+      expect.any(Function),
+      'node'
+    )
+    const idArg = vi.mocked(useVueElementTracking).mock.calls[0]?.[0]
+    const id = toValue(idArg)
+    expect(id).toEqual('test-node-123')
   })
 
   it('should render with data-node-id attribute', () => {
@@ -146,9 +155,6 @@ describe('LGraphNode', () => {
           }),
           i18n
         ],
-        provide: {
-          [SelectedNodeIdsKey as symbol]: ref(new Set())
-        },
         stubs: {
           NodeSlots: true,
           NodeWidgets: true,
@@ -162,24 +168,15 @@ describe('LGraphNode', () => {
   })
 
   it('should apply selected styling when selected prop is true', () => {
-    const wrapper = mountLGraphNode(
-      { nodeData: mockNodeData, selected: true },
-      new Set(['test-node-123'])
-    )
+    mockData.mockNodeIds = new Set(['test-node-123'])
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
     expect(wrapper.classes()).toContain('outline-2')
     expect(wrapper.classes()).toContain('outline-black')
     expect(wrapper.classes()).toContain('dark-theme:outline-white')
   })
 
   it('should apply executing animation when executing prop is true', () => {
-    // Mock the execution state to return executing: true
-    vi.mocked(useNodeExecutionState).mockReturnValue({
-      executing: computed(() => true),
-      progress: computed(() => undefined),
-      progressPercentage: computed(() => undefined),
-      progressState: computed(() => undefined as any),
-      executionState: computed(() => 'running' as const)
-    })
+    mockData.mockExecuting = true
 
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
@@ -187,12 +184,16 @@ describe('LGraphNode', () => {
   })
 
   it('should emit node-click event on pointer up', async () => {
+    const { handleNodeSelect } = useNodeEventHandlers()
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
     await wrapper.trigger('pointerup')
 
-    expect(wrapper.emitted('node-click')).toHaveLength(1)
-    expect(wrapper.emitted('node-click')?.[0]).toHaveLength(3)
-    expect(wrapper.emitted('node-click')?.[0][1]).toEqual(mockNodeData)
+    expect(handleNodeSelect).toHaveBeenCalledOnce()
+    expect(handleNodeSelect).toHaveBeenCalledWith(
+      expect.any(PointerEvent),
+      mockNodeData,
+      expect.any(Boolean)
+    )
   })
 })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts
new file mode 100644
index 0000000000..cca01bce8d
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts
@@ -0,0 +1,223 @@
+/**
+ * Tests for NodeHeader subgraph functionality
+ */
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
+import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
+
+// Mock dependencies
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: null as any
+  }
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getNodeByLocatorId: vi.fn(),
+  getLocatorIdFromNodeData: vi.fn((nodeData) =>
+    nodeData.subgraphId
+      ? `${nodeData.subgraphId}:${String(nodeData.id)}`
+      : String(nodeData.id)
+  )
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn((key) => key)
+  }),
+  createI18n: vi.fn(() => ({
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  st: vi.fn((key) => key),
+  t: vi.fn((key) => key),
+  i18n: {
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }
+}))
+
+describe('NodeHeader - Subgraph Functionality', () => {
+  // Helper to setup common mocks
+  const setupMocks = async (isSubgraph = true, hasGraph = true) => {
+    const { app } = await import('@/scripts/app')
+
+    if (hasGraph) {
+      ;(app as any).graph = { rootGraph: {} }
+    } else {
+      ;(app as any).graph = null
+    }
+
+    vi.mocked(getNodeByLocatorId).mockReturnValue({
+      isSubgraphNode: () => isSubgraph
+    } as any)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const createMockNodeData = (
+    id: string,
+    subgraphId?: string
+  ): VueNodeData => ({
+    id,
+    title: 'Test Node',
+    type: 'TestNode',
+    mode: 0,
+    selected: false,
+    executing: false,
+    subgraphId,
+    widgets: [],
+    inputs: [],
+    outputs: [],
+    hasErrors: false,
+    flags: {}
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(NodeHeader, {
+      props,
+      global: {
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        mocks: {
+          $t: vi.fn((key: string) => key),
+          $primevue: { config: {} }
+        }
+      }
+    })
+  }
+
+  it('should show subgraph button for subgraph nodes', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(true)
+  })
+
+  it('should not show subgraph button for regular nodes', async () => {
+    await setupMocks(false) // isSubgraph = false
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should not show subgraph button in readonly mode', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: true
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should emit enter-subgraph event when button is clicked', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    await subgraphButton.trigger('click')
+
+    expect(wrapper.emitted('enter-subgraph')).toBeTruthy()
+    expect(wrapper.emitted('enter-subgraph')).toHaveLength(1)
+  })
+
+  it('should handle subgraph context correctly', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1', 'subgraph-id'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    // Should call getNodeByLocatorId with correct locator ID
+    expect(vi.mocked(getNodeByLocatorId)).toHaveBeenCalledWith(
+      expect.anything(),
+      'subgraph-id:test-node-1'
+    )
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(true)
+  })
+
+  it('should handle missing graph gracefully', async () => {
+    await setupMocks(true, false) // isSubgraph = true, hasGraph = false
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should prevent event propagation on double click', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+
+    // Mock event object
+    const mockEvent = {
+      stopPropagation: vi.fn()
+    }
+
+    // Trigger dblclick event
+    await subgraphButton.trigger('dblclick', mockEvent)
+
+    // Should prevent propagation (handled by @dblclick.stop directive)
+    // This is tested by ensuring the component doesn't error and renders correctly
+    expect(subgraphButton.exists()).toBe(true)
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts
index 57da3b0804..dd08457eb7 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts
@@ -1,79 +1,82 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
-
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
-import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { computed, shallowRef } from 'vue'
+
+import {
+  type GraphNodeManager,
+  type VueNodeData,
+  useGraphNodeManager
+} from '@/composables/graph/useGraphNodeManager'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import type {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn()
-}))
-
-vi.mock('@/renderer/core/layout/operations/layoutMutations', () => ({
-  useLayoutMutations: vi.fn()
-}))
-
-function createMockCanvas(): Pick<
-  LGraphCanvas,
-  'select' | 'deselect' | 'deselectAll'
-> {
-  return {
+vi.mock('@/renderer/core/canvas/canvasStore', () => {
+  const canvas: Partial<LGraphCanvas> = {
     select: vi.fn(),
     deselect: vi.fn(),
     deselectAll: vi.fn()
   }
-}
+  const updateSelectedItems = vi.fn()
+  return {
+    useCanvasStore: vi.fn(() => ({
+      canvas: canvas as LGraphCanvas,
+      updateSelectedItems,
+      selectedItems: []
+    }))
+  }
+})
 
-function createMockNode(): Pick<LGraphNode, 'id' | 'selected' | 'flags'> {
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
+  useCanvasInteractions: vi.fn(() => ({
+    shouldHandleNodePointerEvents: computed(() => true) // Default to allowing pointer events
+  }))
+}))
+
+vi.mock('@/renderer/core/layout/operations/layoutMutations', () => {
+  const setSource = vi.fn()
+  const bringNodeToFront = vi.fn()
   return {
+    useLayoutMutations: vi.fn(() => ({
+      setSource,
+      bringNodeToFront
+    }))
+  }
+})
+
+vi.mock('@/composables/graph/useGraphNodeManager', () => {
+  const mockNode = {
     id: 'node-1',
     selected: false,
     flags: { pinned: false }
   }
-}
-
-function createMockNodeManager(
-  node: Pick<LGraphNode, 'id' | 'selected' | 'flags'>
-) {
+  const nodeManager = shallowRef({
+    getNode: vi.fn(() => mockNode as Partial<LGraphNode> as LGraphNode)
+  } as Partial<GraphNodeManager> as GraphNodeManager)
   return {
-    getNode: vi.fn().mockReturnValue(node) as ReturnType<
-      typeof useGraphNodeManager
-    >['getNode']
+    useGraphNodeManager: vi.fn(() => nodeManager)
   }
-}
-
-function createMockCanvasStore(
-  canvas: Pick<LGraphCanvas, 'select' | 'deselect' | 'deselectAll'>
-): Pick<
-  ReturnType<typeof useCanvasStore>,
-  'canvas' | 'selectedItems' | 'updateSelectedItems'
-> {
-  return {
-    canvas: canvas as LGraphCanvas,
-    selectedItems: [],
-    updateSelectedItems: vi.fn()
-  }
-}
+})
 
-function createMockLayoutMutations(): Pick<
-  ReturnType<typeof useLayoutMutations>,
-  'setSource' | 'bringNodeToFront'
-> {
+vi.mock('@/composables/graph/useVueNodeLifecycle', () => {
+  const nodeManager = useGraphNodeManager(undefined as unknown as LGraph)
   return {
-    setSource: vi.fn(),
-    bringNodeToFront: vi.fn()
+    useVueNodeLifecycle: vi.fn(() => ({
+      nodeManager
+    }))
   }
-}
+})
 
 describe('useNodeEventHandlers', () => {
-  let mockCanvas: ReturnType<typeof createMockCanvas>
-  let mockNode: ReturnType<typeof createMockNode>
-  let mockNodeManager: ReturnType<typeof createMockNodeManager>
-  let mockCanvasStore: ReturnType<typeof createMockCanvasStore>
-  let mockLayoutMutations: ReturnType<typeof createMockLayoutMutations>
+  const { nodeManager: mockNodeManager } = useVueNodeLifecycle()
+
+  const mockNode = mockNodeManager.value!.getNode('fake_id')
+  const mockLayoutMutations = useLayoutMutations()
 
   const testNodeData: VueNodeData = {
     id: 'node-1',
@@ -85,24 +88,13 @@ describe('useNodeEventHandlers', () => {
   }
 
   beforeEach(async () => {
-    mockNode = createMockNode()
-    mockCanvas = createMockCanvas()
-    mockNodeManager = createMockNodeManager(mockNode)
-    mockCanvasStore = createMockCanvasStore(mockCanvas)
-    mockLayoutMutations = createMockLayoutMutations()
-
-    vi.mocked(useCanvasStore).mockReturnValue(
-      mockCanvasStore as ReturnType<typeof useCanvasStore>
-    )
-    vi.mocked(useLayoutMutations).mockReturnValue(
-      mockLayoutMutations as ReturnType<typeof useLayoutMutations>
-    )
+    vi.restoreAllMocks()
   })
 
   describe('handleNodeSelect', () => {
     it('should select single node on regular click', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas, updateSelectedItems } = useCanvasStore()
 
       const event = new PointerEvent('pointerdown', {
         bubbles: true,
@@ -112,17 +104,17 @@ describe('useNodeEventHandlers', () => {
 
       handleNodeSelect(event, testNodeData, false)
 
-      expect(mockCanvas.deselectAll).toHaveBeenCalledOnce()
-      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
-      expect(mockCanvasStore.updateSelectedItems).toHaveBeenCalledOnce()
+      expect(canvas?.deselectAll).toHaveBeenCalledOnce()
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
+      expect(updateSelectedItems).toHaveBeenCalledOnce()
     })
 
     it('should toggle selection on ctrl+click', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
 
       // Test selecting unselected node with ctrl
-      mockNode.selected = false
+      mockNode!.selected = false
 
       const ctrlClickEvent = new PointerEvent('pointerdown', {
         bubbles: true,
@@ -132,16 +124,16 @@ describe('useNodeEventHandlers', () => {
 
       handleNodeSelect(ctrlClickEvent, testNodeData, false)
 
-      expect(mockCanvas.deselectAll).not.toHaveBeenCalled()
-      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
+      expect(canvas?.deselectAll).not.toHaveBeenCalled()
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
     })
 
     it('should deselect on ctrl+click of selected node', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
 
       // Test deselecting selected node with ctrl
-      mockNode.selected = true
+      mockNode!.selected = true
 
       const ctrlClickEvent = new PointerEvent('pointerdown', {
         bubbles: true,
@@ -151,15 +143,15 @@ describe('useNodeEventHandlers', () => {
 
       handleNodeSelect(ctrlClickEvent, testNodeData, false)
 
-      expect(mockCanvas.deselect).toHaveBeenCalledWith(mockNode)
-      expect(mockCanvas.select).not.toHaveBeenCalled()
+      expect(canvas?.deselect).toHaveBeenCalledWith(mockNode)
+      expect(canvas?.select).not.toHaveBeenCalled()
     })
 
     it('should handle meta key (Cmd) on Mac', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
 
-      mockNode.selected = false
+      mockNode!.selected = false
 
       const metaClickEvent = new PointerEvent('pointerdown', {
         bubbles: true,
@@ -169,15 +161,14 @@ describe('useNodeEventHandlers', () => {
 
       handleNodeSelect(metaClickEvent, testNodeData, false)
 
-      expect(mockCanvas.select).toHaveBeenCalledWith(mockNode)
-      expect(mockCanvas.deselectAll).not.toHaveBeenCalled()
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
+      expect(canvas?.deselectAll).not.toHaveBeenCalled()
     })
 
     it('should bring node to front when not pinned', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
 
-      mockNode.flags.pinned = false
+      mockNode!.flags.pinned = false
 
       const event = new PointerEvent('pointerdown')
       handleNodeSelect(event, testNodeData, false)
@@ -188,49 +179,14 @@ describe('useNodeEventHandlers', () => {
     })
 
     it('should not bring pinned node to front', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
+      const { handleNodeSelect } = useNodeEventHandlers()
 
-      mockNode.flags.pinned = true
+      mockNode!.flags.pinned = true
 
       const event = new PointerEvent('pointerdown')
       handleNodeSelect(event, testNodeData, false)
 
       expect(mockLayoutMutations.bringNodeToFront).not.toHaveBeenCalled()
     })
-
-    it('should handle missing canvas gracefully', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
-
-      mockCanvasStore.canvas = null
-
-      const event = new PointerEvent('pointerdown')
-      expect(() => {
-        handleNodeSelect(event, testNodeData, false)
-      }).not.toThrow()
-
-      expect(mockCanvas.select).not.toHaveBeenCalled()
-    })
-
-    it('should handle missing node gracefully', () => {
-      const nodeManager = ref(mockNodeManager)
-      const { handleNodeSelect } = useNodeEventHandlers(nodeManager)
-
-      vi.mocked(mockNodeManager.getNode).mockReturnValue(undefined)
-
-      const event = new PointerEvent('pointerdown')
-      const nodeData = {
-        id: 'missing-node',
-        title: 'Missing Node',
-        type: 'test'
-      } as any
-
-      expect(() => {
-        handleNodeSelect(event, nodeData, false)
-      }).not.toThrow()
-
-      expect(mockCanvas.select).not.toHaveBeenCalled()
-    })
   })
 })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
index 68850c18aa..77d035a676 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts
@@ -1,270 +1,69 @@
-import { describe, expect, it } from 'vitest'
-import { ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive } from 'vue'
 
-import {
-  LODLevel,
-  LOD_THRESHOLDS,
-  supportsFeatureAtZoom,
-  useLOD
-} from '@/renderer/extensions/vueNodes/lod/useLOD'
+import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 
-describe('useLOD', () => {
-  describe('LOD level detection', () => {
-    it('should return MINIMAL for zoom <= 0.4', () => {
-      const zoomRef = ref(0.4)
-      const { lodLevel } = useLOD(zoomRef)
-      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
-
-      zoomRef.value = 0.2
-      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
-
-      zoomRef.value = 0.1
-      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
-    })
-
-    it('should return REDUCED for 0.4 < zoom <= 0.8', () => {
-      const zoomRef = ref(0.5)
-      const { lodLevel } = useLOD(zoomRef)
-      expect(lodLevel.value).toBe(LODLevel.REDUCED)
-
-      zoomRef.value = 0.6
-      expect(lodLevel.value).toBe(LODLevel.REDUCED)
-
-      zoomRef.value = 0.8
-      expect(lodLevel.value).toBe(LODLevel.REDUCED)
-    })
-
-    it('should return FULL for zoom > 0.8', () => {
-      const zoomRef = ref(0.9)
-      const { lodLevel } = useLOD(zoomRef)
-      expect(lodLevel.value).toBe(LODLevel.FULL)
-
-      zoomRef.value = 1.0
-      expect(lodLevel.value).toBe(LODLevel.FULL)
-
-      zoomRef.value = 2.5
-      expect(lodLevel.value).toBe(LODLevel.FULL)
-    })
-
-    it('should be reactive to zoom changes', () => {
-      const zoomRef = ref(0.2)
-      const { lodLevel } = useLOD(zoomRef)
-
-      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
-
-      zoomRef.value = 0.6
-      expect(lodLevel.value).toBe(LODLevel.REDUCED)
-
-      zoomRef.value = 1.0
-      expect(lodLevel.value).toBe(LODLevel.FULL)
-    })
-  })
-
-  describe('rendering decisions', () => {
-    it('should disable all rendering for MINIMAL LOD', () => {
-      const zoomRef = ref(0.2)
-      const {
-        shouldRenderWidgets,
-        shouldRenderSlots,
-        shouldRenderContent,
-        shouldRenderSlotLabels,
-        shouldRenderWidgetLabels
-      } = useLOD(zoomRef)
-
-      expect(shouldRenderWidgets.value).toBe(false)
-      expect(shouldRenderSlots.value).toBe(false)
-      expect(shouldRenderContent.value).toBe(false)
-      expect(shouldRenderSlotLabels.value).toBe(false)
-      expect(shouldRenderWidgetLabels.value).toBe(false)
-    })
-
-    it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
-      const zoomRef = ref(0.6)
-      const {
-        shouldRenderWidgets,
-        shouldRenderSlots,
-        shouldRenderContent,
-        shouldRenderSlotLabels,
-        shouldRenderWidgetLabels
-      } = useLOD(zoomRef)
-
-      expect(shouldRenderWidgets.value).toBe(true)
-      expect(shouldRenderSlots.value).toBe(true)
-      expect(shouldRenderContent.value).toBe(false)
-      expect(shouldRenderSlotLabels.value).toBe(false)
-      expect(shouldRenderWidgetLabels.value).toBe(false)
-    })
-
-    it('should enable all rendering for FULL LOD', () => {
-      const zoomRef = ref(1.0)
-      const {
-        shouldRenderWidgets,
-        shouldRenderSlots,
-        shouldRenderContent,
-        shouldRenderSlotLabels,
-        shouldRenderWidgetLabels
-      } = useLOD(zoomRef)
-
-      expect(shouldRenderWidgets.value).toBe(true)
-      expect(shouldRenderSlots.value).toBe(true)
-      expect(shouldRenderContent.value).toBe(true)
-      expect(shouldRenderSlotLabels.value).toBe(true)
-      expect(shouldRenderWidgetLabels.value).toBe(true)
-    })
-  })
-
-  describe('CSS classes', () => {
-    it('should return correct CSS class for each LOD level', () => {
-      const zoomRef = ref(0.2)
-      const { lodCssClass } = useLOD(zoomRef)
+const mockSettingStore = reactive({
+  get: vi.fn(() => 8)
+})
 
-      expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => mockSettingStore
+}))
 
-      zoomRef.value = 0.6
-      expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+describe('useLOD', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
 
-      zoomRef.value = 1.0
-      expect(lodCssClass.value).toBe('lg-node--lod-full')
-    })
+    mockSettingStore.get.mockReturnValue(8)
   })
 
-  describe('essential widgets filtering', () => {
-    it('should return all widgets for FULL LOD', () => {
-      const zoomRef = ref(1.0)
-      const { getEssentialWidgets } = useLOD(zoomRef)
-
-      const widgets = [
-        { type: 'combo' },
-        { type: 'text' },
-        { type: 'button' },
-        { type: 'slider' }
-      ]
-
-      expect(getEssentialWidgets(widgets)).toEqual(widgets)
-    })
-
-    it('should return empty array for MINIMAL LOD', () => {
-      const zoomRef = ref(0.2)
-      const { getEssentialWidgets } = useLOD(zoomRef)
-
-      const widgets = [{ type: 'combo' }, { type: 'text' }, { type: 'button' }]
-
-      expect(getEssentialWidgets(widgets)).toEqual([])
-    })
-
-    it('should filter to essential types for REDUCED LOD', () => {
-      const zoomRef = ref(0.6)
-      const { getEssentialWidgets } = useLOD(zoomRef)
-
-      const widgets = [
-        { type: 'combo' },
-        { type: 'text' },
-        { type: 'button' },
-        { type: 'slider' },
-        { type: 'toggle' },
-        { type: 'number' }
-      ]
+  it('should calculate isLOD value based on zoom threshold correctly', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
 
-      const essential = getEssentialWidgets(widgets)
-      expect(essential).toHaveLength(4)
-      expect(essential.map((w: any) => w.type)).toEqual([
-        'combo',
-        'slider',
-        'toggle',
-        'number'
-      ])
-    })
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-    it('should handle case-insensitive widget types', () => {
-      const zoomRef = ref(0.6)
-      const { getEssentialWidgets } = useLOD(zoomRef)
+    await nextTick()
+    expect(isLOD.value).toBe(false)
 
-      const widgets = [
-        { type: 'COMBO' },
-        { type: 'Select' },
-        { type: 'TOGGLE' }
-      ]
+    camera.z = 0.55
+    await nextTick()
+    expect(isLOD.value).toBe(true)
 
-      const essential = getEssentialWidgets(widgets)
-      expect(essential).toHaveLength(3)
-    })
-
-    it('should handle widgets with undefined or missing type', () => {
-      const zoomRef = ref(0.6)
-      const { getEssentialWidgets } = useLOD(zoomRef)
-
-      const widgets = [
-        { type: 'combo' },
-        { type: undefined },
-        {},
-        { type: 'slider' }
-      ]
-
-      const essential = getEssentialWidgets(widgets)
-      expect(essential).toHaveLength(2)
-      expect(essential.map((w: any) => w.type)).toEqual(['combo', 'slider'])
-    })
+    camera.z = 0.87
+    await nextTick()
+    expect(isLOD.value).toBe(false)
   })
 
-  describe('performance metrics', () => {
-    it('should provide debug metrics', () => {
-      const zoomRef = ref(0.6)
-      const { lodMetrics } = useLOD(zoomRef)
-
-      expect(lodMetrics.value).toEqual({
-        level: LODLevel.REDUCED,
-        zoom: 0.6,
-        widgetCount: 'full',
-        slotCount: 'full'
-      })
-    })
-
-    it('should update metrics when zoom changes', () => {
-      const zoomRef = ref(0.2)
-      const { lodMetrics } = useLOD(zoomRef)
+  it('should handle a different devicePixelRatio value', async () => {
+    vi.stubGlobal('devicePixelRatio', 3) //Threshold with 8px minFontsize = 0.19
 
-      expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
-      expect(lodMetrics.value.widgetCount).toBe('none')
-      expect(lodMetrics.value.slotCount).toBe('none')
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-      zoomRef.value = 1.0
-      expect(lodMetrics.value.level).toBe(LODLevel.FULL)
-      expect(lodMetrics.value.widgetCount).toBe('full')
-      expect(lodMetrics.value.slotCount).toBe('full')
-    })
-  })
-})
+    await nextTick()
+    expect(isLOD.value).toBe(false)
 
-describe('LOD_THRESHOLDS', () => {
-  it('should export correct threshold values', () => {
-    expect(LOD_THRESHOLDS.FULL_THRESHOLD).toBe(0.8)
-    expect(LOD_THRESHOLDS.REDUCED_THRESHOLD).toBe(0.4)
-    expect(LOD_THRESHOLDS.MINIMAL_THRESHOLD).toBe(0.0)
+    camera.z = 0.18
+    await nextTick()
+    expect(isLOD.value).toBe(true)
   })
-})
 
-describe('supportsFeatureAtZoom', () => {
-  it('should return correct feature support for different zoom levels', () => {
-    expect(supportsFeatureAtZoom(1.0, 'renderWidgets')).toBe(true)
-    expect(supportsFeatureAtZoom(1.0, 'renderSlots')).toBe(true)
-    expect(supportsFeatureAtZoom(1.0, 'renderContent')).toBe(true)
+  it('should respond to different minFontSize settings', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
 
-    expect(supportsFeatureAtZoom(0.6, 'renderWidgets')).toBe(true)
-    expect(supportsFeatureAtZoom(0.6, 'renderSlots')).toBe(true)
-    expect(supportsFeatureAtZoom(0.6, 'renderContent')).toBe(false)
-
-    expect(supportsFeatureAtZoom(0.2, 'renderWidgets')).toBe(false)
-    expect(supportsFeatureAtZoom(0.2, 'renderSlots')).toBe(false)
-    expect(supportsFeatureAtZoom(0.2, 'renderContent')).toBe(false)
-  })
+    mockSettingStore.get.mockReturnValue(16) //Now threshold is 1.14
 
-  it('should handle threshold boundary values correctly', () => {
-    expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
-    expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-    expect(supportsFeatureAtZoom(0.81, 'renderContent')).toBe(true)
+    await nextTick()
+    expect(isLOD.value).toBe(true)
 
-    expect(supportsFeatureAtZoom(0.4, 'renderWidgets')).toBe(false)
-    expect(supportsFeatureAtZoom(0.41, 'renderWidgets')).toBe(true)
+    camera.z = 1.15
+    await nextTick()
+    expect(isLOD.value).toBe(false)
   })
 })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index 875919ccd8..d439d98ca6 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { assetService } from '@/platform/assets/services/assetService'
 import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -29,13 +30,25 @@ vi.mock('@/platform/assets/services/assetService', () => ({
   }
 }))
 
+vi.mock('@/platform/assets/composables/useAssetBrowserDialog', () => {
+  const mockAssetBrowserDialogShow = vi.fn()
+  return {
+    useAssetBrowserDialog: vi.fn(() => ({
+      show: mockAssetBrowserDialogShow
+    }))
+  }
+})
+
 // Test factory functions
 function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
+  const mockCallback = vi.fn()
   return {
     type: 'combo',
     options: {},
     name: 'testWidget',
     value: undefined,
+    callback: mockCallback,
+    y: 0,
     ...overrides
   } as IBaseWidget
 }
@@ -45,7 +58,16 @@ function createMockNode(comfyClass = 'TestNode'): LGraphNode {
   node.comfyClass = comfyClass
 
   // Spy on the addWidget method
-  vi.spyOn(node, 'addWidget').mockReturnValue(createMockWidget())
+  vi.spyOn(node, 'addWidget').mockImplementation(
+    (type, name, value, callback) => {
+      const widget = createMockWidget({ type, name, value })
+      // Store the callback function on the widget for testing
+      if (typeof callback === 'function') {
+        widget.callback = callback
+      }
+      return widget
+    }
+  )
 
   return node
 }
@@ -61,9 +83,9 @@ function createMockInputSpec(overrides: Partial<InputSpec> = {}): InputSpec {
 describe('useComboWidget', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset to defaults
     mockSettingStoreGet.mockReturnValue(false)
     vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
+    vi.mocked(useAssetBrowserDialog).mockClear()
   })
 
   it('should handle undefined spec', () => {
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
index 9ec2cfdaf9..e5c957085c 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts
@@ -2,7 +2,7 @@ import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
-import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
 vi.mock('axios', () => {
   return {
diff --git a/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts b/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
index e2f0d465f5..338ce0fcc2 100644
--- a/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
+++ b/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
@@ -1,10 +1,8 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 vi.mock('@/renderer/core/thumbnail/graphThumbnailRenderer', () => ({
   createGraphThumbnail: vi.fn()
diff --git a/tests-ui/tests/services/algoliaSearchProvider.test.ts b/tests-ui/tests/services/algoliaSearchProvider.test.ts
index 583f30071c..7d4dbf2b30 100644
--- a/tests-ui/tests/services/algoliaSearchProvider.test.ts
+++ b/tests-ui/tests/services/algoliaSearchProvider.test.ts
@@ -2,7 +2,7 @@ import { liteClient as algoliasearch } from 'algoliasearch/dist/lite/builds/brow
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useAlgoliaSearchProvider } from '@/services/providers/algoliaSearchProvider'
-import { SortableAlgoliaField } from '@/types/comfyManagerTypes'
+import { SortableAlgoliaField } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 // Mock global Algolia constants
 
diff --git a/tests-ui/tests/services/assetService.test.ts b/tests-ui/tests/services/assetService.test.ts
index f11c9d40d3..7a719c4e49 100644
--- a/tests-ui/tests/services/assetService.test.ts
+++ b/tests-ui/tests/services/assetService.test.ts
@@ -1,8 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import { api } from '@/scripts/api'
 
+const mockGetCategoryForNodeType = vi.fn()
+
 vi.mock('@/stores/modelToNodeStore', () => ({
   useModelToNodeStore: vi.fn(() => ({
     getRegisteredNodeTypes: vi.fn(
@@ -13,30 +16,49 @@ vi.mock('@/stores/modelToNodeStore', () => ({
           'VAELoader',
           'TestNode'
         ])
-    )
+    ),
+    getCategoryForNodeType: mockGetCategoryForNodeType,
+    modelToNodeMap: {
+      checkpoints: [{ nodeDef: { name: 'CheckpointLoaderSimple' } }],
+      loras: [{ nodeDef: { name: 'LoraLoader' } }],
+      vae: [{ nodeDef: { name: 'VAELoader' } }]
+    }
   }))
 }))
 
+// Helper to create API-compliant test assets
+function createTestAsset(overrides: Partial<AssetItem> = {}) {
+  return {
+    id: 'test-uuid',
+    name: 'test-model.safetensors',
+    asset_hash: 'blake3:test123',
+    size: 123456,
+    mime_type: 'application/octet-stream',
+    tags: ['models', 'checkpoints'],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    last_access_time: '2024-01-01T00:00:00Z',
+    ...overrides
+  }
+}
+
 // Test data constants
 const MOCK_ASSETS = {
-  checkpoints: {
+  checkpoints: createTestAsset({
     id: 'uuid-1',
     name: 'model1.safetensors',
-    tags: ['models', 'checkpoints'],
-    size: 123456
-  },
-  loras: {
+    tags: ['models', 'checkpoints']
+  }),
+  loras: createTestAsset({
     id: 'uuid-2',
     name: 'model2.safetensors',
-    tags: ['models', 'loras'],
-    size: 654321
-  },
-  vae: {
+    tags: ['models', 'loras']
+  }),
+  vae: createTestAsset({
     id: 'uuid-3',
     name: 'vae1.safetensors',
-    tags: ['models', 'vae'],
-    size: 789012
-  }
+    tags: ['models', 'vae']
+  })
 } as const
 
 // Helper functions
@@ -66,24 +88,21 @@ describe('assetService', () => {
   describe('getAssetModelFolders', () => {
     it('should extract directory names from asset tags and filter blacklisted ones', async () => {
       const assets = [
-        {
+        createTestAsset({
           id: 'uuid-1',
           name: 'checkpoint1.safetensors',
-          tags: ['models', 'checkpoints'],
-          size: 123456
-        },
-        {
+          tags: ['models', 'checkpoints']
+        }),
+        createTestAsset({
           id: 'uuid-2',
           name: 'config.yaml',
-          tags: ['models', 'configs'], // Blacklisted
-          size: 654321
-        },
-        {
+          tags: ['models', 'configs'] // Blacklisted
+        }),
+        createTestAsset({
           id: 'uuid-3',
           name: 'vae1.safetensors',
-          tags: ['models', 'vae'],
-          size: 789012
-        }
+          tags: ['models', 'vae']
+        })
       ]
       mockApiResponse(assets)
 
@@ -123,12 +142,11 @@ describe('assetService', () => {
       const assets = [
         { ...MOCK_ASSETS.checkpoints, name: 'valid.safetensors' },
         { ...MOCK_ASSETS.loras, name: 'lora.safetensors' }, // Wrong tag
-        {
+        createTestAsset({
           id: 'uuid-4',
           name: 'missing-model.safetensors',
-          tags: ['models', 'checkpoints', 'missing'], // Has missing tag
-          size: 654321
-        }
+          tags: ['models', 'checkpoints', 'missing'] // Has missing tag
+        })
       ]
       mockApiResponse(assets)
 
@@ -200,4 +218,87 @@ describe('assetService', () => {
       ).toBe(false)
     })
   })
+
+  describe('getAssetsForNodeType', () => {
+    beforeEach(() => {
+      mockGetCategoryForNodeType.mockClear()
+    })
+
+    it('should return empty array for unregistered node types', async () => {
+      mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+      const result = await assetService.getAssetsForNodeType('UnknownNode')
+
+      expect(mockGetCategoryForNodeType).toHaveBeenCalledWith('UnknownNode')
+      expect(result).toEqual([])
+    })
+
+    it('should use getCategoryForNodeType for efficient category lookup', async () => {
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      const testAssets = [MOCK_ASSETS.checkpoints]
+      mockApiResponse(testAssets)
+
+      const result = await assetService.getAssetsForNodeType(
+        'CheckpointLoaderSimple'
+      )
+
+      expect(mockGetCategoryForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(result).toEqual(testAssets)
+
+      // Verify API call includes correct category
+      expect(api.fetchApi).toHaveBeenCalledWith(
+        '/assets?include_tags=models,checkpoints'
+      )
+    })
+
+    it('should return empty array when no category found', async () => {
+      mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+      const result = await assetService.getAssetsForNodeType('TestNode')
+
+      expect(result).toEqual([])
+      expect(api.fetchApi).not.toHaveBeenCalled()
+    })
+
+    it('should handle API errors gracefully', async () => {
+      mockGetCategoryForNodeType.mockReturnValue('loras')
+      mockApiError(500, 'Internal Server Error')
+
+      await expect(
+        assetService.getAssetsForNodeType('LoraLoader')
+      ).rejects.toThrow(
+        'Unable to load assets for LoraLoader: Server returned 500. Please try again.'
+      )
+    })
+
+    it('should return all assets without filtering for different categories', async () => {
+      // Test checkpoints
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      const checkpointAssets = [MOCK_ASSETS.checkpoints]
+      mockApiResponse(checkpointAssets)
+
+      let result = await assetService.getAssetsForNodeType(
+        'CheckpointLoaderSimple'
+      )
+      expect(result).toEqual(checkpointAssets)
+
+      // Test loras
+      mockGetCategoryForNodeType.mockReturnValue('loras')
+      const loraAssets = [MOCK_ASSETS.loras]
+      mockApiResponse(loraAssets)
+
+      result = await assetService.getAssetsForNodeType('LoraLoader')
+      expect(result).toEqual(loraAssets)
+
+      // Test vae
+      mockGetCategoryForNodeType.mockReturnValue('vae')
+      const vaeAssets = [MOCK_ASSETS.vae]
+      mockApiResponse(vaeAssets)
+
+      result = await assetService.getAssetsForNodeType('VAELoader')
+      expect(result).toEqual(vaeAssets)
+    })
+  })
 })
diff --git a/tests-ui/tests/store/comfyManagerStore.test.ts b/tests-ui/tests/store/comfyManagerStore.test.ts
index a1d7481113..b2db9713dd 100644
--- a/tests-ui/tests/store/comfyManagerStore.test.ts
+++ b/tests-ui/tests/store/comfyManagerStore.test.ts
@@ -2,9 +2,9 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useComfyManagerService } from '@/services/comfyManagerService'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
 
 type InstalledPacksResponse =
   ManagerComponents['schemas']['InstalledPacksResponse']
@@ -13,7 +13,7 @@ type ManagerDatabaseSource =
   ManagerComponents['schemas']['ManagerDatabaseSource']
 type ManagerPackInstalled = ManagerComponents['schemas']['ManagerPackInstalled']
 
-vi.mock('@/services/comfyManagerService', () => ({
+vi.mock('@/workbench/extensions/manager/services/comfyManagerService', () => ({
   useComfyManagerService: vi.fn()
 }))
 
@@ -23,7 +23,7 @@ vi.mock('@/services/dialogService', () => ({
   })
 }))
 
-vi.mock('@/composables/useManagerQueue', () => {
+vi.mock('@/workbench/extensions/manager/composables/useManagerQueue', () => {
   const enqueueTaskMock = vi.fn()
 
   return {
diff --git a/tests-ui/tests/store/firebaseAuthStore.test.ts b/tests-ui/tests/store/firebaseAuthStore.test.ts
index ffe7a8d995..d37c3857a9 100644
--- a/tests-ui/tests/store/firebaseAuthStore.test.ts
+++ b/tests-ui/tests/store/firebaseAuthStore.test.ts
@@ -58,9 +58,11 @@ vi.mock('firebase/auth', async (importOriginal) => {
     onAuthStateChanged: vi.fn(),
     signInWithPopup: vi.fn(),
     GoogleAuthProvider: class {
+      addScope = vi.fn()
       setCustomParameters = vi.fn()
     },
     GithubAuthProvider: class {
+      addScope = vi.fn()
       setCustomParameters = vi.fn()
     },
     setPersistence: vi.fn().mockResolvedValue(undefined)
diff --git a/tests-ui/tests/store/imagePreviewStore.test.ts b/tests-ui/tests/store/imagePreviewStore.test.ts
index d0df957dc4..d2bb8d639c 100644
--- a/tests-ui/tests/store/imagePreviewStore.test.ts
+++ b/tests-ui/tests/store/imagePreviewStore.test.ts
@@ -1,8 +1,8 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { ExecutedWsMessage } from '@/schemas/apiSchema'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import * as litegraphUtil from '@/utils/litegraphUtil'
diff --git a/tests-ui/tests/store/modelToNodeStore.test.ts b/tests-ui/tests/store/modelToNodeStore.test.ts
index 179c76b9e4..b07c34a41a 100644
--- a/tests-ui/tests/store/modelToNodeStore.test.ts
+++ b/tests-ui/tests/store/modelToNodeStore.test.ts
@@ -19,7 +19,7 @@ const EXPECTED_DEFAULT_TYPES = [
   'gligen'
 ] as const
 
-type NodeDefStoreType = typeof import('@/stores/nodeDefStore')
+type NodeDefStoreType = ReturnType<typeof useNodeDefStore>
 
 // Create minimal but valid ComfyNodeDefImpl for testing
 function createMockNodeDef(name: string): ComfyNodeDefImpl {
@@ -343,6 +343,107 @@ describe('useModelToNodeStore', () => {
     })
   })
 
+  describe('getCategoryForNodeType', () => {
+    it('should return category for known node type', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      expect(
+        modelToNodeStore.getCategoryForNodeType('CheckpointLoaderSimple')
+      ).toBe('checkpoints')
+      expect(modelToNodeStore.getCategoryForNodeType('LoraLoader')).toBe(
+        'loras'
+      )
+      expect(modelToNodeStore.getCategoryForNodeType('VAELoader')).toBe('vae')
+    })
+
+    it('should return undefined for unknown node type', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      expect(
+        modelToNodeStore.getCategoryForNodeType('NonExistentNode')
+      ).toBeUndefined()
+      expect(modelToNodeStore.getCategoryForNodeType('')).toBeUndefined()
+    })
+
+    it('should return first category when node type exists in multiple categories', () => {
+      const modelToNodeStore = useModelToNodeStore()
+
+      // Test with a node that exists in the defaults but add our own first
+      // Since defaults register 'StyleModelLoader' in 'style_models',
+      // we verify our custom registrations come after defaults in Object.entries iteration
+      const result = modelToNodeStore.getCategoryForNodeType('StyleModelLoader')
+      expect(result).toBe('style_models') // This proves the method works correctly
+
+      // Now test that custom registrations after defaults also work
+      modelToNodeStore.quickRegister(
+        'unicorn_styles',
+        'StyleModelLoader',
+        'param1'
+      )
+      const result2 =
+        modelToNodeStore.getCategoryForNodeType('StyleModelLoader')
+      // Should still be style_models since it was registered first by defaults
+      expect(result2).toBe('style_models')
+    })
+
+    it('should trigger lazy registration when called before registerDefaults', () => {
+      const modelToNodeStore = useModelToNodeStore()
+
+      const result = modelToNodeStore.getCategoryForNodeType(
+        'CheckpointLoaderSimple'
+      )
+      expect(result).toBe('checkpoints')
+    })
+
+    it('should be performant for repeated lookups', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      // Measure performance without assuming implementation
+      const start = performance.now()
+      for (let i = 0; i < 1000; i++) {
+        modelToNodeStore.getCategoryForNodeType('CheckpointLoaderSimple')
+      }
+      const end = performance.now()
+
+      // Should be fast enough for UI responsiveness
+      expect(end - start).toBeLessThan(10)
+    })
+
+    it('should handle invalid input types gracefully', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      // These should not throw but return undefined
+      expect(
+        modelToNodeStore.getCategoryForNodeType(null as any)
+      ).toBeUndefined()
+      expect(
+        modelToNodeStore.getCategoryForNodeType(undefined as any)
+      ).toBeUndefined()
+      expect(
+        modelToNodeStore.getCategoryForNodeType(123 as any)
+      ).toBeUndefined()
+    })
+
+    it('should be case-sensitive for node type matching', () => {
+      const modelToNodeStore = useModelToNodeStore()
+      modelToNodeStore.registerDefaults()
+
+      expect(
+        modelToNodeStore.getCategoryForNodeType('checkpointloadersimple')
+      ).toBeUndefined()
+      expect(
+        modelToNodeStore.getCategoryForNodeType('CHECKPOINTLOADERSIMPLE')
+      ).toBeUndefined()
+      expect(
+        modelToNodeStore.getCategoryForNodeType('CheckpointLoaderSimple')
+      ).toBe('checkpoints')
+    })
+  })
+
   describe('edge cases', () => {
     it('should handle empty string model type', () => {
       const modelToNodeStore = useModelToNodeStore()
diff --git a/tests-ui/tests/store/releaseStore.test.ts b/tests-ui/tests/store/releaseStore.test.ts
index 5cfc8a8fe2..467ea9f189 100644
--- a/tests-ui/tests/store/releaseStore.test.ts
+++ b/tests-ui/tests/store/releaseStore.test.ts
@@ -1,17 +1,19 @@
 import { createPinia, setActivePinia } from 'pinia'
+import { compare as semverCompare } from 'semver'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 
 // Mock the dependencies
-vi.mock('@/utils/formatUtil')
+vi.mock('semver')
 vi.mock('@/utils/envUtil')
 vi.mock('@/platform/updates/common/releaseService')
 vi.mock('@/platform/settings/settingStore')
 vi.mock('@/stores/systemStatsStore')
 vi.mock('@vueuse/core', () => ({
   until: vi.fn(() => Promise.resolve()),
-  useStorage: vi.fn(() => ({ value: {} }))
+  useStorage: vi.fn(() => ({ value: {} })),
+  createSharedComposable: vi.fn((fn) => fn)
 }))
 
 describe('useReleaseStore', () => {
@@ -113,17 +115,15 @@ describe('useReleaseStore', () => {
       expect(store.recentReleases).toEqual(releases.slice(0, 3))
     })
 
-    it('should show update button (shouldShowUpdateButton)', async () => {
-      const { compareVersions } = await import('@/utils/formatUtil')
-      vi.mocked(compareVersions).mockReturnValue(1) // newer version available
+    it('should show update button (shouldShowUpdateButton)', () => {
+      vi.mocked(semverCompare).mockReturnValue(1) // newer version available
 
       store.releases = [mockRelease]
       expect(store.shouldShowUpdateButton).toBe(true)
     })
 
-    it('should not show update button when no new version', async () => {
-      const { compareVersions } = await import('@/utils/formatUtil')
-      vi.mocked(compareVersions).mockReturnValue(-1) // current version is newer
+    it('should not show update button when no new version', () => {
+      vi.mocked(semverCompare).mockReturnValue(-1) // current version is newer
 
       store.releases = [mockRelease]
       expect(store.shouldShowUpdateButton).toBe(false)
@@ -131,21 +131,20 @@ describe('useReleaseStore', () => {
   })
 
   describe('showVersionUpdates setting', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       store.releases = [mockRelease]
     })
 
     describe('when notifications are enabled', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockSettingStore.get.mockImplementation((key: string) => {
           if (key === 'Comfy.Notification.ShowVersionUpdates') return true
           return null
         })
       })
 
-      it('should show toast for medium/high attention releases', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should show toast for medium/high attention releases', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         // Need multiple releases for hasMediumOrHighAttention to work
         const mediumRelease = {
@@ -158,17 +157,16 @@ describe('useReleaseStore', () => {
         expect(store.shouldShowToast).toBe(true)
       })
 
-      it('should show red dot for new versions', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should show red dot for new versions', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
 
-      it('should show popup for latest version', async () => {
+      it('should show popup for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(0)
+
+        vi.mocked(semverCompare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(true)
       })
@@ -181,37 +179,36 @@ describe('useReleaseStore', () => {
         expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
           project: 'comfyui',
           current_version: '1.0.0',
-          form_factor: 'git-windows'
+          form_factor: 'git-windows',
+          locale: 'en'
         })
       })
     })
 
     describe('when notifications are disabled', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mockSettingStore.get.mockImplementation((key: string) => {
           if (key === 'Comfy.Notification.ShowVersionUpdates') return false
           return null
         })
       })
 
-      it('should not show toast even with new version available', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should not show toast even with new version available', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         expect(store.shouldShowToast).toBe(false)
       })
 
-      it('should not show red dot even with new version available', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should not show red dot even with new version available', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
-      it('should not show popup even for latest version', async () => {
+      it('should not show popup even for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(0)
+
+        vi.mocked(semverCompare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(false)
       })
@@ -240,7 +237,8 @@ describe('useReleaseStore', () => {
       expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
         project: 'comfyui',
         current_version: '1.0.0',
-        form_factor: 'git-windows'
+        form_factor: 'git-windows',
+        locale: 'en'
       })
       expect(store.releases).toEqual([mockRelease])
     })
@@ -254,7 +252,8 @@ describe('useReleaseStore', () => {
       expect(mockReleaseService.getReleases).toHaveBeenCalledWith({
         project: 'comfyui',
         current_version: '1.0.0',
-        form_factor: 'desktop-mac'
+        form_factor: 'desktop-mac',
+        locale: 'en'
       })
     })
 
@@ -424,7 +423,7 @@ describe('useReleaseStore', () => {
   })
 
   describe('action handlers', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       store.releases = [mockRelease]
     })
 
@@ -481,7 +480,7 @@ describe('useReleaseStore', () => {
   })
 
   describe('popup visibility', () => {
-    it('should show toast for medium/high attention releases', async () => {
+    it('should show toast for medium/high attention releases', () => {
       mockSettingStore.get.mockImplementation((key: string) => {
         if (key === 'Comfy.Release.Version') return null
         if (key === 'Comfy.Release.Status') return null
@@ -489,8 +488,7 @@ describe('useReleaseStore', () => {
         return null
       })
 
-      const { compareVersions } = await import('@/utils/formatUtil')
-      vi.mocked(compareVersions).mockReturnValue(1)
+      vi.mocked(semverCompare).mockReturnValue(1)
 
       const mediumRelease = { ...mockRelease, attention: 'medium' as const }
       store.releases = [
@@ -502,9 +500,8 @@ describe('useReleaseStore', () => {
       expect(store.shouldShowToast).toBe(true)
     })
 
-    it('should show red dot for new versions', async () => {
-      const { compareVersions } = await import('@/utils/formatUtil')
-      vi.mocked(compareVersions).mockReturnValue(1)
+    it('should show red dot for new versions', () => {
+      vi.mocked(semverCompare).mockReturnValue(1)
       mockSettingStore.get.mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
         return null
@@ -515,15 +512,14 @@ describe('useReleaseStore', () => {
       expect(store.shouldShowRedDot).toBe(true)
     })
 
-    it('should show popup for latest version', async () => {
+    it('should show popup for latest version', () => {
       mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0' // Same as release
       mockSettingStore.get.mockImplementation((key: string) => {
         if (key === 'Comfy.Notification.ShowVersionUpdates') return true
         return null
       })
 
-      const { compareVersions } = await import('@/utils/formatUtil')
-      vi.mocked(compareVersions).mockReturnValue(0) // versions are equal (latest version)
+      vi.mocked(semverCompare).mockReturnValue(0) // versions are equal (latest version)
 
       store.releases = [mockRelease]
 
@@ -565,7 +561,7 @@ describe('useReleaseStore', () => {
   })
 
   describe('isElectron environment checks', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       // Set up a new version available
       store.releases = [mockRelease]
       mockSettingStore.get.mockImplementation((key: string) => {
@@ -580,9 +576,8 @@ describe('useReleaseStore', () => {
         vi.mocked(isElectron).mockReturnValue(true)
       })
 
-      it('should show toast when conditions are met', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should show toast when conditions are met', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         // Need multiple releases for hasMediumOrHighAttention
         const mediumRelease = {
@@ -595,17 +590,16 @@ describe('useReleaseStore', () => {
         expect(store.shouldShowToast).toBe(true)
       })
 
-      it('should show red dot when new version available', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should show red dot when new version available', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(true)
       })
 
-      it('should show popup for latest version', async () => {
+      it('should show popup for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(0)
+
+        vi.mocked(semverCompare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(true)
       })
@@ -617,9 +611,8 @@ describe('useReleaseStore', () => {
         vi.mocked(isElectron).mockReturnValue(false)
       })
 
-      it('should NOT show toast even when all other conditions are met', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should NOT show toast even when all other conditions are met', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         // Set up all conditions that would normally show toast
         const mediumRelease = {
@@ -632,16 +625,14 @@ describe('useReleaseStore', () => {
         expect(store.shouldShowToast).toBe(false)
       })
 
-      it('should NOT show red dot even when new version available', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should NOT show red dot even when new version available', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
-      it('should NOT show toast regardless of attention level', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should NOT show toast regardless of attention level', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         // Test with high attention releases
         const highRelease = {
@@ -659,19 +650,18 @@ describe('useReleaseStore', () => {
         expect(store.shouldShowToast).toBe(false)
       })
 
-      it('should NOT show red dot even with high attention release', async () => {
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(1)
+      it('should NOT show red dot even with high attention release', () => {
+        vi.mocked(semverCompare).mockReturnValue(1)
 
         store.releases = [{ ...mockRelease, attention: 'high' as const }]
 
         expect(store.shouldShowRedDot).toBe(false)
       })
 
-      it('should NOT show popup even for latest version', async () => {
+      it('should NOT show popup even for latest version', () => {
         mockSystemStatsStore.systemStats.system.comfyui_version = '1.2.0'
-        const { compareVersions } = await import('@/utils/formatUtil')
-        vi.mocked(compareVersions).mockReturnValue(0)
+
+        vi.mocked(semverCompare).mockReturnValue(0)
 
         expect(store.shouldShowPopup).toBe(false)
       })
diff --git a/tests-ui/tests/store/serverConfigStore.test.ts b/tests-ui/tests/store/serverConfigStore.test.ts
index 1caa5b5a22..dd25c5b648 100644
--- a/tests-ui/tests/store/serverConfigStore.test.ts
+++ b/tests-ui/tests/store/serverConfigStore.test.ts
@@ -1,7 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { ServerConfig } from '@/constants/serverConfig'
+import type { ServerConfig } from '@/constants/serverConfig'
 import type { FormItem } from '@/platform/settings/types'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 
diff --git a/tests-ui/tests/store/workflowStore.test.ts b/tests-ui/tests/store/workflowStore.test.ts
index 90a86645e4..648d00fa88 100644
--- a/tests-ui/tests/store/workflowStore.test.ts
+++ b/tests-ui/tests/store/workflowStore.test.ts
@@ -3,9 +3,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
-  ComfyWorkflow,
-  LoadedComfyWorkflow,
+  type LoadedComfyWorkflow,
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
diff --git a/tests-ui/tests/stores/conflictDetectionStore.test.ts b/tests-ui/tests/stores/conflictDetectionStore.test.ts
index 8750792275..7c74ea6c1d 100644
--- a/tests-ui/tests/stores/conflictDetectionStore.test.ts
+++ b/tests-ui/tests/stores/conflictDetectionStore.test.ts
@@ -1,8 +1,8 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
-import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
 
 describe('useConflictDetectionStore', () => {
   beforeEach(() => {
diff --git a/tests-ui/tests/utils/conflictUtils.test.ts b/tests-ui/tests/utils/conflictUtils.test.ts
new file mode 100644
index 0000000000..876684378b
--- /dev/null
+++ b/tests-ui/tests/utils/conflictUtils.test.ts
@@ -0,0 +1,207 @@
+import { describe, expect, it } from 'vitest'
+
+import type {
+  ConflictDetail,
+  ConflictDetectionResult
+} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import {
+  consolidateConflictsByPackage,
+  createBannedConflict,
+  createPendingConflict
+} from '@/workbench/extensions/manager/utils/conflictUtils'
+
+describe('conflictUtils', () => {
+  describe('createBannedConflict', () => {
+    it('should return banned conflict when isBanned is true', () => {
+      const result = createBannedConflict(true)
+      expect(result).toEqual({
+        type: 'banned',
+        current_value: 'installed',
+        required_value: 'not_banned'
+      })
+    })
+
+    it('should return null when isBanned is false', () => {
+      const result = createBannedConflict(false)
+      expect(result).toBeNull()
+    })
+
+    it('should return null when isBanned is undefined', () => {
+      const result = createBannedConflict(undefined)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('createPendingConflict', () => {
+    it('should return pending conflict when isPending is true', () => {
+      const result = createPendingConflict(true)
+      expect(result).toEqual({
+        type: 'pending',
+        current_value: 'installed',
+        required_value: 'not_pending'
+      })
+    })
+
+    it('should return null when isPending is false', () => {
+      const result = createPendingConflict(false)
+      expect(result).toBeNull()
+    })
+
+    it('should return null when isPending is undefined', () => {
+      const result = createPendingConflict(undefined)
+      expect(result).toBeNull()
+    })
+  })
+
+  describe('consolidateConflictsByPackage', () => {
+    it('should group conflicts by normalized package name', () => {
+      const conflicts: ConflictDetectionResult[] = [
+        {
+          package_name: 'mypack@1_0_3',
+          package_id: 'mypack@1_0_3',
+          conflicts: [
+            { type: 'os', current_value: 'Windows', required_value: 'Linux' }
+          ],
+          has_conflict: true,
+          is_compatible: false
+        },
+        {
+          package_name: 'mypack',
+          package_id: 'mypack',
+          conflicts: [
+            {
+              type: 'comfyui_version',
+              current_value: '1.0.0',
+              required_value: '>=2.0.0'
+            }
+          ],
+          has_conflict: true,
+          is_compatible: false
+        }
+      ]
+
+      const result = consolidateConflictsByPackage(conflicts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].package_name).toBe('mypack')
+      expect(result[0].conflicts).toHaveLength(2)
+      expect(result[0].has_conflict).toBe(true)
+      expect(result[0].is_compatible).toBe(false)
+    })
+
+    it('should deduplicate identical conflicts', () => {
+      const duplicateConflict: ConflictDetail = {
+        type: 'os',
+        current_value: 'Windows',
+        required_value: 'Linux'
+      }
+
+      const conflicts: ConflictDetectionResult[] = [
+        {
+          package_name: 'pack',
+          package_id: 'pack',
+          conflicts: [duplicateConflict],
+          has_conflict: true,
+          is_compatible: false
+        },
+        {
+          package_name: 'pack@version',
+          package_id: 'pack@version',
+          conflicts: [duplicateConflict],
+          has_conflict: true,
+          is_compatible: false
+        }
+      ]
+
+      const result = consolidateConflictsByPackage(conflicts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].conflicts).toHaveLength(1)
+    })
+
+    it('should handle packages without conflicts', () => {
+      const conflicts: ConflictDetectionResult[] = [
+        {
+          package_name: 'compatible-pack',
+          package_id: 'compatible-pack',
+          conflicts: [],
+          has_conflict: false,
+          is_compatible: true
+        }
+      ]
+
+      const result = consolidateConflictsByPackage(conflicts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].conflicts).toHaveLength(0)
+      expect(result[0].has_conflict).toBe(false)
+      expect(result[0].is_compatible).toBe(true)
+    })
+
+    it('should handle empty input', () => {
+      const result = consolidateConflictsByPackage([])
+      expect(result).toEqual([])
+    })
+
+    it('should merge conflicts from multiple versions of same package', () => {
+      const conflicts: ConflictDetectionResult[] = [
+        {
+          package_name: 'mynode@1_0_0',
+          package_id: 'mynode@1_0_0',
+          conflicts: [
+            { type: 'os', current_value: 'Windows', required_value: 'Linux' }
+          ],
+          has_conflict: true,
+          is_compatible: false
+        },
+        {
+          package_name: 'mynode@2_0_0',
+          package_id: 'mynode@2_0_0',
+          conflicts: [
+            {
+              type: 'accelerator',
+              current_value: 'CPU',
+              required_value: 'CUDA'
+            }
+          ],
+          has_conflict: true,
+          is_compatible: false
+        },
+        {
+          package_name: 'mynode',
+          package_id: 'mynode',
+          conflicts: [
+            {
+              type: 'comfyui_version',
+              current_value: '1.0.0',
+              required_value: '>=2.0.0'
+            }
+          ],
+          has_conflict: true,
+          is_compatible: false
+        }
+      ]
+
+      const result = consolidateConflictsByPackage(conflicts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].package_name).toBe('mynode')
+      expect(result[0].conflicts).toHaveLength(3)
+      expect(result[0].conflicts).toContainEqual({
+        type: 'os',
+        current_value: 'Windows',
+        required_value: 'Linux'
+      })
+      expect(result[0].conflicts).toContainEqual({
+        type: 'accelerator',
+        current_value: 'CPU',
+        required_value: 'CUDA'
+      })
+      expect(result[0].conflicts).toContainEqual({
+        type: 'comfyui_version',
+        current_value: '1.0.0',
+        required_value: '>=2.0.0'
+      })
+    })
+  })
+})
diff --git a/tests-ui/tests/utils/litegraphUtil.test.ts b/tests-ui/tests/utils/litegraphUtil.test.ts
index b4301941fc..36a6692ee9 100644
--- a/tests-ui/tests/utils/litegraphUtil.test.ts
+++ b/tests-ui/tests/utils/litegraphUtil.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
+import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { IWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import {
diff --git a/tests-ui/tests/utils/systemCompatibility.test.ts b/tests-ui/tests/utils/systemCompatibility.test.ts
new file mode 100644
index 0000000000..0e34cc7eb4
--- /dev/null
+++ b/tests-ui/tests/utils/systemCompatibility.test.ts
@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest'
+
+import type {
+  RegistryAccelerator,
+  RegistryOS
+} from '@/workbench/extensions/manager/types/compatibility.types'
+import {
+  checkAcceleratorCompatibility,
+  checkOSCompatibility,
+  normalizeOSList
+} from '@/workbench/extensions/manager/utils/systemCompatibility'
+
+describe('systemCompatibility', () => {
+  describe('checkOSCompatibility', () => {
+    it('should return null when supported OS list is null', () => {
+      const result = checkOSCompatibility(null, 'darwin')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported OS list is undefined', () => {
+      const result = checkOSCompatibility(undefined, 'darwin')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported OS list is empty', () => {
+      const result = checkOSCompatibility([], 'darwin')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when OS is compatible (macOS)', () => {
+      const supported: RegistryOS[] = ['macOS', 'Windows']
+      const result = checkOSCompatibility(supported, 'darwin')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when OS is compatible (Windows)', () => {
+      const supported: RegistryOS[] = ['Windows', 'Linux']
+      const result = checkOSCompatibility(supported, 'win32')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when OS is compatible (Linux)', () => {
+      const supported: RegistryOS[] = ['Linux', 'macOS']
+      const result = checkOSCompatibility(supported, 'linux')
+      expect(result).toBeNull()
+    })
+
+    it('should return conflict when OS is incompatible', () => {
+      const supported: RegistryOS[] = ['Windows']
+      const result = checkOSCompatibility(supported, 'darwin')
+      expect(result).toEqual({
+        type: 'os',
+        current_value: 'macOS',
+        required_value: 'Windows'
+      })
+    })
+
+    it('should return conflict with Unknown OS when current OS is unrecognized', () => {
+      const supported: RegistryOS[] = ['Windows', 'Linux']
+      const result = checkOSCompatibility(supported, 'freebsd')
+      expect(result).toEqual({
+        type: 'os',
+        current_value: 'Unknown',
+        required_value: 'Windows, Linux'
+      })
+    })
+
+    it('should handle various OS string formats', () => {
+      const supported: RegistryOS[] = ['Windows']
+
+      // Test Windows variations
+      expect(checkOSCompatibility(supported, 'win32')).toBeNull()
+      expect(checkOSCompatibility(supported, 'windows')).toBeNull()
+      expect(checkOSCompatibility(supported, 'Windows_NT')).toBeNull()
+
+      // Test macOS variations
+      const macSupported: RegistryOS[] = ['macOS']
+      expect(checkOSCompatibility(macSupported, 'darwin')).toBeNull()
+      expect(checkOSCompatibility(macSupported, 'Darwin')).toBeNull()
+      expect(checkOSCompatibility(macSupported, 'macos')).toBeNull()
+      expect(checkOSCompatibility(macSupported, 'mac')).toBeNull()
+    })
+
+    it('should handle undefined current OS', () => {
+      const supported: RegistryOS[] = ['Windows']
+      const result = checkOSCompatibility(supported, undefined)
+      expect(result).toEqual({
+        type: 'os',
+        current_value: 'Unknown',
+        required_value: 'Windows'
+      })
+    })
+  })
+
+  describe('checkAcceleratorCompatibility', () => {
+    it('should return null when supported accelerator list is null', () => {
+      const result = checkAcceleratorCompatibility(null, 'cuda')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported accelerator list is undefined', () => {
+      const result = checkAcceleratorCompatibility(undefined, 'cuda')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported accelerator list is empty', () => {
+      const result = checkAcceleratorCompatibility([], 'cuda')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when accelerator is compatible (CUDA)', () => {
+      const supported: RegistryAccelerator[] = ['CUDA', 'CPU']
+      const result = checkAcceleratorCompatibility(supported, 'cuda')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when accelerator is compatible (Metal)', () => {
+      const supported: RegistryAccelerator[] = ['Metal', 'CPU']
+      const result = checkAcceleratorCompatibility(supported, 'mps')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when accelerator is compatible (ROCm)', () => {
+      const supported: RegistryAccelerator[] = ['ROCm', 'CPU']
+      const result = checkAcceleratorCompatibility(supported, 'rocm')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when accelerator is compatible (CPU)', () => {
+      const supported: RegistryAccelerator[] = ['CPU']
+      const result = checkAcceleratorCompatibility(supported, 'cpu')
+      expect(result).toBeNull()
+    })
+
+    it('should return conflict when accelerator is incompatible', () => {
+      const supported: RegistryAccelerator[] = ['CUDA']
+      const result = checkAcceleratorCompatibility(supported, 'mps')
+      expect(result).toEqual({
+        type: 'accelerator',
+        current_value: 'Metal',
+        required_value: 'CUDA'
+      })
+    })
+
+    it('should default to CPU for unknown device types', () => {
+      const supported: RegistryAccelerator[] = ['CUDA']
+      const result = checkAcceleratorCompatibility(supported, 'unknown')
+      expect(result).toEqual({
+        type: 'accelerator',
+        current_value: 'CPU',
+        required_value: 'CUDA'
+      })
+    })
+
+    it('should default to CPU when device type is undefined', () => {
+      const supported: RegistryAccelerator[] = ['CUDA']
+      const result = checkAcceleratorCompatibility(supported, undefined)
+      expect(result).toEqual({
+        type: 'accelerator',
+        current_value: 'CPU',
+        required_value: 'CUDA'
+      })
+    })
+
+    it('should handle case-insensitive device types', () => {
+      const supported: RegistryAccelerator[] = ['CUDA']
+
+      // CUDA variations
+      expect(checkAcceleratorCompatibility(supported, 'cuda')).toBeNull()
+      expect(checkAcceleratorCompatibility(supported, 'CUDA')).toBeNull()
+      expect(checkAcceleratorCompatibility(supported, 'Cuda')).toBeNull()
+
+      // Metal variations
+      const metalSupported: RegistryAccelerator[] = ['Metal']
+      expect(checkAcceleratorCompatibility(metalSupported, 'mps')).toBeNull()
+      expect(checkAcceleratorCompatibility(metalSupported, 'MPS')).toBeNull()
+
+      // ROCm variations
+      const rocmSupported: RegistryAccelerator[] = ['ROCm']
+      expect(checkAcceleratorCompatibility(rocmSupported, 'rocm')).toBeNull()
+      expect(checkAcceleratorCompatibility(rocmSupported, 'ROCM')).toBeNull()
+    })
+
+    it('should handle multiple required accelerators', () => {
+      const supported: RegistryAccelerator[] = ['CUDA', 'ROCm']
+      const result = checkAcceleratorCompatibility(supported, 'mps')
+      expect(result).toEqual({
+        type: 'accelerator',
+        current_value: 'Metal',
+        required_value: 'CUDA, ROCm'
+      })
+    })
+  })
+
+  describe('normalizeOSList', () => {
+    it('should return undefined for null input', () => {
+      const result = normalizeOSList(null)
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined for undefined input', () => {
+      const result = normalizeOSList(undefined)
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined for empty array', () => {
+      const result = normalizeOSList([])
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined when OS Independent is present', () => {
+      const result = normalizeOSList(['OS Independent', 'Windows'])
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined for case-insensitive OS Independent', () => {
+      const result = normalizeOSList(['os independent'])
+      expect(result).toBeUndefined()
+    })
+
+    it('should filter and return valid OS values', () => {
+      const result = normalizeOSList(['Windows', 'Linux', 'macOS'])
+      expect(result).toEqual(['Windows', 'Linux', 'macOS'])
+    })
+
+    it('should filter out invalid OS values', () => {
+      const result = normalizeOSList(['Windows', 'FreeBSD', 'Linux', 'Android'])
+      expect(result).toEqual(['Windows', 'Linux'])
+    })
+
+    it('should deduplicate OS values', () => {
+      const result = normalizeOSList([
+        'Windows',
+        'Linux',
+        'Windows',
+        'macOS',
+        'Linux'
+      ])
+      expect(result).toEqual(['Windows', 'Linux', 'macOS'])
+    })
+
+    it('should return undefined when no valid OS values remain', () => {
+      const result = normalizeOSList(['FreeBSD', 'Android', 'iOS'])
+      expect(result).toBeUndefined()
+    })
+
+    it('should handle mixed valid and invalid values', () => {
+      const result = normalizeOSList([
+        'windows',
+        'Windows',
+        'linux',
+        'Linux',
+        'macos'
+      ])
+      // Only exact matches are valid
+      expect(result).toEqual(['Windows', 'Linux'])
+    })
+
+    it('should preserve order of first occurrence when deduplicating', () => {
+      const result = normalizeOSList([
+        'Linux',
+        'Windows',
+        'macOS',
+        'Linux',
+        'Windows'
+      ])
+      expect(result).toEqual(['Linux', 'Windows', 'macOS'])
+    })
+  })
+})
diff --git a/tests-ui/tests/utils/treeUtilTest.test.ts b/tests-ui/tests/utils/treeUtilTest.test.ts
index 9c367a30d6..ebd1ffbd5a 100644
--- a/tests-ui/tests/utils/treeUtilTest.test.ts
+++ b/tests-ui/tests/utils/treeUtilTest.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { TreeNode } from '@/types/treeExplorerTypes'
+import type { TreeNode } from '@/types/treeExplorerTypes'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
 
 describe('buildTree', () => {
diff --git a/tests-ui/tests/utils/versionUtil.test.ts b/tests-ui/tests/utils/versionUtil.test.ts
new file mode 100644
index 0000000000..87e343496d
--- /dev/null
+++ b/tests-ui/tests/utils/versionUtil.test.ts
@@ -0,0 +1,346 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  checkVersionCompatibility,
+  getFrontendVersion
+} from '@/workbench/extensions/manager/utils/versionUtil'
+
+// Mock config module
+vi.mock('@/config', () => ({
+  default: {
+    app_version: '1.24.0-1'
+  }
+}))
+
+describe('versionUtil', () => {
+  describe('checkVersionCompatibility', () => {
+    it('should return null when current version is undefined', () => {
+      const result = checkVersionCompatibility(
+        'comfyui_version',
+        undefined,
+        '>=1.0.0'
+      )
+      expect(result).toBeNull()
+    })
+
+    it('should return null when current version is null', () => {
+      const result = checkVersionCompatibility(
+        'comfyui_version',
+        null as any,
+        '>=1.0.0'
+      )
+      expect(result).toBeNull()
+    })
+
+    it('should return null when current version is empty string', () => {
+      const result = checkVersionCompatibility('comfyui_version', '', '>=1.0.0')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported version is undefined', () => {
+      const result = checkVersionCompatibility(
+        'comfyui_version',
+        '1.0.0',
+        undefined
+      )
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported version is null', () => {
+      const result = checkVersionCompatibility(
+        'comfyui_version',
+        '1.0.0',
+        null as any
+      )
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported version is empty string', () => {
+      const result = checkVersionCompatibility('comfyui_version', '1.0.0', '')
+      expect(result).toBeNull()
+    })
+
+    it('should return null when supported version is whitespace only', () => {
+      const result = checkVersionCompatibility(
+        'comfyui_version',
+        '1.0.0',
+        '   '
+      )
+      expect(result).toBeNull()
+    })
+
+    describe('version compatibility checks', () => {
+      it('should return null when version satisfies >= requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '2.0.0',
+          '>=1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return null when version exactly matches requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.0.0',
+          '1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return null when version satisfies ^ requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.2.3',
+          '^1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return null when version satisfies ~ requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.0.5',
+          '~1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return null when version satisfies range requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.5.0',
+          '1.0.0 - 2.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return conflict when version does not satisfy >= requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '0.9.0',
+          '>=1.0.0'
+        )
+        expect(result).toEqual({
+          type: 'comfyui_version',
+          current_value: '0.9.0',
+          required_value: '>=1.0.0'
+        })
+      })
+
+      it('should return conflict when version does not satisfy ^ requirement', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '2.0.0',
+          '^1.0.0'
+        )
+        expect(result).toEqual({
+          type: 'comfyui_version',
+          current_value: '2.0.0',
+          required_value: '^1.0.0'
+        })
+      })
+
+      it('should return conflict when version is outside range', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '3.0.0',
+          '1.0.0 - 2.0.0'
+        )
+        expect(result).toEqual({
+          type: 'comfyui_version',
+          current_value: '3.0.0',
+          required_value: '1.0.0 - 2.0.0'
+        })
+      })
+    })
+
+    describe('version cleaning', () => {
+      it('should handle versions with v prefix', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          'v1.0.0',
+          '>=1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should handle versions with pre-release tags', () => {
+        // Pre-release versions have specific semver rules
+        // 1.0.0-alpha satisfies >=1.0.0-alpha but not >=1.0.0
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.0.0-alpha',
+          '>=1.0.0-alpha'
+        )
+        expect(result).toBeNull()
+
+        // This should fail because pre-release < stable
+        const result2 = checkVersionCompatibility(
+          'comfyui_version',
+          '1.0.0-alpha',
+          '>=1.0.0'
+        )
+        expect(result2).toEqual({
+          type: 'comfyui_version',
+          current_value: '1.0.0-alpha',
+          required_value: '>=1.0.0'
+        })
+      })
+
+      it('should handle versions with build metadata', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.0.0+build123',
+          '>=1.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should handle malformed versions gracefully', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          'not-a-version',
+          '>=1.0.0'
+        )
+        expect(result).toEqual({
+          type: 'comfyui_version',
+          current_value: 'not-a-version',
+          required_value: '>=1.0.0'
+        })
+      })
+    })
+
+    describe('different conflict types', () => {
+      it('should handle comfyui_version type', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '0.5.0',
+          '>=1.0.0'
+        )
+        expect(result?.type).toBe('comfyui_version')
+      })
+
+      it('should handle frontend_version type', () => {
+        const result = checkVersionCompatibility(
+          'frontend_version',
+          '0.5.0',
+          '>=1.0.0'
+        )
+        expect(result?.type).toBe('frontend_version')
+      })
+    })
+
+    describe('complex version ranges', () => {
+      it('should handle OR conditions with ||', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.5.0',
+          '>=1.0.0 <2.0.0 || >=3.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should handle multiple constraints', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '1.5.0',
+          '>=1.0.0 <2.0.0'
+        )
+        expect(result).toBeNull()
+      })
+
+      it('should return conflict when no constraints are met', () => {
+        const result = checkVersionCompatibility(
+          'comfyui_version',
+          '2.5.0',
+          '>=1.0.0 <2.0.0 || >=3.0.0 <4.0.0'
+        )
+        expect(result).toEqual({
+          type: 'comfyui_version',
+          current_value: '2.5.0',
+          required_value: '>=1.0.0 <2.0.0 || >=3.0.0 <4.0.0'
+        })
+      })
+    })
+  })
+
+  describe('getFrontendVersion', () => {
+    it('should return app_version from config when available', () => {
+      const version = getFrontendVersion()
+      expect(version).toBe('1.24.0-1')
+    })
+
+    it('should fallback to VITE_APP_VERSION when app_version is not available', async () => {
+      // Save original environment
+      const originalEnv = import.meta.env.VITE_APP_VERSION
+
+      // Mock config without app_version
+      vi.doMock('@/config', () => ({
+        default: {}
+      }))
+
+      // Set VITE_APP_VERSION
+      import.meta.env.VITE_APP_VERSION = '2.0.0'
+
+      // Clear module cache to force re-import
+      vi.resetModules()
+
+      // Import fresh module
+      const versionUtil = await import(
+        '@/workbench/extensions/manager/utils/versionUtil'
+      )
+
+      const version = versionUtil.getFrontendVersion()
+      expect(version).toBe('2.0.0')
+
+      // Restore original env
+      import.meta.env.VITE_APP_VERSION = originalEnv
+
+      // Reset mocks for next test
+      vi.resetModules()
+      vi.doMock('@/config', () => ({
+        default: {
+          app_version: '1.24.0-1'
+        }
+      }))
+    })
+
+    it('should return undefined when no version is available', async () => {
+      // Save original environment
+      const originalEnv = import.meta.env.VITE_APP_VERSION
+
+      // Mock config without app_version
+      vi.doMock('@/config', () => ({
+        default: {}
+      }))
+
+      // Clear VITE_APP_VERSION
+      delete import.meta.env.VITE_APP_VERSION
+
+      // Clear module cache to force re-import
+      vi.resetModules()
+
+      // Import fresh module
+      const versionUtil = await import(
+        '@/workbench/extensions/manager/utils/versionUtil'
+      )
+
+      const version = versionUtil.getFrontendVersion()
+      expect(version).toBeUndefined()
+
+      // Restore original env
+      if (originalEnv !== undefined) {
+        import.meta.env.VITE_APP_VERSION = originalEnv
+      }
+
+      // Reset mocks for next test
+      vi.resetModules()
+      vi.doMock('@/config', () => ({
+        default: {
+          app_version: '1.24.0-1'
+        }
+      }))
+    })
+  })
+})
diff --git a/tsconfig.eslint.json b/tests-ui/tsconfig.json
similarity index 53%
rename from tsconfig.eslint.json
rename to tests-ui/tsconfig.json
index 9b16357002..f600c4a7f7 100644
--- a/tsconfig.eslint.json
+++ b/tests-ui/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     /* Test files should not be compiled */
     "noEmit": true,
@@ -9,13 +9,6 @@
     "resolveJsonModule": true
   },
   "include": [
-    "*.ts",
-    "*.mts",
-    "*.config.js",
-    "browser_tests/**/*.ts",
-    "scripts/**/*.js",
-    "scripts/**/*.ts",
-    "tests-ui/**/*.ts",
-    ".storybook/**/*.ts"
+    "**/*.ts",
   ]
 }
diff --git a/tools/devtools/README.md b/tools/devtools/README.md
new file mode 100644
index 0000000000..d0d316ce81
--- /dev/null
+++ b/tools/devtools/README.md
@@ -0,0 +1,28 @@
+# ComfyUI DevTools
+
+This directory contains development tools and test utilities for ComfyUI, previously maintained as a separate repository at `https://github.com/Comfy-Org/ComfyUI_devtools`.
+
+## Contents
+
+- `__init__.py` - Server endpoints for development tools (`/api/devtools/*`)
+- `dev_nodes.py` - Development and testing nodes for ComfyUI
+- `fake_model.safetensors` - Test fixture for model loading tests
+
+## Purpose
+
+These tools provide:
+- Test endpoints for browser automation
+- Development nodes for testing various UI features
+- Mock data for consistent testing environments
+
+## Usage
+
+During CI/CD, these files are automatically copied to the ComfyUI `custom_nodes` directory. For local development, copy these files to your ComfyUI installation:
+
+```bash
+cp -r tools/devtools/* /path/to/your/ComfyUI/custom_nodes/ComfyUI_devtools/
+```
+
+## Migration
+
+This directory was created as part of issue #4683 to merge the ComfyUI_devtools repository into the main frontend repository, eliminating the need for separate versioning and simplifying the development workflow.
\ No newline at end of file
diff --git a/tools/devtools/__init__.py b/tools/devtools/__init__.py
new file mode 100644
index 0000000000..3ac47cb187
--- /dev/null
+++ b/tools/devtools/__init__.py
@@ -0,0 +1,100 @@
+from __future__ import annotations
+from .dev_nodes import NODE_CLASS_MAPPINGS, NODE_DISPLAY_NAME_MAPPINGS
+
+import os
+import shutil
+import json
+from typing import Union
+
+import server
+from aiohttp import web
+from aiohttp.web_request import Request
+import folder_paths
+from folder_paths import models_dir
+
+
+@server.PromptServer.instance.routes.get("/devtools/fake_model.safetensors")
+async def fake_model(request: Request):
+    file_path = os.path.join(os.path.dirname(__file__), "fake_model.safetensors")
+    return web.FileResponse(file_path)
+
+
+@server.PromptServer.instance.routes.get("/devtools/cleanup_fake_model")
+async def cleanup_fake_model(request: Request):
+    model_folder = request.query.get("model_folder", "clip")
+    model_path = os.path.join(models_dir, model_folder, "fake_model.safetensors")
+    if os.path.exists(model_path):
+        os.remove(model_path)
+    return web.Response(status=200, text="Fake model cleaned up")
+
+
+TreeType = dict[str, Union[str, "TreeType"]]
+
+
+def write_tree_structure(tree: TreeType, base_path: str):
+    # Remove existing files and folders in users/workflows
+    if os.path.exists(base_path):
+        shutil.rmtree(base_path)
+
+    # Recreate the base directory
+    os.makedirs(base_path, exist_ok=True)
+
+    def write_recursive(current_tree: TreeType, current_path: str):
+        for key, value in current_tree.items():
+            new_path = os.path.join(current_path, key)
+            if isinstance(value, dict):
+                # If it's a dictionary, create a new directory and recurse
+                os.makedirs(new_path, exist_ok=True)
+                write_recursive(value, new_path)
+            else:
+                # If it's a string, write the content to a file
+                with open(new_path, "w") as f:
+                    f.write(value)
+
+    write_recursive(tree, base_path)
+
+
+@server.PromptServer.instance.routes.post("/devtools/setup_folder_structure")
+async def setup_folder_structure(request: Request):
+    try:
+        data = await request.json()
+        tree_structure = data.get("tree_structure")
+        base_path = os.path.join(
+            folder_paths.base_path, data.get("base_path", "users/workflows")
+        )
+
+        if not isinstance(tree_structure, dict):
+            return web.Response(status=400, text="Invalid tree structure")
+
+        write_tree_structure(tree_structure, base_path)
+        return web.Response(status=200, text=f"Folder structure created at {base_path}")
+    except json.JSONDecodeError:
+        return web.Response(status=400, text="Invalid JSON data")
+    except Exception as e:
+        return web.Response(status=500, text=f"Error: {str(e)}")
+
+
+@server.PromptServer.instance.routes.post("/devtools/set_settings")
+async def set_settings(request: Request):
+    """Directly set the settings for the user specified via `Comfy.userId`,
+    instead of merging with the existing settings."""
+    try:
+        settings: dict[str, str | bool | int | float] = await request.json()
+        user_root = folder_paths.get_user_directory()
+        try:
+            user_id: str = settings.pop("Comfy.userId")
+        except KeyError:
+            user_id = "default"
+        settings_file_path = os.path.join(user_root, user_id, "comfy.settings.json")
+
+        # Ensure the directory structure exists
+        os.makedirs(os.path.dirname(settings_file_path), exist_ok=True)
+
+        with open(settings_file_path, "w") as f:
+            f.write(json.dumps(settings, indent=4))
+        return web.Response(status=200)
+    except Exception as e:
+        return web.Response(status=500, text=f"Error: {str(e)}")
+
+
+__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS"]
\ No newline at end of file
diff --git a/tools/devtools/dev_nodes.py b/tools/devtools/dev_nodes.py
new file mode 100644
index 0000000000..15311d74b0
--- /dev/null
+++ b/tools/devtools/dev_nodes.py
@@ -0,0 +1,673 @@
+import torch
+import comfy.utils as utils
+from comfy.model_patcher import ModelPatcher
+import nodes
+import time
+import os
+import folder_paths
+
+
+class ErrorRaiseNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "raise_error"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "Raise an error for development purposes"
+
+    def raise_error(self):
+        raise Exception("Error node was called!")
+
+
+class ErrorRaiseNodeWithMessage:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"message": ("STRING", {"multiline": True})}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+
+    FUNCTION = "raise_error"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "Raise an error with message for development purposes"
+
+    def raise_error(self, message: str):
+        raise Exception(message)
+
+
+class ExperimentalNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "experimental_function"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A experimental node"
+
+    EXPERIMENTAL = True
+
+    def experimental_function(self):
+        print("Experimental node was called!")
+
+
+class DeprecatedNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "deprecated_function"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A deprecated node"
+
+    DEPRECATED = True
+
+    def deprecated_function(self):
+        print("Deprecated node was called!")
+
+
+class LongComboDropdown:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"option": ([f"Option {i}" for i in range(1_000)],)}}
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "long_combo_dropdown"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A long combo dropdown"
+
+    def long_combo_dropdown(self, option: str):
+        print(option)
+
+
+class NodeWithOptionalInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"required_input": ("IMAGE",)},
+            "optional": {"optional_input": ("IMAGE", {"default": None})},
+        }
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "node_with_optional_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an optional input"
+
+    def node_with_optional_input(self, required_input, optional_input=None):
+        print(
+            f"Calling node with required_input: {required_input} and optional_input: {optional_input}"
+        )
+        return (required_input,)
+
+
+class NodeWithOptionalComboInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "optional": {
+                "optional_combo_input": (
+                    [f"Random Unique Option {time.time()}" for _ in range(8)],
+                    {"default": None},
+                )
+            },
+        }
+
+    RETURN_TYPES = ("STRING",)
+    FUNCTION = "node_with_optional_combo_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an optional combo input that returns unique values every time INPUT_TYPES is called"
+
+    def node_with_optional_combo_input(self, optional_combo_input=None):
+        print(f"Calling node with optional_combo_input: {optional_combo_input}")
+        return (optional_combo_input,)
+
+
+class NodeWithOnlyOptionalInput:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "optional": {
+                "text": ("STRING", {"multiline": True, "dynamicPrompts": True}),
+                "clip": ("CLIP", {}),
+            }
+        }
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_only_optional_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with only optional input"
+
+    def node_with_only_optional_input(self, clip=None, text=None):
+        pass
+
+
+class NodeWithOutputList:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {}}
+
+    RETURN_TYPES = (
+        "INT",
+        "INT",
+    )
+    RETURN_NAMES = (
+        "INTEGER OUTPUT",
+        "INTEGER LIST OUTPUT",
+    )
+    OUTPUT_IS_LIST = (
+        False,
+        True,
+    )
+    FUNCTION = "node_with_output_list"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with an output list"
+
+    def node_with_output_list(self):
+        return (1, [1, 2, 3])
+
+
+class NodeWithForceInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "int_input": ("INT", {"forceInput": True}),
+                "int_input_widget": ("INT", {"default": 1}),
+            },
+            "optional": {"float_input": ("FLOAT", {"forceInput": True})},
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_force_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a forced input"
+
+    def node_with_force_input(
+        self, int_input: int, int_input_widget: int, float_input: float = 0.0
+    ):
+        print(
+            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
+        )
+
+
+class NodeWithDefaultInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "int_input": ("INT", {"defaultInput": True}),
+                "int_input_widget": ("INT", {"default": 1}),
+            },
+            "optional": {"float_input": ("FLOAT", {"defaultInput": True})},
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_default_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a default input"
+
+    def node_with_default_input(
+        self, int_input: int, int_input_widget: int, float_input: float = 0.0
+    ):
+        print(
+            f"int_input: {int_input}, int_input_widget: {int_input_widget}, float_input: {float_input}"
+        )
+
+
+class NodeWithStringInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"string_input": ("STRING",)}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_string_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a string input"
+
+    def node_with_string_input(self, string_input: str):
+        print(f"string_input: {string_input}")
+
+
+class NodeWithUnionInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "optional": {
+                "string_or_int_input": ("STRING,INT",),
+                "string_input": ("STRING", {"forceInput": True}),
+                "int_input": ("INT", {"forceInput": True}),
+            }
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "node_with_union_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a union input"
+
+    def node_with_union_input(
+        self,
+        string_or_int_input: str | int = "",
+        string_input: str = "",
+        int_input: int = 0,
+    ):
+        print(
+            f"string_or_int_input: {string_or_int_input}, string_input: {string_input}, int_input: {int_input}"
+        )
+        return {
+            "ui": {
+                "text": string_or_int_input,
+            }
+        }
+
+
+class NodeWithBooleanInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"boolean_input": ("BOOLEAN",)}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_boolean_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a boolean input"
+
+    def node_with_boolean_input(self, boolean_input: bool):
+        print(f"boolean_input: {boolean_input}")
+
+
+class SimpleSlider:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "value": (
+                    "FLOAT",
+                    {
+                        "display": "slider",
+                        "default": 0.5,
+                        "min": 0.0,
+                        "max": 1.0,
+                        "step": 0.001,
+                    },
+                ),
+            },
+        }
+
+    RETURN_TYPES = ("FLOAT",)
+    FUNCTION = "execute"
+    CATEGORY = "DevTools"
+
+    def execute(self, value):
+        return (value,)
+
+
+class NodeWithSeedInput:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {"required": {"seed": ("INT", {"default": 0})}}
+
+    RETURN_TYPES = ()
+    FUNCTION = "node_with_seed_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node with a seed input"
+    OUTPUT_NODE = True
+
+    def node_with_seed_input(self, seed: int):
+        print(f"seed: {seed}")
+
+
+class DummyPatch(torch.nn.Module):
+    def __init__(self, module: torch.nn.Module, dummy_float: float = 0.0):
+        super().__init__()
+        self.module = module
+        self.dummy_float = dummy_float
+
+    def forward(self, *args, **kwargs):
+        if isinstance(self.module, DummyPatch):
+            raise Exception(f"Calling nested dummy patch! {self.dummy_float}")
+
+        return self.module(*args, **kwargs)
+
+
+class ObjectPatchNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "model": ("MODEL",),
+                "target_module": ("STRING", {"multiline": True}),
+            },
+            "optional": {
+                "dummy_float": ("FLOAT", {"default": 0.0}),
+            },
+        }
+
+    RETURN_TYPES = ("MODEL",)
+    FUNCTION = "apply_patch"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that applies an object patch"
+
+    def apply_patch(
+        self, model: ModelPatcher, target_module: str, dummy_float: float = 0.0
+    ) -> ModelPatcher:
+        module = utils.get_attr(model.model, target_module)
+        work_model = model.clone()
+        work_model.add_object_patch(target_module, DummyPatch(module, dummy_float))
+        return (work_model,)
+
+
+class RemoteWidgetNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithParams:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "query_params": {
+                                "sort": "true",
+                            },
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = (
+        "A node that lazily fetches options from a remote endpoint with query params"
+    )
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithRefresh:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh": 300,
+                            "max_retries": 10,
+                            "timeout": 256,
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and refresh the options every 300 ms"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithRefreshButton:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh_button": True,
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class RemoteWidgetNodeWithControlAfterRefresh:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "remote_widget_value": (
+                    "COMBO",
+                    {
+                        "remote": {
+                            "route": "/api/models/checkpoints",
+                            "refresh_button": True,
+                            "control_after_refresh": "first",
+                        },
+                    },
+                ),
+            },
+        }
+
+    FUNCTION = "remote_widget"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that lazily fetches options from a remote endpoint and has a refresh button to manually reload options and select the first option on refresh"
+    RETURN_TYPES = ("STRING",)
+
+    def remote_widget(self, remote_widget_value: str):
+        return (remote_widget_value,)
+
+
+class NodeWithOutputCombo:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "subset_options": (["A", "B"], {"forceInput": True}),
+                "subset_options_v2": (
+                    "COMBO",
+                    {"options": ["A", "B"], "forceInput": True},
+                ),
+            }
+        }
+
+    RETURN_TYPES = (["A", "B", "C"],)
+    FUNCTION = "node_with_output_combo"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that outputs a combo type"
+
+    def node_with_output_combo(self, subset_options: str):
+        return (subset_options,)
+
+
+class MultiSelectNode:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "foo": (
+                    "COMBO",
+                    {
+                        "options": ["A", "B", "C"],
+                        "multi_select": {
+                            "placeholder": "Choose foos",
+                            "chip": True,
+                        },
+                    },
+                )
+            }
+        }
+
+    RETURN_TYPES = ("STRING",)
+    OUTPUT_IS_LIST = [True]
+    FUNCTION = "multi_select_node"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that outputs a multi select type"
+
+    def multi_select_node(self, foo: list[str]) -> list[str]:
+        return (foo,)
+
+
+class LoadAnimatedImageTest(nodes.LoadImage):
+    @classmethod
+    def INPUT_TYPES(s):
+        input_dir = folder_paths.get_input_directory()
+        files = [
+            f
+            for f in os.listdir(input_dir)
+            if os.path.isfile(os.path.join(input_dir, f)) and f.endswith(".webp")
+        ]
+        files = folder_paths.filter_files_content_types(files, ["image"])
+        return {
+            "required": {"image": (sorted(files), {"animated_image_upload": True})},
+        }
+
+
+class NodeWithValidation:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {"int_input": ("INT",)},
+        }
+
+    @classmethod
+    def VALIDATE_INPUTS(cls, int_input: int):
+        if int_input < 0:
+            raise ValueError("int_input must be greater than 0")
+        return True
+
+    RETURN_TYPES = ()
+    FUNCTION = "execute"
+    CATEGORY = "DevTools"
+    DESCRIPTION = "A node that validates an input"
+    OUTPUT_NODE = True
+
+    def execute(self, int_input: int):
+        print(f"int_input: {int_input}")
+        return tuple()
+
+class NodeWithV2ComboInput:
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "combo_input": (
+                    "COMBO",
+                    {"options": ["A", "B"]},
+                ),
+            }
+        }
+
+    RETURN_TYPES = ("COMBO",)
+    FUNCTION = "node_with_v2_combo_input"
+    CATEGORY = "DevTools"
+    DESCRIPTION = (
+        "A node that outputs a combo type that adheres to the v2 combo input spec"
+    )
+
+    def node_with_v2_combo_input(self, combo_input: str):
+        return (combo_input,)
+
+
+NODE_CLASS_MAPPINGS = {
+    "DevToolsErrorRaiseNode": ErrorRaiseNode,
+    "DevToolsErrorRaiseNodeWithMessage": ErrorRaiseNodeWithMessage,
+    "DevToolsExperimentalNode": ExperimentalNode,
+    "DevToolsDeprecatedNode": DeprecatedNode,
+    "DevToolsLongComboDropdown": LongComboDropdown,
+    "DevToolsNodeWithOptionalInput": NodeWithOptionalInput,
+    "DevToolsNodeWithOptionalComboInput": NodeWithOptionalComboInput,
+    "DevToolsNodeWithOnlyOptionalInput": NodeWithOnlyOptionalInput,
+    "DevToolsNodeWithOutputList": NodeWithOutputList,
+    "DevToolsNodeWithForceInput": NodeWithForceInput,
+    "DevToolsNodeWithDefaultInput": NodeWithDefaultInput,
+    "DevToolsNodeWithStringInput": NodeWithStringInput,
+    "DevToolsNodeWithUnionInput": NodeWithUnionInput,
+    "DevToolsSimpleSlider": SimpleSlider,
+    "DevToolsNodeWithSeedInput": NodeWithSeedInput,
+    "DevToolsObjectPatchNode": ObjectPatchNode,
+    "DevToolsNodeWithBooleanInput": NodeWithBooleanInput,
+    "DevToolsRemoteWidgetNode": RemoteWidgetNode,
+    "DevToolsRemoteWidgetNodeWithParams": RemoteWidgetNodeWithParams,
+    "DevToolsRemoteWidgetNodeWithRefresh": RemoteWidgetNodeWithRefresh,
+    "DevToolsRemoteWidgetNodeWithRefreshButton": RemoteWidgetNodeWithRefreshButton,
+    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": RemoteWidgetNodeWithControlAfterRefresh,
+    "DevToolsNodeWithOutputCombo": NodeWithOutputCombo,
+    "DevToolsMultiSelectNode": MultiSelectNode,
+    "DevToolsLoadAnimatedImageTest": LoadAnimatedImageTest,
+    "DevToolsNodeWithValidation": NodeWithValidation,
+    "DevToolsNodeWithV2ComboInput": NodeWithV2ComboInput,
+}
+
+NODE_DISPLAY_NAME_MAPPINGS = {
+    "DevToolsErrorRaiseNode": "Raise Error",
+    "DevToolsErrorRaiseNodeWithMessage": "Raise Error with Message",
+    "DevToolsExperimentalNode": "Experimental Node",
+    "DevToolsDeprecatedNode": "Deprecated Node",
+    "DevToolsLongComboDropdown": "Long Combo Dropdown",
+    "DevToolsNodeWithOptionalInput": "Node With Optional Input",
+    "DevToolsNodeWithOptionalComboInput": "Node With Optional Combo Input",
+    "DevToolsNodeWithOnlyOptionalInput": "Node With Only Optional Input",
+    "DevToolsNodeWithOutputList": "Node With Output List",
+    "DevToolsNodeWithForceInput": "Node With Force Input",
+    "DevToolsNodeWithDefaultInput": "Node With Default Input",
+    "DevToolsNodeWithStringInput": "Node With String Input",
+    "DevToolsNodeWithUnionInput": "Node With Union Input",
+    "DevToolsSimpleSlider": "Simple Slider",
+    "DevToolsNodeWithSeedInput": "Node With Seed Input",
+    "DevToolsObjectPatchNode": "Object Patch Node",
+    "DevToolsNodeWithBooleanInput": "Node With Boolean Input",
+    "DevToolsRemoteWidgetNode": "Remote Widget Node",
+    "DevToolsRemoteWidgetNodeWithParams": "Remote Widget Node With Sort Query Param",
+    "DevToolsRemoteWidgetNodeWithRefresh": "Remote Widget Node With 300ms Refresh",
+    "DevToolsRemoteWidgetNodeWithRefreshButton": "Remote Widget Node With Refresh Button",
+    "DevToolsRemoteWidgetNodeWithControlAfterRefresh": "Remote Widget Node With Refresh Button and Control After Refresh",
+    "DevToolsNodeWithOutputCombo": "Node With Output Combo",
+    "DevToolsMultiSelectNode": "Multi Select Node",
+    "DevToolsLoadAnimatedImageTest": "Load Animated Image",
+    "DevToolsNodeWithValidation": "Node With Validation",
+    "DevToolsNodeWithV2ComboInput": "Node With V2 Combo Input",
+}
\ No newline at end of file
diff --git a/tools/devtools/fake_model.safetensors b/tools/devtools/fake_model.safetensors
new file mode 100644
index 0000000000..825ba255da
--- /dev/null
+++ b/tools/devtools/fake_model.safetensors
@@ -0,0 +1 @@
+This is a fake model file used for testing.
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index b1710b28fd..75926b9435 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "downlevelIteration": true,
     "noImplicitOverride": true,
     "allowJs": true,
+    "verbatimModuleSyntax": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
@@ -28,13 +29,13 @@
     "rootDir": "./"
   },
   "include": [
-    "src/**/*",
+    ".storybook/**/*",
+    "eslint.config.ts",
+    "global.d.ts",
+    "knip.config.ts",
     "src/**/*.vue",
+    "src/**/*",
     "src/types/**/*.d.ts",
     "tests-ui/**/*",
-    "global.d.ts",
-    "eslint.config.ts",
-    "vite.config.mts",
-    ".storybook/**/*"
   ]
 }
diff --git a/vite.config.mts b/vite.config.mts
index 0ca0622730..25cd730aae 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -31,7 +31,8 @@ export default defineConfig({
       ignored: [
         '**/coverage/**',
         '**/playwright-report/**',
-        '**/*.{test,spec}.ts'
+        '**/*.{test,spec}.ts',
+        '*.config.{ts,mts}'
       ]
     },
     proxy: {
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
index 88413e38f6..8ec68a64fc 100644
--- a/vite.electron.config.mts
+++ b/vite.electron.config.mts
@@ -1,5 +1,5 @@
-import { Plugin, defineConfig } from 'vite'
-import { mergeConfig } from 'vite'
+import { defineConfig, mergeConfig } from 'vite'
+import type { Plugin } from 'vite'
 
 import baseConfig from './vite.config.mts'
 
diff --git a/vitest.config.ts b/vitest.config.ts
index 36fdb1a001..02565497ef 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -32,7 +32,8 @@ export default defineConfig({
       '**/.{idea,git,cache,output,temp}/**',
       '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*',
       'src/lib/litegraph/test/**'
-    ]
+    ],
+    silent: 'passed-only'
   },
   resolve: {
     alias: {