diff --git a/.claude/commands/comprehensive-pr-review.md b/.claude/commands/comprehensive-pr-review.md
index 84708564e..1b4047e78 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/.env_example b/.env_example
index a6987ae26..520521fe0 100644
--- a/.env_example
+++ b/.env_example
@@ -33,4 +33,3 @@ DISABLE_VUE_PLUGINS=false
 # Algolia credentials required for developing with the new custom node manager.
 ALGOLIA_APP_ID=4E0RO38HS8
 ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
-
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 8decf07cd..06139b08a 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -7,3 +7,21 @@ c53f197de2a3e0fa66b16dedc65c131235c1c4b6
 
 # Reorganize renderer components into domain-driven folder structure
 c8a83a9caede7bdb5f8598c5492b07d08c339d49
+
+# Domain-driven design (DDD) refactors - September 2025
+# These commits reorganized the codebase into domain-driven architecture
+
+# [refactor] Improve renderer domain organization (#5552)
+6349ceee6c0a57fc7992e85635def9b6e22eaeb2
+
+# [refactor] Improve settings domain organization (#5550)  
+4c8c4a1ad4f53354f700a33ea1b95262aeda2719
+
+# [refactor] Improve workflow domain organization (#5584)
+ca312fd1eab540cc4ddc0e3d244d38b3858574f0
+
+# [refactor] Move thumbnail functionality to renderer/core domain (#5586)
+e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
+
+# [refactor] Improve updates/notifications domain organization (#5590)
+27ab355f9c73415dc39f4d3f512b02308f847801
diff --git a/.gitattributes b/.gitattributes
index de05efbf4..bd0518cde 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 3f4b93242..178bd4ee8 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,11 +201,18 @@ jobs:
         if: steps.check-existing.outputs.skip != 'true' && steps.backport.outputs.success
         env:
           GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+          PR_NUMBER: ${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
         run: |
-          PR_TITLE="${{ github.event.pull_request.title }}"
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-
+          # 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}"
 
@@ -166,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 a5617c196..f46e9b7ac 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/publish-frontend-types.yaml b/.github/workflows/publish-frontend-types.yaml
new file mode 100644
index 000000000..142a22a93
--- /dev/null
+++ b/.github/workflows/publish-frontend-types.yaml
@@ -0,0 +1,139 @@
+name: Publish Frontend Types
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (e.g., 1.26.7)'
+        required: true
+        type: string
+      dist_tag:
+        description: 'npm dist-tag to use'
+        required: true
+        default: latest
+        type: string
+      ref:
+        description: 'Git ref to checkout (commit SHA, tag, or branch)'
+        required: false
+        type: string
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        type: string
+      dist_tag:
+        required: false
+        type: string
+        default: latest
+      ref:
+        required: false
+        type: string
+
+concurrency:
+  group: publish-frontend-types-${{ github.workflow }}-${{ inputs.version }}-${{ inputs.dist_tag }}
+  cancel-in-progress: false
+
+jobs:
+  publish_types_manual:
+    name: Publish @comfyorg/comfyui-frontend-types
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Validate inputs
+        shell: bash
+        run: |
+          set -euo pipefail
+          VERSION="${{ inputs.version }}"
+          SEMVER_REGEX='^(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)(-((0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*)(\.(0|[1-9][0-9]*|[0-9]*[A-Za-z-][0-9A-Za-z-]*))*))?(\+([0-9A-Za-z-]+(\.[0-9A-Za-z-]+)*))?$'
+          if [[ ! "$VERSION" =~ $SEMVER_REGEX ]]; then
+            echo "::error title=Invalid version::Version '$VERSION' must follow semantic versioning (x.y.z[-suffix][+build])" >&2
+            exit 1
+          fi
+
+      - name: Determine ref to checkout
+        id: resolve_ref
+        shell: bash
+        run: |
+          set -euo pipefail
+          REF="${{ inputs.ref }}"
+          VERSION="${{ inputs.version }}"
+          if [ -n "$REF" ]; then
+            if ! git check-ref-format --allow-onelevel "$REF"; then
+              echo "::error title=Invalid ref::Ref '$REF' fails git check-ref-format validation." >&2
+              exit 1
+            fi
+            echo "ref=$REF" >> "$GITHUB_OUTPUT"
+          else
+            echo "ref=refs/tags/v$VERSION" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ steps.resolve_ref.outputs.ref }}
+          fetch-depth: 1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+      - name: Build types
+        run: pnpm build:types
+
+      - name: Verify version matches input
+        id: verify
+        shell: bash
+        run: |
+          PKG_VERSION=$(node -p "require('./package.json').version")
+          TYPES_PKG_VERSION=$(node -p "require('./dist/package.json').version")
+          if [ "$PKG_VERSION" != "${{ inputs.version }}" ]; then
+            echo "Error: package.json version $PKG_VERSION does not match input ${{ inputs.version }}" >&2
+            exit 1
+          fi
+          if [ "$TYPES_PKG_VERSION" != "${{ inputs.version }}" ]; then
+            echo "Error: dist/package.json version $TYPES_PKG_VERSION does not match input ${{ inputs.version }}" >&2
+            exit 1
+          fi
+          echo "version=${{ inputs.version }}" >> $GITHUB_OUTPUT
+
+      - name: Check if version already on npm
+        id: check_npm
+        shell: bash
+        run: |
+          set -euo pipefail
+          NAME=$(node -p "require('./dist/package.json').name")
+          VER="${{ steps.verify.outputs.version }}"
+          STATUS=0
+          OUTPUT=$(npm view "${NAME}@${VER}" --json 2>&1) || STATUS=$?
+          if [ "$STATUS" -eq 0 ]; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "::warning title=Already published::${NAME}@${VER} already exists on npm. Skipping publish."
+          else
+            if echo "$OUTPUT" | grep -q "E404"; then
+              echo "exists=false" >> "$GITHUB_OUTPUT"
+            else
+              echo "::error title=Registry lookup failed::$OUTPUT" >&2
+              exit "$STATUS"
+            fi
+          fi
+
+      - name: Publish package
+        if: steps.check_npm.outputs.exists == 'false'
+        run: pnpm publish --access public --tag "${{ inputs.dist_tag }}" --no-git-checks
+        working-directory: dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 8958ce147..c359e3da4 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -18,7 +18,7 @@ jobs:
       is_prerelease: ${{ steps.check_prerelease.outputs.is_prerelease }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -73,7 +73,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Download dist artifact
         uses: actions/download-artifact@v4
         with:
@@ -98,7 +98,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Download dist artifact
         uses: actions/download-artifact@v4
         with:
@@ -126,34 +126,8 @@ jobs:
 
   publish_types:
     needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 'lts/*'
-          cache: 'pnpm'
-          registry-url: https://registry.npmjs.org
-
-      - name: Cache tool outputs
-        uses: actions/cache@v4
-        with:
-          path: |
-            .cache
-            tsconfig.tsbuildinfo
-            dist
-          key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            types-tools-cache-${{ runner.os }}-
-
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm build:types
-      - name: Publish package
-        run: pnpm publish --access public
-        working-directory: dist
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    uses: ./.github/workflows/publish-frontend-types.yaml
+    with:
+      version: ${{ needs.build.outputs.version }}
+      ref: ${{ github.event.pull_request.merge_commit_sha }}
+    secrets: inherit
diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/test-ui.yaml
index f8f6cf955..4f05a6d26 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
@@ -229,7 +227,13 @@ jobs:
 
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: npx playwright test --project=${{ matrix.browser }} --reporter=html
+        run: |
+          # Run tests with both HTML and JSON reporters
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          npx playwright test --project=${{ matrix.browser }} \
+            --reporter=list \
+            --reporter=html \
+            --reporter=json
         working-directory: ComfyUI_frontend
 
       - uses: actions/upload-artifact@v4
@@ -275,7 +279,12 @@ jobs:
           merge-multiple: true
 
       - name: Merge into HTML Report
-        run: npx playwright merge-reports --reporter html ./all-blob-reports
+        run: |
+          # Generate HTML report
+          npx playwright merge-reports --reporter=html ./all-blob-reports
+          # Generate JSON report separately with explicit output path
+          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
+          npx playwright merge-reports --reporter=json ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report
diff --git a/.github/workflows/update-electron-types.yaml b/.github/workflows/update-electron-types.yaml
index 0dfcdea34..96f85f6b0 100644
--- a/.github/workflows/update-electron-types.yaml
+++ b/.github/workflows/update-electron-types.yaml
@@ -40,7 +40,7 @@ jobs:
       - name: Get new version
         id: get-version
         run: |
-          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].version')
+          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].dependencies."@comfyorg/comfyui-electron-types".version')
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
diff --git a/.gitignore b/.gitignore
index 100bcd13e..e5bb5f107 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/
@@ -51,7 +54,7 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
-browser-tests/local/
+browser_tests/local/
 
 .env
 
@@ -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 0429c3578..2efe5f966 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/.npmrc b/.npmrc
new file mode 100644
index 000000000..ae90f7051
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+ignore-workspace-root-check=true
diff --git a/.storybook/main.ts b/.storybook/main.ts
index a799ec143..aa6bb1fbd 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 747bbe802..bfe81f431 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)
+
+  // Create Pinia instance
   const pinia = createPinia()
+
   app.use(pinia)
-
-  // Initialize stores
-  useColorPaletteStore(pinia)
-  useWidgetStore(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 8d4e4a90f..cd1b4e508 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 ede6a303a..ce0ed1f36 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 000000000..9b665191d
--- /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 c32dd3937..19796f4c4 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -5,13 +5,14 @@ import dotenv from 'dotenv'
 import * as fs from 'fs'
 
 import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
-import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
+import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
@@ -144,6 +145,7 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
+  public readonly vueNodes: VueNodeHelpers
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -172,6 +174,7 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
+    this.vueNodes = new VueNodeHelpers(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -1421,7 +1424,7 @@ export class ComfyPage {
   }
 
   async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click()
+    await this.page.locator('.p-dialog-close-button').click({ force: true })
     await expect(this.page.locator('.p-dialog')).toBeHidden()
   }
 
@@ -1640,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 62a961375..ff0735e17 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
new file mode 100644
index 000000000..b51750299
--- /dev/null
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -0,0 +1,117 @@
+/**
+ * Vue Node Test Helpers
+ */
+import type { Locator, Page } from '@playwright/test'
+
+export class VueNodeHelpers {
+  constructor(private page: Page) {}
+
+  /**
+   * Get locator for all Vue node components in the DOM
+   */
+  get nodes(): Locator {
+    return this.page.locator('[data-node-id]')
+  }
+
+  /**
+   * Get locator for selected Vue node components (using visual selection indicators)
+   */
+  get selectedNodes(): Locator {
+    return this.page.locator(
+      '[data-node-id].outline-black, [data-node-id].outline-white'
+    )
+  }
+
+  /**
+   * 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
+   */
+  async getNodeCount(): Promise<number> {
+    return await this.nodes.count()
+  }
+
+  /**
+   * Get count of selected Vue nodes
+   */
+  async getSelectedNodeCount(): Promise<number> {
+    return await this.selectedNodes.count()
+  }
+
+  /**
+   * Get all Vue node IDs currently in the DOM
+   */
+  async getNodeIds(): Promise<string[]> {
+    return await this.nodes.evaluateAll((nodes) =>
+      nodes
+        .map((n) => n.getAttribute('data-node-id'))
+        .filter((id): id is string => id !== null)
+    )
+  }
+
+  /**
+   * Select a specific Vue node by ID
+   */
+  async selectNode(nodeId: string): Promise<void> {
+    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
+  }
+
+  /**
+   * Select multiple Vue nodes by IDs using Ctrl+click
+   */
+  async selectNodes(nodeIds: string[]): Promise<void> {
+    if (nodeIds.length === 0) return
+
+    // Select first node normally
+    await this.selectNode(nodeIds[0])
+
+    // Add additional nodes with Ctrl+click
+    for (let i = 1; i < nodeIds.length; i++) {
+      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
+        modifiers: ['Control']
+      })
+    }
+  }
+
+  /**
+   * Clear all selections by clicking empty space
+   */
+  async clearSelection(): Promise<void> {
+    await this.page.mouse.click(50, 50)
+  }
+
+  /**
+   * Delete selected Vue nodes using Delete key
+   */
+  async deleteSelected(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Delete')
+  }
+
+  /**
+   * Delete selected Vue nodes using Backspace key
+   */
+  async deleteSelectedWithBackspace(): Promise<void> {
+    await this.page.locator('#graph-canvas').focus()
+    await this.page.keyboard.press('Backspace')
+  }
+
+  /**
+   * Wait for Vue nodes to be rendered
+   */
+  async waitForNodes(expectedCount?: number): Promise<void> {
+    if (expectedCount !== undefined) {
+      await this.page.waitForFunction(
+        (count) => document.querySelectorAll('[data-node-id]').length >= count,
+        expectedCount
+      )
+    } else {
+      await this.page.waitForSelector('[data-node-id]')
+    }
+  }
+}
diff --git a/browser_tests/fixtures/components/ComfyNodeSearchBox.ts b/browser_tests/fixtures/components/ComfyNodeSearchBox.ts
index 23dc104cf..fd40ca911 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 afaf86154..e9040a3a9 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 7baaa1ef9..f3fbe42cf 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 04a9117ce..6d0cd1fb3 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/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts
index c9bf88a91..4becc999c 100644
--- a/browser_tests/fixtures/utils/litegraphUtils.ts
+++ b/browser_tests/fixtures/utils/litegraphUtils.ts
@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
diff --git a/browser_tests/fixtures/ws.ts b/browser_tests/fixtures/ws.ts
index e12c53465..f1ab1a538 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 12033fce3..881ef11c4 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 47bab3db9..aeed77294 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 000000000..af6c10e9d
--- /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 a444a97c6..45010b979 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 d659e125a..c690b8702 100644
--- a/browser_tests/helpers/templates.ts
+++ b/browser_tests/helpers/templates.ts
@@ -1,10 +1,10 @@
-import { Locator, Page } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
 import path from 'path'
 
-import {
+import type {
   TemplateInfo,
   WorkflowTemplates
-} from '../../src/types/workflowTemplateTypes'
+} from '../../src/platform/workflow/templates/types/template'
 
 export class ComfyTemplates {
   readonly content: Locator
diff --git a/browser_tests/tests/actionbar.spec.ts b/browser_tests/tests/actionbar.spec.ts
index a504ea4fc..b23e4466d 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 24af9e8ac..7f3ed6a3d 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 7a32833e4..8e39154f1 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 db3397514..c47a4d19b 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 901cce913..6dd53c194 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 4225ad228..e271f2e15 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 3bcee65f0..cabb849e8 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 cf2e5e6be..7459acf58 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 91d53c407..6517b9170 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 90bc677fc..2b89be5c5 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 4adab98b6..075025a3a 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 7711ccf3b..38f4a6c1d 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/types/settingTypes'
+import type { SettingParams } from '../../src/platform/settings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {
@@ -247,7 +247,7 @@ test.describe('Topbar commands', () => {
   test.describe('Dialog', () => {
     test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
       await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
           .prompt({
             title: 'Test Prompt',
             message: 'Test Prompt Message'
@@ -267,7 +267,7 @@ test.describe('Topbar commands', () => {
       comfyPage
     }) => {
       await comfyPage.page.evaluate(() => {
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
           .confirm({
             title: 'Test Confirm',
             message: 'Test Confirm Message'
@@ -284,7 +284,7 @@ test.describe('Topbar commands', () => {
     test('Should allow dismissing a dialog', async ({ comfyPage }) => {
       await comfyPage.page.evaluate(() => {
         window['value'] = 'foo'
-        window['app'].extensionManager.dialog
+        void window['app'].extensionManager.dialog
           .confirm({
             title: 'Test Confirm',
             message: 'Test Confirm Message'
diff --git a/browser_tests/tests/featureFlags.spec.ts b/browser_tests/tests/featureFlags.spec.ts
index 73eb35f47..38286b399 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 25e166bab..cd89e92d5 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 9ae090975..daa165fa4 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 f5ca69e54..2736a50c5 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 af9081d0a..fd72c2d0a 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 41b50224a..9a2310231 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 de46bca2e..2fc753490 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 }) => {
@@ -1012,6 +1017,8 @@ test.describe('Canvas Navigation', () => {
   test('Shift + mouse wheel should pan canvas horizontally', async ({
     comfyPage
   }) => {
+    await comfyPage.setSetting('Comfy.Canvas.MouseWheelScroll', 'panning')
+
     await comfyPage.page.click('canvas')
     await comfyPage.nextFrame()
 
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png
index 57b6438ae..a9d0efb74 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-center-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png
index a9d0efb74..57a92edc5 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-left-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png
index 57b6438ae..e607294e3 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/standard-shift-wheel-pan-right-chromium-linux.png differ
diff --git a/browser_tests/tests/keybindings.spec.ts b/browser_tests/tests/keybindings.spec.ts
index ced293637..f4244ae66 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 8d8f6c2e8..184943fe0 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 678cb60f0..f091058d2 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 025347e4d..154ac3c16 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 984dd6ea1..111efe29c 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 2b76d4542..fdaae14bc 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/nodeHelp.spec.ts b/browser_tests/tests/nodeHelp.spec.ts
index 68ce7b8d5..764849286 100644
--- a/browser_tests/tests/nodeHelp.spec.ts
+++ b/browser_tests/tests/nodeHelp.spec.ts
@@ -46,7 +46,7 @@ test.describe('Node Help', () => {
 
       // Click the help button in the selection toolbox
       const helpButton = comfyPage.selectionToolbox.locator(
-        'button:has(.pi-question-circle)'
+        'button[data-testid="info-button"]'
       )
       await expect(helpButton).toBeVisible()
       await helpButton.click()
@@ -164,7 +164,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -194,7 +194,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -228,7 +228,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -276,7 +276,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -348,7 +348,7 @@ This is documentation for a custom node.
       }
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       if (await helpButton.isVisible()) {
         await helpButton.click()
@@ -389,7 +389,7 @@ This is documentation for a custom node.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -456,7 +456,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -479,7 +479,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -522,7 +522,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton.click()
 
@@ -538,7 +538,7 @@ This is English documentation.
 
       // Click help button again
       const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button:has(.pi-question-circle)'
+        '.selection-toolbox button[data-testid="info-button"]'
       )
       await helpButton2.click()
 
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts b/browser_tests/tests/nodeSearchBox.spec.ts
index 3c5e3cbe2..98ba33583 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 0f3d6a317..52dc57542 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 7fc408e8b..0584a3bec 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 4a390af96..7a54cae07 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']
@@ -190,7 +191,9 @@ test.describe('Remote COMBO Widget', () => {
       await comfyPage.page.keyboard.press('Control+A')
 
       await expect(
-        comfyPage.page.locator('.selection-toolbox .pi-refresh')
+        comfyPage.page.locator(
+          '.selection-toolbox button[data-testid="refresh-button"]'
+        )
       ).toBeVisible()
     })
 
diff --git a/browser_tests/tests/rerouteNode.spec.ts b/browser_tests/tests/rerouteNode.spec.ts
index 89fdf38b2..0b2b1e0f6 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 6e63295b8..a9e9926bf 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 db21ecd36..f7718122b 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/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png
index 9443182e3..2755d74c5 100644
Binary files a/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png and b/browser_tests/tests/rightClickMenu.spec.ts-snapshots/add-node-node-added-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts b/browser_tests/tests/selectionToolbox.spec.ts
index a9a5fc9c2..6b8576982 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/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png
index 7aa22906b..96f6507e1 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-nodes-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png
index 41bb283d9..af92221f3 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-multiple-selections-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
index a9d9bafce..f9b9b012c 100644
Binary files a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png and b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png differ
diff --git a/browser_tests/tests/selectionToolboxSubmenus.spec.ts b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
new file mode 100644
index 000000000..db6326152
--- /dev/null
+++ b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
@@ -0,0 +1,181 @@
+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)
+    await comfyPage.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
+    await comfyPage.selectNodes(['KSampler'])
+    await comfyPage.nextFrame()
+  })
+
+  const openMoreOptions = async (comfyPage: any) => {
+    const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
+    if (ksamplerNodes.length === 0) {
+      throw new Error('No KSampler nodes found')
+    }
+
+    // Drag the KSampler to the center of the screen
+    const nodePos = await ksamplerNodes[0].getPosition()
+    const viewportSize = comfyPage.page.viewportSize()
+    const centerX = viewportSize.width / 3
+    const centerY = viewportSize.height / 2
+    await comfyPage.dragAndDrop(
+      { x: nodePos.x, y: nodePos.y },
+      { x: centerX, y: centerY }
+    )
+    await comfyPage.nextFrame()
+
+    await ksamplerNodes[0].click('title')
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(500)
+
+    await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
+      timeout: 5000
+    })
+
+    const moreOptionsBtn = comfyPage.page.locator(
+      '[data-testid="more-options-button"]'
+    )
+    await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
+
+    await comfyPage.page.click('[data-testid="more-options-button"]')
+
+    await comfyPage.nextFrame()
+
+    const menuOptionsVisible = await comfyPage.page
+      .getByText('Rename')
+      .isVisible({ timeout: 2000 })
+      .catch(() => false)
+    if (menuOptionsVisible) {
+      return
+    }
+
+    await moreOptionsBtn.click({ force: true })
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(2000)
+
+    const menuOptionsVisibleAfterClick = await comfyPage.page
+      .getByText('Rename')
+      .isVisible({ timeout: 2000 })
+      .catch(() => false)
+    if (menuOptionsVisibleAfterClick) {
+      return
+    }
+
+    throw new Error('Could not open More Options menu - popover not showing')
+  }
+
+  test('opens Node Info from More Options menu', async ({ comfyPage }) => {
+    await openMoreOptions(comfyPage)
+    const nodeInfoButton = comfyPage.page.getByText('Node Info', {
+      exact: true
+    })
+    await expect(nodeInfoButton).toBeVisible()
+    await nodeInfoButton.click()
+    await comfyPage.nextFrame()
+  })
+
+  test('changes node shape via Shape submenu', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const initialShape = await nodeRef.getProperty<number>('shape')
+
+    await openMoreOptions(comfyPage)
+    await comfyPage.page.getByText('Shape', { exact: true }).click()
+    await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
+      timeout: 5000
+    })
+    await comfyPage.page.getByText('Box', { exact: true }).click()
+    await comfyPage.nextFrame()
+
+    const newShape = await nodeRef.getProperty<number>('shape')
+    expect(newShape).not.toBe(initialShape)
+    expect(newShape).toBe(1)
+  })
+
+  test('changes node color via Color submenu swatch', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    const initialColor = await nodeRef.getProperty<string | undefined>('color')
+
+    await openMoreOptions(comfyPage)
+    await comfyPage.page.getByText('Color', { exact: true }).click()
+    const blueSwatch = comfyPage.page.locator('[title="Blue"]')
+    await expect(blueSwatch.first()).toBeVisible({ timeout: 5000 })
+    await blueSwatch.first().click()
+    await comfyPage.nextFrame()
+
+    const newColor = await nodeRef.getProperty<string | undefined>('color')
+    expect(newColor).toBe('#223')
+    if (initialColor) {
+      expect(newColor).not.toBe(initialColor)
+    }
+  })
+
+  test('renames a node using Rename action', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
+    await openMoreOptions(comfyPage)
+    await comfyPage.page
+      .getByText('Rename', { exact: true })
+      .click({ force: true })
+    const input = comfyPage.page.locator(
+      '.group-title-editor.node-title-editor .editable-text input'
+    )
+    await expect(input).toBeVisible()
+    await input.fill('RenamedNode')
+    await input.press('Enter')
+    await comfyPage.nextFrame()
+    const newTitle = await nodeRef.getProperty<string>('title')
+    expect(newTitle).toBe('RenamedNode')
+  })
+
+  test('closes More Options menu when clicking outside', async ({
+    comfyPage
+  }) => {
+    await openMoreOptions(comfyPage)
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).toBeVisible({ timeout: 5000 })
+
+    await comfyPage.page
+      .locator('#graph-canvas')
+      .click({ position: { x: 0, y: 50 }, force: true })
+    await comfyPage.nextFrame()
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).not.toBeVisible()
+  })
+
+  test('closes More Options menu when clicking the button again (toggle)', async ({
+    comfyPage
+  }) => {
+    await openMoreOptions(comfyPage)
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).toBeVisible({ timeout: 5000 })
+
+    await comfyPage.page.evaluate(() => {
+      const btn = document.querySelector('[data-testid="more-options-button"]')
+      if (btn) {
+        const event = new MouseEvent('click', {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          detail: 1
+        })
+        btn.dispatchEvent(event)
+      }
+    })
+    await comfyPage.nextFrame()
+    await comfyPage.page.waitForTimeout(500)
+
+    await expect(
+      comfyPage.page.getByText('Rename', { exact: true })
+    ).not.toBeVisible()
+  })
+})
diff --git a/browser_tests/tests/sidebar/queue.spec.ts b/browser_tests/tests/sidebar/queue.spec.ts
index 2d9dd10ba..39e2ced6e 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 f2c2e2bb5..9141e9135 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/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png
index 719ec65e4..ce88325aa 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-card-after-hover-chromium-linux.png differ
diff --git a/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png b/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png
index b880fca84..bf1d18934 100644
Binary files a/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png and b/browser_tests/tests/templates.spec.ts-snapshots/template-card-before-hover-chromium-linux.png differ
diff --git a/browser_tests/tests/useSettingSearch.spec.ts b/browser_tests/tests/useSettingSearch.spec.ts
index 69a40ced9..a817616f8 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 d85f18723..eee6fda92 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 7a8ae5dd2..336e2672d 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
new file mode 100644
index 000000000..51b52e7ce
--- /dev/null
+++ b/browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts
@@ -0,0 +1,145 @@
+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
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setup()
+  })
+
+  test('Can select all and delete Vue nodes with Delete key', async ({
+    comfyPage
+  }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    // Get initial Vue node count
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    // Select all Vue nodes
+    await comfyPage.ctrlA()
+
+    // Verify all Vue nodes are selected
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(initialNodeCount)
+
+    // Delete with Delete key
+    await comfyPage.vueNodes.deleteSelected()
+
+    // Verify all Vue nodes were deleted
+    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(finalNodeCount).toBe(0)
+  })
+
+  test('Can select specific Vue node and delete it', async ({ comfyPage }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    // Get initial Vue node count
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(initialNodeCount).toBeGreaterThan(0)
+
+    // Get first Vue node ID and select it
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    await comfyPage.vueNodes.selectNode(nodeIds[0])
+
+    // Verify selection
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(1)
+
+    // Delete with Delete key
+    await comfyPage.vueNodes.deleteSelected()
+
+    // Verify one Vue node was deleted
+    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(finalNodeCount).toBe(initialNodeCount - 1)
+  })
+
+  test('Can select and delete Vue node with Backspace key', async ({
+    comfyPage
+  }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+
+    // Select first Vue node
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    await comfyPage.vueNodes.selectNode(nodeIds[0])
+
+    // Delete with Backspace key instead of Delete
+    await comfyPage.vueNodes.deleteSelectedWithBackspace()
+
+    // Verify Vue node was deleted
+    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(finalNodeCount).toBe(initialNodeCount - 1)
+  })
+
+  test('Delete key does not delete node when typing in Vue node widgets', async ({
+    comfyPage
+  }) => {
+    const initialNodeCount = await comfyPage.getGraphNodesCount()
+
+    // Find a text input widget in a Vue node
+    const textWidget = comfyPage.page
+      .locator('input[type="text"], textarea')
+      .first()
+
+    // Click on text widget to focus it
+    await textWidget.click()
+    await textWidget.fill('test text')
+
+    // Press Delete while focused on widget - should delete text, not node
+    await textWidget.press('Delete')
+
+    // Node count should remain the same
+    const finalNodeCount = await comfyPage.getGraphNodesCount()
+    expect(finalNodeCount).toBe(initialNodeCount)
+  })
+
+  test('Delete key does not delete node when nothing is selected', async ({
+    comfyPage
+  }) => {
+    await comfyPage.vueNodes.waitForNodes()
+
+    // Ensure no Vue nodes are selected
+    await comfyPage.vueNodes.clearSelection()
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(0)
+
+    // Press Delete key - should not crash and should handle gracefully
+    await comfyPage.page.keyboard.press('Delete')
+
+    // Vue node count should remain the same
+    const nodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(nodeCount).toBeGreaterThan(0)
+  })
+
+  test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.vueNodes.waitForNodes()
+    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
+
+    // Multi-select first two Vue nodes using Ctrl+click
+    const nodeIds = await comfyPage.vueNodes.getNodeIds()
+    const nodesToSelect = nodeIds.slice(0, 2)
+    await comfyPage.vueNodes.selectNodes(nodesToSelect)
+
+    // Verify expected nodes are selected
+    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
+    expect(selectedCount).toBe(nodesToSelect.length)
+
+    // Delete selected Vue nodes
+    await comfyPage.vueNodes.deleteSelected()
+
+    // Verify expected nodes were deleted
+    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
+    expect(finalNodeCount).toBe(initialNodeCount - nodesToSelect.length)
+  })
+})
diff --git a/browser_tests/tests/vueNodes/linkInteraction.spec.ts b/browser_tests/tests/vueNodes/linkInteraction.spec.ts
new file mode 100644
index 000000000..d6b1bccc1
--- /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 000000000..78e331b3c
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 000000000..2ed598ef8
--- /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 000000000..744e40594
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 000000000..5dfa61c19
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 000000000..8091e5d03
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 000000000..591c1d307
--- /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 000000000..74ec17cc9
--- /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 000000000..f4f8e10fe
--- /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 000000000..37dcfd37b
--- /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 b23faabfc..3b9c05784 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)
@@ -264,7 +268,13 @@ test.describe('Animated image widget', () => {
     expect(filename).toContain('animated_webp.webp')
   })
 
-  test('Can preview saved animated webp image', async ({ comfyPage }) => {
+  // FIXME: This test keeps flip-flopping because it relies on animated webp timing,
+  // which is inherently unreliable in CI environments. The test asset is an animated
+  // webp with 2 frames, and the test depends on animation frame timing to verify that
+  // animated webp images are properly displayed (as opposed to being treated as static webp).
+  // While the underlying functionality works (animated webp are correctly distinguished
+  // from static webp), the test is flaky due to timing dependencies with webp animation frames.
+  test.fixme('Can preview saved animated webp image', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/save_animated_webp')
 
     // Get position of the load animated webp node
@@ -312,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/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png b/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png
deleted file mode 100644
index 474fbb555..000000000
Binary files a/browser_tests/tests/widget.spec.ts-snapshots/animated-image-preview-saved-webp-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/tsconfig.json b/browser_tests/tsconfig.json
new file mode 100644
index 000000000..391298333
--- /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 3f795a219..5b7f4bec4 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 80ccb6c9f..bbbf14c2c 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 000000000..1c24810a8
--- /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/components.json b/components.json
new file mode 100644
index 000000000..5526f900d
--- /dev/null
+++ b/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/assets/css/style.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "composables": "@/composables",
+    "utils": "@/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/docs/adr/0004-fork-primevue-ui-library.md b/docs/adr/0004-fork-primevue-ui-library.md
new file mode 100644
index 000000000..02bd18736
--- /dev/null
+++ b/docs/adr/0004-fork-primevue-ui-library.md
@@ -0,0 +1,62 @@
+# 4. Fork PrimeVue UI Library
+
+Date: 2025-08-27
+
+## Status
+
+Rejected
+
+## Context
+
+ComfyUI's frontend requires modifications to PrimeVue components that cannot be achieved through the library's customization APIs. Two specific technical incompatibilities have been identified with the transform-based canvas architecture:
+
+**Screen Coordinate Hit-Testing Conflicts:**
+- PrimeVue components use `getBoundingClientRect()` for screen coordinate calculations that don't account for CSS transforms
+- The Slider component directly uses raw `pageX/pageY` coordinates ([lines 102-103](https://github.com/primefaces/primevue/blob/master/packages/primevue/src/slider/Slider.vue#L102-L103)) without transform-aware positioning
+- This breaks interaction in transformed coordinate spaces where screen coordinates don't match logical element positions
+
+**Virtual Canvas Scroll Interference:**
+- LiteGraph's infinite canvas uses scroll coordinates semantically for graph navigation via the `DragAndScale` coordinate system
+- PrimeVue overlay components automatically trigger `scrollIntoView` behavior which interferes with this virtual positioning
+- This issue is documented in [PrimeVue discussion #4270](https://github.com/orgs/primefaces/discussions/4270) where the feature request was made to disable this behavior
+
+**Historical Overlay Issues:**
+- Previous z-index positioning conflicts required manual workarounds (commit `6d4eafb0`) where PrimeVue Dialog components needed `autoZIndex: false` and custom mask styling, later resolved by removing PrimeVue's automatic z-index management entirely
+
+**Minimal Update Overhead:**
+- Analysis of git history shows only 2 PrimeVue version updates in 2+ years, indicating that upstream sync overhead is negligible for this project
+
+**Future Interaction System Requirements:**
+- The ongoing canvas architecture evolution will require more granular control over component interaction and event handling as the transform-based system matures
+- Predictable need for additional component modifications beyond current identified issues
+
+## Decision
+
+We will **NOT** fork PrimeVue. After evaluation, forking was determined to be unnecessarily complex and costly.
+
+**Rationale for Rejection:**
+
+- **Significant Implementation Complexity**: PrimeVue is structured as a monorepo ([primefaces/primevue](https://github.com/primefaces/primevue)) with significant code in a separate monorepo ([PrimeUIX](https://github.com/primefaces/primeuix)). Forking would require importing both repositories whole and selectively pruning or exempting components from our workspace tooling, adding substantial complexity.
+
+- **Alternative Solutions Available**: The modifications we identified (e.g., scroll interference issues, coordinate system conflicts) have less costly solutions that don't require maintaining a full fork. For example, coordinate issues could be addressed through event interception and synthetic event creation with scaled values.
+
+- **Maintenance Burden**: Ongoing maintenance and upgrades would be very painful, requiring manual conflict resolution and keeping pace with upstream changes across multiple repositories.
+
+- **Limited Tooling Support**: There isn't adequate tooling that provides the granularity needed to cleanly manage a PrimeVue fork within our existing infrastructure.
+
+## Consequences
+
+### Alternative Approach
+
+- **Use PrimeVue as External Dependency**: Continue using PrimeVue as a standard npm dependency
+- **Targeted Workarounds**: Implement specific solutions for identified issues (coordinate system conflicts, scroll interference) without forking the entire library
+- **Selective Component Replacement**: Use libraries like shadcn/ui to replace specific problematic PrimeVue components and adjust them to match our design system
+- **Upstream Engagement**: Continue engaging with PrimeVue community for feature requests and bug reports
+- **Maintain Flexibility**: Preserve ability to upgrade PrimeVue versions without fork maintenance overhead
+
+## Notes
+
+- Technical issues documented in the Context section remain valid concerns
+- Solutions will be pursued through targeted fixes rather than wholesale forking
+- Future re-evaluation possible if PrimeVue's architecture significantly changes or if alternative tooling becomes available
+- This decision prioritizes maintainability and development velocity over maximum customization control
diff --git a/docs/adr/README.md b/docs/adr/README.md
index 00e50a639..5f6e5c2cf 100644
--- a/docs/adr/README.md
+++ b/docs/adr/README.md
@@ -13,6 +13,7 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
+| [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
 
 ## Creating a New ADR
 
diff --git a/eslint.config.js b/eslint.config.ts
similarity index 65%
rename from eslint.config.js
rename to eslint.config.ts
index 7e3248b20..ab3bf09f5 100644
--- a/eslint.config.js
+++ b/eslint.config.ts
@@ -5,13 +5,14 @@ import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
+import { defineConfig } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
 
-export default [
-  {
-    files: ['src/**/*.{js,mjs,cjs,ts,vue}']
-  },
+const extraFileExtensions = ['.vue']
+
+export default defineConfig([
   {
     ignores: [
       'src/scripts/*',
@@ -24,35 +25,55 @@ export default [
     ]
   },
   {
+    files: ['./**/*.{ts,mts}'],
     languageOptions: {
       globals: {
         ...globals.browser,
         __COMFYUI_FRONTEND_VERSION__: 'readonly'
       },
-      parser: tseslint.parser,
       parserOptions: {
-        project: ['./tsconfig.json', './tsconfig.eslint.json'],
+        parser: tseslint.parser,
+        projectService: {
+          allowDefaultProject: [
+            'vite.config.mts',
+            'vite.electron.config.mts',
+            'vite.types.config.mts'
+          ]
+        },
+        tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
-        extraFileExtensions: ['.vue']
+        extraFileExtensions
+      }
+    }
+  },
+  {
+    files: ['./**/*.vue'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions
       }
     }
   },
   pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
+  tseslint.configs.recommended,
+  pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
-  {
-    files: ['src/**/*.vue'],
-    languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser
-      }
-    }
-  },
+  storybook.configs['flat/recommended'],
   {
     plugins: {
       'unused-imports': unusedImports,
+      // @ts-expect-error Bad types in the plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
@@ -60,10 +81,29 @@ export default [
       '@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
       'no-restricted-imports': [
         'error',
@@ -133,5 +173,13 @@ export default [
       ]
     }
   },
-  ...storybook.configs['flat/recommended']
-]
+  {
+    files: ['tests-ui/**/*'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { disallowTypeAnnotations: false }
+      ]
+    }
+  }
+])
diff --git a/index.html b/index.html
index de7710c63..8684af476 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 9df077d77..c91a67d56 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/lint-staged.config.js b/lint-staged.config.js
index 2d1a6f051..0f3808700 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -3,13 +3,13 @@ export default {
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
     ...formatAndEslint(stagedFiles),
-    'vue-tsc --noEmit'
+    'pnpm typecheck'
   ]
 }
 
 function formatAndEslint(fileNames) {
   return [
-    `eslint --fix ${fileNames.join(' ')}`,
-    `prettier --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
   ]
 }
diff --git a/package.json b/package.json
index 3ac3f0c35..6452e49c3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.2",
+  "version": "1.28.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -14,21 +14,24 @@
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
+    "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 --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:fix": "eslint src --fix --cache --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:no-cache": "eslint src --concurrency=$npm_package_config_eslint_concurrency",
-    "lint:fix:no-cache": "eslint src --fix --concurrency=$npm_package_config_eslint_concurrency",
+    "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",
     "knip:no-cache": "knip",
     "locale": "lobe-i18n locale",
@@ -37,14 +40,11 @@
     "storybook": "nx storybook -p 6006",
     "build-storybook": "storybook build"
   },
-  "config": {
-    "eslint_concurrency": "4"
-  },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.35.0",
     "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "@lobehub/i18n-cli": "^1.25.1",
     "@nx/eslint": "21.4.1",
     "@nx/playwright": "21.4.1",
@@ -67,11 +67,11 @@
     "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-storybook": "^9.1.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "^9.1.6",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "eslint-plugin-vue": "^10.4.0",
     "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
     "happy-dom": "^15.11.0",
@@ -82,28 +82,32 @@
     "lint-staged": "^15.2.7",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.6",
     "tailwindcss": "^4.1.12",
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
+    "tw-animate-css": "^1.3.8",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.42.0",
+    "typescript-eslint": "^8.44.0",
     "unplugin-icons": "^0.22.0",
     "unplugin-vue-components": "^0.28.0",
     "uuid": "^11.1.0",
     "vite": "^5.4.19",
-    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
-    "vue-tsc": "^2.1.10",
+    "vue-component-type-helpers": "^3.0.7",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.69",
+    "@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",
@@ -127,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",
@@ -143,8 +146,8 @@
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "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 000000000..5f315600b
--- /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 000000000..f20d1ea65
--- /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 000000000..78e3a3d1a
--- /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 000000000..60c7df181
--- /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 70c3a0c81..16c86a18a 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 b02da72dc..f0c3ab069 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,11 @@ importers:
         specifier: ^1.3.1
         version: 1.3.1
       '@comfyorg/comfyui-electron-types':
-        specifier: ^0.4.69
-        version: 0.4.69
+        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,18 +89,15 @@ 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
       dotenv:
         specifier: ^16.4.5
-        version: 16.4.5
+        version: 16.6.1
       es-toolkit:
         specifier: ^1.39.9
-        version: 1.39.9
+        version: 1.39.10
       extendable-media-recorder:
         specifier: ^9.2.27
         version: 9.2.27
@@ -134,12 +134,12 @@ importers:
       primevue:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.5.13(typescript@5.9.2))
+      reka-ui:
+        specifier: ^2.5.0
+        version: 2.5.0(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2))
       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
@@ -172,8 +172,8 @@ importers:
         version: 3.3.0(zod@3.24.1)
     devDependencies:
       '@eslint/js':
-        specifier: ^9.8.0
-        version: 9.12.0
+        specifier: ^9.35.0
+        version: 9.35.0
       '@iconify-json/lucide':
         specifier: ^1.2.66
         version: 1.2.66
@@ -181,8 +181,8 @@ importers:
         specifier: ^1.2.0
         version: 1.2.0
       '@intlify/eslint-plugin-vue-i18n':
-        specifier: ^3.2.0
-        version: 3.2.0(eslint@9.35.0(jiti@2.4.2))
+        specifier: ^4.1.0
+        version: 4.1.0(eslint@9.35.0(jiti@2.4.2))(jsonc-eslint-parser@2.4.0)(vue-eslint-parser@10.2.0(eslint@9.35.0(jiti@2.4.2)))(yaml-eslint-parser@1.3.0)
       '@lobehub/i18n-cli':
         specifier: ^1.25.1
         version: 1.25.1(@types/react@19.1.9)(typescript@5.9.2)(use-sync-external-store@1.5.0(react@19.1.1))(ws@8.18.3)(zod@3.24.1)
@@ -194,7 +194,7 @@ importers:
         version: 21.4.1(@babel/traverse@7.28.3)(@playwright/test@1.52.0)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/storybook':
         specifier: 21.4.1
-        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@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)))(typescript@5.9.2)
+        version: 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(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)))(typescript@5.9.2)
       '@nx/vite':
         specifier: 21.4.1
         version: 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vitest@3.2.4)
@@ -206,13 +206,13 @@ importers:
         version: 1.52.0
       '@storybook/addon-docs':
         specifier: ^9.1.1
-        version: 9.1.1(@types/react@19.1.9)(storybook@9.1.1(@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)))
+        version: 9.1.1(@types/react@19.1.9)(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)))
       '@storybook/vue3':
         specifier: ^9.1.1
-        version: 9.1.1(storybook@9.1.1(@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)))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(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)))(vue@3.5.13(typescript@5.9.2))
       '@storybook/vue3-vite':
         specifier: ^9.1.1
-        version: 9.1.1(storybook@9.1.1(@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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
+        version: 9.1.1(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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))
       '@tailwindcss/vite':
         specifier: ^4.1.12
         version: 4.1.12(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
@@ -250,20 +250,20 @@ importers:
         specifier: ^9.34.0
         version: 9.35.0(jiti@2.4.2)
       eslint-config-prettier:
-        specifier: ^10.1.2
-        version: 10.1.2(eslint@9.35.0(jiti@2.4.2))
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-prettier:
-        specifier: ^5.2.6
-        version: 5.2.6(eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2)
+        specifier: ^5.5.4
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2)
       eslint-plugin-storybook:
-        specifier: ^9.1.1
-        version: 9.1.1(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.1(@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)))(typescript@5.9.2)
+        specifier: ^9.1.6
+        version: 9.1.6(eslint@9.35.0(jiti@2.4.2))(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)))(typescript@5.9.2)
       eslint-plugin-unused-imports:
-        specifier: ^4.1.4
-        version: 4.1.4(@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
+        specifier: ^4.2.0
+        version: 4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))
       eslint-plugin-vue:
-        specifier: ^9.27.0
-        version: 9.27.0(eslint@9.35.0(jiti@2.4.2))
+        specifier: ^10.4.0
+        version: 10.4.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(vue-eslint-parser@10.2.0(eslint@9.35.0(jiti@2.4.2)))
       fs-extra:
         specifier: ^11.2.0
         version: 11.2.0
@@ -295,8 +295,8 @@ importers:
         specifier: ^3.3.2
         version: 3.3.2
       storybook:
-        specifier: ^9.1.1
-        version: 9.1.1(@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))
+        specifier: ^9.1.6
+        version: 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))
       tailwindcss:
         specifier: ^4.1.12
         version: 4.1.12
@@ -306,18 +306,21 @@ importers:
       tsx:
         specifier: ^4.15.6
         version: 4.19.4
+      tw-animate-css:
+        specifier: ^1.3.8
+        version: 1.3.8
       typescript:
         specifier: ^5.4.5
         version: 5.9.2
       typescript-eslint:
-        specifier: ^8.42.0
-        version: 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+        specifier: ^8.44.0
+        version: 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       unplugin-icons:
         specifier: ^0.22.0
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
       unplugin-vue-components:
         specifier: ^0.28.0
-        version: 0.28.0(@babel/parser@7.28.3)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
+        version: 0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -325,8 +328,8 @@ importers:
         specifier: ^5.4.19
         version: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
       vite-plugin-dts:
-        specifier: ^4.3.0
-        version: 4.3.0(@types/node@20.14.10)(rollup@4.22.4)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+        specifier: ^4.5.4
+        version: 4.5.4(@types/node@20.14.10)(rollup@4.22.4)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
@@ -336,9 +339,15 @@ 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))
       vue-tsc:
-        specifier: ^2.1.10
-        version: 2.1.10(typescript@5.9.2)
+        specifier: ^3.0.7
+        version: 3.0.7(typescript@5.9.2)
       zip-dir:
         specifier: ^2.0.0
         version: 2.0.0
@@ -346,6 +355,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':
@@ -541,6 +563,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.28.4':
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1':
     resolution: {integrity: sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==}
     engines: {node: '>=6.9.0'}
@@ -959,10 +986,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.27.6':
-    resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.28.4':
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
@@ -979,12 +1002,16 @@ packages:
     resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.28.4':
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
-  '@comfyorg/comfyui-electron-types@0.4.69':
-    resolution: {integrity: sha512-emEapJvbbx8lXiJ/84gmk+fYU73MmqkQKgBDQkyDwctcOb+eNe347PaH/+0AIjX8A/DtFHfnwgh9J8k3RVdqZA==}
+  '@comfyorg/comfyui-electron-types@0.4.73-0':
+    resolution: {integrity: sha512-WlItGJQx9ZWShNG9wypx3kq+19pSig/U+s5sD2SAeEcMph4u8A/TS+lnRgdKhT58VT1uD7cMcj2SJpfdBPNWvw==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -1311,12 +1338,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.8.0':
     resolution: {integrity: sha512-MJQFqrZgcW0UNYLGOuQpey/oTN59vyWwplvCGZztn1cKz9agZPPYpJB7h2OMmuu7VLqkvEjN8feFZJmxNF9D+Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1339,18 +1360,10 @@ packages:
     resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.1.0':
-    resolution: {integrity: sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/eslintrc@3.3.1':
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.12.0':
-    resolution: {integrity: sha512-eohesHH8WFRUprDNyEREgqP6beG6htMeUYeCpkEgBCieCMme5r9zFWjzAJp//9S+Kub4rqE+jXe9Cp1a7IYIIA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/js@9.35.0':
     resolution: {integrity: sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1573,6 +1586,18 @@ packages:
   '@firebase/webchannel-wrapper@1.0.3':
     resolution: {integrity: sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==}
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@floating-ui/vue@1.1.9':
+    resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
+
   '@grpc/grpc-js@1.9.15':
     resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
     engines: {node: ^8.13.0 || >=10.10.0}
@@ -1613,20 +1638,41 @@ packages:
   '@iconify/utils@2.3.0':
     resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
+  '@internationalized/date@3.9.0':
+    resolution: {integrity: sha512-yaN3brAnHRD+4KyyOsJyk49XUvj2wtbNACSqg0bz3u8t2VuzhC8Q5dfRnrSxjnnbDb+ienBnkn1TzQfE154vyg==}
+
+  '@internationalized/number@3.6.5':
+    resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
+
+  '@intlify/core-base@11.1.12':
+    resolution: {integrity: sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==}
+    engines: {node: '>= 16'}
+
   '@intlify/core-base@9.14.3':
     resolution: {integrity: sha512-nbJ7pKTlXFnaXPblyfiH6awAx1C0PWNNuqXAR74yRwgi5A/Re/8/5fErLY0pv4R8+EHj3ZaThMHdnuC/5OBa6g==}
     engines: {node: '>= 16'}
 
-  '@intlify/eslint-plugin-vue-i18n@3.2.0':
-    resolution: {integrity: sha512-TOIrD4tJE48WMyVIB8bNeQJJPYo1Prpqnm9Xpn1UZmcqlELhm8hmP8QyJnkgesfbG7hyiX/kvo63W7ClEQmhpg==}
+  '@intlify/eslint-plugin-vue-i18n@4.1.0':
+    resolution: {integrity: sha512-MPAr3LGTrkB5CZBHN5eUf4kASUEiSaDM371jADmxNbTL1Ew7IAyCIBGm3+/1sWcvsfVHe4wz8RFoo6FpeQZ4Nw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       eslint: ^8.0.0 || ^9.0.0-0
+      jsonc-eslint-parser: ^2.3.0
+      vue-eslint-parser: ^10.0.0
+      yaml-eslint-parser: ^1.2.2
+
+  '@intlify/message-compiler@11.1.12':
+    resolution: {integrity: sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==}
+    engines: {node: '>= 16'}
 
   '@intlify/message-compiler@9.14.3':
     resolution: {integrity: sha512-ANwC226BQdd+MpJ36rOYkChSESfPwu3Ss2Faw0RHTOknYLoHTX6V6e/JjIKVDMbzs0/H/df/rO6yU0SPiWHqNg==}
     engines: {node: '>= 16'}
 
+  '@intlify/shared@11.1.12':
+    resolution: {integrity: sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==}
+    engines: {node: '>= 16'}
+
   '@intlify/shared@9.14.3':
     resolution: {integrity: sha512-hJXz9LA5VG7qNE00t50bdzDv8Z4q9fpcL81wj4y4duKavrv0KM8YNLTwXNEFINHjTsfrG9TXvPuEjVaAvZ7yWg==}
     engines: {node: '>= 16'}
@@ -1676,9 +1722,6 @@ packages:
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
-  '@jridgewell/sourcemap-codec@1.5.0':
-    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
@@ -1703,11 +1746,11 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@microsoft/api-extractor-model@7.30.0':
-    resolution: {integrity: sha512-26/LJZBrsWDKAkOWRiQbdVgcfd1F3nyJnAiJzsAgpouPk7LtOIj7PK9aJtBaw/pUXrkotEg27RrT+Jm/q0bbug==}
+  '@microsoft/api-extractor-model@7.30.7':
+    resolution: {integrity: sha512-TBbmSI2/BHpfR9YhQA7nH0nqVmGgJ0xH0Ex4D99/qBDAUpnhA2oikGmdXanbw9AWWY/ExBYIpkmY8dBHdla3YQ==}
 
-  '@microsoft/api-extractor@7.48.0':
-    resolution: {integrity: sha512-FMFgPjoilMUWeZXqYRlJ3gCVRhB7WU/HN88n8OLqEsmsG4zBdX/KQdtJfhq95LQTQ++zfu0Em1LLb73NqRCLYQ==}
+  '@microsoft/api-extractor@7.52.13':
+    resolution: {integrity: sha512-K6/bBt8zZfn9yc06gNvA+/NlBGJC/iJlObpdufXHEJtqcD4Dln4ITCLZpwP3DNZ5NyBFeTkKdv596go3V72qlA==}
     hasBin: true
 
   '@microsoft/tsdoc-config@0.17.1':
@@ -1948,12 +1991,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@pkgr/core@0.1.2':
-    resolution: {integrity: sha512-fdDH1LSGfZdTH2sxdpVMw31BanV28K/Gry0cVFxaNP77neJSkd82mM8ErPNYs9e+0O7SdHBLTDzDgwUuy18RnQ==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-
-  '@pkgr/core@0.2.2':
-    resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
   '@playwright/test@1.52.0':
@@ -2053,6 +2092,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.22.4':
     resolution: {integrity: sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==}
     cpu: [arm]
@@ -2133,8 +2181,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/node-core-library@5.10.0':
-    resolution: {integrity: sha512-2pPLCuS/3x7DCd7liZkqOewGM0OzLyCacdvOe8j6Yrx9LkETGnxul1t7603bIaB8nUAooORcct9fFDOQMbWAgw==}
+  '@rushstack/node-core-library@5.14.0':
+    resolution: {integrity: sha512-eRong84/rwQUlATGFW3TMTYVyqL1vfW9Lf10PH+mVGfIb9HzU3h5AASNIw+axnBLjnD0n3rT5uQBwu9fvzATrg==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
@@ -2144,16 +2192,16 @@ packages:
   '@rushstack/rig-package@0.5.3':
     resolution: {integrity: sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==}
 
-  '@rushstack/terminal@0.14.3':
-    resolution: {integrity: sha512-csXbZsAdab/v8DbU1sz7WC2aNaKArcdS/FPmXMOXEj/JBBZMvDK0+1b4Qao0kkG0ciB1Qe86/Mb68GjH6/TnMw==}
+  '@rushstack/terminal@0.16.0':
+    resolution: {integrity: sha512-WEvNuKkoR1PXorr9SxO0dqFdSp1BA+xzDrIm/Bwlc5YHg2FFg6oS+uCTYjerOhFuqCW+A3vKBm6EmKWSHfgx/A==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@4.23.1':
-    resolution: {integrity: sha512-40jTmYoiu/xlIpkkRsVfENtBq4CW3R4azbL0Vmda+fMwHWqss6wwf/Cy/UJmMqIzpfYc2OTnjYP1ZLD3CmyeCA==}
+  '@rushstack/ts-command-line@5.0.3':
+    resolution: {integrity: sha512-bgPhQEqLVv/2hwKLYv/XvsTWNZ9B/+X1zJ7WgQE9rO5oiLzrOZvkIW4pk13yOQBhHyjcND5qMOa6p83t+Z66iQ==}
 
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
@@ -2246,6 +2294,9 @@ packages:
       storybook: ^9.1.1
       vue: ^3.0.0
 
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
   '@tailwindcss/node@4.1.12':
     resolution: {integrity: sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==}
 
@@ -2336,6 +2387,14 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@tanstack/vue-virtual@3.13.12':
+    resolution: {integrity: sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -2612,103 +2671,69 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@types/webxr@0.5.20':
     resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
 
-  '@typescript-eslint/eslint-plugin@8.42.0':
-    resolution: {integrity: sha512-Aq2dPqsQkxHOLfb2OPv43RnIvfj05nw8v/6n3B2NABIPpHnjQnaLo9QGMTvml+tv4korl/Cjfrb/BYhoL8UUTQ==}
+  '@typescript-eslint/eslint-plugin@8.44.0':
+    resolution: {integrity: sha512-EGDAOGX+uwwekcS0iyxVDmRV9HX6FLSM5kzrAToLTsr9OWCIKG/y3lQheCq18yZ5Xh78rRKJiEpP0ZaCs4ryOQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.42.0
+      '@typescript-eslint/parser': ^8.44.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.42.0':
-    resolution: {integrity: sha512-r1XG74QgShUgXph1BYseJ+KZd17bKQib/yF3SR+demvytiRXrwd12Blnz5eYGm8tXaeRdd4x88MlfwldHoudGg==}
+  '@typescript-eslint/parser@8.44.0':
+    resolution: {integrity: sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.39.0':
-    resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
+  '@typescript-eslint/project-service@8.44.0':
+    resolution: {integrity: sha512-ZeaGNraRsq10GuEohKTo4295Z/SuGcSq2LzfGlqiuEvfArzo/VRrT0ZaJsVPuKZ55lVbNk8U6FcL+ZMH8CoyVA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.42.0':
-    resolution: {integrity: sha512-vfVpLHAhbPjilrabtOSNcUDmBboQNrJUiNAGoImkZKnMjs2TIcWG33s4Ds0wY3/50aZmTMqJa6PiwkwezaAklg==}
+  '@typescript-eslint/scope-manager@8.44.0':
+    resolution: {integrity: sha512-87Jv3E+al8wpD+rIdVJm/ItDBe/Im09zXIjFoipOjr5gHUhJmTzfFLuTJ/nPTMc2Srsroy4IBXwcTCHyRR7KzA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.44.0':
+    resolution: {integrity: sha512-x5Y0+AuEPqAInc6yd0n5DAcvtoQ/vyaGwuX5HE9n6qAefk1GaedqrLQF8kQGylLUb9pnZyLf+iEiL9fr8APDtQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.39.0':
-    resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/scope-manager@8.42.0':
-    resolution: {integrity: sha512-51+x9o78NBAVgQzOPd17DkNTnIzJ8T/O2dmMBLoK9qbY0Gm52XJcdJcCl18ExBMiHo6jPMErUQWUv5RLE51zJw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.39.0':
-    resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/tsconfig-utils@8.42.0':
-    resolution: {integrity: sha512-kHeFUOdwAJfUmYKjR3CLgZSglGHjbNTi1H8sTYRYV2xX6eNz4RyJ2LIgsDLKf8Yi0/GL1WZAC/DgZBeBft8QAQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/type-utils@8.42.0':
-    resolution: {integrity: sha512-9KChw92sbPTYVFw3JLRH1ockhyR3zqqn9lQXol3/YbI6jVxzWoGcT3AsAW0mu1MY0gYtsXnUGV/AKpkAj5tVlQ==}
+  '@typescript-eslint/type-utils@8.44.0':
+    resolution: {integrity: sha512-9cwsoSxJ8Sak67Be/hD2RNt/fsqmWnNE1iHohG8lxqLSNY8xNfyY7wloo5zpW3Nu9hxVgURevqfcH6vvKCt6yg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.39.0':
-    resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
+  '@typescript-eslint/types@8.44.0':
+    resolution: {integrity: sha512-ZSl2efn44VsYM0MfDQe68RKzBz75NPgLQXuGypmym6QVOWL5kegTZuZ02xRAT9T+onqvM6T8CdQk0OwYMB6ZvA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.42.0':
-    resolution: {integrity: sha512-LdtAWMiFmbRLNP7JNeY0SqEtJvGMYSzfiWBSmx+VSZ1CH+1zyl8Mmw1TT39OrtsRvIYShjJWzTDMPWZJCpwBlw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.39.0':
-    resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
+  '@typescript-eslint/typescript-estree@8.44.0':
+    resolution: {integrity: sha512-lqNj6SgnGcQZwL4/SBJ3xdPEfcBuhCG8zdcwCPgYcmiPLgokiNDKlbPzCwEwu7m279J/lBYWtDYL+87OEfn8Jw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/typescript-estree@8.42.0':
-    resolution: {integrity: sha512-ku/uYtT4QXY8sl9EDJETD27o3Ewdi72hcXg1ah/kkUgBvAYHLwj2ofswFFNXS+FL5G+AGkxBtvGt8pFBHKlHsQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/utils@8.39.0':
-    resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
+  '@typescript-eslint/utils@8.44.0':
+    resolution: {integrity: sha512-nktOlVcg3ALo0mYlV+L7sWUD58KG4CMj1rb2HUVOO4aL3K/6wcD+NERqd0rrA5Vg06b42YhF6cFxeixsp9Riqg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.42.0':
-    resolution: {integrity: sha512-JnIzu7H3RH5BrKC4NoZqRfmjqCIS1u3hGZltDYJgkVdqAezl4L9d1ZLw+36huCujtSBSAirGINF/S4UxOcR+/g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-
-  '@typescript-eslint/visitor-keys@8.39.0':
-    resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/visitor-keys@8.42.0':
-    resolution: {integrity: sha512-3WbiuzoEowaEn8RSnhJBrxSwX8ULYE9CXaPepS2C2W3NSA5NNIvBaslpBSBElPq0UGr0xVJlXFWOAKIkyylydQ==}
+  '@typescript-eslint/visitor-keys@8.44.0':
+    resolution: {integrity: sha512-zaz9u8EJ4GBmnehlrpoKvj/E3dNbuQ7q0ucyZImm3cLqJ8INTc970B1qEqDX/Rzq65r3TvVTN7kHWPBoyW7DWw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@vitejs/plugin-vue@5.1.4':
@@ -2764,12 +2789,21 @@ packages:
   '@volar/language-core@2.4.15':
     resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
+  '@volar/language-core@2.4.23':
+    resolution: {integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==}
+
   '@volar/source-map@2.4.15':
     resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
+  '@volar/source-map@2.4.23':
+    resolution: {integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==}
+
   '@volar/typescript@2.4.15':
     resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
 
+  '@volar/typescript@2.4.23':
+    resolution: {integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==}
+
   '@vue/babel-helper-vue-transform-on@1.4.0':
     resolution: {integrity: sha512-mCokbouEQ/ocRce/FpKCRItGo+013tHg7tixg3DUNS+6bmIchPt66012kBMm476vyEIJPafrvOf4E5OYj3shSw==}
 
@@ -2789,9 +2823,15 @@ packages:
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
+  '@vue/compiler-core@3.5.21':
+    resolution: {integrity: sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==}
+
   '@vue/compiler-dom@3.5.13':
     resolution: {integrity: sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==}
 
+  '@vue/compiler-dom@3.5.21':
+    resolution: {integrity: sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==}
+
   '@vue/compiler-sfc@3.5.13':
     resolution: {integrity: sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==}
 
@@ -2815,16 +2855,8 @@ packages:
   '@vue/devtools-shared@7.7.6':
     resolution: {integrity: sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==}
 
-  '@vue/language-core@2.1.10':
-    resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@vue/language-core@2.1.6':
-    resolution: {integrity: sha512-MW569cSky9R/ooKMh6xa2g1D0AtRKbL56k83dzus/bx//RDJk24RHWkMzbAlXjMdDNyxAaagKPRquBIxkxlCkg==}
+  '@vue/language-core@2.2.0':
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -2839,6 +2871,14 @@ packages:
       typescript:
         optional: true
 
+  '@vue/language-core@3.0.7':
+    resolution: {integrity: sha512-0sqqyqJ0Gn33JH3TdIsZLCZZ8Gr4kwlg8iYOnOrDDkJKSjFurlQY/bEFQx5zs7SX2C/bjMkmPYq/NiyY1fTOkw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
@@ -2856,18 +2896,30 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@vue/shared@3.5.21':
+    resolution: {integrity: sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==}
+
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
   '@vueuse/core@11.0.0':
     resolution: {integrity: sha512-shibzNGjmRjZucEm97B8V0NO5J3vPHMCE/mltxQ3vHezbDoFQBMtK11XsfwfPionxSbo+buqPmsCljtYuXIBpw==}
 
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
   '@vueuse/metadata@11.0.0':
     resolution: {integrity: sha512-0TKsAVT0iUOAPWyc9N79xWYfovJVPATiOPVKByG6jmAYdDiwvMVm9xXJ5hp4I8nZDxpCcYlLq/Rg9w1Z/jrGcg==}
 
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
   '@vueuse/shared@11.0.0':
     resolution: {integrity: sha512-i4ZmOrIEjSsL94uAEt3hz88UCz93fMyP/fba9S+vypX90fKg3uYX9cThqvWc9aXxuTzR0UGhOKOTQd//Goh1nQ==}
 
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
   '@webgpu/types@0.1.51':
     resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
@@ -2916,11 +2968,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.14.1:
-    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -2970,12 +3017,15 @@ packages:
     resolution: {integrity: sha512-hexLq2lSO1K5SW9j21Ubc+q9Ptx7dyRTY7se19U8lhIlVMLCNXWCyQ6C22p9ez8ccX0v7QVmwkl2l1CnuGoO2Q==}
     engines: {node: '>= 14.0.0'}
 
-  alien-signals@0.2.2:
-    resolution: {integrity: sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==}
+  alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
 
   alien-signals@1.0.13:
     resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
 
+  alien-signals@2.0.7:
+    resolution: {integrity: sha512-wE7y3jmYeb0+h6mr5BOovuqhFv22O/MV9j5p0ndJsa7z1zJNPGQ4ph5pQk/kTTCWRC3xsA4SmtwmkzQO+7NCNg==}
+
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
 
@@ -3021,6 +3071,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -3322,9 +3376,6 @@ packages:
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
-  computeds@0.0.1:
-    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -3447,6 +3498,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
@@ -3491,6 +3551,9 @@ packages:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
 
+  defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -3657,9 +3720,6 @@ packages:
   es-toolkit@1.39.10:
     resolution: {integrity: sha512-E0iGnTtbDhkeczB0T+mxmoVlT4YNweEKBLq7oaU4p11mecdsZpNWOglI4895Vh4usbQ+LsJiuLuI2L0Vdmfm2w==}
 
-  es-toolkit@1.39.9:
-    resolution: {integrity: sha512-9OtbkZmTA2Qc9groyA1PUNeb6knVTkvB2RSdr/LcJXDL8IdEakaxwXLHXa7VX/Wj0GmdMJPR3WhnPGhiP3E+qg==}
-
   esbuild-register@3.6.0:
     resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
     peerDependencies:
@@ -3705,14 +3765,14 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  eslint-config-prettier@10.1.2:
-    resolution: {integrity: sha512-Epgp/EofAUeEpIdZkW60MHKvPyru1ruQJxPL+WIycnaPApuseK0Zpkrh/FwL9oIpQvIhJwV7ptOy0DWUjTlCiA==}
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-plugin-prettier@5.2.6:
-    resolution: {integrity: sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==}
+  eslint-plugin-prettier@5.5.4:
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       '@types/eslint': '>=8.0.0'
@@ -3725,15 +3785,15 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-storybook@9.1.1:
-    resolution: {integrity: sha512-g4/i9yW6cl4TCEMzYyALNvO3d/jB6TDvSs/Pmye7dHDrra2B7dgZJGzmEWILD62brVrLVHNoXgy2dNPtx80kmw==}
+  eslint-plugin-storybook@9.1.6:
+    resolution: {integrity: sha512-4NLf8lOT7Nl+m9aipVHJczyt/Dp6BzHzyNq4nhaEUjoZFGKMhPa52vSbuLyQYX7IrcrYPlM37X8dFGo/EIE9JA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^9.1.1
+      storybook: ^9.1.6
 
-  eslint-plugin-unused-imports@4.1.4:
-    resolution: {integrity: sha512-YptD6IzQjDardkl0POxnnRBhU1OEePMV0nd6siHaRBbd+lyh6NAhFEobiznKU7kTsSsDeSD62Pe7kAM1b7dAZQ==}
+  eslint-plugin-unused-imports@4.2.0:
+    resolution: {integrity: sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==}
     peerDependencies:
       '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
       eslint: ^9.0.0 || ^8.0.0
@@ -3741,15 +3801,16 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
 
-  eslint-plugin-vue@9.27.0:
-    resolution: {integrity: sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  eslint-plugin-vue@10.4.0:
+    resolution: {integrity: sha512-K6tP0dW8FJVZLQxa2S7LcE1lLw3X8VvB3t887Q6CLrFVxHYBXGANbXvwNzYIu6Ughx1bSJ5BDT0YB3ybPT39lw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
 
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
@@ -3776,10 +3837,6 @@ packages:
   esm-resolve@1.0.11:
     resolution: {integrity: sha512-LxF0wfUQm3ldUDHkkV2MIbvvY0TgzIpJ420jHSV1Dm+IlplBEWiJTKWM61GtxUfvjV6iD4OtTYFGAGM2uuIUWg==}
 
-  espree@10.2.0:
-    resolution: {integrity: sha512-upbkBJbckcCNBDBDXEbuhjbP68n+scUd3k/U2EkyM9nw+I/jPiL4cLF/Al06CF96wRltFda16sxDFrxsI1v0/g==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   espree@10.4.0:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3953,10 +4010,6 @@ packages:
       debug:
         optional: true
 
-  foreground-child@3.2.1:
-    resolution: {integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==}
-    engines: {node: '>=14'}
-
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
@@ -3995,9 +4048,9 @@ packages:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
 
-  fs-extra@7.0.1:
-    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
-    engines: {node: '>=6 <7 || >=8'}
+  fs-extra@11.3.2:
+    resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
+    engines: {node: '>=14.14'}
 
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -4068,10 +4121,6 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
-
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -4080,6 +4129,10 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
+  globals@16.4.0:
+    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+    engines: {node: '>=18'}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -4190,10 +4243,6 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
-  ignore@6.0.2:
-    resolution: {integrity: sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==}
-    engines: {node: '>= 4'}
-
   ignore@7.0.5:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
@@ -4201,10 +4250,6 @@ packages:
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
-  import-fresh@3.3.0:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
-    engines: {node: '>=6'}
-
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -4519,12 +4564,12 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
-  jsonfile@4.0.0:
-    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
-
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
   jsonify@0.0.1:
     resolution: {integrity: sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==}
 
@@ -4720,10 +4765,6 @@ packages:
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
-  lru-cache@10.3.0:
-    resolution: {integrity: sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==}
-    engines: {node: 14 || >=16.14}
-
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -4746,12 +4787,12 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
-
   magic-string@0.30.18:
     resolution: {integrity: sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==}
 
+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
@@ -4955,9 +4996,6 @@ packages:
     resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
     engines: {node: 20 || >=22}
 
-  minimatch@3.0.8:
-    resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -4999,6 +5037,9 @@ packages:
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -5108,6 +5149,9 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -5200,9 +5244,6 @@ packages:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
 
-  parse5@7.1.2:
-    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
-
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
@@ -5558,6 +5599,11 @@ packages:
     resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
+  reka-ui@2.5.0:
+    resolution: {integrity: sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
@@ -5598,10 +5644,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
-    hasBin: true
-
   restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -5750,8 +5792,8 @@ packages:
   std-env@3.9.0:
     resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
 
-  storybook@9.1.1:
-    resolution: {integrity: sha512-q6GaGZdVZh6rjOdGnc+4hGTu8ECyhyjQDw4EZNxKtQjDO8kqtuxbFm8l/IP2l+zLVJAatGWKkaX9Qcd7QZxz+Q==}
+  storybook@9.1.6:
+    resolution: {integrity: sha512-iIcMaDKkjR5nN+JYBy9hhoxZhjX4TXhyJgUBed+toJOlfrl+QvxpBjImAi7qKyLR3hng3uoigEP0P8+vYtXpOg==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -5854,16 +5896,16 @@ packages:
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  synckit@0.11.3:
-    resolution: {integrity: sha512-szhWDqNNI9etJUvbZ1/cx1StnZx8yMmFxme48SwR4dty4ioSY50KEZlpv0qAfgc1fpRzuh9hBXEzoCpJ779dLg==}
+  synckit@0.10.4:
+    resolution: {integrity: sha512-2SG1TnJGjMkD4+gblONMGYSrwAzYi+ymOitD+Jb/iMYm57nH20PlkVeMQRah3yDMKEa0QQYUF/QPWpdW7C6zNg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  synckit@0.9.3:
-    resolution: {integrity: sha512-JJoOEKTfL1urb1mDoEblhD9NhEbWmq9jHEMEnxoC4ujUaZ4itA8vKgwkFAyNClgxplLi9tsUKX+EduK0p/l7sg==}
+  synckit@0.11.11:
+    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==}
@@ -5995,14 +6037,13 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  tw-animate-css@1.3.8:
+    resolution: {integrity: sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
   type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
@@ -6011,15 +6052,15 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  typescript-eslint@8.42.0:
-    resolution: {integrity: sha512-ozR/rQn+aQXQxh1YgbCzQWDFrsi9mcg+1PM3l/z5o1+20P7suOIaNg515bpr/OYt6FObz/NHcBstydDLHWeEKg==}
+  typescript-eslint@8.44.0:
+    resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  typescript@5.4.2:
-    resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
+  typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -6039,6 +6080,9 @@ packages:
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+
   uint8array-extras@1.5.0:
     resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
     engines: {node: '>=18'}
@@ -6084,10 +6128,6 @@ packages:
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
-  universalify@0.1.2:
-    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
-    engines: {node: '>= 4.0.0'}
-
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -6184,9 +6224,8 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
-  vite-plugin-dts@4.3.0:
-    resolution: {integrity: sha512-LkBJh9IbLwL6/rxh0C1/bOurDrIEmRE7joC+jFdOEEciAFPbpEKOLSAr5nNh5R7CJ45cMbksTrFfy52szzC5eA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  vite-plugin-dts@4.5.4:
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
     peerDependencies:
       typescript: '*'
       vite: '*'
@@ -6297,8 +6336,11 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.0.6:
-    resolution: {integrity: sha512-6CRM8X7EJqWCJOiKPvSLQG+hJPb/Oy2gyJx3pLjUEhY7PuaCthQu3e0zAGI1lqUBobrrk9IT0K8sG2GsCluxoQ==}
+  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==}
@@ -6316,11 +6358,11 @@ packages:
     peerDependencies:
       vue: '>=2'
 
-  vue-eslint-parser@9.4.3:
-    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
-    engines: {node: ^14.17.0 || >=16.0.0}
+  vue-eslint-parser@10.2.0:
+    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: '>=6.0.0'
+      eslint: ^8.57.0 || ^9.0.0
 
   vue-i18n@9.14.3:
     resolution: {integrity: sha512-C+E0KE8ihKjdYCQx8oUkXX+8tBItrYNMnGJuzEPevBARQFUN2tKez6ZVOvBrWH0+KT5wEk3vOWjNk7ygb2u9ig==}
@@ -6338,8 +6380,8 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue-tsc@2.1.10:
-    resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
+  vue-tsc@3.0.7:
+    resolution: {integrity: sha512-BSMmW8GGEgHykrv7mRk6zfTdK+tw4MBZY/x6fFa7IkdXK3s/8hQRacPjG9/8YKFDIWGhBocwi6PlkQQ/93OgIQ==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
@@ -6474,18 +6516,6 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  ws@8.18.0:
-    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   ws@8.18.3:
     resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
     engines: {node: '>=10.0.0'}
@@ -6723,7 +6753,7 @@ snapshots:
 
   '@atlaskit/pragmatic-drag-and-drop@1.3.1':
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       bind-event-listener: 3.0.0
       raf-schd: 4.0.3
 
@@ -6885,6 +6915,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.2
 
+  '@babel/parser@7.28.4':
+    dependencies:
+      '@babel/types': 7.28.4
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1(@babel/core@7.27.1)':
     dependencies:
       '@babel/core': 7.27.1
@@ -7419,8 +7453,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/runtime@7.27.6': {}
-
   '@babel/runtime@7.28.4': {}
 
   '@babel/template@7.27.2':
@@ -7446,9 +7478,14 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@babel/types@7.28.4':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
   '@bcoe/v8-coverage@1.0.2': {}
 
-  '@comfyorg/comfyui-electron-types@0.4.69': {}
+  '@comfyorg/comfyui-electron-types@0.4.73-0': {}
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -7627,11 +7664,6 @@ snapshots:
   '@esbuild/win32-x64@0.25.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.35.0(jiti@2.4.2))':
-    dependencies:
-      eslint: 9.35.0(jiti@2.4.2)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/eslint-utils@4.8.0(eslint@9.35.0(jiti@2.4.2))':
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
@@ -7653,20 +7685,6 @@ snapshots:
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@3.1.0':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.2.0
-      globals: 14.0.0
-      ignore: 5.3.1
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
@@ -7681,8 +7699,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.12.0': {}
-
   '@eslint/js@9.35.0': {}
 
   '@eslint/object-schema@2.1.6': {}
@@ -8010,6 +8026,26 @@ snapshots:
 
   '@firebase/webchannel-wrapper@1.0.3': {}
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@floating-ui/vue@1.1.9(vue@3.5.13(typescript@5.9.2))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/utils': 0.2.10
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.9.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@grpc/grpc-js@1.9.15':
     dependencies:
       '@grpc/proto-loader': 0.7.13
@@ -8061,41 +8097,61 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@internationalized/date@3.9.0':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/number@3.6.5':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@intlify/core-base@11.1.12':
+    dependencies:
+      '@intlify/message-compiler': 11.1.12
+      '@intlify/shared': 11.1.12
+
   '@intlify/core-base@9.14.3':
     dependencies:
       '@intlify/message-compiler': 9.14.3
       '@intlify/shared': 9.14.3
 
-  '@intlify/eslint-plugin-vue-i18n@3.2.0(eslint@9.35.0(jiti@2.4.2))':
+  '@intlify/eslint-plugin-vue-i18n@4.1.0(eslint@9.35.0(jiti@2.4.2))(jsonc-eslint-parser@2.4.0)(vue-eslint-parser@10.2.0(eslint@9.35.0(jiti@2.4.2)))(yaml-eslint-parser@1.3.0)':
     dependencies:
-      '@eslint/eslintrc': 3.1.0
-      '@intlify/core-base': 9.14.3
-      '@intlify/message-compiler': 9.14.3
+      '@eslint/eslintrc': 3.3.1
+      '@intlify/core-base': 11.1.12
+      '@intlify/message-compiler': 11.1.12
       debug: 4.4.1
       eslint: 9.35.0(jiti@2.4.2)
       eslint-compat-utils: 0.6.5(eslint@9.35.0(jiti@2.4.2))
       glob: 10.4.5
-      globals: 15.15.0
-      ignore: 6.0.2
-      import-fresh: 3.3.0
+      globals: 16.4.0
+      ignore: 7.0.5
+      import-fresh: 3.3.1
       is-language-code: 3.1.0
       js-yaml: 4.1.0
       json5: 2.2.3
       jsonc-eslint-parser: 2.4.0
       lodash: 4.17.21
-      parse5: 7.1.2
+      parse5: 7.3.0
       semver: 7.7.2
-      synckit: 0.9.3
-      vue-eslint-parser: 9.4.3(eslint@9.35.0(jiti@2.4.2))
+      synckit: 0.10.4
+      vue-eslint-parser: 10.2.0(eslint@9.35.0(jiti@2.4.2))
       yaml-eslint-parser: 1.3.0
     transitivePeerDependencies:
       - supports-color
 
+  '@intlify/message-compiler@11.1.12':
+    dependencies:
+      '@intlify/shared': 11.1.12
+      source-map-js: 1.2.1
+
   '@intlify/message-compiler@9.14.3':
     dependencies:
       '@intlify/shared': 9.14.3
       source-map-js: 1.2.1
 
+  '@intlify/shared@11.1.12': {}
+
   '@intlify/shared@9.14.3': {}
 
   '@isaacs/balanced-match@4.0.1': {}
@@ -8144,8 +8200,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.30
 
-  '@jridgewell/sourcemap-codec@1.5.0': {}
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.30':
@@ -8158,7 +8212,7 @@ snapshots:
   '@lobehub/cli-ui@1.13.0(@types/react@19.1.9)':
     dependencies:
       arr-rotate: 1.0.0
-      chalk: 5.3.0
+      chalk: 5.6.0
       cli-spinners: 3.2.0
       consola: 3.4.2
       deepmerge: 4.3.1
@@ -8223,29 +8277,29 @@ snapshots:
       '@types/react': 19.1.9
       react: 19.1.1
 
-  '@microsoft/api-extractor-model@7.30.0(@types/node@20.14.10)':
+  '@microsoft/api-extractor-model@7.30.7(@types/node@20.14.10)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.10.0(@types/node@20.14.10)
+      '@rushstack/node-core-library': 5.14.0(@types/node@20.14.10)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.48.0(@types/node@20.14.10)':
+  '@microsoft/api-extractor@7.52.13(@types/node@20.14.10)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.30.0(@types/node@20.14.10)
+      '@microsoft/api-extractor-model': 7.30.7(@types/node@20.14.10)
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.10.0(@types/node@20.14.10)
+      '@rushstack/node-core-library': 5.14.0(@types/node@20.14.10)
       '@rushstack/rig-package': 0.5.3
-      '@rushstack/terminal': 0.14.3(@types/node@20.14.10)
-      '@rushstack/ts-command-line': 4.23.1(@types/node@20.14.10)
+      '@rushstack/terminal': 0.16.0(@types/node@20.14.10)
+      '@rushstack/ts-command-line': 5.0.3(@types/node@20.14.10)
       lodash: 4.17.21
-      minimatch: 3.0.8
-      resolve: 1.22.8
+      minimatch: 10.0.3
+      resolve: 1.22.10
       semver: 7.5.4
       source-map: 0.6.1
-      typescript: 5.4.2
+      typescript: 5.8.2
     transitivePeerDependencies:
       - '@types/node'
 
@@ -8344,7 +8398,7 @@ snapshots:
       '@babel/plugin-transform-runtime': 7.28.3(@babel/core@7.27.1)
       '@babel/preset-env': 7.28.3(@babel/core@7.27.1)
       '@babel/preset-typescript': 7.27.1(@babel/core@7.27.1)
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       '@nx/devkit': 21.4.1(nx@21.4.1)
       '@nx/workspace': 21.4.1
       '@zkochan/js-yaml': 0.0.7
@@ -8427,7 +8481,7 @@ snapshots:
       - typescript
       - verdaccio
 
-  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(storybook@9.1.1(@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)))(typescript@5.9.2)':
+  '@nx/storybook@21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(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)))(typescript@5.9.2)':
     dependencies:
       '@nx/cypress': 21.4.1(@babel/traverse@7.28.3)(@zkochan/js-yaml@0.0.7)(eslint@9.35.0(jiti@2.4.2))(nx@21.4.1)(typescript@5.9.2)
       '@nx/devkit': 21.4.1(nx@21.4.1)
@@ -8435,7 +8489,7 @@ snapshots:
       '@nx/js': 21.4.1(@babel/traverse@7.28.3)(nx@21.4.1)
       '@phenomnomnominal/tsquery': 5.0.1(typescript@5.9.2)
       semver: 7.7.2
-      storybook: 9.1.1(@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))
+      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))
       tslib: 2.8.1
     transitivePeerDependencies:
       - '@babel/traverse'
@@ -8566,9 +8620,7 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@pkgr/core@0.1.2': {}
-
-  '@pkgr/core@0.2.2': {}
+  '@pkgr/core@0.2.9': {}
 
   '@playwright/test@1.52.0':
     dependencies:
@@ -8661,6 +8713,14 @@ snapshots:
     optionalDependencies:
       rollup: 4.22.4
 
+  '@rollup/pluginutils@5.3.0(rollup@4.22.4)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.22.4
+
   '@rollup/rollup-android-arm-eabi@4.22.4':
     optional: true
 
@@ -8709,12 +8769,12 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.22.4':
     optional: true
 
-  '@rushstack/node-core-library@5.10.0(@types/node@20.14.10)':
+  '@rushstack/node-core-library@5.14.0(@types/node@20.14.10)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
       ajv-formats: 3.0.1(ajv@8.13.0)
-      fs-extra: 7.0.1
+      fs-extra: 11.3.2
       import-lazy: 4.0.0
       jju: 1.4.0
       resolve: 1.22.10
@@ -8727,16 +8787,16 @@ snapshots:
       resolve: 1.22.10
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.14.3(@types/node@20.14.10)':
+  '@rushstack/terminal@0.16.0(@types/node@20.14.10)':
     dependencies:
-      '@rushstack/node-core-library': 5.10.0(@types/node@20.14.10)
+      '@rushstack/node-core-library': 5.14.0(@types/node@20.14.10)
       supports-color: 8.1.1
     optionalDependencies:
       '@types/node': 20.14.10
 
-  '@rushstack/ts-command-line@4.23.1(@types/node@20.14.10)':
+  '@rushstack/ts-command-line@5.0.3(@types/node@20.14.10)':
     dependencies:
-      '@rushstack/terminal': 0.14.3(@types/node@20.14.10)
+      '@rushstack/terminal': 0.16.0(@types/node@20.14.10)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -8785,29 +8845,29 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(storybook@9.1.1(@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)))':
+  '@storybook/addon-docs@9.1.1(@types/react@19.1.9)(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)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@19.1.9)(react@19.1.1)
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@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)))
+      '@storybook/csf-plugin': 9.1.1(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)))
       '@storybook/icons': 1.4.0(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@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)))
+      '@storybook/react-dom-shim': 9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(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)))
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.1(@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))
+      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))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/builder-vite@9.1.1(storybook@9.1.1(@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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
+  '@storybook/builder-vite@9.1.1(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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.1(storybook@9.1.1(@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)))
-      storybook: 9.1.1(@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))
+      '@storybook/csf-plugin': 9.1.1(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)))
+      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))
       ts-dedent: 2.2.0
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
 
-  '@storybook/csf-plugin@9.1.1(storybook@9.1.1(@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)))':
+  '@storybook/csf-plugin@9.1.1(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)))':
     dependencies:
-      storybook: 9.1.1(@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))
+      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))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -8817,19 +8877,19 @@ snapshots:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
 
-  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(storybook@9.1.1(@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)))':
+  '@storybook/react-dom-shim@9.1.1(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(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)))':
     dependencies:
       react: 19.1.1
       react-dom: 19.1.1(react@19.1.1)
-      storybook: 9.1.1(@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))
+      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))
 
-  '@storybook/vue3-vite@9.1.1(storybook@9.1.1(@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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3-vite@9.1.1(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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
-      '@storybook/builder-vite': 9.1.1(storybook@9.1.1(@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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
-      '@storybook/vue3': 9.1.1(storybook@9.1.1(@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)))(vue@3.5.13(typescript@5.9.2))
+      '@storybook/builder-vite': 9.1.1(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)))(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
+      '@storybook/vue3': 9.1.1(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)))(vue@3.5.13(typescript@5.9.2))
       find-package-json: 1.2.0
       magic-string: 0.30.18
-      storybook: 9.1.1(@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))
+      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))
       typescript: 5.9.2
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
       vue-component-meta: 2.2.12(typescript@5.9.2)
@@ -8837,13 +8897,17 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@storybook/vue3@9.1.1(storybook@9.1.1(@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)))(vue@3.5.13(typescript@5.9.2))':
+  '@storybook/vue3@9.1.1(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)))(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.1(@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))
+      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.6
+      vue-component-type-helpers: 3.0.8
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
 
   '@tailwindcss/node@4.1.12':
     dependencies:
@@ -8916,6 +8980,13 @@ snapshots:
       tailwindcss: 4.1.12
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
 
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@tanstack/vue-virtual@3.13.12(vue@3.5.13(typescript@5.9.2))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      vue: 3.5.13(typescript@5.9.2)
+
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -9148,7 +9219,7 @@ snapshots:
     dependencies:
       '@types/node': 20.14.10
       '@types/tough-cookie': 4.0.5
-      parse5: 7.1.2
+      parse5: 7.3.0
 
   '@types/json-schema@7.0.15': {}
 
@@ -9223,16 +9294,18 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@types/webxr@0.5.20': {}
 
-  '@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/type-utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.42.0
+      '@typescript-eslint/parser': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/type-utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
       eslint: 9.35.0(jiti@2.4.2)
       graphemer: 1.4.0
       ignore: 7.0.5
@@ -9242,59 +9315,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.42.0
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
       debug: 4.4.1
       eslint: 9.35.0(jiti@2.4.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/project-service@8.44.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
       debug: 4.4.1
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.42.0(typescript@5.9.2)':
+  '@typescript-eslint/scope-manager@8.44.0':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.42.0
-      debug: 4.4.1
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
 
-  '@typescript-eslint/scope-manager@8.39.0':
-    dependencies:
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
-
-  '@typescript-eslint/scope-manager@8.42.0':
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/visitor-keys': 8.42.0
-
-  '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/tsconfig-utils@8.44.0(typescript@5.9.2)':
     dependencies:
       typescript: 5.9.2
 
-  '@typescript-eslint/tsconfig-utils@8.42.0(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
-      typescript: 5.9.2
-
-  '@typescript-eslint/type-utils@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       debug: 4.4.1
       eslint: 9.35.0(jiti@2.4.2)
       ts-api-utils: 2.1.0(typescript@5.9.2)
@@ -9302,16 +9357,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.39.0': {}
+  '@typescript-eslint/types@8.44.0': {}
 
-  '@typescript-eslint/types@8.42.0': {}
-
-  '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@8.44.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/project-service': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
+      '@typescript-eslint/project-service': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
       debug: 4.4.1
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -9322,52 +9375,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.42.0(typescript@5.9.2)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/visitor-keys': 8.42.0
-      debug: 4.4.1
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
-      minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.39.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.35.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      eslint: 9.35.0(jiti@2.4.2)
-      typescript: 5.9.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0(jiti@2.4.2))
-      '@typescript-eslint/scope-manager': 8.42.0
-      '@typescript-eslint/types': 8.42.0
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
       eslint: 9.35.0(jiti@2.4.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.39.0':
+  '@typescript-eslint/visitor-keys@8.44.0':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
-      eslint-visitor-keys: 4.2.1
-
-  '@typescript-eslint/visitor-keys@8.42.0':
-    dependencies:
-      '@typescript-eslint/types': 8.42.0
+      '@typescript-eslint/types': 8.44.0
       eslint-visitor-keys: 4.2.1
 
   '@vitejs/plugin-vue@5.1.4(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))(vue@3.5.13(typescript@5.9.2))':
@@ -9451,14 +9472,26 @@ snapshots:
     dependencies:
       '@volar/source-map': 2.4.15
 
+  '@volar/language-core@2.4.23':
+    dependencies:
+      '@volar/source-map': 2.4.23
+
   '@volar/source-map@2.4.15': {}
 
+  '@volar/source-map@2.4.23': {}
+
   '@volar/typescript@2.4.15':
     dependencies:
       '@volar/language-core': 2.4.15
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@volar/typescript@2.4.23':
+    dependencies:
+      '@volar/language-core': 2.4.23
+      path-browserify: 1.0.1
+      vscode-uri: 3.0.8
+
   '@vue/babel-helper-vue-transform-on@1.4.0': {}
 
   '@vue/babel-plugin-jsx@1.4.0(@babel/core@7.27.1)':
@@ -9496,11 +9529,24 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.21':
+    dependencies:
+      '@babel/parser': 7.28.4
+      '@vue/shared': 3.5.21
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.5.13':
     dependencies:
       '@vue/compiler-core': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/compiler-dom@3.5.21':
+    dependencies:
+      '@vue/compiler-core': 3.5.21
+      '@vue/shared': 3.5.21
+
   '@vue/compiler-sfc@3.5.13':
     dependencies:
       '@babel/parser': 7.28.3
@@ -9551,26 +9597,13 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.1.10(typescript@5.9.2)':
+  '@vue/language-core@2.2.0(typescript@5.9.2)':
     dependencies:
-      '@volar/language-core': 2.4.15
-      '@vue/compiler-dom': 3.5.13
+      '@volar/language-core': 2.4.23
+      '@vue/compiler-dom': 3.5.21
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.13
-      alien-signals: 0.2.2
-      minimatch: 9.0.5
-      muggle-string: 0.4.1
-      path-browserify: 1.0.1
-    optionalDependencies:
-      typescript: 5.9.2
-
-  '@vue/language-core@2.1.6(typescript@5.9.2)':
-    dependencies:
-      '@volar/language-core': 2.4.15
-      '@vue/compiler-dom': 3.5.13
-      '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.13
-      computeds: 0.0.1
+      '@vue/shared': 3.5.21
+      alien-signals: 0.4.14
       minimatch: 9.0.5
       muggle-string: 0.4.1
       path-browserify: 1.0.1
@@ -9590,6 +9623,19 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.2
 
+  '@vue/language-core@3.0.7(typescript@5.9.2)':
+    dependencies:
+      '@volar/language-core': 2.4.23
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.13
+      alien-signals: 2.0.7
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      typescript: 5.9.2
+
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
@@ -9614,6 +9660,8 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@vue/shared@3.5.21': {}
+
   '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.1
@@ -9629,8 +9677,19 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@12.8.2(typescript@5.9.2)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.2)
+      vue: 3.5.13(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@vueuse/metadata@11.0.0': {}
 
+  '@vueuse/metadata@12.8.2': {}
+
   '@vueuse/shared@11.0.0(vue@3.5.13(typescript@5.9.2))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.13(typescript@5.9.2))
@@ -9638,6 +9697,12 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@12.8.2(typescript@5.9.2)':
+    dependencies:
+      vue: 3.5.13(typescript@5.9.2)
+    transitivePeerDependencies:
+      - typescript
+
   '@webgpu/types@0.1.51': {}
 
   '@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
@@ -9669,18 +9734,12 @@ snapshots:
     dependencies:
       event-target-shim: 5.0.1
 
-  acorn-jsx@5.3.2(acorn@8.14.1):
-    dependencies:
-      acorn: 8.14.1
-
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
 
   acorn@7.4.1: {}
 
-  acorn@8.14.1: {}
-
   acorn@8.15.0: {}
 
   address@1.2.2: {}
@@ -9747,10 +9806,12 @@ snapshots:
       '@algolia/requester-fetch': 5.21.0
       '@algolia/requester-node-http': 5.21.0
 
-  alien-signals@0.2.2: {}
+  alien-signals@0.4.14: {}
 
   alien-signals@1.0.13: {}
 
+  alien-signals@2.0.7: {}
+
   ansi-align@3.0.1:
     dependencies:
       string-width: 4.2.3
@@ -9786,6 +9847,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -9821,7 +9886,7 @@ snapshots:
 
   automation-events@7.1.11:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       tslib: 2.8.1
 
   axios@1.11.0:
@@ -9843,7 +9908,7 @@ snapshots:
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       cosmiconfig: 7.1.0
       resolve: 1.22.10
 
@@ -9910,7 +9975,7 @@ snapshots:
     dependencies:
       ansi-align: 3.0.1
       camelcase: 8.0.0
-      chalk: 5.3.0
+      chalk: 5.6.0
       cli-boxes: 3.0.0
       string-width: 7.2.0
       type-fest: 4.41.0
@@ -9932,7 +9997,7 @@ snapshots:
 
   broker-factory@3.1.7:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       fast-unique-numbers: 9.0.22
       tslib: 2.8.1
       worker-factory: 7.0.43
@@ -10098,8 +10163,6 @@ snapshots:
 
   compare-versions@6.1.1: {}
 
-  computeds@0.0.1: {}
-
   concat-map@0.0.1: {}
 
   conf@13.1.0:
@@ -10220,6 +10283,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
   decimal.js@10.6.0: {}
 
   decode-named-character-reference@1.2.0:
@@ -10255,6 +10322,8 @@ snapshots:
 
   define-lazy-prop@3.0.0: {}
 
+  defu@6.1.4: {}
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
@@ -10319,7 +10388,7 @@ snapshots:
 
   dotenv-expand@11.0.7:
     dependencies:
-      dotenv: 16.4.5
+      dotenv: 16.6.1
 
   dotenv-expand@8.0.3: {}
 
@@ -10404,8 +10473,6 @@ snapshots:
 
   es-toolkit@1.39.10: {}
 
-  es-toolkit@1.39.9: {}
-
   esbuild-register@3.6.0(esbuild@0.25.5):
     dependencies:
       debug: 4.4.1
@@ -10484,52 +10551,46 @@ snapshots:
       eslint: 9.35.0(jiti@2.4.2)
       semver: 7.7.2
 
-  eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)):
+  eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
 
-  eslint-plugin-prettier@5.2.6(eslint-config-prettier@10.1.2(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2):
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.35.0(jiti@2.4.2)))(eslint@9.35.0(jiti@2.4.2))(prettier@3.3.2):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
       prettier: 3.3.2
       prettier-linter-helpers: 1.0.0
-      synckit: 0.11.3
+      synckit: 0.11.11
     optionalDependencies:
-      eslint-config-prettier: 10.1.2(eslint@9.35.0(jiti@2.4.2))
+      eslint-config-prettier: 10.1.8(eslint@9.35.0(jiti@2.4.2))
 
-  eslint-plugin-storybook@9.1.1(eslint@9.35.0(jiti@2.4.2))(storybook@9.1.1(@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)))(typescript@5.9.2):
+  eslint-plugin-storybook@9.1.6(eslint@9.35.0(jiti@2.4.2))(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)))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/utils': 8.39.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       eslint: 9.35.0(jiti@2.4.2)
-      storybook: 9.1.1(@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))
+      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))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
+  eslint-plugin-unused-imports@4.2.0(@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       eslint: 9.35.0(jiti@2.4.2)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
 
-  eslint-plugin-vue@9.27.0(eslint@9.35.0(jiti@2.4.2)):
+  eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(vue-eslint-parser@10.2.0(eslint@9.35.0(jiti@2.4.2))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.35.0(jiti@2.4.2))
+      '@eslint-community/eslint-utils': 4.8.0(eslint@9.35.0(jiti@2.4.2))
       eslint: 9.35.0(jiti@2.4.2)
-      globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.0
       semver: 7.7.2
-      vue-eslint-parser: 9.4.3(eslint@9.35.0(jiti@2.4.2))
+      vue-eslint-parser: 10.2.0(eslint@9.35.0(jiti@2.4.2))
       xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-scope@7.2.2:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -10584,12 +10645,6 @@ snapshots:
 
   esm-resolve@1.0.11: {}
 
-  espree@10.2.0:
-    dependencies:
-      acorn: 8.14.1
-      acorn-jsx: 5.3.2(acorn@8.14.1)
-      eslint-visitor-keys: 4.2.1
-
   espree@10.4.0:
     dependencies:
       acorn: 8.15.0
@@ -10598,8 +10653,8 @@ snapshots:
 
   espree@9.6.1:
     dependencies:
-      acorn: 8.14.1
-      acorn-jsx: 5.3.2(acorn@8.14.1)
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
@@ -10665,27 +10720,27 @@ snapshots:
 
   extendable-media-recorder-wav-encoder-broker@7.0.119:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       broker-factory: 3.1.7
       extendable-media-recorder-wav-encoder-worker: 8.0.116
       tslib: 2.8.1
 
   extendable-media-recorder-wav-encoder-worker@8.0.116:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       tslib: 2.8.1
       worker-factory: 7.0.43
 
   extendable-media-recorder-wav-encoder@7.0.129:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       extendable-media-recorder-wav-encoder-broker: 7.0.119
       extendable-media-recorder-wav-encoder-worker: 8.0.116
       tslib: 2.8.1
 
   extendable-media-recorder@9.2.27:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       media-encoder-host: 9.0.20
       multi-buffer-data-view: 6.0.22
       recorder-audio-worklet: 6.0.48
@@ -10711,7 +10766,7 @@ snapshots:
 
   fast-unique-numbers@9.0.22:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       tslib: 2.8.1
 
   fast-uri@3.0.3: {}
@@ -10809,11 +10864,6 @@ snapshots:
 
   follow-redirects@1.15.6: {}
 
-  foreground-child@3.2.1:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -10858,11 +10908,11 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
-  fs-extra@7.0.1:
+  fs-extra@11.3.2:
     dependencies:
       graceful-fs: 4.2.11
-      jsonfile: 4.0.0
-      universalify: 0.1.2
+      jsonfile: 6.2.0
+      universalify: 2.0.1
 
   fsevents@2.3.2:
     optional: true
@@ -10919,7 +10969,7 @@ snapshots:
 
   glob@10.4.5:
     dependencies:
-      foreground-child: 3.2.1
+      foreground-child: 3.3.1
       jackspeak: 3.4.0
       minimatch: 9.0.5
       minipass: 7.1.2
@@ -10939,14 +10989,12 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
-
   globals@14.0.0: {}
 
   globals@15.15.0: {}
 
+  globals@16.4.0: {}
+
   gopd@1.2.0: {}
 
   gpt-tokenizer@2.9.0: {}
@@ -10994,7 +11042,7 @@ snapshots:
 
   hosted-git-info@7.0.2:
     dependencies:
-      lru-cache: 10.3.0
+      lru-cache: 10.4.3
 
   html-encoding-sniffer@4.0.0:
     dependencies:
@@ -11048,17 +11096,10 @@ snapshots:
 
   ignore@5.3.1: {}
 
-  ignore@6.0.2: {}
-
   ignore@7.0.5: {}
 
   immediate@3.0.6: {}
 
-  import-fresh@3.3.0:
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
-
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -11163,7 +11204,7 @@ snapshots:
 
   is-language-code@3.1.0:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
 
   is-npm@6.0.0: {}
 
@@ -11343,7 +11384,7 @@ snapshots:
 
   jsonc-eslint-parser@2.4.0:
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.15.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       semver: 7.7.2
@@ -11353,14 +11394,16 @@ snapshots:
   jsondiffpatch@0.6.0:
     dependencies:
       '@types/diff-match-patch': 1.0.36
-      chalk: 5.3.0
+      chalk: 5.6.0
       diff-match-patch: 1.0.5
 
-  jsonfile@4.0.0:
+  jsonfile@6.1.0:
+    dependencies:
+      universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.1.0:
+  jsonfile@6.2.0:
     dependencies:
       universalify: 2.0.1
     optionalDependencies:
@@ -11517,7 +11560,7 @@ snapshots:
 
   local-pkg@1.1.2:
     dependencies:
-      mlly: 1.7.4
+      mlly: 1.8.0
       pkg-types: 2.3.0
       quansync: 0.2.11
 
@@ -11560,8 +11603,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  lru-cache@10.3.0: {}
-
   lru-cache@10.4.3: {}
 
   lru-cache@11.1.0: {}
@@ -11578,14 +11619,14 @@ snapshots:
 
   lz-string@1.5.0: {}
 
-  magic-string@0.30.17:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   magic-string@0.30.18:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@0.30.19:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.28.3
@@ -11730,7 +11771,7 @@ snapshots:
 
   media-encoder-host-broker@8.0.19:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       broker-factory: 3.1.7
       fast-unique-numbers: 9.0.22
       media-encoder-host-worker: 10.0.19
@@ -11738,14 +11779,14 @@ snapshots:
 
   media-encoder-host-worker@10.0.19:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       extendable-media-recorder-wav-encoder-broker: 7.0.119
       tslib: 2.8.1
       worker-factory: 7.0.43
 
   media-encoder-host@9.0.20:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       media-encoder-host-broker: 8.0.19
       media-encoder-host-worker: 10.0.19
       tslib: 2.8.1
@@ -11977,10 +12018,6 @@ snapshots:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
 
-  minimatch@3.0.8:
-    dependencies:
-      brace-expansion: 1.1.11
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -12015,11 +12052,18 @@ snapshots:
 
   mlly@1.7.4:
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.15.0
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.5.4
 
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
@@ -12028,7 +12072,7 @@ snapshots:
 
   multi-buffer-data-view@6.0.22:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       tslib: 2.8.1
 
   nanoid@3.3.8: {}
@@ -12146,6 +12190,8 @@ snapshots:
 
   object-keys@1.1.1: {}
 
+  ohash@2.0.11: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -12279,10 +12325,6 @@ snapshots:
 
   parse-ms@4.0.0: {}
 
-  parse5@7.1.2:
-    dependencies:
-      entities: 4.5.0
-
   parse5@7.3.0:
     dependencies:
       entities: 6.0.1
@@ -12306,7 +12348,7 @@ snapshots:
 
   path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.3.0
+      lru-cache: 10.4.3
       minipass: 7.1.2
 
   path-scurry@2.0.0:
@@ -12674,12 +12716,12 @@ snapshots:
 
   recorder-audio-worklet-processor@5.0.35:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       tslib: 2.8.1
 
   recorder-audio-worklet@6.0.48:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       broker-factory: 3.1.7
       fast-unique-numbers: 9.0.22
       recorder-audio-worklet-processor: 5.0.35
@@ -12722,6 +12764,23 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
+  reka-ui@2.5.0(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)):
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/vue': 1.1.9(vue@3.5.13(typescript@5.9.2))
+      '@internationalized/date': 3.9.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.12(vue@3.5.13(typescript@5.9.2))
+      '@vueuse/core': 12.8.2(typescript@5.9.2)
+      '@vueuse/shared': 12.8.2(typescript@5.9.2)
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.13(typescript@5.9.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   relateurl@0.2.7: {}
 
   remark-frontmatter@5.0.0:
@@ -12775,12 +12834,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@1.22.8:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
@@ -12923,13 +12976,13 @@ snapshots:
 
   standardized-audio-context@25.3.77:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       automation-events: 7.1.11
       tslib: 2.8.1
 
   std-env@3.9.0: {}
 
-  storybook@9.1.1(@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)):
+  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)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.4
@@ -12942,7 +12995,7 @@ snapshots:
       esbuild-register: 3.6.0(esbuild@0.25.5)
       recast: 0.23.11
       semver: 7.7.2
-      ws: 8.18.0
+      ws: 8.18.3
     optionalDependencies:
       prettier: 3.3.2
     transitivePeerDependencies:
@@ -13013,7 +13066,7 @@ snapshots:
 
   subscribable-things@2.1.53:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       rxjs-interop: 2.0.0
       tslib: 2.8.1
 
@@ -13039,17 +13092,16 @@ snapshots:
 
   symbol-tree@3.2.4: {}
 
-  synckit@0.11.3:
+  synckit@0.10.4:
     dependencies:
-      '@pkgr/core': 0.2.2
+      '@pkgr/core': 0.2.9
       tslib: 2.8.1
 
-  synckit@0.9.3:
+  synckit@0.11.11:
     dependencies:
-      '@pkgr/core': 0.1.2
-      tslib: 2.8.1
+      '@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:
@@ -13079,7 +13131,7 @@ snapshots:
   terser@5.39.2:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.14.1
+      acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -13171,28 +13223,28 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  tw-animate-css@1.3.8: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.20.2: {}
-
   type-fest@2.19.0: {}
 
   type-fest@4.41.0: {}
 
-  typescript-eslint@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
+  typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.42.0(@typescript-eslint/parser@8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.42.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.42.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
       eslint: 9.35.0(jiti@2.4.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.4.2: {}
+  typescript@5.8.2: {}
 
   typescript@5.8.3: {}
 
@@ -13202,6 +13254,8 @@ snapshots:
 
   ufo@1.5.4: {}
 
+  ufo@1.6.1: {}
+
   uint8array-extras@1.5.0: {}
 
   undici-types@5.26.5: {}
@@ -13252,8 +13306,6 @@ snapshots:
       unist-util-is: 6.0.0
       unist-util-visit-parents: 6.0.1
 
-  universalify@0.1.2: {}
-
   universalify@2.0.1: {}
 
   unplugin-icons@0.22.0(@vue/compiler-sfc@3.5.13):
@@ -13270,7 +13322,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.28.0(@babel/parser@7.28.3)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
+  unplugin-vue-components@0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.4(rollup@4.22.4)
@@ -13278,25 +13330,25 @@ snapshots:
       debug: 4.4.1
       fast-glob: 3.3.3
       local-pkg: 0.5.1
-      magic-string: 0.30.17
+      magic-string: 0.30.18
       minimatch: 9.0.5
       mlly: 1.7.4
       unplugin: 2.3.5
       vue: 3.5.13(typescript@5.9.2)
     optionalDependencies:
-      '@babel/parser': 7.28.3
+      '@babel/parser': 7.28.4
     transitivePeerDependencies:
       - rollup
       - supports-color
 
   unplugin@1.16.1:
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.15.0
       webpack-virtual-modules: 0.6.2
 
   unplugin@2.3.5:
     dependencies:
-      acorn: 8.14.1
+      acorn: 8.15.0
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
@@ -13309,7 +13361,7 @@ snapshots:
   update-notifier@7.3.1:
     dependencies:
       boxen: 8.0.1
-      chalk: 5.3.0
+      chalk: 5.6.0
       configstore: 7.0.0
       is-in-ci: 1.0.0
       is-installed-globally: 1.0.0
@@ -13367,17 +13419,17 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-dts@4.3.0(@types/node@20.14.10)(rollup@4.22.4)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
+  vite-plugin-dts@4.5.4(@types/node@20.14.10)(rollup@4.22.4)(typescript@5.9.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)):
     dependencies:
-      '@microsoft/api-extractor': 7.48.0(@types/node@20.14.10)
-      '@rollup/pluginutils': 5.1.4(rollup@4.22.4)
-      '@volar/typescript': 2.4.15
-      '@vue/language-core': 2.1.6(typescript@5.9.2)
+      '@microsoft/api-extractor': 7.52.13(@types/node@20.14.10)
+      '@rollup/pluginutils': 5.3.0(rollup@4.22.4)
+      '@volar/typescript': 2.4.23
+      '@vue/language-core': 2.2.0(typescript@5.9.2)
       compare-versions: 6.1.1
-      debug: 4.4.1
+      debug: 4.4.3
       kolorist: 1.8.0
-      local-pkg: 0.5.1
-      magic-string: 0.30.17
+      local-pkg: 1.1.2
+      magic-string: 0.30.19
       typescript: 5.9.2
     optionalDependencies:
       vite: 5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)
@@ -13392,7 +13444,7 @@ snapshots:
       colorette: 2.0.20
       connect-history-api-fallback: 1.6.0
       consola: 2.15.3
-      dotenv: 16.4.5
+      dotenv: 16.6.1
       dotenv-expand: 8.0.3
       ejs: 3.1.10
       fast-glob: 3.3.3
@@ -13517,7 +13569,9 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.0.6: {}
+  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:
@@ -13539,15 +13593,14 @@ snapshots:
       vue: 3.5.13(typescript@5.9.2)
       vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.5.13(typescript@5.9.2))
 
-  vue-eslint-parser@9.4.3(eslint@9.35.0(jiti@2.4.2)):
+  vue-eslint-parser@10.2.0(eslint@9.35.0(jiti@2.4.2)):
     dependencies:
       debug: 4.4.1
       eslint: 9.35.0(jiti@2.4.2)
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
       esquery: 1.6.0
-      lodash: 4.17.21
       semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
@@ -13568,11 +13621,10 @@ snapshots:
       '@vue/devtools-api': 6.6.3
       vue: 3.5.13(typescript@5.9.2)
 
-  vue-tsc@2.1.10(typescript@5.9.2):
+  vue-tsc@3.0.7(typescript@5.9.2):
     dependencies:
-      '@volar/typescript': 2.4.15
-      '@vue/language-core': 2.1.10(typescript@5.9.2)
-      semver: 7.7.2
+      '@volar/typescript': 2.4.23
+      '@vue/language-core': 3.0.7(typescript@5.9.2)
       typescript: 5.9.2
 
   vue@3.5.13(typescript@5.9.2):
@@ -13672,7 +13724,7 @@ snapshots:
 
   worker-factory@7.0.43:
     dependencies:
-      '@babel/runtime': 7.27.6
+      '@babel/runtime': 7.28.4
       fast-unique-numbers: 9.0.22
       tslib: 2.8.1
 
@@ -13696,8 +13748,6 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  ws@8.18.0: {}
-
   ws@8.18.3: {}
 
   xdg-basedir@5.1.0: {}
@@ -13719,7 +13769,7 @@ snapshots:
   yaml-eslint-parser@1.3.0:
     dependencies:
       eslint-visitor-keys: 3.4.3
-      yaml: 2.4.5
+      yaml: 2.8.1
 
   yaml@1.10.2: {}
 
diff --git a/public/assets/images/comfy-brand-mark.svg b/public/assets/images/comfy-brand-mark.svg
new file mode 100644
index 000000000..9056ae149
--- /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 000000000..c57f20b5d
Binary files /dev/null and b/public/assets/images/nvidia-logo-square.jpg differ
diff --git a/public/fonts/inter-latin-italic.woff2 b/public/fonts/inter-latin-italic.woff2
new file mode 100644
index 000000000..39eb63673
Binary files /dev/null and b/public/fonts/inter-latin-italic.woff2 differ
diff --git a/public/fonts/inter-latin-normal.woff2 b/public/fonts/inter-latin-normal.woff2
new file mode 100644
index 000000000..b0d0e2e5c
Binary files /dev/null and b/public/fonts/inter-latin-normal.woff2 differ
diff --git a/scripts/cicd/extract-playwright-counts.ts b/scripts/cicd/extract-playwright-counts.ts
new file mode 100755
index 000000000..ff6f44db3
--- /dev/null
+++ b/scripts/cicd/extract-playwright-counts.ts
@@ -0,0 +1,183 @@
+#!/usr/bin/env tsx
+import fs from 'fs'
+import path from 'path'
+
+interface TestStats {
+  expected?: number
+  unexpected?: number
+  flaky?: number
+  skipped?: number
+  finished?: number
+}
+
+interface ReportData {
+  stats?: TestStats
+}
+
+interface TestCounts {
+  passed: number
+  failed: number
+  flaky: number
+  skipped: number
+  total: number
+}
+
+/**
+ * Extract test counts from Playwright HTML report
+ * @param reportDir - Path to the playwright-report directory
+ * @returns Test counts { passed, failed, flaky, skipped, total }
+ */
+function extractTestCounts(reportDir: string): TestCounts {
+  const counts: TestCounts = {
+    passed: 0,
+    failed: 0,
+    flaky: 0,
+    skipped: 0,
+    total: 0
+  }
+
+  try {
+    // First, try to find report.json which Playwright generates with JSON reporter
+    const jsonReportFile = path.join(reportDir, 'report.json')
+    if (fs.existsSync(jsonReportFile)) {
+      const reportJson: ReportData = JSON.parse(
+        fs.readFileSync(jsonReportFile, 'utf-8')
+      )
+      if (reportJson.stats) {
+        const stats = reportJson.stats
+        counts.total = stats.expected || 0
+        counts.passed =
+          (stats.expected || 0) -
+          (stats.unexpected || 0) -
+          (stats.flaky || 0) -
+          (stats.skipped || 0)
+        counts.failed = stats.unexpected || 0
+        counts.flaky = stats.flaky || 0
+        counts.skipped = stats.skipped || 0
+        return counts
+      }
+    }
+
+    // Try index.html - Playwright HTML report embeds data in a script tag
+    const indexFile = path.join(reportDir, 'index.html')
+    if (fs.existsSync(indexFile)) {
+      const content = fs.readFileSync(indexFile, 'utf-8')
+
+      // Look for the embedded report data in various formats
+      // Format 1: window.playwrightReportBase64
+      let dataMatch = content.match(
+        /window\.playwrightReportBase64\s*=\s*["']([^"']+)["']/
+      )
+      if (dataMatch) {
+        try {
+          const decodedData = Buffer.from(dataMatch[1], 'base64').toString(
+            'utf-8'
+          )
+          const reportData: ReportData = JSON.parse(decodedData)
+
+          if (reportData.stats) {
+            const stats = reportData.stats
+            counts.total = stats.expected || 0
+            counts.passed =
+              (stats.expected || 0) -
+              (stats.unexpected || 0) -
+              (stats.flaky || 0) -
+              (stats.skipped || 0)
+            counts.failed = stats.unexpected || 0
+            counts.flaky = stats.flaky || 0
+            counts.skipped = stats.skipped || 0
+            return counts
+          }
+        } catch (e) {
+          // Continue to try other formats
+        }
+      }
+
+      // Format 2: window.playwrightReport
+      dataMatch = content.match(/window\.playwrightReport\s*=\s*({[\s\S]*?});/)
+      if (dataMatch) {
+        try {
+          // Use Function constructor instead of eval for safety
+          const reportData = new Function(
+            'return ' + dataMatch[1]
+          )() as ReportData
+
+          if (reportData.stats) {
+            const stats = reportData.stats
+            counts.total = stats.expected || 0
+            counts.passed =
+              (stats.expected || 0) -
+              (stats.unexpected || 0) -
+              (stats.flaky || 0) -
+              (stats.skipped || 0)
+            counts.failed = stats.unexpected || 0
+            counts.flaky = stats.flaky || 0
+            counts.skipped = stats.skipped || 0
+            return counts
+          }
+        } catch (e) {
+          // Continue to try other formats
+        }
+      }
+
+      // Format 3: Look for stats in the HTML content directly
+      // Playwright sometimes renders stats in the UI
+      const statsMatch = content.match(
+        /(\d+)\s+passed[^0-9]*(\d+)\s+failed[^0-9]*(\d+)\s+flaky[^0-9]*(\d+)\s+skipped/i
+      )
+      if (statsMatch) {
+        counts.passed = parseInt(statsMatch[1]) || 0
+        counts.failed = parseInt(statsMatch[2]) || 0
+        counts.flaky = parseInt(statsMatch[3]) || 0
+        counts.skipped = parseInt(statsMatch[4]) || 0
+        counts.total =
+          counts.passed + counts.failed + counts.flaky + counts.skipped
+        return counts
+      }
+
+      // Format 4: Try to extract from summary text patterns
+      const passedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+passed/i)
+      const failedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+failed/i)
+      const flakyMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+flaky/i)
+      const skippedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+skipped/i)
+      const totalMatch = content.match(
+        /(\d+)\s+(?:tests?|specs?)\s+(?:total|ran)/i
+      )
+
+      if (passedMatch) counts.passed = parseInt(passedMatch[1]) || 0
+      if (failedMatch) counts.failed = parseInt(failedMatch[1]) || 0
+      if (flakyMatch) counts.flaky = parseInt(flakyMatch[1]) || 0
+      if (skippedMatch) counts.skipped = parseInt(skippedMatch[1]) || 0
+      if (totalMatch) {
+        counts.total = parseInt(totalMatch[1]) || 0
+      } else if (
+        counts.passed ||
+        counts.failed ||
+        counts.flaky ||
+        counts.skipped
+      ) {
+        counts.total =
+          counts.passed + counts.failed + counts.flaky + counts.skipped
+      }
+    }
+  } catch (error) {
+    console.error(`Error reading report from ${reportDir}:`, error)
+  }
+
+  return counts
+}
+
+// Main execution
+const reportDir = process.argv[2]
+
+if (!reportDir) {
+  console.error('Usage: extract-playwright-counts.ts <report-directory>')
+  process.exit(1)
+}
+
+const counts = extractTestCounts(reportDir)
+
+// Output as JSON for easy parsing in shell script
+console.log(JSON.stringify(counts))
+
+export { extractTestCounts }
diff --git a/scripts/cicd/pr-playwright-deploy-and-comment.sh b/scripts/cicd/pr-playwright-deploy-and-comment.sh
index 767a7f514..aeab37c8e 100755
--- a/scripts/cicd/pr-playwright-deploy-and-comment.sh
+++ b/scripts/cicd/pr-playwright-deploy-and-comment.sh
@@ -58,6 +58,12 @@ if ! command -v wrangler > /dev/null 2>&1; then
     }
 fi
 
+# Check if tsx is available, install if not
+if ! command -v tsx > /dev/null 2>&1; then
+    echo "Installing tsx..." >&2
+    npm install -g tsx >&2 || echo "Failed to install tsx" >&2
+fi
+
 # Deploy a single browser report, WARN: ensure inputs are sanitized before calling this function
 deploy_report() {
     dir="$1"
@@ -159,12 +165,16 @@ else
     echo "Available reports:"
     ls -la reports/ 2>/dev/null || echo "Reports directory not found"
     
-    # Deploy all reports in parallel and collect URLs
+    # Deploy all reports in parallel and collect URLs + test counts
     temp_dir=$(mktemp -d)
     pids=""
     i=0
     
-    # Start parallel deployments
+    # Store current working directory for absolute paths
+    SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+    BASE_DIR="$(pwd)"
+    
+    # Start parallel deployments and count extractions
     for browser in $BROWSERS; do
         if [ -d "reports/playwright-report-$browser" ]; then
             echo "Found report for $browser, deploying in parallel..."
@@ -172,11 +182,26 @@ else
                 url=$(deploy_report "reports/playwright-report-$browser" "$browser" "$cloudflare_branch")
                 echo "$url" > "$temp_dir/$i.url"
                 echo "Deployment result for $browser: $url"
+                
+                # Extract test counts using tsx (TypeScript executor)
+                EXTRACT_SCRIPT="$SCRIPT_DIR/extract-playwright-counts.ts"
+                REPORT_DIR="$BASE_DIR/reports/playwright-report-$browser"
+                
+                if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
+                    echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
+                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
+                    echo "Extracted counts for $browser: $counts" >&2
+                    echo "$counts" > "$temp_dir/$i.counts"
+                else
+                    echo "Script not found or tsx not available: $EXTRACT_SCRIPT" >&2
+                    echo '{}' > "$temp_dir/$i.counts"
+                fi
             ) &
             pids="$pids $!"
         else
             echo "Report not found for $browser at reports/playwright-report-$browser"
             echo "failed" > "$temp_dir/$i.url"
+            echo '{}' > "$temp_dir/$i.counts"
         fi
         i=$((i + 1))
     done
@@ -186,8 +211,9 @@ else
         wait $pid
     done
     
-    # Collect URLs in order
+    # Collect URLs and counts in order
     urls=""
+    all_counts=""
     i=0
     for browser in $BROWSERS; do
         if [ -f "$temp_dir/$i.url" ]; then
@@ -200,37 +226,147 @@ else
         else
             urls="$urls $url"
         fi
+        
+        if [ -f "$temp_dir/$i.counts" ]; then
+            counts=$(cat "$temp_dir/$i.counts")
+            echo "Read counts for $browser from $temp_dir/$i.counts: $counts" >&2
+        else
+            counts="{}"
+            echo "No counts file found for $browser at $temp_dir/$i.counts" >&2
+        fi
+        if [ -z "$all_counts" ]; then
+            all_counts="$counts"
+        else
+            all_counts="$all_counts|$counts"
+        fi
+        
         i=$((i + 1))
     done
     
     # Clean up temp directory
     rm -rf "$temp_dir"
     
+    # Calculate total test counts across all browsers
+    total_passed=0
+    total_failed=0
+    total_flaky=0
+    total_skipped=0
+    total_tests=0
+    
+    # Parse counts and calculate totals
+    IFS='|'
+    set -- $all_counts
+    for counts_json; do
+        if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
+            # Parse JSON counts using simple grep/sed if jq is not available
+            if command -v jq > /dev/null 2>&1; then
+                passed=$(echo "$counts_json" | jq -r '.passed // 0')
+                failed=$(echo "$counts_json" | jq -r '.failed // 0')
+                flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
+                skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
+                total=$(echo "$counts_json" | jq -r '.total // 0')
+            else
+                # Fallback parsing without jq
+                passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
+                failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
+                flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
+                skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
+                total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
+            fi
+            
+            total_passed=$((total_passed + ${passed:-0}))
+            total_failed=$((total_failed + ${failed:-0}))
+            total_flaky=$((total_flaky + ${flaky:-0}))
+            total_skipped=$((total_skipped + ${skipped:-0}))
+            total_tests=$((total_tests + ${total:-0}))
+        fi
+    done
+    unset IFS
+    
+    # Determine overall status
+    if [ $total_failed -gt 0 ]; then
+        status_icon="❌"
+        status_text="Some tests failed"
+    elif [ $total_flaky -gt 0 ]; then
+        status_icon="⚠️"
+        status_text="Tests passed with flaky tests"
+    elif [ $total_tests -gt 0 ]; then
+        status_icon="✅"
+        status_text="All tests passed!"
+    else
+        status_icon="🕵🏻"
+        status_text="No test results found"
+    fi
+    
     # Generate completion comment
     comment="$COMMENT_MARKER
 ## 🎭 Playwright Test Results
 
-✅ **Tests completed successfully!**
+$status_icon **$status_text**
 
-⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
+
+    # Add summary counts if we have test data
+    if [ $total_tests -gt 0 ]; then
+        comment="$comment
+
+### 📈 Summary
+- **Total Tests:** $total_tests
+- **Passed:** $total_passed ✅
+- **Failed:** $total_failed $([ $total_failed -gt 0 ] && echo '❌' || echo '')
+- **Flaky:** $total_flaky $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '')
+- **Skipped:** $total_skipped $([ $total_skipped -gt 0 ] && echo '⏭️' || echo '')"
+    fi
+    
+    comment="$comment
 
 ### 📊 Test Reports by Browser"
     
-    # Add browser results
+    # Add browser results with individual counts
     i=0
-    for browser in $BROWSERS; do
+    IFS='|'
+    set -- $all_counts
+    for counts_json; do
+        # Get browser name
+        browser=$(echo "$BROWSERS" | cut -d' ' -f$((i + 1)))
         # Get URL at position i
         url=$(echo "$urls" | cut -d' ' -f$((i + 1)))
         
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
+            # Parse individual browser counts
+            if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
+                if command -v jq > /dev/null 2>&1; then
+                    b_passed=$(echo "$counts_json" | jq -r '.passed // 0')
+                    b_failed=$(echo "$counts_json" | jq -r '.failed // 0')
+                    b_flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
+                    b_skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
+                    b_total=$(echo "$counts_json" | jq -r '.total // 0')
+                else
+                    b_passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
+                    b_failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
+                    b_flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
+                    b_skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
+                    b_total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
+                fi
+                
+                if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
+                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
+                else
+                    counts_str=""
+                fi
+            else
+                counts_str=""
+            fi
+            
             comment="$comment
-- ✅ **${browser}**: [View Report](${url})"
+- ✅ **${browser}**: [View Report](${url})${counts_str}"
         else
             comment="$comment
 - ❌ **${browser}**: Deployment failed"
         fi
         i=$((i + 1))
     done
+    unset IFS
     
     comment="$comment
 
diff --git a/scripts/collect-i18n-general.ts b/scripts/collect-i18n-general.ts
index 63d97d530..53c813fb7 100644
--- a/scripts/collect-i18n-general.ts
+++ b/scripts/collect-i18n-general.ts
@@ -2,9 +2,10 @@ 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'
-import type { FormItem, SettingParams } from '../src/types/settingTypes'
 import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
@@ -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 ed443015a..99ab97a66 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 331333367..7b4ff8da1 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/generate-json-schema.ts b/scripts/generate-json-schema.ts
index 76aa41b2e..1a2056626 100644
--- a/scripts/generate-json-schema.ts
+++ b/scripts/generate-json-schema.ts
@@ -5,7 +5,7 @@ import { zodToJsonSchema } from 'zod-to-json-schema'
 import {
   zComfyWorkflow,
   zComfyWorkflow1
-} from '../src/schemas/comfyWorkflowSchema'
+} from '../src/platform/workflow/validation/schemas/workflowSchema'
 import { zComfyNodeDef as zComfyNodeDefV2 } from '../src/schemas/nodeDef/nodeDefSchemaV2'
 import { zComfyNodeDef as zComfyNodeDefV1 } from '../src/schemas/nodeDefSchema'
 
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
new file mode 100644
index 000000000..789e142b8
--- /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 5e183c430..0a8ec51c3 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/fonts.css b/src/assets/css/fonts.css
new file mode 100644
index 000000000..cea388ee7
--- /dev/null
+++ b/src/assets/css/fonts.css
@@ -0,0 +1,17 @@
+/* Inter Font Family */
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-normal.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 3258cbba5..d331541f7 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,9 +1,11 @@
 @layer theme, base, primevue, components, utilities;
 
+@import './fonts.css';
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
+@import 'tw-animate-css';
 
-@plugin "tailwindcss-primeui";
+@plugin 'tailwindcss-primeui';
 
 @config '../../../tailwind.config.ts';
 
@@ -51,15 +53,20 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
   /* Palette Colors */
-  --color-charcoal-100: #171718;
-  --color-charcoal-200: #202121;
-  --color-charcoal-300: #262729;
-  --color-charcoal-400: #2d2e32;
-  --color-charcoal-500: #313235;
-  --color-charcoal-600: #3c3d42;
-  --color-charcoal-700: #494a50;
-  --color-charcoal-800: #55565e;
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
 
   --color-stone-100: #444444;
   --color-stone-200: #828282;
@@ -82,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;
@@ -98,11 +107,16 @@
   --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;
 
-  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
-  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
-  --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
+  --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
+  --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
+  --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
 
   /* PrimeVue pulled colors */
@@ -114,6 +128,14 @@
   --color-dark-elevation-2: rgba(from white r g b / 0.03);
 }
 
+@theme inline {
+  --color-node-component-surface: var(--color-charcoal-600);
+  --color-node-component-surface-highlight: var(--color-slate-100);
+  --color-node-component-surface-hovered: var(--color-charcoal-400);
+  --color-node-component-surface-selected: var(--color-charcoal-200);
+  --color-node-stroke: var(--color-stone-100);
+}
+
 @custom-variant dark-theme {
   .dark-theme & {
     @slot;
@@ -122,7 +144,7 @@
 
 @utility scrollbar-hide {
   scrollbar-width: none;
-  &::-webkit-scrollbar { 
+  &::-webkit-scrollbar {
     width: 1px;
   }
   &::-webkit-scrollbar-thumb {
@@ -909,52 +931,8 @@ 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 */
-}
-
-/* Smooth transitions between LOD levels */
 .lg-node {
-  transition: min-height 0.2s ease;
   /* Disable text selection on all nodes */
   user-select: none;
   -webkit-user-select: none;
@@ -978,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;
 }
 
-/* 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;
+.isLOD .lg-node-widgets {
+  pointer-events: none;
 }
+
+.lod-toggle {
+  visibility: visible;
+}
+
+.isLOD .lod-toggle {
+  visibility: hidden;
+}
+
+
+.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/assets/icons/custom/mask.svg b/src/assets/icons/custom/mask.svg
new file mode 100644
index 000000000..1e1a6d97c
--- /dev/null
+++ b/src/assets/icons/custom/mask.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_704_2695)">
+    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
+    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
+    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
+    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_704_2695">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/base/common/async.ts b/src/base/common/async.ts
new file mode 100644
index 000000000..a97f6f1bd
--- /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/base/common/downloadUtil.ts b/src/base/common/downloadUtil.ts
new file mode 100644
index 000000000..307a3e35b
--- /dev/null
+++ b/src/base/common/downloadUtil.ts
@@ -0,0 +1,41 @@
+/**
+ * Utility functions for downloading files
+ */
+
+// Constants
+const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
+
+/**
+ * Download a file from a URL by creating a temporary anchor element
+ * @param url - The URL of the file to download (must be a valid URL string)
+ * @param filename - Optional filename override (will use URL filename or default if not provided)
+ * @throws {Error} If the URL is invalid or empty
+ */
+export const downloadFile = (url: string, filename?: string): void => {
+  if (!url || typeof url !== 'string' || url.trim().length === 0) {
+    throw new Error('Invalid URL provided for download')
+  }
+  const link = document.createElement('a')
+  link.href = url
+  link.download =
+    filename || extractFilenameFromUrl(url) || DEFAULT_DOWNLOAD_FILENAME
+
+  // Trigger download
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+/**
+ * Extract filename from a URL's query parameters
+ * @param url - The URL to extract filename from
+ * @returns The extracted filename or null if not found
+ */
+const extractFilenameFromUrl = (url: string): string | null => {
+  try {
+    const urlObj = new URL(url, window.location.origin)
+    return urlObj.searchParams.get('filename')
+  } catch {
+    return null
+  }
+}
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index bd5070250..6e3cd5842 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -50,7 +50,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
diff --git a/src/components/MenuHamburger.vue b/src/components/MenuHamburger.vue
index 58c725763..d0856362f 100644
--- a/src/components/MenuHamburger.vue
+++ b/src/components/MenuHamburger.vue
@@ -21,10 +21,11 @@
 
 <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'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 
diff --git a/src/components/actionbar/BatchCountEdit.vue b/src/components/actionbar/BatchCountEdit.vue
index 281b886df..603ca6067 100644
--- a/src/components/actionbar/BatchCountEdit.vue
+++ b/src/components/actionbar/BatchCountEdit.vue
@@ -37,8 +37,8 @@ import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 24b3f8858..e05a10619 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -22,9 +22,10 @@ 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 '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -37,7 +38,7 @@ const visible = computed(() => position.value !== 'Disabled')
 const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
-const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', false)
+const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 62741a4e5..ca0dcf34e 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,15 +1,43 @@
 <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>
+    <Button
+      v-tooltip.left="{
+        value: tooltipText,
+        showDelay: 300
+      }"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
+      :class="
+        cn('absolute top-2 right-8 transition-opacity', {
+          'opacity-0 pointer-events-none select-none': !isHovered
+        })
+      "
+      :aria-label="tooltipText"
+      @click="handleCopy"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Ref, onUnmounted, ref } from 'vue'
+import { useElementHover, useEventListener } from '@vueuse/core'
+import type { IDisposable } from '@xterm/xterm'
+import Button from 'primevue/button'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
@@ -17,18 +45,69 @@ const emit = defineEmits<{
 }>()
 const terminalEl = ref<HTMLElement | undefined>()
 const rootEl = ref<HTMLElement | undefined>()
-emit('created', useTerminal(terminalEl), rootEl)
+const hasSelection = ref(false)
 
-onUnmounted(() => emit('unmounted'))
+const isHovered = useElementHover(rootEl)
+
+const terminalData = useTerminal(terminalEl)
+emit('created', terminalData, ref(rootEl))
+
+const { terminal } = terminalData
+let selectionDisposable: IDisposable | undefined
+
+const tooltipText = computed(() => {
+  return hasSelection.value
+    ? t('serverStart.copySelectionTooltip')
+    : t('serverStart.copyAllTooltip')
+})
+
+const handleCopy = async () => {
+  const existingSelection = terminal.getSelection()
+  const shouldSelectAll = !existingSelection
+  if (shouldSelectAll) terminal.selectAll()
+
+  const selectedText = shouldSelectAll
+    ? terminal.getSelection()
+    : existingSelection
+
+  if (selectedText) {
+    await navigator.clipboard.writeText(selectedText)
+
+    if (shouldSelectAll) {
+      terminal.clearSelection()
+    }
+  }
+}
+
+const showContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  electronAPI()?.showContextMenu({ type: 'text' })
+}
+
+if (isElectron()) {
+  useEventListener(terminalEl, 'contextmenu', showContextMenu)
+}
+
+onMounted(() => {
+  selectionDisposable = terminal.onSelectionChange(() => {
+    hasSelection.value = terminal.hasSelection()
+  })
+})
+
+onUnmounted(() => {
+  selectionDisposable?.dispose()
+  emit('unmounted')
+})
 </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 c439750f9..f32357c48 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 467122729..68f643218 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/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index e710f6c82..fb218ab1e 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -38,10 +38,10 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useCanvasStore } from '@/stores/graphStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
 
 const MIN_WIDTH = 28
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index eb688dff6..a8162b21b 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -47,17 +47,21 @@
 
 <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'
 import { useI18n } from 'vue-i18n'
 
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { appendJsonExt } from '@/utils/formatUtil'
 
 interface Props {
diff --git a/src/components/common/BackgroundImageUpload.vue b/src/components/common/BackgroundImageUpload.vue
index 7c20cbab1..46105e537 100644
--- a/src/components/common/BackgroundImageUpload.vue
+++ b/src/components/common/BackgroundImageUpload.vue
@@ -36,8 +36,8 @@ import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
-import { useToastStore } from '@/stores/toastStore'
 
 const modelValue = defineModel<string>()
 
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index c6fa18a8d..625df22a0 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -7,7 +7,7 @@
     <InputText
       v-else
       ref="inputRef"
-      v-model:modelValue="inputValue"
+      v-model:model-value="inputValue"
       v-focus
       type="text"
       size="small"
diff --git a/src/components/common/ExtensionSlot.vue b/src/components/common/ExtensionSlot.vue
index e031e1c8d..6819e494e 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 d719f615d..d1b422964 100644
--- a/src/components/common/FormItem.vue
+++ b/src/components/common/FormItem.vue
@@ -21,7 +21,7 @@
       <component
         :is="markRaw(getFormComponent(props.item))"
         :id="props.id"
-        v-model:modelValue="formValue"
+        v-model:model-value="formValue"
         :aria-labelledby="`${props.id}-label`"
         v-bind="getFormAttrs(props.item)"
       />
@@ -40,10 +40,11 @@ import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
+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 '@/types/settingTypes'
+import type { FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -66,6 +67,7 @@ function getFormAttrs(item: FormItem) {
   }
   switch (item.type) {
     case 'combo':
+    case 'radio':
       attrs['options'] =
         typeof item.options === 'function'
           ? // @ts-expect-error: Audit and deprecate usage of legacy options type:
@@ -97,6 +99,8 @@ function getFormComponent(item: FormItem): Component {
       return InputKnob
     case 'combo':
       return Select
+    case 'radio':
+      return FormRadioGroup
     case 'image':
       return FormImageUpload
     case 'color':
diff --git a/src/components/common/FormRadioGroup.spec.ts b/src/components/common/FormRadioGroup.spec.ts
new file mode 100644
index 000000000..a014b8ecd
--- /dev/null
+++ b/src/components/common/FormRadioGroup.spec.ts
@@ -0,0 +1,245 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import RadioButton from 'primevue/radiobutton'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { createApp } from 'vue'
+
+import type { SettingOption } from '@/platform/settings/types'
+
+import FormRadioGroup from './FormRadioGroup.vue'
+
+describe('FormRadioGroup', () => {
+  beforeAll(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
+  })
+
+  const mountComponent = (props: any, options = {}) => {
+    return mount(FormRadioGroup, {
+      global: {
+        plugins: [PrimeVue],
+        components: { RadioButton }
+      },
+      props,
+      ...options
+    })
+  }
+
+  describe('normalizedOptions computed property', () => {
+    it('handles string array options', () => {
+      const wrapper = mountComponent({
+        modelValue: 'option1',
+        options: ['option1', 'option2', 'option3'],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('option1')
+      expect(radioButtons[1].props('value')).toBe('option2')
+      expect(radioButtons[2].props('value')).toBe('option3')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('option1')
+      expect(labels[1].text()).toBe('option2')
+      expect(labels[2].text()).toBe('option3')
+    })
+
+    it('handles SettingOption array', () => {
+      const options: SettingOption[] = [
+        { text: 'Small', value: 'sm' },
+        { text: 'Medium', value: 'md' },
+        { text: 'Large', value: 'lg' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'md',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('sm')
+      expect(radioButtons[1].props('value')).toBe('md')
+      expect(radioButtons[2].props('value')).toBe('lg')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Small')
+      expect(labels[1].text()).toBe('Medium')
+      expect(labels[2].text()).toBe('Large')
+    })
+
+    it('handles SettingOption with undefined value (uses text as value)', () => {
+      const options: SettingOption[] = [
+        { text: 'Option A', value: undefined },
+        { text: 'Option B' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'Option A',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('value')).toBe('Option A')
+      expect(radioButtons[1].props('value')).toBe('Option B')
+    })
+
+    it('handles custom object with optionLabel and optionValue', () => {
+      const options = [
+        { name: 'First Option', id: 1 },
+        { name: 'Second Option', id: 2 },
+        { name: 'Third Option', id: 3 }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 2,
+        options,
+        optionLabel: 'name',
+        optionValue: 'id',
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe(1)
+      expect(radioButtons[1].props('value')).toBe(2)
+      expect(radioButtons[2].props('value')).toBe(3)
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('First Option')
+      expect(labels[1].text()).toBe('Second Option')
+      expect(labels[2].text()).toBe('Third Option')
+    })
+
+    it('handles mixed array with strings and SettingOptions', () => {
+      const options: (string | SettingOption)[] = [
+        'Simple String',
+        { text: 'Complex Option', value: 'complex' },
+        'Another String'
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'complex',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(3)
+
+      expect(radioButtons[0].props('value')).toBe('Simple String')
+      expect(radioButtons[1].props('value')).toBe('complex')
+      expect(radioButtons[2].props('value')).toBe('Another String')
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Simple String')
+      expect(labels[1].text()).toBe('Complex Option')
+      expect(labels[2].text()).toBe('Another String')
+    })
+
+    it('handles empty options array', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: [],
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles undefined options gracefully', () => {
+      const wrapper = mountComponent({
+        modelValue: null,
+        options: undefined,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(0)
+    })
+
+    it('handles object with missing properties gracefully', () => {
+      const options = [
+        { label: 'Option 1', val: 'opt1' },
+        { text: 'Option 2', value: 'opt2' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+      expect(radioButtons).toHaveLength(2)
+
+      const labels = wrapper.findAll('label')
+      expect(labels[0].text()).toBe('Unknown')
+      expect(labels[1].text()).toBe('Option 2')
+    })
+  })
+
+  describe('component functionality', () => {
+    it('sets correct input-id and name attributes', () => {
+      const options = ['A', 'B']
+
+      const wrapper = mountComponent({
+        modelValue: 'A',
+        options,
+        id: 'my-radio-group'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
+      expect(radioButtons[0].props('name')).toBe('my-radio-group')
+      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
+      expect(radioButtons[1].props('name')).toBe('my-radio-group')
+    })
+
+    it('associates labels with radio buttons correctly', () => {
+      const options = ['Yes', 'No']
+
+      const wrapper = mountComponent({
+        modelValue: 'Yes',
+        options,
+        id: 'confirm-radio'
+      })
+
+      const labels = wrapper.findAll('label')
+
+      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
+      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
+    })
+
+    it('sets aria-describedby attribute correctly', () => {
+      const options: SettingOption[] = [
+        { text: 'Option 1', value: 'opt1' },
+        { text: 'Option 2', value: 'opt2' }
+      ]
+
+      const wrapper = mountComponent({
+        modelValue: 'opt1',
+        options,
+        id: 'test-radio'
+      })
+
+      const radioButtons = wrapper.findAllComponents(RadioButton)
+
+      expect(radioButtons[0].attributes('aria-describedby')).toBe(
+        'Option 1-label'
+      )
+      expect(radioButtons[1].attributes('aria-describedby')).toBe(
+        'Option 2-label'
+      )
+    })
+  })
+})
diff --git a/src/components/common/FormRadioGroup.vue b/src/components/common/FormRadioGroup.vue
new file mode 100644
index 000000000..19889132b
--- /dev/null
+++ b/src/components/common/FormRadioGroup.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-row gap-4">
+    <div
+      v-for="option in normalizedOptions"
+      :key="option.value"
+      class="flex items-center"
+    >
+      <RadioButton
+        :input-id="`${id}-${option.value}`"
+        :name="id"
+        :value="option.value"
+        :model-value="modelValue"
+        :aria-describedby="`${option.text}-label`"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
+        {{ option.text }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import RadioButton from 'primevue/radiobutton'
+import { computed } from 'vue'
+
+import type { SettingOption } from '@/platform/settings/types'
+
+const props = defineProps<{
+  modelValue: any
+  options: (SettingOption | string)[]
+  optionLabel?: string
+  optionValue?: string
+  id?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const normalizedOptions = computed<SettingOption[]>(() => {
+  if (!props.options) return []
+
+  return props.options.map((option) => {
+    if (typeof option === 'string') {
+      return { text: option, value: option }
+    }
+
+    if ('text' in option) {
+      return {
+        text: option.text,
+        value: option.value ?? option.text
+      }
+    }
+    // Handle optionLabel/optionValue
+    return {
+      text: option[props.optionLabel || 'text'] || 'Unknown',
+      value: option[props.optionValue || 'value']
+    }
+  })
+})
+</script>
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index 79c7320f6..36aaa8a2b 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 b564ac278..2569d0fbd 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 000000000..bd42c14e4
--- /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/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 844a8e742..ac841d31f 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,7 +1,7 @@
 <template>
   <Tree
-    v-model:expandedKeys="expandedKeys"
-    v-model:selectionKeys="selectionKeys"
+    v-model:expanded-keys="expandedKeys"
+    v-model:selection-keys="selectionKeys"
     class="tree-explorer py-0 px-2 2xl:px-4"
     :class="props.class"
     :value="renderedRoot.children"
diff --git a/src/components/common/TreeExplorerTreeNode.spec.ts b/src/components/common/TreeExplorerTreeNode.spec.ts
index e229a99f5..d00d3e401 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/UnloadWindowConfirmDialog.vue b/src/components/dialog/UnloadWindowConfirmDialog.vue
index 2a26c276d..32ccedaa9 100644
--- a/src/components/dialog/UnloadWindowConfirmDialog.vue
+++ b/src/components/dialog/UnloadWindowConfirmDialog.vue
@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 const settingStore = useSettingStore()
 const workflowStore = useWorkflowStore()
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
index f4765a809..af6f4fff6 100644
--- a/src/components/dialog/content/ApiNodesSignInContent.vue
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -1,4 +1,3 @@
-<!-- Prompt user that the workflow contains API nodes that needs login to run -->
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index 842017783..662d3af8d 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -94,9 +94,9 @@ import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   message: string
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index cc159292a..17c38c29b 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 { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useToastStore } from '@/stores/toastStore'
 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 cf81441f1..10030a9e9 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/MissingModelsWarning.vue b/src/components/dialog/content/MissingModelsWarning.vue
index 911454d2e..dc67724d5 100644
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -39,7 +39,7 @@ import { useI18n } from 'vue-i18n'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index 05303ce69..3f3a47b7b 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 55611c00c..6ab4b74df 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 291020d1f..000000000
--- 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'
-
-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 28f86f7e7..000000000
--- 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/SettingItem.spec.ts b/src/components/dialog/content/setting/SettingItem.spec.ts
index 7db092d85..17e3bab06 100644
--- a/src/components/dialog/content/setting/SettingItem.spec.ts
+++ b/src/components/dialog/content/setting/SettingItem.spec.ts
@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import SettingItem from './SettingItem.vue'
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
 
 const i18n = createI18n({
   legacy: false,
diff --git a/src/components/dialog/content/setting/UsageLogsTable.vue b/src/components/dialog/content/setting/UsageLogsTable.vue
index 161268b91..082fb200c 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 0947af884..ded8cb18b 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 01e2e0a3f..dc0b196a4 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 1e5b6304e..d8f3721c1 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'
@@ -10,7 +11,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import SignInForm from './SignInForm.vue'
 
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index d37ee612c..a600428d4 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 027a6059f..0fa7be15d 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/DomWidgets.vue b/src/components/graph/DomWidgets.vue
index 5b4c05020..a68e580c9 100644
--- a/src/components/graph/DomWidgets.vue
+++ b/src/components/graph/DomWidgets.vue
@@ -16,8 +16,8 @@ import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
 
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 264bdef1f..f13b78d7f 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -33,20 +33,17 @@
 
   <!-- 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"
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
-      v-for="nodeData in nodesToRender"
+      v-for="nodeData in allNodes"
       :key="nodeData.id"
       :node-data="nodeData"
-      :position="nodePositions.get(nodeData.id)"
-      :size="nodeSizes.get(nodeData.id)"
       :readonly="false"
-      :executing="executionStore.executingNodeId === nodeData.id"
       :error="
         executionStore.lastExecutionError?.node_id === nodeData.id
           ? 'Execution error'
@@ -54,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>
 
@@ -77,9 +71,9 @@
 import { useEventListener, whenever } from '@vueuse/core'
 import {
   computed,
+  nextTick,
   onMounted,
   onUnmounted,
-  provide,
   ref,
   shallowRef,
   watch,
@@ -97,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'
@@ -105,33 +98,33 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
-import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
-import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
-import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import TransformPane from '@/renderer/core/layout/TransformPane.vue'
+import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
+import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
+import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+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 { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { newUserService } from '@/services/newUserService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -169,41 +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 vueNodeLifecycle = useVueNodeLifecycle()
+const { handleTransformUpdate } = useViewportCulling()
 
-const nodePositions = vueNodeLifecycle.nodePositions
-const nodeSizes = vueNodeLifecycle.nodeSizes
-const nodesToRender = viewportCulling.nodesToRender
-
-const handleTransformUpdate = () => {
-  viewportCulling.handleTransformUpdate(
-    vueNodeLifecycle.detectChangesInRAF.value
-  )
+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()
+  }
+)
+
+const allNodes = computed(() =>
+  Array.from(vueNodeLifecycle.vueNodeData.value.values())
 )
-provide(SelectedNodeIdsKey, selectedNodeIds)
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -322,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
+        })
       }
     }
 
@@ -401,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
@@ -428,7 +429,9 @@ onMounted(async () => {
   workflowPersistence.restoreWorkflowTabsState()
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
-  const { useReleaseStore } = await import('@/stores/releaseStore')
+  const { useReleaseStore } = await import(
+    '@/platform/updates/common/releaseStore'
+  )
   const releaseStore = useReleaseStore()
   void releaseStore.initialize()
 
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index bd8490321..c4050d30c 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -124,13 +124,13 @@ 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 { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import ZoomControlsModal from './modals/ZoomControlsModal.vue'
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 647987000..45cbfc9f3 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -19,10 +19,10 @@ import {
   isOverNodeInput,
   isOverNodeOutput
 } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number
@@ -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
new file mode 100644
index 000000000..00ce74a51
--- /dev/null
+++ b/src/components/graph/SelectionToolbox.spec.ts
@@ -0,0 +1,500 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+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('@/renderer/core/canvas/useCanvasInteractions', () => ({
+  useCanvasInteractions: vi.fn(() => ({
+    handleWheel: vi.fn()
+  }))
+}))
+
+vi.mock('@/composables/canvas/useSelectionToolboxPosition', () => ({
+  useSelectionToolboxPosition: vi.fn(() => ({
+    visible: { value: true }
+  })),
+  resetMoreOptionsState: vi.fn()
+}))
+
+vi.mock('@/composables/element/useRetriggerableAnimation', () => ({
+  useRetriggerableAnimation: vi.fn(() => ({
+    shouldAnimate: { value: false }
+  }))
+}))
+
+vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
+  useMinimap: vi.fn(() => ({
+    containerStyles: {
+      value: {
+        backgroundColor: '#ffffff'
+      }
+    }
+  }))
+}))
+
+vi.mock('@/services/extensionService', () => ({
+  useExtensionService: vi.fn(() => ({
+    extensionCommands: { value: new Map() },
+    invokeExtensions: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true),
+  isImageNode: vi.fn(() => false),
+  isLoad3dNode: vi.fn(() => false)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  isOutputNode: vi.fn(() => false),
+  filterOutputNodes: vi.fn((nodes) => nodes.filter(() => false))
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.Load3D.3DViewerEnable') return true
+      return null
+    })
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    getCommand: vi.fn(() => ({ id: 'test-command', title: 'Test Command' }))
+  })
+}))
+
+let nodeDefMock = {
+  type: 'TestNode',
+  title: 'Test Node'
+} as unknown
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: () => ({
+    fromLGraphNode: vi.fn(() => nodeDefMock)
+  })
+}))
+
+describe('SelectionToolbox', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          info: 'Node Info',
+          bookmark: 'Save to Library',
+          frameNodes: 'Frame Nodes',
+          moreOptions: 'More Options',
+          refreshNode: 'Refresh Node'
+        }
+      }
+    }
+  })
+
+  const mockProvide = {
+    isVisible: { value: true },
+    selectedItems: []
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+
+    // Mock the canvas to avoid "getCanvas: canvas is null" errors
+    canvasStore.canvas = {
+      setDirty: vi.fn(),
+      state: {
+        selectionChanged: false
+      }
+    } as any
+
+    vi.resetAllMocks()
+  })
+
+  const mountComponent = (props = {}) => {
+    return mount(SelectionToolbox, {
+      props,
+      global: {
+        plugins: [i18n, PrimeVue],
+        provide: {
+          [Symbol.for('SelectionOverlay')]: mockProvide
+        },
+        stubs: {
+          Panel: {
+            template:
+              '<div class="panel selection-toolbox absolute left-1/2 rounded-lg"><slot /></div>',
+            props: ['pt', 'style', 'class']
+          },
+          InfoButton: { template: '<div class="info-button" />' },
+          ColorPickerButton: {
+            template:
+              '<button data-testid="color-picker-button" class="color-picker-button" />'
+          },
+          FrameNodes: { template: '<div class="frame-nodes" />' },
+          PublishButton: {
+            template:
+              '<button data-testid="add-to-library" class="bookmark-button" />'
+          },
+          BypassButton: {
+            template:
+              '<button data-testid="bypass-button" class="bypass-button" />'
+          },
+          PinButton: { template: '<div class="pin-button" />' },
+          Load3DViewerButton: {
+            template: '<div class="load-3d-viewer-button" />'
+          },
+          MaskEditorButton: { template: '<div class="mask-editor-button" />' },
+          DeleteButton: {
+            template:
+              '<button data-testid="delete-button" class="delete-button" />'
+          },
+          RefreshSelectionButton: {
+            template: '<div class="refresh-button" />'
+          },
+          ExecuteButton: { template: '<div class="execute-button" />' },
+          ConvertToSubgraphButton: {
+            template:
+              '<button data-testid="convert-to-subgraph-button" class="convert-to-subgraph-button" />'
+          },
+          ExtensionCommandButton: {
+            template: '<div class="extension-command-button" />'
+          },
+          MoreOptions: {
+            template:
+              '<button data-testid="more-options-button" class="more-options" />'
+          },
+          VerticalDivider: { template: '<div class="vertical-divider" />' }
+        }
+      }
+    })
+  }
+
+  describe('Button Visibility Logic', () => {
+    beforeEach(() => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+    })
+
+    it('should show info button only for single selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.info-button').exists()).toBe(true)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.info-button').exists()).toBe(false)
+    })
+
+    it('should not show info button when node definition is not found', () => {
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      // mock nodedef and return null
+      nodeDefMock = null
+      // remount component
+      const wrapper = mountComponent()
+      expect(wrapper.find('.info-button').exists()).toBe(false)
+    })
+
+    it('should show color picker for all selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
+        true
+      )
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(
+        wrapper2.find('[data-testid="color-picker-button"]').exists()
+      ).toBe(true)
+    })
+
+    it('should show frame nodes only for multiple selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
+    })
+
+    it('should show bypass button for appropriate selections', () => {
+      // Single node selection
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
+
+      // Multiple node selection
+      canvasStore.selectedItems = [
+        { type: 'TestNode1' },
+        { type: 'TestNode2' }
+      ] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
+    })
+
+    it('should show common buttons for all selections', () => {
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
+      expect(
+        wrapper.find('[data-testid="convert-to-subgraph-button"]').exists()
+      ).toBe(true)
+      expect(wrapper.find('[data-testid="more-options-button"]').exists()).toBe(
+        true
+      )
+    })
+
+    it('should show mask editor only for single image nodes', async () => {
+      const mockUtils = await import('@/utils/litegraphUtil')
+      const isImageNodeSpy = vi.spyOn(mockUtils, 'isImageNode')
+
+      // Single image node
+      isImageNodeSpy.mockReturnValue(true)
+      canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
+
+      // Single non-image node
+      isImageNodeSpy.mockReturnValue(false)
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
+    })
+
+    it('should show Color picker button only for single Load3D nodes', async () => {
+      const mockUtils = await import('@/utils/litegraphUtil')
+      const isLoad3dNodeSpy = vi.spyOn(mockUtils, 'isLoad3dNode')
+
+      // Single Load3D node
+      isLoad3dNodeSpy.mockReturnValue(true)
+      canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
+
+      // Single non-Load3D node
+      isLoad3dNodeSpy.mockReturnValue(false)
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
+    })
+
+    it('should show ExecuteButton only when output nodes are selected', async () => {
+      const mockNodeFilterUtil = await import('@/utils/nodeFilterUtil')
+      const isOutputNodeSpy = vi.spyOn(mockNodeFilterUtil, 'isOutputNode')
+      const filterOutputNodesSpy = vi.spyOn(
+        mockNodeFilterUtil,
+        'filterOutputNodes'
+      )
+
+      // With output node selected
+      isOutputNodeSpy.mockReturnValue(true)
+      filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
+      canvasStore.selectedItems = [
+        { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
+      ] as any
+      const wrapper = mountComponent()
+      expect(wrapper.find('.execute-button').exists()).toBe(true)
+
+      // Without output node selected
+      isOutputNodeSpy.mockReturnValue(false)
+      filterOutputNodesSpy.mockReturnValue([])
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      wrapper.unmount()
+      const wrapper2 = mountComponent()
+      expect(wrapper2.find('.execute-button').exists()).toBe(false)
+
+      // No selection at all
+      canvasStore.selectedItems = []
+      wrapper2.unmount()
+      const wrapper3 = mountComponent()
+      expect(wrapper3.find('.execute-button').exists()).toBe(false)
+    })
+  })
+
+  describe('Divider Visibility Logic', () => {
+    it('should show dividers between button groups when both groups have buttons', () => {
+      // Setup single node to show info + other buttons
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const dividers = wrapper.findAll('.vertical-divider')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should not show dividers when adjacent groups are empty', () => {
+      // No selection should show minimal buttons and dividers
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      const buttons = wrapper.find('.panel').element.children
+      expect(buttons.length).toBeGreaterThan(0) // At least MoreOptions should show
+    })
+  })
+
+  describe('Extension Commands', () => {
+    it('should render extension command buttons when available', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: {
+          value: new Map([
+            ['test-command', { id: 'test-command', title: 'Test Command' }]
+          ])
+        },
+        invokeExtensions: vi.fn(() => ['test-command'])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.extension-command-button').exists()).toBe(true)
+    })
+
+    it('should not render extension commands when none available', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.extension-command-button').exists()).toBe(false)
+    })
+  })
+
+  describe('Container Styling', () => {
+    it('should apply minimap container styles', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.exists()).toBe(true)
+    })
+
+    it('should have correct CSS classes', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.classes()).toContain('selection-toolbox')
+      expect(panel.classes()).toContain('absolute')
+      expect(panel.classes()).toContain('left-1/2')
+      expect(panel.classes()).toContain('rounded-lg')
+    })
+
+    it('should handle animation class conditionally', () => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      expect(panel.exists()).toBe(true)
+    })
+  })
+
+  describe('Event Handling', () => {
+    it('should handle wheel events', async () => {
+      const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
+      const forwardEventToCanvasSpy = vi.fn()
+      mockCanvasInteractions.mockReturnValue({
+        forwardEventToCanvas: forwardEventToCanvasSpy
+      } as any)
+
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+
+      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+      const wrapper = mountComponent()
+
+      const panel = wrapper.find('.panel')
+      await panel.trigger('wheel')
+
+      expect(forwardEventToCanvasSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('No Selection State', () => {
+    beforeEach(() => {
+      const mockExtensionService = vi.mocked(useExtensionService)
+      mockExtensionService.mockReturnValue({
+        extensionCommands: { value: new Map() },
+        invokeExtensions: vi.fn(() => [])
+      } as any)
+    })
+
+    it('should still show MoreOptions when no items selected', () => {
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.more-options').exists()).toBe(true)
+    })
+
+    it('should hide most buttons when no items selected', () => {
+      canvasStore.selectedItems = []
+      const wrapper = mountComponent()
+
+      expect(wrapper.find('.info-button').exists()).toBe(false)
+      expect(wrapper.find('.color-picker-button').exists()).toBe(false)
+      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+      expect(wrapper.find('.bookmark-button').exists()).toBe(false)
+    })
+  })
+})
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index 8ce9353aa..9970c0b47 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -8,28 +8,37 @@
       <Panel
         v-if="visible"
         class="rounded-lg selection-toolbox pointer-events-auto"
+        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',
-          content: 'p-0 flex flex-row'
+          content: 'p-1 h-10 flex flex-row gap-1'
         }"
-        @wheel="canvasInteractions.handleWheel"
+        @wheel="canvasInteractions.forwardEventToCanvas"
       >
-        <ExecuteButton />
-        <ColorPickerButton />
-        <BypassButton />
-        <PinButton />
-        <Load3DViewerButton />
-        <MaskEditorButton />
-        <ConvertToSubgraphButton />
-        <PublishSubgraphButton />
-        <DeleteButton />
-        <RefreshSelectionButton />
+        <DeleteButton v-if="showDelete" />
+        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
+        <InfoButton v-if="showInfoButton" />
+
+        <ColorPickerButton v-if="showColorPicker" />
+        <FrameNodes v-if="showFrameNodes" />
+        <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
+        <PublishSubgraphButton v-if="showPublishSubgraph" />
+        <MaskEditorButton v-if="showMaskEditor" />
+        <VerticalDivider
+          v-if="showAnyPrimaryActions && showAnyControlActions"
+        />
+
+        <BypassButton v-if="showBypass" />
+        <RefreshSelectionButton v-if="showRefresh" />
+        <Load3DViewerButton v-if="showLoad3DViewer" />
+
         <ExtensionCommandButton
           v-for="command in extensionToolboxCommands"
           :key="command.id"
           :command="command"
         />
-        <HelpButton />
+        <ExecuteButton v-if="showExecute" />
+        <MoreOptions />
       </Panel>
     </Transition>
   </div>
@@ -45,22 +54,29 @@ import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/Convert
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
-import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
 import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
-import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import 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'
-import { useCanvasStore } from '@/stores/graphStore'
+
+import FrameNodes from './selectionToolbox/FrameNodes.vue'
+import MoreOptions from './selectionToolbox/MoreOptions.vue'
+import VerticalDivider from './selectionToolbox/VerticalDivider.vue'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
+const minimap = useMinimap()
+const containerStyles = minimap.containerStyles
 
 const toolboxRef = ref<HTMLElement | undefined>()
 const { visible } = useSelectionToolboxPosition(toolboxRef)
@@ -80,6 +96,44 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
     .map((commandId) => commandStore.getCommand(commandId))
     .filter((command): command is ComfyCommandImpl => command !== undefined)
 })
+
+const {
+  hasAnySelection,
+  hasMultipleSelection,
+  isSingleNode,
+  isSingleSubgraph,
+  isSingleImageNode,
+  hasAny3DNodeSelected,
+  hasOutputNodesSelected,
+  nodeDef
+} = useSelectionState()
+const showInfoButton = computed(() => !!nodeDef.value)
+
+const showColorPicker = computed(() => hasAnySelection.value)
+const showConvertToSubgraph = computed(() => hasAnySelection.value)
+const showFrameNodes = computed(() => hasMultipleSelection.value)
+const showPublishSubgraph = computed(() => isSingleSubgraph.value)
+
+const showBypass = computed(
+  () =>
+    isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
+)
+const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
+const showMaskEditor = computed(() => isSingleImageNode.value)
+
+const showDelete = computed(() => hasAnySelection.value)
+const showRefresh = computed(() => hasAnySelection.value)
+const showExecute = computed(() => hasOutputNodesSelected.value)
+
+const showAnyPrimaryActions = computed(
+  () =>
+    showColorPicker.value ||
+    showConvertToSubgraph.value ||
+    showFrameNodes.value ||
+    showPublishSubgraph.value
+)
+
+const showAnyControlActions = computed(() => showBypass.value)
 </script>
 
 <style scoped>
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index 220b549fb..e5505fac5 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -24,9 +24,12 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import {
+  useCanvasStore,
+  useTitleEditorStore
+} from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
 
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index b649ce6a5..40dad529d 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -135,14 +135,15 @@
 </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'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const minimap = useMinimap()
diff --git a/src/components/graph/selectionToolbox/BypassButton.spec.ts b/src/components/graph/selectionToolbox/BypassButton.spec.ts
new file mode 100644
index 000000000..c966e180a
--- /dev/null
+++ b/src/components/graph/selectionToolbox/BypassButton.spec.ts
@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node',
+  mode: LGraphEventMode.ALWAYS
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
+}))
+
+describe('BypassButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let commandStore: ReturnType<typeof useCommandStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        selectionToolbox: {
+          bypassButton: {
+            tooltip: 'Toggle bypass mode'
+          }
+        }
+      }
+    }
+  })
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    commandStore = useCommandStore()
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(BypassButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:ban': true
+        }
+      }
+    })
+  }
+
+  it('should render bypass button', () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should have correct test id', () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('[data-testid="bypass-button"]')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should execute bypass command when clicked', async () => {
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
+
+    const wrapper = mountComponent()
+    await wrapper.find('button').trigger('click')
+
+    expect(executeSpy).toHaveBeenCalledWith(
+      'Comfy.Canvas.ToggleSelectedNodes.Bypass'
+    )
+  })
+
+  it('should show normal styling when node is not bypassed', () => {
+    const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
+    canvasStore.selectedItems = [normalNode] as any
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.classes()).not.toContain(
+      'dark-theme:[&:not(:active)]:!bg-[#262729]'
+    )
+  })
+
+  it('should show bypassed styling when node is bypassed', async () => {
+    const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
+    canvasStore.selectedItems = [bypassedNode] as any
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
+    const wrapper = mountComponent()
+
+    // Click to trigger the reactivity update
+    await wrapper.find('button').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should handle multiple selected items', () => {
+    vi.spyOn(commandStore, 'execute').mockResolvedValue()
+    canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+  })
+})
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 7ae84f8e6..5c7c84944 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -1,6 +1,5 @@
 <template>
   <Button
-    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
@@ -8,12 +7,11 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    @click="
-      () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-    "
+    class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
+    @click="toggleBypass"
   >
     <template #icon>
-      <i-game-icons:detour />
+      <i-lucide:ban class="w-4 h-4" />
     </template>
   </Button>
 </template>
@@ -23,9 +21,11 @@ import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+
+const toggleBypass = async () => {
+  await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+}
 </script>
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts b/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts
index dac0ed084..ccf07e8b9 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts
@@ -7,8 +7,8 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 // Mock the litegraph module
 vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -95,17 +95,6 @@ describe('ColorPickerButton', () => {
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
-  it('should not render when nothing is selected', () => {
-    // Keep selectedItems empty
-    canvasStore.selectedItems = []
-    const wrapper = createWrapper()
-    // The button exists but is hidden with v-show
-    expect(wrapper.find('button').exists()).toBe(true)
-    expect(wrapper.find('button').attributes('style')).toContain(
-      'display: none'
-    )
-  })
-
   it('should toggle color picker visibility on button click', async () => {
     canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
     const wrapper = createWrapper()
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index 0092e473e..9e3024740 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -1,21 +1,25 @@
 <template>
   <div class="relative">
     <Button
-      v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
       v-tooltip.top="{
         value: localizedCurrentColorName ?? t('color.noColor'),
-        showDelay: 512
+        showDelay: 1000
       }"
+      data-testid="color-picker-button"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"
     >
-      <template #icon>
-        <div class="flex items-center gap-1">
-          <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
-          <i class="pi pi-chevron-down" :style="{ fontSize: '0.5rem' }" />
-        </div>
-      </template>
+      <div class="flex items-center gap-1 px-0">
+        <i
+          class="w-4 h-4 pi pi-circle-fill"
+          :style="{ color: currentColor ?? '' }"
+        />
+        <i
+          class="w-4 h-4 pi pi-chevron-down py-1"
+          :style="{ fontSize: '0.5rem' }"
+        />
+      </div>
     </Button>
     <div
       v-if="showColorPicker"
@@ -46,17 +50,21 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
+import type { Raw } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { ColorOption as CanvasColorOption } from '@/lib/litegraph/src/litegraph'
+import type {
+  ColorOption as CanvasColorOption,
+  Positionable
+} from '@/lib/litegraph/src/litegraph'
 import {
   LGraphCanvas,
   LiteGraph,
   isColorable
 } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { getItemsColorOption } from '@/utils/litegraphUtil'
@@ -140,13 +148,17 @@ const localizedCurrentColorName = computed(() => {
   )
   return colorOption?.localizedName ?? NO_COLOR_OPTION.localizedName
 })
-
+const updateColorSelectionFromNode = (
+  newSelectedItems: Raw<Positionable[]>
+) => {
+  showColorPicker.value = false
+  selectedColorOption.value = null
+  currentColorOption.value = getItemsColorOption(newSelectedItems)
+}
 watch(
   () => canvasStore.selectedItems,
   (newSelectedItems) => {
-    showColorPicker.value = false
-    selectedColorOption.value = null
-    currentColorOption.value = getItemsColorOption(newSelectedItems)
+    updateColorSelectionFromNode(newSelectedItems)
   },
   { immediate: true }
 )
diff --git a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
index ef6e27260..8df6a76bf 100644
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -6,11 +6,12 @@
       showDelay: 1000
     }"
     severity="secondary"
+    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i-lucide:expand />
+      <i-lucide:expand class="w-4 h-4" />
     </template>
   </Button>
   <Button
@@ -20,6 +21,7 @@
       showDelay: 1000
     }"
     severity="secondary"
+    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
@@ -34,25 +36,15 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { isSingleSubgraph, hasAnySelection } = useSelectionState()
 
-const isUnpackVisible = computed(() => {
-  return (
-    canvasStore.selectedItems?.length === 1 &&
-    canvasStore.selectedItems[0] instanceof SubgraphNode
-  )
-})
-const isConvertVisible = computed(() => {
-  return (
-    canvasStore.groupSelected ||
-    canvasStore.rerouteSelected ||
-    canvasStore.nodeSelected
-  )
-})
+const isUnpackVisible = isSingleSubgraph
+const isConvertVisible = computed(
+  () => hasAnySelection.value && !isSingleSubgraph.value
+)
 </script>
diff --git a/src/components/graph/selectionToolbox/DeleteButton.vue b/src/components/graph/selectionToolbox/DeleteButton.vue
index 7c341614e..d2b1d1acd 100644
--- a/src/components/graph/selectionToolbox/DeleteButton.vue
+++ b/src/components/graph/selectionToolbox/DeleteButton.vue
@@ -5,9 +5,11 @@
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    severity="danger"
+    severity="secondary"
     text
+    icon-class="w-4 h-4"
     icon="pi pi-trash"
+    data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
   />
 </template>
@@ -17,14 +19,15 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { selectedItems } = useSelectionState()
 
 const isDeletable = computed(() =>
-  canvasStore.selectedItems.some((x) => x.removable !== false)
+  selectedItems.value.some((x: Positionable) => x.removable !== false)
 )
 </script>
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.spec.ts b/src/components/graph/selectionToolbox/ExecuteButton.spec.ts
new file mode 100644
index 000000000..b75977b43
--- /dev/null
+++ b/src/components/graph/selectionToolbox/ExecuteButton.spec.ts
@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+// Mock the stores
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn()
+}))
+
+// Mock the utils
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn((node) => !!node?.type)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  isOutputNode: vi.fn((node) => !!node?.constructor?.nodeData?.output_node)
+}))
+
+// Mock the composables
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: vi.fn(() => ({
+    selectedNodes: {
+      value: []
+    }
+  }))
+}))
+
+describe('ExecuteButton', () => {
+  let mockCanvas: any
+  let mockCanvasStore: any
+  let mockCommandStore: any
+  let mockSelectedNodes: any[]
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        selectionToolbox: {
+          executeButton: {
+            tooltip: 'Execute selected nodes'
+          }
+        }
+      }
+    }
+  })
+
+  beforeEach(async () => {
+    setActivePinia(createPinia())
+
+    // Reset mocks
+    mockCanvas = {
+      setDirty: vi.fn()
+    }
+
+    mockSelectedNodes = []
+
+    mockCanvasStore = {
+      getCanvas: vi.fn(() => mockCanvas),
+      selectedItems: []
+    }
+
+    mockCommandStore = {
+      execute: vi.fn()
+    }
+
+    // Setup store mocks
+    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
+    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+
+    // Update the useSelectionState mock
+    const { useSelectionState } = vi.mocked(
+      await import('@/composables/graph/useSelectionState')
+    )
+    useSelectionState.mockReturnValue({
+      selectedNodes: {
+        value: mockSelectedNodes
+      }
+    } as any)
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(ExecuteButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:play': { template: '<div class="play-icon" />' }
+        }
+      }
+    })
+  }
+
+  describe('Rendering', () => {
+    it('should be able to render', () => {
+      const wrapper = mountComponent()
+      const button = wrapper.find('button')
+      expect(button.exists()).toBe(true)
+    })
+  })
+
+  describe('Click Handler', () => {
+    it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
+      const wrapper = mountComponent()
+      const button = wrapper.find('button')
+
+      await button.trigger('click')
+
+      expect(mockCommandStore.execute).toHaveBeenCalledWith(
+        'Comfy.QueueSelectedOutputNodes'
+      )
+      expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 39ca28d5e..802d95278 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -1,20 +1,16 @@
 <template>
   <Button
-    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
-      value: isDisabled
-        ? t('selectionToolbox.executeButton.disabledTooltip')
-        : t('selectionToolbox.executeButton.tooltip'),
+      value: t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    :severity="isDisabled ? 'secondary' : 'success'"
+    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
     text
-    :disabled="isDisabled"
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i-lucide:play />
+    <i-lucide:play class="fill-path-white w-4 h-4" />
   </Button>
 </template>
 
@@ -23,26 +19,24 @@ import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
+import { isOutputNode } from '@/utils/nodeFilterUtil'
 
 const { t } = useI18n()
-const canvasStore = useCanvasStore()
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+const { selectedNodes } = useSelectionState()
 
 const canvas = canvasStore.getCanvas()
 const buttonHovered = ref(false)
-const selectedOutputNodes = computed(
-  () =>
-    canvasStore.selectedItems.filter(
-      (item) => isLGraphNode(item) && item.constructor.nodeData?.output_node
-    ) as LGraphNode[]
+const selectedOutputNodes = computed(() =>
+  selectedNodes.value.filter(isLGraphNode).filter(isOutputNode)
 )
 
-const isDisabled = computed(() => selectedOutputNodes.value.length === 0)
-
 function outputNodeStokeStyle(this: LGraphNode) {
   if (
     this.selected &&
@@ -70,3 +64,9 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
+<style scoped>
+:deep.fill-path-white > path {
+  fill: white;
+  stroke: unset;
+}
+</style>
diff --git a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
index 3dc84f710..2e89ef7a5 100644
--- a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
+++ b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
@@ -7,6 +7,7 @@
     }"
     severity="secondary"
     text
+    icon-class="w-4 h-4"
     :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
     @click="() => commandStore.execute(command.id)"
   />
@@ -16,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/FrameNodes.vue b/src/components/graph/selectionToolbox/FrameNodes.vue
new file mode 100644
index 000000000..6d800a16f
--- /dev/null
+++ b/src/components/graph/selectionToolbox/FrameNodes.vue
@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: $t('g.frameNodes'),
+      showDelay: 1000
+    }"
+    class="frame-nodes-button"
+    text
+    severity="secondary"
+    @click="frameNodes"
+  >
+    <i-lucide:frame class="w-4 h-4" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useFrameNodes } from '@/composables/graph/useFrameNodes'
+
+const { frameNodes } = useFrameNodes()
+</script>
diff --git a/src/components/graph/selectionToolbox/HelpButton.vue b/src/components/graph/selectionToolbox/HelpButton.vue
deleted file mode 100644
index e77701bd4..000000000
--- a/src/components/graph/selectionToolbox/HelpButton.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <Button
-    v-show="nodeDef"
-    v-tooltip.top="{
-      value: $t('g.help'),
-      showDelay: 1000
-    }"
-    class="help-button"
-    text
-    icon="pi pi-question-circle"
-    severity="secondary"
-    @click="showHelp"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
-import { useCanvasStore } from '@/stores/graphStore'
-import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-import { isLGraphNode } from '@/utils/litegraphUtil'
-
-const canvasStore = useCanvasStore()
-const nodeDefStore = useNodeDefStore()
-const sidebarTabStore = useSidebarTabStore()
-const nodeHelpStore = useNodeHelpStore()
-const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
-
-const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
-  if (canvasStore.selectedItems.length !== 1) return null
-  const item = canvasStore.selectedItems[0]
-  if (!isLGraphNode(item)) return null
-  return nodeDefStore.fromLGraphNode(item)
-})
-
-const showHelp = () => {
-  const def = nodeDef.value
-  if (!def) return
-  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
-    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-  }
-  nodeHelpStore.openHelp(def)
-}
-</script>
diff --git a/src/components/graph/selectionToolbox/InfoButton.spec.ts b/src/components/graph/selectionToolbox/InfoButton.spec.ts
new file mode 100644
index 000000000..da2a13831
--- /dev/null
+++ b/src/components/graph/selectionToolbox/InfoButton.spec.ts
@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
+// NOTE: The component import must come after mocks so they take effect.
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node'
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+  useNodeLibrarySidebarTab: () => ({
+    id: 'node-library'
+  })
+}))
+
+const openHelpMock = vi.fn()
+const closeHelpMock = vi.fn()
+const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
+vi.mock('@/stores/workspace/nodeHelpStore', () => ({
+  useNodeHelpStore: () => ({
+    openHelp: (def: any) => {
+      nodeHelpState.currentHelpNode = def
+      openHelpMock(def)
+    },
+    closeHelp: () => {
+      nodeHelpState.currentHelpNode = null
+      closeHelpMock()
+    },
+    get currentHelpNode() {
+      return nodeHelpState.currentHelpNode
+    },
+    get isHelpOpen() {
+      return nodeHelpState.currentHelpNode !== null
+    }
+  })
+}))
+
+const toggleSidebarTabMock = vi.fn((id: string) => {
+  sidebarState.activeSidebarTabId =
+    sidebarState.activeSidebarTabId === id ? null : id
+})
+const sidebarState: { activeSidebarTabId: string | null } = {
+  activeSidebarTabId: 'other-tab'
+}
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: () => ({
+    get activeSidebarTabId() {
+      return sidebarState.activeSidebarTabId
+    },
+    toggleSidebarTab: toggleSidebarTabMock
+  })
+}))
+
+describe('InfoButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let nodeDefStore: ReturnType<typeof useNodeDefStore>
+
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+      en: {
+        g: {
+          info: 'Node Info'
+        }
+      }
+    }
+  })
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    canvasStore = useCanvasStore()
+    nodeDefStore = useNodeDefStore()
+
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = () => {
+    return mount(InfoButton, {
+      global: {
+        plugins: [i18n, PrimeVue],
+        directives: { tooltip: Tooltip },
+        stubs: {
+          'i-lucide:info': true,
+          Button: {
+            template:
+              '<button class="help-button" severity="secondary"><slot /></button>',
+            props: ['severity', 'text', 'class'],
+            emits: ['click']
+          }
+        }
+      }
+    })
+  }
+
+  it('should handle click without errors', async () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+    await button.trigger('click')
+    expect(button.exists()).toBe(true)
+  })
+
+  it('should have correct CSS classes', () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.classes()).toContain('help-button')
+    expect(button.attributes('severity')).toBe('secondary')
+  })
+
+  it('should have correct tooltip', () => {
+    const mockNodeDef = {
+      nodePath: 'test/node',
+      display_name: 'Test Node'
+    }
+    canvasStore.selectedItems = [mockLGraphNode] as any
+    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+    const wrapper = mountComponent()
+    const button = wrapper.find('button')
+
+    expect(button.exists()).toBe(true)
+  })
+})
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
new file mode 100644
index 000000000..3fd159d89
--- /dev/null
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: $t('g.info'),
+      showDelay: 1000
+    }"
+    data-testid="info-button"
+    text
+    severity="secondary"
+    @click="toggleHelp"
+  >
+    <i-lucide:info class="w-4 h-4" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+
+const { showNodeHelp: toggleHelp } = useSelectionState()
+</script>
diff --git a/src/components/graph/selectionToolbox/Load3DViewerButton.vue b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
index b207e5018..5187f0c02 100644
--- a/src/components/graph/selectionToolbox/Load3DViewerButton.vue
+++ b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
@@ -1,6 +1,5 @@
 <template>
   <Button
-    v-show="is3DNode"
     v-tooltip.top="{
       value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
@@ -8,29 +7,18 @@
     severity="secondary"
     text
     icon="pi pi-pencil"
+    icon-class="w-4 h-4"
     @click="open3DViewer"
   />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
 
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const is3DNode = computed(() => {
-  const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
-  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
-
-  return nodes.length === 1 && nodes.some(isLoad3dNode) && enable3DViewer
-})
 
 const open3DViewer = () => {
   void commandStore.execute('Comfy.3DViewer.Open3DViewer')
diff --git a/src/components/graph/selectionToolbox/MaskEditorButton.vue b/src/components/graph/selectionToolbox/MaskEditorButton.vue
index e0635ea98..51054bc13 100644
--- a/src/components/graph/selectionToolbox/MaskEditorButton.vue
+++ b/src/components/graph/selectionToolbox/MaskEditorButton.vue
@@ -7,28 +7,21 @@
     }"
     severity="secondary"
     text
-    icon="pi pi-pencil"
     @click="openMaskEditor"
-  />
+  >
+    <i-comfy:mask class="!w-4 !h-4" />
+  </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
 
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const isSingleImageNode = computed(() => {
-  const { selectedItems } = canvasStore
-  const item = selectedItems[0]
-  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
-})
+const { isSingleImageNode } = useSelectionState()
 
 const openMaskEditor = () => {
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
diff --git a/src/components/graph/selectionToolbox/MenuOptionItem.vue b/src/components/graph/selectionToolbox/MenuOptionItem.vue
new file mode 100644
index 000000000..ee88a47d9
--- /dev/null
+++ b/src/components/graph/selectionToolbox/MenuOptionItem.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="option.type === 'divider'"
+    class="h-px bg-gray-200 dark-theme:bg-zinc-700 my-1"
+  />
+  <div
+    v-else
+    role="button"
+    class="flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer"
+    @click="handleClick"
+  >
+    <i v-if="option.icon" :class="[option.icon, 'w-4 h-4']" />
+    <span class="flex-1">{{ option.label }}</span>
+    <span v-if="option.shortcut" class="text-xs opacity-60">
+      {{ option.shortcut }}
+    </span>
+    <i-lucide:chevron-right
+      v-if="option.hasSubmenu"
+      :size="14"
+      class="opacity-60"
+    />
+    <Badge
+      v-if="option.badge"
+      :severity="option.badge === 'new' ? 'info' : 'secondary'"
+      :value="t(option.badge)"
+      :class="{
+        'bg-[#31B9F4] dark-theme:bg-[#0B8CE9] rounded-4xl':
+          option.badge === 'new',
+        'bg-[#9C9EAB] dark-theme:bg-[#000] rounded-4xl':
+          option.badge === 'deprecated',
+        'text-white uppercase text-[9px] h-4 px-1 gap-2.5': true
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Badge from 'primevue/badge'
+import { useI18n } from 'vue-i18n'
+
+import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
+
+const { t } = useI18n()
+
+interface Props {
+  option: MenuOption
+}
+
+interface Emits {
+  (e: 'click', option: MenuOption, event: Event): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const handleClick = (event: Event) => {
+  emit('click', props.option, event)
+}
+</script>
diff --git a/src/components/graph/selectionToolbox/MoreOptions.vue b/src/components/graph/selectionToolbox/MoreOptions.vue
new file mode 100644
index 000000000..32729719c
--- /dev/null
+++ b/src/components/graph/selectionToolbox/MoreOptions.vue
@@ -0,0 +1,316 @@
+<template>
+  <div class="relative inline-flex items-center">
+    <Button
+      ref="buttonRef"
+      v-tooltip.top="{
+        value: $t('g.moreOptions'),
+        showDelay: 1000
+      }"
+      data-testid="more-options-button"
+      text
+      class="h-8 w-8 px-0"
+      severity="secondary"
+      @click="toggle"
+    >
+      <i-lucide:more-vertical class="w-4 h-4" />
+    </Button>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+      @show="onPopoverShow"
+      @hide="onPopoverHide"
+      @wheel="canvasInteractions.forwardEventToCanvas"
+    >
+      <div class="flex flex-col p-2 min-w-48">
+        <MenuOptionItem
+          v-for="(option, index) in menuOptions"
+          :key="option.label || `divider-${index}`"
+          :option="option"
+          @click="handleOptionClick"
+        />
+      </div>
+    </Popover>
+
+    <SubmenuPopover
+      v-for="option in menuOptionsWithSubmenu"
+      :key="`submenu-${option.label}`"
+      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
+      :option="option"
+      :container-styles="containerStyles"
+      @submenu-click="handleSubmenuClick"
+    />
+  </div>
+</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 {
+  forceCloseMoreOptionsSignal,
+  moreOptionsOpen,
+  moreOptionsRestorePending,
+  restoreMoreOptionsSignal
+} from '@/composables/canvas/useSelectionToolboxPosition'
+import {
+  type MenuOption,
+  type SubMenuOption,
+  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'
+import SubmenuPopover from './SubmenuPopover.vue'
+
+const popover = ref<InstanceType<typeof Popover>>()
+const buttonRef = ref<InstanceType<typeof Button> | HTMLElement | null>(null)
+// Track open state ourselves so we can restore after drag/move
+const isOpen = ref(false)
+const wasOpenBeforeHide = ref(false)
+// Track why the popover was hidden so we only auto-reopen after drag.
+type HideReason = 'manual' | 'drag'
+const lastProgrammaticHideReason = ref<HideReason | null>(null)
+const submenuRefs = ref<Record<string, InstanceType<typeof SubmenuPopover>>>({})
+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
+
+function getButtonEl(): HTMLElement | null {
+  const el = (buttonRef.value as any)?.$el || buttonRef.value
+  return el instanceof HTMLElement ? el : null
+}
+
+let lastLogTs = 0
+const LOG_INTERVAL = 120 // ms
+let overlayElCache: HTMLElement | null = null
+
+function resolveOverlayEl(): HTMLElement | null {
+  // Prefer cached element (cleared on hide)
+  if (overlayElCache && overlayElCache.isConnected) return overlayElCache
+  // PrimeVue Popover root element (component instance $el)
+  const direct = (popover.value as any)?.$el
+  if (direct instanceof HTMLElement) {
+    overlayElCache = direct
+    return direct
+  }
+  // Fallback: try to locate a recent popover root near the button (same z-index class + absolute)
+  const btn = getButtonEl()
+  if (btn) {
+    const candidates = Array.from(
+      document.querySelectorAll('div.absolute.z-50')
+    ) as HTMLElement[]
+    // Heuristic: pick the one closest (vertically) below the button
+    const rect = btn.getBoundingClientRect()
+    let best: { el: HTMLElement; dist: number } | null = null
+    for (const el of candidates) {
+      const r = el.getBoundingClientRect()
+      const dist = Math.abs(r.top - rect.bottom)
+      if (!best || dist < best.dist) best = { el, dist }
+    }
+    if (best && best.el) {
+      overlayElCache = best.el
+      return best.el
+    }
+  }
+  return null
+}
+
+const repositionPopover = () => {
+  if (!isOpen.value) return
+  const btn = getButtonEl()
+  const overlayEl = resolveOverlayEl()
+  if (!btn || !overlayEl) return
+  const rect = btn.getBoundingClientRect()
+  const marginY = 8 // tailwind mt-2 ~ 0.5rem = 8px
+  const left = rect.left + rect.width / 2
+  const top = rect.bottom + marginY
+  try {
+    overlayEl.style.position = 'fixed'
+    overlayEl.style.left = `${left}px`
+    overlayEl.style.top = `${top}px`
+    overlayEl.style.transform = 'translate(-50%, 0)'
+  } catch (e) {
+    console.warn('[MoreOptions] Failed to set overlay style', e)
+    return
+  }
+  const now = performance.now()
+  if (now - lastLogTs > LOG_INTERVAL) {
+    lastLogTs = now
+  }
+}
+
+const { resume: startSync, pause: stopSync } = useRafFn(repositionPopover)
+
+function openPopover(triggerEvent?: Event): boolean {
+  const el = getButtonEl()
+  if (!el || !el.isConnected) return false
+  bump()
+  popover.value?.show(triggerEvent ?? new Event('reopen'), el)
+  isOpen.value = true
+  moreOptionsOpen.value = true
+  moreOptionsRestorePending.value = false
+  return true
+}
+
+function closePopover(reason: HideReason = 'manual') {
+  lastProgrammaticHideReason.value = reason
+  popover.value?.hide()
+  isOpen.value = false
+  moreOptionsOpen.value = false
+  stopSync()
+  hideAll()
+  if (reason !== 'drag') {
+    wasOpenBeforeHide.value = false
+    // Natural hide: cancel any pending restore
+    moreOptionsRestorePending.value = false
+  } else {
+    if (!moreOptionsRestorePending.value) {
+      wasOpenBeforeHide.value = true
+      moreOptionsRestorePending.value = true
+    }
+  }
+}
+
+let restoreAttempts = 0
+function attemptRestore() {
+  if (isOpen.value) return
+  if (!wasOpenBeforeHide.value && !moreOptionsRestorePending.value) return
+  // Try immediately
+  if (openPopover(new Event('reopen'))) {
+    wasOpenBeforeHide.value = false
+    restoreAttempts = 0
+    return
+  }
+  // Defer with limited retries (layout / mount race)
+  if (restoreAttempts >= 5) return
+  restoreAttempts++
+  requestAnimationFrame(() => attemptRestore())
+}
+
+const toggle = (event: Event) => {
+  if (isOpen.value) closePopover('manual')
+  else openPopover(event)
+}
+
+const hide = (reason: HideReason = 'manual') => closePopover(reason)
+
+const hideAll = () => {
+  hideAllSubmenus(
+    menuOptionsWithSubmenu.value,
+    submenuRefs.value,
+    currentSubmenu
+  )
+}
+
+const handleOptionClick = (option: MenuOption, event: Event) => {
+  if (!option.hasSubmenu && option.action) {
+    option.action()
+    hide()
+  } else if (option.hasSubmenu) {
+    event.stopPropagation()
+    const submenuKey = `submenu-${option.label}`
+    const submenu = submenuRefs.value[submenuKey]
+
+    if (submenu) {
+      void toggleSubmenu(
+        option,
+        event,
+        submenu,
+        currentSubmenu,
+        menuOptionsWithSubmenu.value,
+        submenuRefs.value
+      )
+    }
+  }
+}
+
+const handleSubmenuClick = (subOption: SubMenuOption) => {
+  subOption.action()
+  hide('manual')
+}
+
+const setSubmenuRef = (key: string, el: any) => {
+  if (el) {
+    submenuRefs.value[key] = el
+  } else {
+    delete submenuRefs.value[key]
+  }
+}
+
+const pt = computed(() => ({
+  root: {
+    class: 'absolute z-50 w-[300px] px-[12]'
+  },
+  content: {
+    class: [
+      'mt-2 text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ],
+    style: {
+      backgroundColor: containerStyles.value.backgroundColor
+    }
+  }
+}))
+
+// Distinguish outside click (PrimeVue dismiss) from programmatic hides.
+const onPopoverShow = () => {
+  overlayElCache = resolveOverlayEl()
+  // Delay first reposition slightly to ensure DOM fully painted
+  requestAnimationFrame(() => repositionPopover())
+  startSync()
+}
+
+const onPopoverHide = () => {
+  if (lastProgrammaticHideReason.value == null) {
+    isOpen.value = false
+    hideAll()
+    wasOpenBeforeHide.value = false
+    moreOptionsOpen.value = false
+    moreOptionsRestorePending.value = false
+  }
+  overlayElCache = null
+  stopSync()
+  lastProgrammaticHideReason.value = null
+}
+
+// Watch for forced close (drag start)
+watch(
+  () => forceCloseMoreOptionsSignal.value,
+  () => {
+    if (isOpen.value) hide('drag')
+    else
+      wasOpenBeforeHide.value =
+        wasOpenBeforeHide.value || moreOptionsRestorePending.value
+  }
+)
+
+watch(
+  () => restoreMoreOptionsSignal.value,
+  () => attemptRestore()
+)
+
+onMounted(() => {
+  if (moreOptionsRestorePending.value && !isOpen.value) {
+    requestAnimationFrame(() => attemptRestore())
+  }
+})
+
+onUnmounted(() => {
+  stopSync()
+})
+</script>
diff --git a/src/components/graph/selectionToolbox/PinButton.vue b/src/components/graph/selectionToolbox/PinButton.vue
deleted file mode 100644
index 86598339b..000000000
--- a/src/components/graph/selectionToolbox/PinButton.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <Button
-    v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon="pi pi-thumbtack"
-    @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-</script>
diff --git a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
index 786fe511f..0da7364a0 100644
--- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
+++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
@@ -1,17 +1,22 @@
 <template>
   <Button
     v-show="isRefreshable"
-    severity="info"
+    v-tooltip.top="t('g.refreshNode')"
+    severity="secondary"
     text
-    icon="pi pi-refresh"
+    data-testid="refresh-button"
     @click="refreshSelected"
-  />
+  >
+    <i-lucide:refresh-cw class="w-4 h-4" />
+  </Button>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
 
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 
+const { t } = useI18n()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
 </script>
diff --git a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
index 8fa1b94d6..7f76d2eab 100644
--- a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
+++ b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
@@ -21,8 +21,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
new file mode 100644
index 000000000..2f1e25229
--- /dev/null
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -0,0 +1,127 @@
+<template>
+  <Popover
+    ref="popover"
+    :auto-z-index="true"
+    :base-z-index="1100"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="submenuPt"
+  >
+    <div
+      :class="
+        isColorSubmenu
+          ? 'flex flex-col gap-1 p-2'
+          : 'flex flex-col p-2 min-w-40'
+      "
+    >
+      <div
+        v-for="subOption in option.submenu"
+        :key="subOption.label"
+        :class="
+          isColorSubmenu
+            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
+        "
+        :title="subOption.label"
+        @click="handleSubmenuClick(subOption)"
+      >
+        <div
+          v-if="subOption.color"
+          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
+          :style="{ backgroundColor: subOption.color }"
+        />
+        <template v-else-if="!subOption.color">
+          <i-lucide:check
+            v-if="isShapeSelected(subOption)"
+            class="w-4 h-4 flex-shrink-0"
+          />
+          <div v-else class="w-4 flex-shrink-0" />
+          <span>{{ subOption.label }}</span>
+        </template>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import type {
+  MenuOption,
+  SubMenuOption
+} from '@/composables/graph/useMoreOptionsMenu'
+import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
+
+interface Props {
+  option: MenuOption
+  containerStyles: {
+    width: string
+    height: string
+    backgroundColor: string
+    border: string
+    borderRadius: string
+  }
+}
+
+interface Emits {
+  (e: 'submenu-click', subOption: SubMenuOption): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const { getCurrentShape } = useNodeCustomization()
+
+const popover = ref<InstanceType<typeof Popover>>()
+
+const show = (event: Event, target?: HTMLElement) => {
+  popover.value?.show(event, target)
+}
+
+const hide = () => {
+  popover.value?.hide()
+}
+
+defineExpose({
+  show,
+  hide
+})
+
+const handleSubmenuClick = (subOption: SubMenuOption) => {
+  emit('submenu-click', subOption)
+}
+
+const isShapeSelected = (subOption: SubMenuOption): boolean => {
+  if (subOption.color) return false
+
+  const currentShape = getCurrentShape()
+  if (!currentShape) return false
+
+  return currentShape.localizedName === subOption.label
+}
+
+const isColorSubmenu = computed(() => {
+  return (
+    props.option.submenu &&
+    props.option.submenu.length > 0 &&
+    props.option.submenu.every((item) => item.color && !item.icon)
+  )
+})
+
+const submenuPt = computed(() => ({
+  root: {
+    class: 'absolute z-[60]'
+  },
+  content: {
+    class: [
+      'text-neutral dark-theme:text-white rounded-lg',
+      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
+    ],
+    style: {
+      backgroundColor: props.containerStyles.backgroundColor
+    }
+  }
+}))
+</script>
diff --git a/src/components/graph/selectionToolbox/VerticalDivider.vue b/src/components/graph/selectionToolbox/VerticalDivider.vue
new file mode 100644
index 000000000..dc6876a3e
--- /dev/null
+++ b/src/components/graph/selectionToolbox/VerticalDivider.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="h-6 w-px bg-gray-300/10 dark-theme:bg-gray-600/10 self-center" />
+</template>
diff --git a/src/components/graph/widgets/ChatHistoryWidget.vue b/src/components/graph/widgets/ChatHistoryWidget.vue
index fe9c808b9..8696614d8 100644
--- a/src/components/graph/widgets/ChatHistoryWidget.vue
+++ b/src/components/graph/widgets/ChatHistoryWidget.vue
@@ -56,10 +56,10 @@ 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<{
+const { widget, history } = defineProps<{
   widget?: ComponentWidget<string>
   history: string
 }>()
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index 11cfafa1c..6e218d7a1 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 { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
+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 a484af879..7da01c774 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 c91589407..708d9f905 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 { type ReleaseNote } from '@/services/releaseService'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { ReleaseNote } from '@/platform/updates/common/releaseService'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useReleaseStore } from '@/stores/releaseStore'
-import { useSettingStore } from '@/stores/settingStore'
-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
new file mode 100644
index 000000000..716bfab0f
--- /dev/null
+++ b/src/components/input/MultiSelect.accessibility.stories.ts
@@ -0,0 +1,380 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { MultiSelectProps } from 'primevue/multiselect'
+import { ref } from 'vue'
+
+import MultiSelect from './MultiSelect.vue'
+import type { SelectOption } from './types'
+
+// Combine our component props with PrimeVue MultiSelect props
+interface ExtendedProps extends Partial<MultiSelectProps> {
+  // Our custom props
+  label?: string
+  showSearchBox?: boolean
+  showSelectedCount?: boolean
+  showClearButton?: boolean
+  searchPlaceholder?: string
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
+  // Override modelValue type to match our Option type
+  modelValue?: SelectOption[]
+}
+
+const meta: Meta<ExtendedProps> = {
+  title: 'Components/Input/MultiSelect/Accessibility',
+  component: MultiSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# MultiSelect Accessibility Guide
+
+This MultiSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
+
+## Keyboard Navigation
+
+- **Tab** - Focus the trigger button
+- **Enter/Space** - Open/close dropdown when focused
+- **Arrow Up/Down** - Navigate through options when dropdown is open
+- **Enter/Space** - Select/deselect options when navigating
+- **Escape** - Close dropdown
+
+## Screen Reader Support
+
+- Uses \`role="combobox"\` to identify as dropdown
+- \`aria-haspopup="listbox"\` indicates popup contains list
+- \`aria-expanded\` shows dropdown state
+- \`aria-label\` provides accessible name with i18n fallback
+- Selected count announced to screen readers
+
+## Testing Instructions
+
+1. **Tab Navigation**: Use Tab key to focus the component
+2. **Keyboard Opening**: Press Enter or Space to open dropdown
+3. **Option Navigation**: Use Arrow keys to navigate options
+4. **Selection**: Press Enter/Space to select options
+5. **Closing**: Press Escape to close dropdown
+6. **Screen Reader**: Test with screen reader software
+
+Try these stories with keyboard-only navigation!
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the trigger button'
+    },
+    showSearchBox: {
+      control: 'boolean',
+      description: 'Show search box in dropdown header'
+    },
+    showSelectedCount: {
+      control: 'boolean',
+      description: 'Show selected count in dropdown header'
+    },
+    showClearButton: {
+      control: 'boolean',
+      description: 'Show clear all button in dropdown header'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const frameworkOptions = [
+  { name: 'React', value: 'react' },
+  { name: 'Vue', value: 'vue' },
+  { name: 'Angular', value: 'angular' },
+  { name: 'Svelte', value: 'svelte' },
+  { name: 'TypeScript', value: 'typescript' },
+  { name: 'JavaScript', value: 'javascript' }
+]
+
+export const KeyboardNavigationDemo: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedFrameworks = ref<SelectOption[]>([])
+      const searchQuery = ref('')
+
+      return {
+        args: {
+          ...args,
+          options: frameworkOptions,
+          modelValue: selectedFrameworks,
+          'onUpdate:modelValue': (value: SelectOption[]) => {
+            selectedFrameworks.value = value
+          },
+          'onUpdate:searchQuery': (value: string) => {
+            searchQuery.value = value
+          }
+        },
+        selectedFrameworks,
+        searchQuery
+      }
+    },
+    template: `
+      <div class="space-y-4 p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Use your keyboard to navigate this MultiSelect:
+          </p>
+          <ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
+            <li><strong>Tab</strong> to focus the dropdown</li>
+            <li><strong>Enter/Space</strong> to open dropdown</li>
+            <li><strong>Arrow Up/Down</strong> to navigate options</li>
+            <li><strong>Enter/Space</strong> to select options</li>
+            <li><strong>Escape</strong> to close dropdown</li>
+          </ol>
+        </div>
+
+        <div class="space-y-2">
+          <label class="block text-sm font-medium text-gray-700">
+            Select Frameworks (Keyboard Navigation Test)
+          </label>
+          <MultiSelect v-bind="args" class="w-80" />
+          <p class="text-xs text-gray-500">
+            Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
+          </p>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    label: 'Choose Frameworks',
+    showSearchBox: true,
+    showSelectedCount: true,
+    showClearButton: true
+  }
+}
+
+export const ScreenReaderFriendly: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedColors = ref<SelectOption[]>([])
+      const selectedSizes = ref<SelectOption[]>([])
+
+      const colorOptions = [
+        { name: 'Red', value: 'red' },
+        { name: 'Blue', value: 'blue' },
+        { name: 'Green', value: 'green' },
+        { name: 'Yellow', value: 'yellow' }
+      ]
+
+      const sizeOptions = [
+        { name: 'Small', value: 'sm' },
+        { name: 'Medium', value: 'md' },
+        { name: 'Large', value: 'lg' },
+        { name: 'Extra Large', value: 'xl' }
+      ]
+
+      return {
+        selectedColors,
+        selectedSizes,
+        colorOptions,
+        sizeOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
+          <p class="text-sm text-gray-600 mb-2">
+            These dropdowns have proper ARIA attributes and labels for screen readers:
+          </p>
+          <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
+            <li><code>role="combobox"</code> identifies as dropdown</li>
+            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
+            <li><code>aria-expanded</code> shows open/closed state</li>
+            <li><code>aria-label</code> provides accessible name</li>
+            <li>Selection count announced to assistive technology</li>
+          </ul>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">
+              Color Preferences
+            </label>
+            <MultiSelect
+              v-model="selectedColors"
+              :options="colorOptions"
+              label="Select colors"
+              :show-selected-count="true"
+              :show-clear-button="true"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              {{ selectedColors.length }} color(s) selected
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">
+              Size Preferences
+            </label>
+            <MultiSelect
+              v-model="selectedSizes"
+              :options="sizeOptions"
+              label="Select sizes"
+              :show-selected-count="true"
+              :show-search-box="true"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              {{ selectedSizes.length }} size(s) selected
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const FocusManagement: Story = {
+  render: (args) => ({
+    components: { MultiSelect },
+    setup() {
+      const selectedItems = ref<SelectOption[]>([])
+      const focusTestOptions = [
+        { name: 'Option A', value: 'a' },
+        { name: 'Option B', value: 'b' },
+        { name: 'Option C', value: 'c' }
+      ]
+
+      return {
+        selectedItems,
+        focusTestOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-4 p-4">
+        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Test focus behavior with multiple form elements:
+          </p>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              Before MultiSelect
+            </label>
+            <input
+              type="text"
+              placeholder="Previous field"
+              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              MultiSelect (Test Focus Ring)
+            </label>
+            <MultiSelect
+              v-model="selectedItems"
+              :options="focusTestOptions"
+              label="Focus test dropdown"
+              :show-selected-count="true"
+              class="w-64"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">
+              After MultiSelect
+            </label>
+            <input
+              type="text"
+              placeholder="Next field"
+              class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <button
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          >
+            Submit Button
+          </button>
+        </div>
+
+        <div class="text-sm text-gray-600 mt-4">
+          <strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AccessibilityChecklist: Story = {
+  render: () => ({
+    template: `
+      <div class="max-w-4xl mx-auto p-6 space-y-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+          <h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
+              <ul class="space-y-2 text-sm">
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Color Contrast:</strong> Meets WCAG AA requirements</span>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
+              <ol class="space-y-2 text-sm list-decimal list-inside">
+                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
+                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
+                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
+                <li><strong>Tab Order:</strong> Verify logical progression</li>
+                <li><strong>Announcements:</strong> Check state changes are announced</li>
+                <li><strong>Escape Behavior:</strong> Escape always closes dropdown</li>
+              </ol>
+            </div>
+          </div>
+
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-300">
+              Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
+              If you can successfully navigate and make selections, the accessibility implementation is working!
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
diff --git a/src/components/input/MultiSelect.stories.ts b/src/components/input/MultiSelect.stories.ts
index 1ae58db8e..e6b5d9144 100644
--- a/src/components/input/MultiSelect.stories.ts
+++ b/src/components/input/MultiSelect.stories.ts
@@ -3,6 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
+import type { SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 // Since we use v-bind="$attrs", all PrimeVue props are available
@@ -17,7 +18,7 @@ interface ExtendedProps extends Partial<MultiSelectProps> {
   popoverMinWidth?: string
   popoverMaxWidth?: string
   // Override modelValue type to match our Option type
-  modelValue?: Array<{ name: string; value: string }>
+  modelValue?: SelectOption[]
 }
 
 const meta: Meta<ExtendedProps> = {
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 5ca6060a3..d687c583b 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -14,6 +14,11 @@
     unstyled
     :max-selected-labels="0"
     :pt="pt"
+    :aria-label="label || t('g.multiSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"
@@ -101,18 +106,19 @@
 
 <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'
 
 import SearchBox from '@/components/input/SearchBox.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
+import type { SelectOption } from './types'
 
-type Option = { name: string; value: string }
+type Option = SelectOption
 
 defineOptions({
   inheritAttrs: false
@@ -153,6 +159,8 @@ const selectedItems = defineModel<Option[]>({
   required: true
 })
 const searchQuery = defineModel<string>('searchQuery')
+
+const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
 
 const popoverStyle = usePopoverSizing({
@@ -162,7 +170,7 @@ const popoverStyle = usePopoverSizing({
 
 const pt = computed(() => ({
   root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-    class: [
+    class: cn(
       'h-10 relative inline-flex cursor-pointer select-none',
       'rounded-lg bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
       'transition-all duration-200 ease-in-out',
@@ -170,8 +178,9 @@ const pt = computed(() => ({
       selectedCount.value > 0
         ? 'border-blue-400 dark-theme:border-blue-500'
         : 'border-transparent',
+      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
       { 'opacity-60 cursor-default': props.disabled }
-    ]
+    )
   }),
   labelContainer: {
     class:
diff --git a/src/components/input/SingleSelect.accessibility.stories.ts b/src/components/input/SingleSelect.accessibility.stories.ts
new file mode 100644
index 000000000..cc58466d1
--- /dev/null
+++ b/src/components/input/SingleSelect.accessibility.stories.ts
@@ -0,0 +1,464 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import SingleSelect from './SingleSelect.vue'
+
+interface SingleSelectProps {
+  label?: string
+  options?: Array<{ name: string; value: string }>
+  listMaxHeight?: string
+  popoverMinWidth?: string
+  popoverMaxWidth?: string
+  modelValue?: string | null
+}
+
+const meta: Meta<SingleSelectProps> = {
+  title: 'Components/Input/SingleSelect/Accessibility',
+  component: SingleSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# SingleSelect Accessibility Guide
+
+This SingleSelect component provides full keyboard accessibility and screen reader support following WCAG 2.1 AA guidelines.
+
+## Keyboard Navigation
+
+- **Tab** - Focus the trigger button
+- **Enter/Space** - Open/close dropdown when focused
+- **Arrow Up/Down** - Navigate through options when dropdown is open
+- **Enter/Space** - Select option when navigating
+- **Escape** - Close dropdown
+
+## Screen Reader Support
+
+- Uses \`role="combobox"\` to identify as dropdown
+- \`aria-haspopup="listbox"\` indicates popup contains list
+- \`aria-expanded\` shows dropdown state
+- \`aria-label\` provides accessible name with i18n fallback
+- Selected option announced to screen readers
+
+## Testing Instructions
+
+1. **Tab Navigation**: Use Tab key to focus the component
+2. **Keyboard Opening**: Press Enter or Space to open dropdown
+3. **Option Navigation**: Use Arrow keys to navigate options
+4. **Selection**: Press Enter/Space to select an option
+5. **Closing**: Press Escape to close dropdown
+6. **Screen Reader**: Test with screen reader software
+
+Try these stories with keyboard-only navigation!
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the trigger button'
+    },
+    listMaxHeight: {
+      control: 'text',
+      description: 'Maximum height of dropdown list'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sortOptions = [
+  { name: 'Name A → Z', value: 'name-asc' },
+  { name: 'Name Z → A', value: 'name-desc' },
+  { name: 'Most Popular', value: 'popular' },
+  { name: 'Most Recent', value: 'recent' },
+  { name: 'File Size', value: 'size' }
+]
+
+const priorityOptions = [
+  { name: 'High Priority', value: 'high' },
+  { name: 'Medium Priority', value: 'medium' },
+  { name: 'Low Priority', value: 'low' },
+  { name: 'No Priority', value: 'none' }
+]
+
+export const KeyboardNavigationDemo: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const selectedSort = ref<string | null>(null)
+      const selectedPriority = ref<string | null>('medium')
+
+      return {
+        args,
+        selectedSort,
+        selectedPriority,
+        sortOptions,
+        priorityOptions
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
+            Use your keyboard to navigate these SingleSelect dropdowns:
+          </p>
+          <ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
+            <li><strong>Tab</strong> to focus the dropdown</li>
+            <li><strong>Enter/Space</strong> to open dropdown</li>
+            <li><strong>Arrow Up/Down</strong> to navigate options</li>
+            <li><strong>Enter/Space</strong> to select option</li>
+            <li><strong>Escape</strong> to close dropdown</li>
+          </ol>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+              Sort Order
+            </label>
+            <SingleSelect
+              v-model="selectedSort"
+              :options="sortOptions"
+              label="Choose sort order"
+              class="w-full"
+            />
+            <p class="text-xs text-gray-500">
+              Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
+              Task Priority (With Icon)
+            </label>
+            <SingleSelect
+              v-model="selectedPriority"
+              :options="priorityOptions"
+              label="Set priority level"
+              class="w-full"
+            >
+              <template #icon>
+                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
+                </svg>
+              </template>
+            </SingleSelect>
+            <p class="text-xs text-gray-500">
+              Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const ScreenReaderFriendly: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const selectedLanguage = ref<string | null>('en')
+      const selectedTheme = ref<string | null>(null)
+
+      const languageOptions = [
+        { name: 'English', value: 'en' },
+        { name: 'Spanish', value: 'es' },
+        { name: 'French', value: 'fr' },
+        { name: 'German', value: 'de' },
+        { name: 'Japanese', value: 'ja' }
+      ]
+
+      const themeOptions = [
+        { name: 'Light Theme', value: 'light' },
+        { name: 'Dark Theme', value: 'dark' },
+        { name: 'Auto (System)', value: 'auto' },
+        { name: 'High Contrast', value: 'contrast' }
+      ]
+
+      return {
+        selectedLanguage,
+        selectedTheme,
+        languageOptions,
+        themeOptions,
+        args
+      }
+    },
+    template: `
+      <div class="space-y-6 p-4">
+        <div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
+          <h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
+            These dropdowns have proper ARIA attributes and labels for screen readers:
+          </p>
+          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
+            <li><code>role="combobox"</code> identifies as dropdown</li>
+            <li><code>aria-haspopup="listbox"</code> indicates popup type</li>
+            <li><code>aria-expanded</code> shows open/closed state</li>
+            <li><code>aria-label</code> provides accessible name</li>
+            <li>Selected option value announced to assistive technology</li>
+          </ul>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
+              Preferred Language
+            </label>
+            <SingleSelect
+              v-model="selectedLanguage"
+              :options="languageOptions"
+              label="Select language"
+              class="w-full"
+              aria-labelledby="language-label"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
+            </p>
+          </div>
+
+          <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
+              Interface Theme
+            </label>
+            <SingleSelect
+              v-model="selectedTheme"
+              :options="themeOptions"
+              label="Select theme"
+              class="w-full"
+              aria-labelledby="theme-label"
+            />
+            <p class="text-xs text-gray-500" aria-live="polite">
+              Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
+            </p>
+          </div>
+        </div>
+
+        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
+          <ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
+            <li>• Listen for role announcements when focusing</li>
+            <li>• Verify dropdown state changes are announced</li>
+            <li>• Check that selected values are spoken clearly</li>
+            <li>• Ensure option navigation is announced</li>
+          </ul>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const FormIntegration: Story = {
+  render: (args) => ({
+    components: { SingleSelect },
+    setup() {
+      const formData = ref({
+        category: null as string | null,
+        status: 'draft' as string | null,
+        assignee: null as string | null
+      })
+
+      const categoryOptions = [
+        { name: 'Bug Report', value: 'bug' },
+        { name: 'Feature Request', value: 'feature' },
+        { name: 'Documentation', value: 'docs' },
+        { name: 'Question', value: 'question' }
+      ]
+
+      const statusOptions = [
+        { name: 'Draft', value: 'draft' },
+        { name: 'Review', value: 'review' },
+        { name: 'Approved', value: 'approved' },
+        { name: 'Published', value: 'published' }
+      ]
+
+      const assigneeOptions = [
+        { name: 'Alice Johnson', value: 'alice' },
+        { name: 'Bob Smith', value: 'bob' },
+        { name: 'Carol Davis', value: 'carol' },
+        { name: 'David Wilson', value: 'david' }
+      ]
+
+      const handleSubmit = () => {
+        alert('Form submitted with: ' + JSON.stringify(formData.value, null, 2))
+      }
+
+      return {
+        formData,
+        categoryOptions,
+        statusOptions,
+        assigneeOptions,
+        handleSubmit,
+        args
+      }
+    },
+    template: `
+      <div class="max-w-2xl mx-auto p-6">
+        <div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
+          <h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
+          <p class="text-sm text-gray-600 dark-theme:text-gray-300">
+            Test keyboard navigation through a complete form with SingleSelect components.
+            Tab order should be logical and all elements should be accessible.
+          </p>
+        </div>
+
+        <form @submit.prevent="handleSubmit" class="space-y-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Title *
+            </label>
+            <input
+              type="text"
+              required
+              placeholder="Enter a title"
+              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Category *
+            </label>
+            <SingleSelect
+              v-model="formData.category"
+              :options="categoryOptions"
+              label="Select category"
+              required
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Status
+            </label>
+            <SingleSelect
+              v-model="formData.status"
+              :options="statusOptions"
+              label="Select status"
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Assignee
+            </label>
+            <SingleSelect
+              v-model="formData.assignee"
+              :options="assigneeOptions"
+              label="Select assignee"
+              class="w-full"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
+              Description
+            </label>
+            <textarea
+              rows="4"
+              placeholder="Enter description"
+              class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div class="flex gap-3">
+            <button
+              type="submit"
+              class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              Submit
+            </button>
+            <button
+              type="button"
+              class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+
+        <div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
+          <h4 class="font-semibold mb-2">Current Form Data:</h4>
+          <pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AccessibilityChecklist: Story = {
+  render: () => ({
+    template: `
+      <div class="max-w-4xl mx-auto p-6 space-y-6">
+        <div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
+          <h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-green-700">✅ Implemented Features</h3>
+              <ul class="space-y-2 text-sm">
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Keyboard Navigation:</strong> Tab, Enter, Space, Arrow keys, Escape</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>ARIA Attributes:</strong> role, aria-haspopup, aria-expanded, aria-label</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Focus Management:</strong> Visible focus rings and logical tab order</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Internationalization:</strong> Translatable aria-label fallbacks</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Screen Reader Support:</strong> Proper announcements and state</span>
+                </li>
+                <li class="flex items-start">
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span><strong>Form Integration:</strong> Works properly in forms with other elements</span>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 class="text-lg font-semibold mb-3 text-blue-700">📋 Testing Guidelines</h3>
+              <ol class="space-y-2 text-sm list-decimal list-inside">
+                <li><strong>Keyboard Only:</strong> Navigate using only keyboard</li>
+                <li><strong>Screen Reader:</strong> Test with NVDA, JAWS, or VoiceOver</li>
+                <li><strong>Focus Visible:</strong> Ensure focus rings are always visible</li>
+                <li><strong>Tab Order:</strong> Verify logical progression in forms</li>
+                <li><strong>Announcements:</strong> Check state changes are announced</li>
+                <li><strong>Selection:</strong> Verify selected value is announced</li>
+              </ol>
+            </div>
+          </div>
+
+          <div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
+            <h4 class="font-semibold mb-2">🎯 Quick Test</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+              Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
+              If you can successfully navigate and make selections, the accessibility implementation is working!
+            </p>
+          </div>
+
+          <div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
+            <h4 class="font-semibold mb-2">⚡ Performance Note</h4>
+            <p class="text-sm text-gray-700 dark-theme:text-gray-200">
+              These accessibility features are built into the component with minimal performance impact.
+              The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
+            </p>
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 6335c6f10..87e6bc65a 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -14,6 +14,11 @@
     option-value="value"
     unstyled
     :pt="pt"
+    :aria-label="label || t('g.singleSelectDropdown')"
+    role="combobox"
+    :aria-expanded="false"
+    aria-haspopup="listbox"
+    :tabindex="0"
   >
     <!-- Trigger value -->
     <template #value="slotProps">
@@ -53,11 +58,15 @@
 </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'
+
 defineOptions({
   inheritAttrs: false
 })
@@ -75,10 +84,7 @@ const {
    * Cannot rely on $attrs alone because we need to access options
    * in getLabel() to map values to their display names.
    */
-  options?: {
-    name: string
-    value: string
-  }[]
+  options?: SelectOption[]
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */
@@ -89,6 +95,8 @@ const {
 
 const selectedItem = defineModel<string | null>({ required: true })
 
+const { t } = useI18n()
+
 /**
  * Maps a value to its display label.
  * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
@@ -118,16 +126,16 @@ const optionStyle = computed(() => {
  * - Text/icon scale: compact size matching MultiSelect
  */
 const pt = computed(() => ({
-  root: ({
-    props
-  }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
+  root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
     class: [
       // container
       'h-10 relative inline-flex cursor-pointer select-none items-center',
       // trigger surface
-      'rounded-md',
-      'bg-transparent text-neutral dark-theme:text-white',
-      'border-0',
+      'rounded-lg',
+      'bg-white dark-theme:bg-zinc-800 text-neutral dark-theme:text-white',
+      'border-[2.5px] border-solid border-transparent',
+      'transition-all duration-200 ease-in-out',
+      'focus-within:border-blue-400 dark-theme:focus-within:border-blue-500',
       // disabled
       { 'opacity-60 cursor-default': props.disabled }
     ]
@@ -158,9 +166,7 @@ const pt = computed(() => ({
       // Same list tone/size as MultiSelect
       'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
   },
-  option: ({
-    context
-  }: SelectPassThroughMethodOptions<{ name: string; value: string }>) => ({
+  option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
     class: [
       // Row layout
       'flex items-center justify-between gap-3 px-2 py-3 rounded',
diff --git a/src/components/input/types.ts b/src/components/input/types.ts
new file mode 100644
index 000000000..d775d1485
--- /dev/null
+++ b/src/components/input/types.ts
@@ -0,0 +1 @@
+export type SelectOption = { name: string; value: string }
diff --git a/src/components/install/DesktopSettingsConfiguration.vue b/src/components/install/DesktopSettingsConfiguration.vue
index 2868d11a7..f1caa62fa 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 06275634f..e95d3204c 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>
+  <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>
 
-      <p class="m-1 text-neutral-400">
-        {{ $t('install.gpuSelection.selectGpuDescription') }}:
-      </p>
+    <!-- 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>
 
-      <!-- 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 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
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
+)
+
+const descriptionKeys = {
+  mps: 'appleMetal',
+  nvidia: 'nvidia',
+  cpu: 'cpu',
+  unsupported: 'manual'
+} as const
+
+const descriptionText = computed(() => {
+  const key = selected.value ? descriptionKeys[selected.value] : undefined
+  return st(`install.gpuPicker.${key}Description`, '')
+})
+
+const pickGpu = (value: TorchDeviceType) => {
+  selected.value = value
 }
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.p-tag {
-  --p-tag-gap: 0.5rem;
-}
-
-.hover-brighten {
-  @apply transition-colors;
-  transition-property: filter, box-shadow;
-
-  &: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;
-}
-
-.p-card-body {
-  @apply text-center pt-0;
-}
-</style>
diff --git a/src/components/install/HardwareOption.stories.ts b/src/components/install/HardwareOption.stories.ts
new file mode 100644
index 000000000..d830af49f
--- /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 000000000..ae254fd8f
--- /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 000000000..ef9ab698c
--- /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 000000000..e6ef924ae
--- /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 33b32a5f9..0e22f34a9 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 000000000..ad09e1871
--- /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 934ffc2f3..ba542ca69 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 0053f973a..000000000
--- 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 3bd83074e..3665d66c9 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 4f42dc1d7..23245edc9 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -95,16 +95,16 @@ 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,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComponentWidget } from '@/scripts/domWidget'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
 
 const { t } = useI18n()
 const { widget } = defineProps<{
diff --git a/src/components/load3d/Load3DAnimation.vue b/src/components/load3d/Load3DAnimation.vue
index 945436bbb..9d29c1ed1 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 c9228f843..38cbd7169 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 2c819aea6..eea5208b3 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 33461f0cf..d9c344bec 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 5a6d514c8..fa22865d6 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 133c992e1..e19683f65 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/LightControls.vue b/src/components/load3d/controls/LightControls.vue
index a0665e31d..1c6bc751e 100644
--- a/src/components/load3d/controls/LightControls.vue
+++ b/src/components/load3d/controls/LightControls.vue
@@ -38,7 +38,7 @@ import Slider from 'primevue/slider'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 import { t } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const vTooltip = Tooltip
 
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index b72311689..1f00ed3e3 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 e7b762a8e..fdac4abcb 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 96988b9c6..0f2cea883 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 e2edb8cd5..94dd8b932 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/ViewerLightControls.vue b/src/components/load3d/controls/viewer/ViewerLightControls.vue
index d38ccfd4d..e4cbcdb0c 100644
--- a/src/components/load3d/controls/viewer/ViewerLightControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerLightControls.vue
@@ -14,7 +14,7 @@
 import Slider from 'primevue/slider'
 
 import { t } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const lightIntensity = defineModel<number>('lightIntensity')
 
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index 6f1f38bdb..ca8f26364 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 99cbf9c45..0762bbd05 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 98391cded..08eb87572 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 d68f3d06c..b3cf67cc5 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 f55c93436..4fffeeaf8 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 bdda7425d..916575ea0 100644
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -87,12 +87,9 @@ import NodePreview from '@/components/node/NodePreview.vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
-import {
-  ComfyNodeDefImpl,
-  useNodeDefStore,
-  useNodeFrequencyStore
-} from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 a109c7566..470853b08 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 { useCanvasStore } from '@/stores/graphStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+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 339c1882c..7b650ceba 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 032c01b08..406963f22 100644
--- a/src/components/searchbox/NodeSearchItem.vue
+++ b/src/components/searchbox/NodeSearchItem.vue
@@ -51,9 +51,10 @@ import Chip from 'primevue/chip'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
-import { ComfyNodeDefImpl, useNodeFrequencyStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
+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/selectionbar/SubgraphNode.vue b/src/components/selectionbar/SubgraphNode.vue
index e60a3fd51..6047752d4 100644
--- a/src/components/selectionbar/SubgraphNode.vue
+++ b/src/components/selectionbar/SubgraphNode.vue
@@ -9,11 +9,11 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import {
   type ProxyWidgetsProperty,
   parseProxyWidgets
 } from '@/schemas/proxyWidget'
-import { useCanvasStore } from '@/stores/graphStore'
 
 type WidgetItem = [LGraphNode, IBaseWidget]
 
@@ -190,7 +190,7 @@ const filteredActive = computed<WidgetItem[]>(() => {
   >
     <template #header>
       <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
         class="model-lib-search-box p-2 2xl:p-4"
         :placeholder="$t('g.search') + '...'"
       />
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index d283217e1..288deade8 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -37,8 +37,8 @@ import { computed } from 'vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useKeybindingStore } from '@/stores/keybindingStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useUserStore } from '@/stores/userStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
diff --git a/src/components/sidebar/SidebarHelpCenterIcon.vue b/src/components/sidebar/SidebarHelpCenterIcon.vue
index 06662f581..e72389022 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 ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
-import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.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 { useReleaseStore } from '@/stores/releaseStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 import SidebarIcon from './SidebarIcon.vue'
 
@@ -88,8 +88,8 @@ const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
   useConflictAcknowledgment()
 
 // Use either release red dot or conflict red dot
-const shouldShowRedDot = computed(() => {
-  const releaseRedDot = showReleaseRedDot
+const shouldShowRedDot = computed((): boolean => {
+  const releaseRedDot = showReleaseRedDot.value
   return releaseRedDot || shouldShowConflictRedDot.value
 })
 
diff --git a/src/components/sidebar/SidebarTemplatesButton.vue b/src/components/sidebar/SidebarTemplatesButton.vue
index fbff26ae6..e6c9e8f48 100644
--- a/src/components/sidebar/SidebarTemplatesButton.vue
+++ b/src/components/sidebar/SidebarTemplatesButton.vue
@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 7f6abba2e..ccb105bfe 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
         class="model-lib-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchModels') + '...'"
         @search="handleSearch"
@@ -31,7 +31,7 @@
       <ElectronDownloadItems v-if="isElectron()" />
 
       <TreeExplorer
-        v-model:expandedKeys="expandedKeys"
+        v-model:expanded-keys="expandedKeys"
         class="model-lib-tree-explorer"
         :root="renderedRoot"
       >
@@ -54,15 +54,11 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 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 { useSettingStore } from '@/stores/settingStore'
 import type { TreeNode } from '@/types/treeExplorerTypes'
 import type { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { isElectron } from '@/utils/envUtil'
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index 3c8bd78ec..7cf146501 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -78,7 +78,7 @@
       <template #header>
         <div>
           <SearchBox
-            v-model:modelValue="searchQuery"
+            v-model:model-value="searchQuery"
             class="node-lib-search-box p-2 2xl:p-4"
             :placeholder="$t('g.searchNodes') + '...'"
             filter-icon="pi pi-filter"
@@ -106,7 +106,7 @@
             class="m-2"
           />
           <TreeExplorer
-            v-model:expandedKeys="expandedKeys"
+            v-model:expanded-keys="expandedKeys"
             class="node-lib-tree-explorer"
             :root="renderedRoot"
           >
@@ -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 6b0fe036c..9e1219c2f 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -86,7 +86,7 @@
   <ConfirmPopup />
   <ContextMenu ref="menu" :model="menuItems" />
   <ResultGallery
-    v-model:activeIndex="galleryActiveIndex"
+    v-model:active-index="galleryActiveIndex"
     :all-gallery-items="allGalleryItems"
   />
 </template>
@@ -104,17 +104,14 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import { ComfyNode } from '@/schemas/comfyWorkflowSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 { useSettingStore } from '@/stores/settingStore'
+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 adefb762f..2e0df8b0e 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -14,7 +14,7 @@
     </template>
     <template #header>
       <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
         class="workflows-search-box p-2 2xl:p-4"
         :placeholder="$t('g.searchWorkflows') + '...'"
         @search="handleSearch"
@@ -32,7 +32,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            v-model:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
             :root="renderTreeNode(openWorkflowsTree, WorkflowTreeType.Open)"
             :selection-keys="selectionKeys"
           >
@@ -74,7 +74,7 @@
             class="ml-2"
           />
           <TreeExplorer
-            v-model:expandedKeys="dummyExpandedKeys"
+            v-model:expanded-keys="dummyExpandedKeys"
             :root="
               renderTreeNode(
                 bookmarkedWorkflowsTree,
@@ -96,7 +96,7 @@
           />
           <TreeExplorer
             v-if="workflowStore.persistedWorkflows.length > 0"
-            v-model:expandedKeys="expandedKeys"
+            v-model:expanded-keys="expandedKeys"
             :root="renderTreeNode(workflowsTree, WorkflowTreeType.Browse)"
             :selection-keys="selectionKeys"
           >
@@ -114,7 +114,7 @@
       </div>
       <div v-else class="comfyui-workflows-search-panel">
         <TreeExplorer
-          v-model:expandedKeys="expandedKeys"
+          v-model:expanded-keys="expandedKeys"
           :root="renderTreeNode(filteredRoot, WorkflowTreeType.Browse)"
         >
           <template #node="{ node }">
@@ -141,16 +141,16 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import WorkflowTreeLeaf from '@/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { useWorkflowService } from '@/services/workflowService'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import {
   useWorkflowBookmarkStore,
   useWorkflowStore
-} from '@/stores/workflowStore'
-import { ComfyWorkflow } from '@/stores/workflowStore'
+} from '@/platform/workflow/management/stores/workflowStore'
+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 3ff3d7cfd..ed16819e3 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 { ComfyModelDef } from '@/stores/modelStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 8e8885486..8c15c27d1 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 920b29397..800d07ff9 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 2dc099c41..b0f64f196 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 { useSettingStore } from '@/stores/settingStore'
+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 60c70673a..7a55fb854 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.spec.ts b/src/components/sidebar/tabs/queue/ResultGallery.spec.ts
index bf96984be..49b365a0d 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.spec.ts
+++ b/src/components/sidebar/tabs/queue/ResultGallery.spec.ts
@@ -4,7 +4,7 @@ import Galleria from 'primevue/galleria'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { createApp, nextTick } from 'vue'
 
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultGallery from './ResultGallery.vue'
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index 046e09a56..430567da2 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 9f05ab687..f4dad64fa 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -24,8 +24,8 @@
 import { computed, onMounted, ref } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
-import { ResultItemImpl } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 776165c7b..d8b0764fe 100644
--- a/src/components/sidebar/tabs/queue/ResultVideo.vue
+++ b/src/components/sidebar/tabs/queue/ResultVideo.vue
@@ -8,9 +8,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { ResultItemImpl } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
+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 048c1dd0d..6f4297d5e 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 '@/schemas/comfyWorkflowSchema'
+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 306834039..c1f2078f8 100644
--- a/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
+++ b/src/components/sidebar/tabs/workflows/WorkflowTreeLeaf.vue
@@ -17,7 +17,8 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/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 dc3266db8..733b723d6 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 '@/types/workflowTemplateTypes'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('@/components/templates/thumbnails/AudioThumbnail.vue', () => ({
   default: {
@@ -64,13 +64,16 @@ vi.mock('@/stores/dialogStore', () => ({
   })
 }))
 
-vi.mock('@/stores/workflowTemplatesStore', () => ({
-  useWorkflowTemplatesStore: () => ({
-    isLoaded: true,
-    loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
-    groupedTemplates: []
+vi.mock(
+  '@/platform/workflow/templates/repositories/workflowTemplatesStore',
+  () => ({
+    useWorkflowTemplatesStore: () => ({
+      isLoaded: true,
+      loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
+      groupedTemplates: []
+    })
   })
-}))
+)
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
@@ -78,35 +81,42 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
-vi.mock('@/composables/useTemplateWorkflows', () => ({
-  useTemplateWorkflows: () => ({
-    getTemplateThumbnailUrl: (
-      template: TemplateInfo,
-      sourceModule: string,
-      index = ''
-    ) => {
-      const basePath =
-        sourceModule === 'default'
-          ? `/fileURL/templates/${template.name}`
-          : `/apiURL/workflow_templates/${sourceModule}/${template.name}`
-      const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
-      return `${basePath}${indexSuffix}.${template.mediaSubtype}`
-    },
-    getTemplateTitle: (template: TemplateInfo, sourceModule: string) => {
-      const fallback =
-        template.title ?? template.name ?? `${sourceModule} Template`
-      return sourceModule === 'default'
-        ? template.localizedTitle ?? fallback
-        : fallback
-    },
-    getTemplateDescription: (template: TemplateInfo, sourceModule: string) => {
-      return sourceModule === 'default'
-        ? template.localizedDescription ?? ''
-        : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
-    },
-    loadWorkflowTemplate: vi.fn()
+vi.mock(
+  '@/platform/workflow/templates/composables/useTemplateWorkflows',
+  () => ({
+    useTemplateWorkflows: () => ({
+      getTemplateThumbnailUrl: (
+        template: TemplateInfo,
+        sourceModule: string,
+        index = ''
+      ) => {
+        const basePath =
+          sourceModule === 'default'
+            ? `/fileURL/templates/${template.name}`
+            : `/apiURL/workflow_templates/${sourceModule}/${template.name}`
+        const indexSuffix =
+          sourceModule === 'default' && index ? `-${index}` : ''
+        return `${basePath}${indexSuffix}.${template.mediaSubtype}`
+      },
+      getTemplateTitle: (template: TemplateInfo, sourceModule: string) => {
+        const fallback =
+          template.title ?? template.name ?? `${sourceModule} Template`
+        return sourceModule === 'default'
+          ? template.localizedTitle ?? fallback
+          : fallback
+      },
+      getTemplateDescription: (
+        template: TemplateInfo,
+        sourceModule: string
+      ) => {
+        return sourceModule === 'default'
+          ? template.localizedDescription ?? ''
+          : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
+      },
+      loadWorkflowTemplate: vi.fn()
+    })
   })
-}))
+)
 
 describe('TemplateWorkflowCard', () => {
   const createTemplate = (overrides = {}): TemplateInfo => ({
diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 4860b9c77..eb6a93038 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -86,8 +86,8 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+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/TemplateWorkflowList.vue b/src/components/templates/TemplateWorkflowList.vue
index 061dbb104..b6ac99c5e 100644
--- a/src/components/templates/TemplateWorkflowList.vue
+++ b/src/components/templates/TemplateWorkflowList.vue
@@ -38,8 +38,8 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import { computed, ref } from 'vue'
 
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const { sourceModule, loading, templates } = defineProps<{
   sourceModule: string
diff --git a/src/components/templates/TemplateWorkflowView.spec.ts b/src/components/templates/TemplateWorkflowView.spec.ts
index 6860797c6..d9633a7e0 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 '@/types/workflowTemplateTypes'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 vi.mock('primevue/dataview', () => ({
   default: {
diff --git a/src/components/templates/TemplateWorkflowView.vue b/src/components/templates/TemplateWorkflowView.vue
index 8a866cdd1..9c73ddc86 100644
--- a/src/components/templates/TemplateWorkflowView.vue
+++ b/src/components/templates/TemplateWorkflowView.vue
@@ -88,7 +88,7 @@ import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vu
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
-import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 const { t } = useI18n()
 
diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 26e63a4bc..38925b9e4 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -61,8 +61,8 @@ import { watch } from 'vue'
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
 import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import type { WorkflowTemplates } from '@/types/workflowTemplateTypes'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import type { WorkflowTemplates } from '@/platform/workflow/templates/types/template'
 
 const {
   isSmallScreen,
diff --git a/src/components/templates/TemplateWorkflowsSideNav.vue b/src/components/templates/TemplateWorkflowsSideNav.vue
index 6a3252b78..07ff87990 100644
--- a/src/components/templates/TemplateWorkflowsSideNav.vue
+++ b/src/components/templates/TemplateWorkflowsSideNav.vue
@@ -33,7 +33,7 @@ import ScrollPanel from 'primevue/scrollpanel'
 import type {
   TemplateGroup,
   WorkflowTemplates
-} from '@/types/workflowTemplateTypes'
+} from '@/platform/workflow/templates/types/template'
 
 defineProps<{
   tabs: TemplateGroup[]
diff --git a/src/components/toast/GlobalToast.vue b/src/components/toast/GlobalToast.vue
index 848ad15c0..c60524a48 100644
--- a/src/components/toast/GlobalToast.vue
+++ b/src/components/toast/GlobalToast.vue
@@ -7,8 +7,8 @@ import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { nextTick, watch } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 const toast = useToast()
 const toastStore = useToastStore()
diff --git a/src/components/toast/RerouteMigrationToast.vue b/src/components/toast/RerouteMigrationToast.vue
index 916425342..18d26b3af 100644
--- a/src/components/toast/RerouteMigrationToast.vue
+++ b/src/components/toast/RerouteMigrationToast.vue
@@ -23,9 +23,9 @@ import Button from 'primevue/button'
 import Toast from 'primevue/toast'
 import { useI18n } from 'vue-i18n'
 
-import type { WorkflowJSON04 } from '@/schemas/comfyWorkflowSchema'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { WorkflowJSON04 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { app } from '@/scripts/app'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { migrateLegacyRerouteNodes } from '@/utils/migration/migrateReroute'
 
 const { t } = useI18n()
diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue
index 811dbd62c..e9f33f812 100644
--- a/src/components/topbar/CommandMenubar.vue
+++ b/src/components/topbar/CommandMenubar.vue
@@ -81,19 +81,19 @@ import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.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'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
-import { useSettingStore } from '@/stores/settingStore'
 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 abb2a08b7..60c46ff4a 100644
--- a/src/components/topbar/CurrentUserButton.spec.ts
+++ b/src/components/topbar/CurrentUserButton.spec.ts
@@ -1,10 +1,11 @@
-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'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserButton from './CurrentUserButton.vue'
 
diff --git a/src/components/topbar/CurrentUserPopover.spec.ts b/src/components/topbar/CurrentUserPopover.spec.ts
index 9929d316a..a7e965b21 100644
--- a/src/components/topbar/CurrentUserPopover.spec.ts
+++ b/src/components/topbar/CurrentUserPopover.spec.ts
@@ -1,10 +1,11 @@
-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'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
 
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 4204789c0..e7e049b35 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -39,8 +39,8 @@ import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
diff --git a/src/components/topbar/WorkflowOverflowMenu.vue b/src/components/topbar/WorkflowOverflowMenu.vue
index 042aeed24..33b8475a3 100644
--- a/src/components/topbar/WorkflowOverflowMenu.vue
+++ b/src/components/topbar/WorkflowOverflowMenu.vue
@@ -23,8 +23,8 @@ import Button from 'primevue/button'
 import Menu from 'primevue/menu'
 import { computed, ref } from 'vue'
 
-import { useWorkflowService } from '@/services/workflowService'
-import type { ComfyWorkflow } from '@/stores/workflowStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 
 const props = defineProps<{
   workflows: ComfyWorkflow[]
diff --git a/src/components/topbar/WorkflowTab.vue b/src/components/topbar/WorkflowTab.vue
index c42a92646..d427736b8 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"
@@ -40,11 +44,11 @@ import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
-import { useWorkflowThumbnail } from '@/renderer/thumbnail/composables/useWorkflowThumbnail'
-import { useWorkflowService } from '@/services/workflowService'
-import { useSettingStore } from '@/stores/settingStore'
-import { ComfyWorkflow } from '@/stores/workflowStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+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'
 
 import WorkflowTabPopover from './WorkflowTabPopover.vue'
@@ -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/WorkflowTabPopover.vue b/src/components/topbar/WorkflowTabPopover.vue
index 39e73f1a6..df8a4e7ec 100644
--- a/src/components/topbar/WorkflowTabPopover.vue
+++ b/src/components/topbar/WorkflowTabPopover.vue
@@ -41,7 +41,7 @@
 import Popover from 'primevue/popover'
 import { computed, nextTick, ref, toRefs, useId } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const POPOVER_WIDTH = 250
 
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 5b2d66a69..6a4243dde 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -81,11 +81,12 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useWorkflowService } from '@/services/workflowService'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+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 { useSettingStore } from '@/stores/settingStore'
-import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
@@ -357,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/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
new file mode 100644
index 000000000..a7d27299e
--- /dev/null
+++ b/src/components/ui/slider/Slider.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
+import {
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { type HTMLAttributes, ref } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<
+  SliderRootProps & { class?: HTMLAttributes['class'] }
+>()
+
+const pressed = ref(false)
+const setPressed = (val: boolean) => {
+  pressed.value = val
+}
+
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="
+      cn(
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50',
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        props.class
+      )
+    "
+    v-bind="forwarded"
+    @slide-start="() => setPressed(true)"
+    @slide-move="() => setPressed(true)"
+    @slide-end="() => setPressed(false)"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      :class="
+        cn(
+          'bg-node-stroke relative grow overflow-hidden rounded-full',
+          'cursor-pointer overflow-visible',
+          `before:absolute before:-inset-2 before:block before:bg-transparent`,
+          'data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full',
+          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.5'
+        )
+      "
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="bg-node-component-surface-highlight absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      :class="
+        cn(
+          'bg-node-component-surface-highlight ring-node-component-surface-selected block size-3.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow]',
+          'cursor-grab',
+          'before:absolute before:-inset-1 before:block before:bg-transparent before:rounded-full',
+          'hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+          { 'cursor-grabbing': pressed }
+        )
+      "
+    />
+  </SliderRoot>
+</template>
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 85f05d540..e33f87ace 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 c455f62ee..6c30d7dde 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 d26155705..653a6a70e 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 206c05318..f5bd09431 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 bcc84ffde..892e37a0b 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 44e6b7979..266f22910 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 34fb011f0..9bf9a4635 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 3999aa9c1..37b9e4866 100644
--- a/src/composables/auth/useCurrentUser.ts
+++ b/src/composables/auth/useCurrentUser.ts
@@ -1,3 +1,4 @@
+import { whenever } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
@@ -6,6 +7,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import type { AuthUserInfo } from '@/types/authTypes'
 
 export const useCurrentUser = () => {
   const authStore = useFirebaseAuthStore()
@@ -20,6 +22,21 @@ export const useCurrentUser = () => {
     () => !!isApiKeyLogin.value || firebaseUser.value !== null
   )
 
+  const resolvedUserInfo = computed<AuthUserInfo | null>(() => {
+    if (isApiKeyLogin.value && apiKeyStore.currentUser) {
+      return { id: apiKeyStore.currentUser.id }
+    }
+
+    if (firebaseUser.value) {
+      return { id: firebaseUser.value.uid }
+    }
+
+    return null
+  })
+
+  const onUserResolved = (callback: (user: AuthUserInfo) => void) =>
+    whenever(resolvedUserInfo, callback, { immediate: true })
+
   const userDisplayName = computed(() => {
     if (isApiKeyLogin.value) {
       return apiKeyStore.currentUser?.name
@@ -112,8 +129,10 @@ export const useCurrentUser = () => {
     userPhotoUrl,
     providerName,
     providerIcon,
+    resolvedUserInfo,
     handleSignOut,
     handleSignIn,
-    handleDeleteAccount
+    handleDeleteAccount,
+    onUserResolved
   }
 }
diff --git a/src/composables/auth/useFirebaseAuthActions.ts b/src/composables/auth/useFirebaseAuthActions.ts
index ac0afecc2..52ac27e1c 100644
--- a/src/composables/auth/useFirebaseAuthActions.ts
+++ b/src/composables/auth/useFirebaseAuthActions.ts
@@ -3,8 +3,8 @@ import { ref } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { useToastStore } from '@/stores/toastStore'
 import { usdToMicros } from '@/utils/formatUtil'
 
 /**
diff --git a/src/composables/bottomPanelTabs/useCommandSubcategories.ts b/src/composables/bottomPanelTabs/useCommandSubcategories.ts
index 0fbf37ebe..7009af2f6 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 b4c699282..e15f86fb4 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 fc2dec7ba..d353294f0 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 23b7f2bef..2abc79c93 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 fe0d2b457..000000000
--- 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 '@/stores/graphStore'
-
-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 369d2cdc9..a4a93b9fb 100644
--- a/src/composables/canvas/useSelectedLiteGraphItems.ts
+++ b/src/composables/canvas/useSelectedLiteGraphItems.ts
@@ -1,11 +1,7 @@
-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 { useCanvasStore } from '@/stores/graphStore'
 import {
   collectFromNodes,
   traverseNodesDepthFirst
diff --git a/src/composables/canvas/useSelectionToolboxPosition.ts b/src/composables/canvas/useSelectionToolboxPosition.ts
index efb8d5ca7..4d725dd74 100644
--- a/src/composables/canvas/useSelectionToolboxPosition.ts
+++ b/src/composables/canvas/useSelectionToolboxPosition.ts
@@ -1,19 +1,49 @@
-import { 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'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { useCanvasStore } from '@/stores/graphStore'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 import { computeUnionBounds } from '@/utils/mathUtil'
 
 /**
  * Manages the position of the selection toolbox independently.
  * Uses CSS custom properties for performant transform updates.
  */
+
+// Shared signals for auxiliary UI (e.g., MoreOptions) to coordinate hide/restore
+export const moreOptionsOpen = ref(false)
+export const forceCloseMoreOptionsSignal = ref(0)
+export const restoreMoreOptionsSignal = ref(0)
+export const moreOptionsRestorePending = ref(false)
+let moreOptionsWasOpenBeforeDrag = false
+let moreOptionsSelectionSignature: string | null = null
+
+function buildSelectionSignature(
+  store: ReturnType<typeof useCanvasStore>
+): string | null {
+  const c = store.canvas
+  if (!c) return null
+  const items = Array.from(c.selectedItems)
+  if (items.length !== 1) return null
+  const item = items[0]
+  if (isLGraphNode(item)) return `N:${item.id}`
+  if (isLGraphGroup(item)) return `G:${item.id}`
+  return null
+}
+
+function currentSelectionMatchesSignature(
+  store: ReturnType<typeof useCanvasStore>
+) {
+  if (!moreOptionsSelectionSignature) return false
+  return buildSelectionSignature(store) === moreOptionsSelectionSignature
+}
+
 export function useSelectionToolboxPosition(
   toolboxRef: Ref<HTMLElement | undefined>
 ) {
@@ -72,6 +102,8 @@ export function useSelectionToolboxPosition(
 
     worldPosition.value = {
       x: unionBounds.x + unionBounds.width / 2,
+      // createBounds() applied a default padding of 10px
+      // so adjust Y to maintain visual consistency
       y: unionBounds.y - 10
     }
 
@@ -96,19 +128,24 @@ 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(
     () => canvasStore.getCanvas().state.selectionChanged,
     (changed) => {
       if (changed) {
+        if (moreOptionsRestorePending.value || moreOptionsSelectionSignature) {
+          moreOptionsRestorePending.value = false
+          moreOptionsWasOpenBeforeDrag = false
+          if (!moreOptionsOpen.value) {
+            moreOptionsSelectionSignature = null
+          } else {
+            moreOptionsSelectionSignature = buildSelectionSignature(canvasStore)
+          }
+        }
         updateSelectionBounds()
         canvasStore.getCanvas().state.selectionChanged = false
-
-        // Start transform sync if we have selection
         if (visible.value) {
           startSync()
         } else {
@@ -118,24 +155,102 @@ export function useSelectionToolboxPosition(
     },
     { immediate: true }
   )
-
-  // Watch for dragging state
   watch(
-    () => canvasStore.canvas?.state?.draggingItems,
-    (dragging) => {
-      if (dragging) {
-        // Hide during node dragging
-        visible.value = false
-      } else {
-        // Update after dragging ends
-        requestAnimationFrame(() => {
-          updateSelectionBounds()
-        })
+    () => moreOptionsOpen.value,
+    (v) => {
+      if (v) {
+        moreOptionsSelectionSignature = buildSelectionSignature(canvasStore)
+      } else if (!canvasStore.canvas?.state?.draggingItems) {
+        moreOptionsSelectionSignature = null
+        if (moreOptionsRestorePending.value)
+          moreOptionsRestorePending.value = 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()
+  })
+
   return {
     visible
   }
 }
+
+// External cleanup utility to be called when SelectionToolbox component unmounts
+function resetMoreOptionsState() {
+  moreOptionsOpen.value = false
+  moreOptionsRestorePending.value = false
+  moreOptionsWasOpenBeforeDrag = false
+  moreOptionsSelectionSignature = null
+}
diff --git a/src/composables/element/useAbsolutePosition.ts b/src/composables/element/useAbsolutePosition.ts
index 4eb0f4d82..35b34b702 100644
--- a/src/composables/element/useAbsolutePosition.ts
+++ b/src/composables/element/useAbsolutePosition.ts
@@ -1,9 +1,10 @@
-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'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 export interface PositionConfig {
   /* The position of the element on litegraph canvas */
diff --git a/src/composables/element/useCanvasPositionConversion.ts b/src/composables/element/useCanvasPositionConversion.ts
index e7fb9ad9b..700b64ac4 100644
--- a/src/composables/element/useCanvasPositionConversion.ts
+++ b/src/composables/element/useCanvasPositionConversion.ts
@@ -1,6 +1,10 @@
 import { useElementBounding } from '@vueuse/core'
 
-import type { LGraphCanvas, Vector2 } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, Point } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+let sharedConverter: ReturnType<typeof useCanvasPositionConversion> | null =
+  null
 
 /**
  * Convert between canvas and client positions
@@ -14,7 +18,7 @@ export const useCanvasPositionConversion = (
 ) => {
   const { left, top, update } = useElementBounding(canvasElement)
 
-  const clientPosToCanvasPos = (pos: Vector2): Vector2 => {
+  const clientPosToCanvasPos = (pos: Point): Point => {
     const { offset, scale } = lgCanvas.ds
     return [
       (pos[0] - left.value) / scale - offset[0],
@@ -22,7 +26,7 @@ export const useCanvasPositionConversion = (
     ]
   }
 
-  const canvasPosToClientPos = (pos: Vector2): Vector2 => {
+  const canvasPosToClientPos = (pos: Point): Point => {
     const { offset, scale } = lgCanvas.ds
     return [
       (pos[0] + offset[0]) * scale + left.value,
@@ -36,3 +40,10 @@ export const useCanvasPositionConversion = (
     update
   }
 }
+
+export function useSharedCanvasPositionConversion() {
+  if (sharedConverter) return sharedConverter
+  const lgCanvas = useCanvasStore().getCanvas()
+  sharedConverter = useCanvasPositionConversion(lgCanvas.canvas, lgCanvas)
+  return sharedConverter
+}
diff --git a/src/composables/element/useDomClipping.ts b/src/composables/element/useDomClipping.ts
index c3d41c998..7dcc31fb6 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/useCanvasRefresh.ts b/src/composables/graph/useCanvasRefresh.ts
new file mode 100644
index 000000000..ddb3b4670
--- /dev/null
+++ b/src/composables/graph/useCanvasRefresh.ts
@@ -0,0 +1,22 @@
+// call nextTick on all changeTracker
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+/**
+ * Composable for refreshing nodes in the graph
+ * */
+export function useCanvasRefresh() {
+  const canvasStore = useCanvasStore()
+  const workflowStore = useWorkflowStore()
+  const refreshCanvas = () => {
+    canvasStore.canvas?.emitBeforeChange()
+    canvasStore.canvas?.setDirty(true, true)
+    canvasStore.canvas?.graph?.afterChange()
+    canvasStore.canvas?.emitAfterChange()
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  return {
+    refreshCanvas
+  }
+}
diff --git a/src/composables/graph/useCanvasTransformSync.ts b/src/composables/graph/useCanvasTransformSync.ts
deleted file mode 100644
index 02145c100..000000000
--- a/src/composables/graph/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/composables/graph/useFrameNodes.ts b/src/composables/graph/useFrameNodes.ts
new file mode 100644
index 000000000..1f743a729
--- /dev/null
+++ b/src/composables/graph/useFrameNodes.ts
@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTitleEditorStore } from '@/renderer/core/canvas/canvasStore'
+import { app } from '@/scripts/app'
+
+/**
+ * Composable encapsulating logic for framing currently selected nodes into a group.
+ */
+export function useFrameNodes() {
+  const settingStore = useSettingStore()
+  const titleEditorStore = useTitleEditorStore()
+  const { hasMultipleSelection } = useSelectionState()
+
+  const canFrame = computed(() => hasMultipleSelection.value)
+
+  const frameNodes = () => {
+    const { canvas } = app
+    if (!canvas.selectedItems?.size) return
+    const group = new LGraphGroup()
+    const padding = settingStore.get('Comfy.GroupSelectedNodes.Padding')
+    group.resizeTo(canvas.selectedItems, padding)
+    canvas.graph?.add(group)
+    titleEditorStore.titleEditorTarget = group
+  }
+
+  return { frameNodes, canFrame }
+}
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 262d37639..96c2d2065 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
 }
@@ -53,119 +29,43 @@ export interface VueNodeData {
   mode: number
   selected: boolean
   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
+    const subgraphId =
+      node.graph && 'id' in node.graph && node.graph !== node.graph.rootGraph
+        ? String(node.graph.id)
+        : null
     // Extract safe widget data
     const safeWidgets = node.widgets?.map((widget) => {
       try {
@@ -187,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
         }
@@ -201,13 +102,22 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       }
     })
 
+    const nodeType =
+      node.type ||
+      node.constructor?.comfyClass ||
+      node.constructor?.title ||
+      node.constructor?.name ||
+      'Unknown'
+
     return {
       id: String(node.id),
-      title: node.title || 'Untitled',
-      type: node.type || 'Unknown',
+      title: typeof node.title === 'string' ? node.title : '',
+      type: nodeType,
       mode: node.mode || 0,
       selected: node.selected || false,
       executing: false, // Will be updated separately based on execution state
+      subgraphId,
+      hasErrors: !!node.has_errors,
       widgets: safeWidgets,
       inputs: node.inputs ? [...node.inputs] : undefined,
       outputs: node.outputs ? [...node.outputs] : undefined,
@@ -270,7 +180,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
         ...currentData,
         widgets: updatedWidgets
       })
-      performanceMetrics.callbackUpdateCount++
     } catch (error) {
       // Ignore widget update errors to prevent cascade failures
     }
@@ -340,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
 
@@ -415,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)
       }
     }
 
@@ -435,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)
   }
 
   /**
@@ -610,35 +293,14 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     // Set up widget callbacks BEFORE extracting data (critical order)
     setupNodeWidgetCallbacks(node)
 
-    // Extract safe data for Vue
+    // 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, {
@@ -655,7 +317,11 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       // Chain our callback with any existing onAfterGraphConfigured callback
       node.onAfterGraphConfigured = useChainCallback(
         node.onAfterGraphConfigured,
-        initializeVueNodeLayout
+        () => {
+          // Re-extract data now that configure() has populated title/slots/widgets/etc.
+          vueNodeData.set(id, extractVueNodeData(node))
+          initializeVueNodeLayout()
+        }
       )
     } else {
       // Not during workflow loading - initialize layout immediately
@@ -678,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)
@@ -688,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) {
@@ -713,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()
     }
   }
 
@@ -769,21 +414,51 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
         const currentData = vueNodeData.get(nodeId)
 
         if (currentData) {
-          if (event.property === 'title') {
-            vueNodeData.set(nodeId, {
-              ...currentData,
-              title: String(event.newValue)
-            })
-          } else if (event.property === 'flags.collapsed') {
-            vueNodeData.set(nodeId, {
-              ...currentData,
-              flags: {
-                ...currentData.flags,
-                collapsed: Boolean(event.newValue)
-              }
-            })
+          switch (event.property) {
+            case 'title':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                title: String(event.newValue)
+              })
+              break
+            case 'flags.collapsed':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                flags: {
+                  ...currentData.flags,
+                  collapsed: Boolean(event.newValue)
+                }
+              })
+              break
+            case 'mode':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                mode: typeof event.newValue === 'number' ? event.newValue : 0
+              })
           }
         }
+      } 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
@@ -817,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/useGroupMenuOptions.ts b/src/composables/graph/useGroupMenuOptions.ts
new file mode 100644
index 000000000..0592d828c
--- /dev/null
+++ b/src/composables/graph/useGroupMenuOptions.ts
@@ -0,0 +1,199 @@
+import { useI18n } from 'vue-i18n'
+
+import {
+  LGraphEventMode,
+  type LGraphGroup,
+  type LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+
+import { useCanvasRefresh } from './useCanvasRefresh'
+import type { MenuOption } from './useMoreOptionsMenu'
+import { useNodeCustomization } from './useNodeCustomization'
+
+/**
+ * Composable for group-related menu operations
+ */
+export function useGroupMenuOptions() {
+  const { t } = useI18n()
+  const canvasStore = useCanvasStore()
+  const workflowStore = useWorkflowStore()
+  const settingStore = useSettingStore()
+  const canvasRefresh = useCanvasRefresh()
+  const { shapeOptions, colorOptions, isLightTheme } = useNodeCustomization()
+
+  const getFitGroupToNodesOption = (groupContext: LGraphGroup): MenuOption => ({
+    label: 'Fit Group To Nodes',
+    icon: 'icon-[lucide--move-diagonal-2]',
+    action: () => {
+      try {
+        groupContext.recomputeInsideNodes()
+      } catch (e) {
+        console.warn('Failed to recompute group nodes:', e)
+        return
+      }
+
+      const padding = settingStore.get('Comfy.GroupSelectedNodes.Padding')
+      groupContext.resizeTo(groupContext.children, padding)
+      groupContext.graph?.change()
+      canvasStore.canvas?.setDirty(true, true)
+      workflowStore.activeWorkflow?.changeTracker?.checkState()
+    }
+  })
+
+  const getGroupShapeOptions = (
+    groupContext: LGraphGroup,
+    bump: () => void
+  ): MenuOption => ({
+    label: t('contextMenu.Shape'),
+    icon: 'icon-[lucide--box]',
+    hasSubmenu: true,
+    submenu: shapeOptions.map((shape) => ({
+      label: shape.localizedName,
+      action: () => {
+        const nodes = (groupContext.nodes || []) as LGraphNode[]
+        nodes.forEach((node) => (node.shape = shape.value))
+        canvasRefresh.refreshCanvas()
+        bump()
+      }
+    }))
+  })
+
+  const getGroupColorOptions = (
+    groupContext: LGraphGroup,
+    bump: () => void
+  ): MenuOption => ({
+    label: t('contextMenu.Color'),
+    icon: 'icon-[lucide--palette]',
+    hasSubmenu: true,
+    submenu: colorOptions.map((colorOption) => ({
+      label: colorOption.localizedName,
+      color: isLightTheme.value
+        ? colorOption.value.light
+        : colorOption.value.dark,
+      action: () => {
+        groupContext.color = isLightTheme.value
+          ? colorOption.value.light
+          : colorOption.value.dark
+        canvasRefresh.refreshCanvas()
+        bump()
+      }
+    }))
+  })
+
+  const getGroupModeOptions = (
+    groupContext: LGraphGroup,
+    bump: () => void
+  ): MenuOption[] => {
+    const options: MenuOption[] = []
+
+    try {
+      groupContext.recomputeInsideNodes()
+    } catch (e) {
+      console.warn('Failed to recompute group nodes for mode options:', e)
+      return options
+    }
+
+    const groupNodes = (groupContext.nodes || []) as LGraphNode[]
+    if (!groupNodes.length) return options
+
+    // Check if all nodes have the same mode
+    let allSame = true
+    for (let i = 1; i < groupNodes.length; i++) {
+      if (groupNodes[i].mode !== groupNodes[0].mode) {
+        allSame = false
+        break
+      }
+    }
+
+    const createModeAction = (label: string, mode: LGraphEventMode) => ({
+      label: t(`selectionToolbox.${label}`),
+      icon:
+        mode === LGraphEventMode.BYPASS
+          ? 'icon-[lucide--ban]'
+          : mode === LGraphEventMode.NEVER
+            ? 'icon-[lucide--zap-off]'
+            : 'icon-[lucide--play]',
+      action: () => {
+        groupNodes.forEach((n) => {
+          n.mode = mode
+        })
+        canvasStore.canvas?.setDirty(true, true)
+        groupContext.graph?.change()
+        workflowStore.activeWorkflow?.changeTracker?.checkState()
+        bump()
+      }
+    })
+
+    if (allSame) {
+      const current = groupNodes[0].mode
+      switch (current) {
+        case LGraphEventMode.ALWAYS:
+          options.push(
+            createModeAction('Set Group Nodes to Never', LGraphEventMode.NEVER)
+          )
+          options.push(
+            createModeAction('Bypass Group Nodes', LGraphEventMode.BYPASS)
+          )
+          break
+        case LGraphEventMode.NEVER:
+          options.push(
+            createModeAction(
+              'Set Group Nodes to Always',
+              LGraphEventMode.ALWAYS
+            )
+          )
+          options.push(
+            createModeAction('Bypass Group Nodes', LGraphEventMode.BYPASS)
+          )
+          break
+        case LGraphEventMode.BYPASS:
+          options.push(
+            createModeAction(
+              'Set Group Nodes to Always',
+              LGraphEventMode.ALWAYS
+            )
+          )
+          options.push(
+            createModeAction('Set Group Nodes to Never', LGraphEventMode.NEVER)
+          )
+          break
+        default:
+          options.push(
+            createModeAction(
+              'Set Group Nodes to Always',
+              LGraphEventMode.ALWAYS
+            )
+          )
+          options.push(
+            createModeAction('Set Group Nodes to Never', LGraphEventMode.NEVER)
+          )
+          options.push(
+            createModeAction('Bypass Group Nodes', LGraphEventMode.BYPASS)
+          )
+          break
+      }
+    } else {
+      options.push(
+        createModeAction('Set Group Nodes to Always', LGraphEventMode.ALWAYS)
+      )
+      options.push(
+        createModeAction('Set Group Nodes to Never', LGraphEventMode.NEVER)
+      )
+      options.push(
+        createModeAction('Bypass Group Nodes', LGraphEventMode.BYPASS)
+      )
+    }
+
+    return options
+  }
+
+  return {
+    getFitGroupToNodesOption,
+    getGroupShapeOptions,
+    getGroupColorOptions,
+    getGroupModeOptions
+  }
+}
diff --git a/src/composables/graph/useImageMenuOptions.ts b/src/composables/graph/useImageMenuOptions.ts
new file mode 100644
index 000000000..3956edefa
--- /dev/null
+++ b/src/composables/graph/useImageMenuOptions.ts
@@ -0,0 +1,108 @@
+import { useI18n } from 'vue-i18n'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import { useCommandStore } from '@/stores/commandStore'
+
+import type { MenuOption } from './useMoreOptionsMenu'
+
+/**
+ * Composable for image-related menu operations
+ */
+export function useImageMenuOptions() {
+  const { t } = useI18n()
+
+  const openMaskEditor = () => {
+    const commandStore = useCommandStore()
+    void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
+  }
+
+  const openImage = (node: any) => {
+    if (!node?.imgs?.length) return
+    const img = node.imgs[node.imageIndex ?? 0]
+    if (!img) return
+    const url = new URL(img.src)
+    url.searchParams.delete('preview')
+    window.open(url.toString(), '_blank')
+  }
+
+  const copyImage = async (node: any) => {
+    if (!node?.imgs?.length) return
+    const img = node.imgs[node.imageIndex ?? 0]
+    if (!img) return
+
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    canvas.width = img.naturalWidth
+    canvas.height = img.naturalHeight
+    ctx.drawImage(img, 0, 0)
+
+    try {
+      const blob = await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob(resolve, 'image/png')
+      })
+
+      if (!blob) {
+        console.warn('Failed to create image blob')
+        return
+      }
+
+      // Check if clipboard API is available
+      if (!navigator.clipboard?.write) {
+        console.warn('Clipboard API not available')
+        return
+      }
+
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/png': blob })
+      ])
+    } catch (error) {
+      console.error('Failed to copy image to clipboard:', error)
+    }
+  }
+
+  const saveImage = (node: any) => {
+    if (!node?.imgs?.length) return
+    const img = node.imgs[node.imageIndex ?? 0]
+    if (!img) return
+
+    try {
+      const url = new URL(img.src)
+      url.searchParams.delete('preview')
+      downloadFile(url.toString())
+    } catch (error) {
+      console.error('Failed to save image:', error)
+    }
+  }
+
+  const getImageMenuOptions = (node: any): MenuOption[] => {
+    if (!node?.imgs?.length) return []
+
+    return [
+      {
+        label: t('contextMenu.Open in Mask Editor'),
+        action: () => openMaskEditor()
+      },
+      {
+        label: t('contextMenu.Open Image'),
+        icon: 'icon-[lucide--external-link]',
+        action: () => openImage(node)
+      },
+      {
+        label: t('contextMenu.Copy Image'),
+        icon: 'icon-[lucide--copy]',
+        action: () => copyImage(node)
+      },
+      {
+        label: t('contextMenu.Save Image'),
+        icon: 'icon-[lucide--download]',
+        action: () => saveImage(node)
+      }
+    ]
+  }
+
+  return {
+    getImageMenuOptions
+  }
+}
diff --git a/src/composables/graph/useMoreOptionsMenu.ts b/src/composables/graph/useMoreOptionsMenu.ts
new file mode 100644
index 000000000..d668bfaf9
--- /dev/null
+++ b/src/composables/graph/useMoreOptionsMenu.ts
@@ -0,0 +1,186 @@
+import { computed, ref } from 'vue'
+
+import type { LGraphGroup } from '@/lib/litegraph/src/litegraph'
+import { isLGraphGroup } from '@/utils/litegraphUtil'
+
+import { useGroupMenuOptions } from './useGroupMenuOptions'
+import { useImageMenuOptions } from './useImageMenuOptions'
+import { useNodeMenuOptions } from './useNodeMenuOptions'
+import { useSelectionMenuOptions } from './useSelectionMenuOptions'
+import { useSelectionState } from './useSelectionState'
+
+export interface MenuOption {
+  label?: string
+  icon?: string
+  shortcut?: string
+  hasSubmenu?: boolean
+  type?: 'divider'
+  action?: () => void
+  submenu?: SubMenuOption[]
+  badge?: BadgeVariant
+}
+
+export interface SubMenuOption {
+  label: string
+  icon?: string
+  action: () => void
+  color?: string
+}
+
+export enum BadgeVariant {
+  NEW = 'new',
+  DEPRECATED = 'deprecated'
+}
+
+/**
+ * Composable for managing the More Options menu configuration
+ * Refactored to use smaller, focused composables for better maintainability
+ */
+export function useMoreOptionsMenu() {
+  const {
+    selectedItems,
+    selectedNodes,
+    nodeDef,
+    showNodeHelp,
+    hasSubgraphs: hasSubgraphsComputed,
+    hasImageNode,
+    hasOutputNodesSelected,
+    hasMultipleSelection,
+    computeSelectionFlags
+  } = useSelectionState()
+
+  const { getImageMenuOptions } = useImageMenuOptions()
+  const {
+    getNodeInfoOption,
+    getAdjustSizeOption,
+    getNodeVisualOptions,
+    getPinOption,
+    getBypassOption,
+    getRunBranchOption
+  } = useNodeMenuOptions()
+  const {
+    getFitGroupToNodesOption,
+    getGroupShapeOptions,
+    getGroupColorOptions,
+    getGroupModeOptions
+  } = useGroupMenuOptions()
+  const {
+    getBasicSelectionOptions,
+    getSubgraphOptions,
+    getMultipleNodesOptions,
+    getDeleteOption,
+    getAlignmentOptions
+  } = useSelectionMenuOptions()
+
+  const hasSubgraphs = hasSubgraphsComputed
+  const hasMultipleNodes = hasMultipleSelection
+
+  // Internal version to force menu rebuild after state mutations
+  const optionsVersion = ref(0)
+  const bump = () => {
+    optionsVersion.value++
+  }
+
+  const menuOptions = computed((): MenuOption[] => {
+    // Reference selection flags to ensure re-computation when they change
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    optionsVersion.value
+    const states = computeSelectionFlags()
+
+    // Detect single group selection context (and no nodes explicitly selected)
+    const selectedGroups = selectedItems.value.filter(
+      isLGraphGroup
+    ) as LGraphGroup[]
+    const groupContext: LGraphGroup | null =
+      selectedGroups.length === 1 && selectedNodes.value.length === 0
+        ? selectedGroups[0]
+        : null
+    const hasSubgraphsSelected = hasSubgraphs.value
+    const options: MenuOption[] = []
+
+    // Section 1: Basic selection operations (Rename, Copy, Duplicate)
+    options.push(...getBasicSelectionOptions())
+    options.push({ type: 'divider' })
+
+    // Section 2: Node Info & Size Adjustment
+    if (nodeDef.value) {
+      options.push(getNodeInfoOption(showNodeHelp))
+    }
+
+    if (groupContext) {
+      options.push(getFitGroupToNodesOption(groupContext))
+    } else {
+      options.push(getAdjustSizeOption())
+    }
+
+    // Section 3: Collapse/Shape/Color
+    if (groupContext) {
+      // Group context: Shape, Color, Divider
+      options.push(getGroupShapeOptions(groupContext, bump))
+      options.push(getGroupColorOptions(groupContext, bump))
+      options.push({ type: 'divider' })
+    } else {
+      // Node context: Expand/Minimize, Shape, Color, Divider
+      options.push(...getNodeVisualOptions(states, bump))
+      options.push({ type: 'divider' })
+    }
+
+    // Section 4: Image operations (if image node)
+    if (hasImageNode.value && selectedNodes.value.length > 0) {
+      options.push(...getImageMenuOptions(selectedNodes.value[0]))
+    }
+
+    // Section 5: Subgraph operations
+    options.push(...getSubgraphOptions(hasSubgraphsSelected))
+
+    // Section 6: Multiple nodes operations
+    if (hasMultipleNodes.value) {
+      options.push(...getMultipleNodesOptions())
+    }
+
+    // Section 7: Divider
+    options.push({ type: 'divider' })
+
+    // Section 8: Pin/Unpin (non-group only)
+    if (!groupContext) {
+      options.push(getPinOption(states, bump))
+    }
+
+    // Section 9: Alignment (if multiple nodes)
+    if (hasMultipleNodes.value) {
+      options.push(...getAlignmentOptions())
+    }
+
+    // Section 10: Mode operations
+    if (groupContext) {
+      // Group mode operations
+      options.push(...getGroupModeOptions(groupContext, bump))
+    } else {
+      // Bypass option for nodes
+      options.push(getBypassOption(states, bump))
+    }
+
+    // Section 11: Run Branch (if output nodes)
+    if (hasOutputNodesSelected.value) {
+      options.push(getRunBranchOption())
+    }
+
+    // Section 12: Final divider and Delete
+    options.push({ type: 'divider' })
+    options.push(getDeleteOption())
+
+    return options
+  })
+
+  // Computed property to get only menu items with submenus
+  const menuOptionsWithSubmenu = computed(() =>
+    menuOptions.value.filter((option) => option.hasSubmenu && option.submenu)
+  )
+
+  return {
+    menuOptions,
+    menuOptionsWithSubmenu,
+    bump,
+    hasSubgraphs
+  }
+}
diff --git a/src/composables/graph/useNodeArrangement.ts b/src/composables/graph/useNodeArrangement.ts
new file mode 100644
index 000000000..df9568b19
--- /dev/null
+++ b/src/composables/graph/useNodeArrangement.ts
@@ -0,0 +1,106 @@
+import { useI18n } from 'vue-i18n'
+
+import type { Direction } from '@/lib/litegraph/src/interfaces'
+import { alignNodes, distributeNodes } from '@/lib/litegraph/src/utils/arrange'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+import { useCanvasRefresh } from './useCanvasRefresh'
+
+interface AlignOption {
+  name: string
+  localizedName: string
+  value: Direction
+  icon: string
+}
+
+interface DistributeOption {
+  name: string
+  localizedName: string
+  value: boolean // true for horizontal, false for vertical
+  icon: string
+}
+
+/**
+ * Composable for handling node alignment and distribution
+ */
+export function useNodeArrangement() {
+  const { t } = useI18n()
+  const canvasStore = useCanvasStore()
+  const canvasRefresh = useCanvasRefresh()
+  const alignOptions: AlignOption[] = [
+    {
+      name: 'top',
+      localizedName: t('contextMenu.Top'),
+      value: 'top',
+      icon: 'icon-[lucide--align-start-vertical]'
+    },
+    {
+      name: 'bottom',
+      localizedName: t('contextMenu.Bottom'),
+      value: 'bottom',
+      icon: 'icon-[lucide--align-end-vertical]'
+    },
+    {
+      name: 'left',
+      localizedName: t('contextMenu.Left'),
+      value: 'left',
+      icon: 'icon-[lucide--align-start-horizontal]'
+    },
+    {
+      name: 'right',
+      localizedName: t('contextMenu.Right'),
+      value: 'right',
+      icon: 'icon-[lucide--align-end-horizontal]'
+    }
+  ]
+
+  const distributeOptions: DistributeOption[] = [
+    {
+      name: 'horizontal',
+      localizedName: t('contextMenu.Horizontal'),
+      value: true,
+      icon: 'icon-[lucide--align-center-horizontal]'
+    },
+    {
+      name: 'vertical',
+      localizedName: t('contextMenu.Vertical'),
+      value: false,
+      icon: 'icon-[lucide--align-center-vertical]'
+    }
+  ]
+
+  const applyAlign = (alignOption: AlignOption) => {
+    const selectedNodes = Array.from(canvasStore.selectedItems).filter((item) =>
+      isLGraphNode(item)
+    )
+
+    if (selectedNodes.length === 0) {
+      return
+    }
+
+    alignNodes(selectedNodes, alignOption.value)
+
+    canvasRefresh.refreshCanvas()
+  }
+
+  const applyDistribute = (distributeOption: DistributeOption) => {
+    const selectedNodes = Array.from(canvasStore.selectedItems).filter((item) =>
+      isLGraphNode(item)
+    )
+
+    if (selectedNodes.length < 2) {
+      return
+    }
+
+    distributeNodes(selectedNodes, distributeOption.value)
+    canvasRefresh.refreshCanvas()
+  }
+
+  return {
+    alignOptions,
+    distributeOptions,
+    applyAlign,
+    applyDistribute
+  }
+}
diff --git a/src/composables/graph/useNodeCustomization.ts b/src/composables/graph/useNodeCustomization.ts
new file mode 100644
index 000000000..5a8032657
--- /dev/null
+++ b/src/composables/graph/useNodeCustomization.ts
@@ -0,0 +1,167 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  LGraphCanvas,
+  LGraphNode,
+  LiteGraph,
+  RenderShape,
+  isColorable
+} from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
+
+import { useCanvasRefresh } from './useCanvasRefresh'
+
+interface ColorOption {
+  name: string
+  localizedName: string
+  value: {
+    dark: string
+    light: string
+  }
+}
+
+interface ShapeOption {
+  name: string
+  localizedName: string
+  value: RenderShape
+}
+
+/**
+ * Composable for handling node color and shape customization
+ */
+export function useNodeCustomization() {
+  const { t } = useI18n()
+  const canvasStore = useCanvasStore()
+  const colorPaletteStore = useColorPaletteStore()
+  const canvasRefresh = useCanvasRefresh()
+  const isLightTheme = computed(
+    () => colorPaletteStore.completedActivePalette.light_theme
+  )
+
+  const toLightThemeColor = (color: string) =>
+    adjustColor(color, { lightness: 0.5 })
+
+  // Color options
+  const NO_COLOR_OPTION: ColorOption = {
+    name: 'noColor',
+    localizedName: t('color.noColor'),
+    value: {
+      dark: LiteGraph.NODE_DEFAULT_BGCOLOR,
+      light: toLightThemeColor(LiteGraph.NODE_DEFAULT_BGCOLOR)
+    }
+  }
+
+  const colorOptions: ColorOption[] = [
+    NO_COLOR_OPTION,
+    ...Object.entries(LGraphCanvas.node_colors).map(([name, color]) => ({
+      name,
+      localizedName: t(`color.${name}`),
+      value: {
+        dark: color.bgcolor,
+        light: toLightThemeColor(color.bgcolor)
+      }
+    }))
+  ]
+
+  // Shape options
+  const shapeOptions: ShapeOption[] = [
+    {
+      name: 'default',
+      localizedName: t('shape.default'),
+      value: RenderShape.ROUND
+    },
+    {
+      name: 'box',
+      localizedName: t('shape.box'),
+      value: RenderShape.BOX
+    },
+    {
+      name: 'card',
+      localizedName: t('shape.CARD'),
+      value: RenderShape.CARD
+    }
+  ]
+
+  const applyColor = (colorOption: ColorOption | null) => {
+    const colorName = colorOption?.name ?? NO_COLOR_OPTION.name
+    const canvasColorOption =
+      colorName === NO_COLOR_OPTION.name
+        ? null
+        : LGraphCanvas.node_colors[colorName]
+
+    for (const item of canvasStore.selectedItems) {
+      if (isColorable(item)) {
+        item.setColorOption(canvasColorOption)
+      }
+    }
+
+    canvasRefresh.refreshCanvas()
+  }
+
+  const applyShape = (shapeOption: ShapeOption) => {
+    const selectedNodes = Array.from(canvasStore.selectedItems).filter(
+      (item): item is LGraphNode => item instanceof LGraphNode
+    )
+
+    if (selectedNodes.length === 0) {
+      return
+    }
+
+    selectedNodes.forEach((node) => {
+      node.shape = shapeOption.value
+    })
+
+    canvasRefresh.refreshCanvas()
+  }
+
+  const getCurrentColor = (): ColorOption | null => {
+    const selectedItems = Array.from(canvasStore.selectedItems)
+    if (selectedItems.length === 0) return null
+
+    // Get color from first colorable item
+    const firstColorableItem = selectedItems.find((item) => isColorable(item))
+    if (!firstColorableItem || !isColorable(firstColorableItem)) return null
+
+    // Get the current color option from the colorable item
+    const currentColorOption = firstColorableItem.getColorOption()
+    const currentBgColor = currentColorOption?.bgcolor ?? null
+
+    // Find matching color option
+    return (
+      colorOptions.find(
+        (option) =>
+          option.value.dark === currentBgColor ||
+          option.value.light === currentBgColor
+      ) ?? NO_COLOR_OPTION
+    )
+  }
+
+  const getCurrentShape = (): ShapeOption | null => {
+    const selectedNodes = Array.from(canvasStore.selectedItems).filter(
+      (item): item is LGraphNode => item instanceof LGraphNode
+    )
+
+    if (selectedNodes.length === 0) return null
+
+    const firstNode = selectedNodes[0]
+    const currentShape = firstNode.shape ?? RenderShape.ROUND
+
+    return (
+      shapeOptions.find((option) => option.value === currentShape) ??
+      shapeOptions[0]
+    )
+  }
+
+  return {
+    colorOptions,
+    shapeOptions,
+    applyColor,
+    applyShape,
+    getCurrentColor,
+    getCurrentShape,
+    isLightTheme
+  }
+}
diff --git a/src/composables/graph/useNodeMenuOptions.ts b/src/composables/graph/useNodeMenuOptions.ts
new file mode 100644
index 000000000..c1d291a4d
--- /dev/null
+++ b/src/composables/graph/useNodeMenuOptions.ts
@@ -0,0 +1,128 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { MenuOption } from './useMoreOptionsMenu'
+import { useNodeCustomization } from './useNodeCustomization'
+import { useSelectedNodeActions } from './useSelectedNodeActions'
+import type { NodeSelectionState } from './useSelectionState'
+
+/**
+ * Composable for node-related menu operations
+ */
+export function useNodeMenuOptions() {
+  const { t } = useI18n()
+  const { shapeOptions, applyShape, applyColor, colorOptions, isLightTheme } =
+    useNodeCustomization()
+  const {
+    adjustNodeSize,
+    toggleNodeCollapse,
+    toggleNodePin,
+    toggleNodeBypass,
+    runBranch
+  } = useSelectedNodeActions()
+
+  const shapeSubmenu = computed(() =>
+    shapeOptions.map((shape) => ({
+      label: shape.localizedName,
+      action: () => applyShape(shape)
+    }))
+  )
+
+  const colorSubmenu = computed(() => {
+    return colorOptions.map((colorOption) => ({
+      label: colorOption.localizedName,
+      color: isLightTheme.value
+        ? colorOption.value.light
+        : colorOption.value.dark,
+      action: () =>
+        applyColor(colorOption.name === 'noColor' ? null : colorOption)
+    }))
+  })
+
+  const getAdjustSizeOption = (): MenuOption => ({
+    label: t('contextMenu.Adjust Size'),
+    icon: 'icon-[lucide--move-diagonal-2]',
+    action: adjustNodeSize
+  })
+
+  const getNodeVisualOptions = (
+    states: NodeSelectionState,
+    bump: () => void
+  ): MenuOption[] => [
+    {
+      label: states.collapsed
+        ? t('contextMenu.Expand Node')
+        : t('contextMenu.Minimize Node'),
+      icon: states.collapsed
+        ? 'icon-[lucide--maximize-2]'
+        : 'icon-[lucide--minimize-2]',
+      action: () => {
+        toggleNodeCollapse()
+        bump()
+      }
+    },
+    {
+      label: t('contextMenu.Shape'),
+      icon: 'icon-[lucide--box]',
+      hasSubmenu: true,
+      submenu: shapeSubmenu.value,
+      action: () => {}
+    },
+    {
+      label: t('contextMenu.Color'),
+      icon: 'icon-[lucide--palette]',
+      hasSubmenu: true,
+      submenu: colorSubmenu.value,
+      action: () => {}
+    }
+  ]
+
+  const getPinOption = (
+    states: NodeSelectionState,
+    bump: () => void
+  ): MenuOption => ({
+    label: states.pinned ? t('contextMenu.Unpin') : t('contextMenu.Pin'),
+    icon: states.pinned ? 'icon-[lucide--pin-off]' : 'icon-[lucide--pin]',
+    action: () => {
+      toggleNodePin()
+      bump()
+    }
+  })
+
+  const getBypassOption = (
+    states: NodeSelectionState,
+    bump: () => void
+  ): MenuOption => ({
+    label: states.bypassed
+      ? t('contextMenu.Remove Bypass')
+      : t('contextMenu.Bypass'),
+    icon: states.bypassed ? 'icon-[lucide--zap-off]' : 'icon-[lucide--ban]',
+    shortcut: 'Ctrl+B',
+    action: () => {
+      toggleNodeBypass()
+      bump()
+    }
+  })
+
+  const getRunBranchOption = (): MenuOption => ({
+    label: t('contextMenu.Run Branch'),
+    icon: 'icon-[lucide--play]',
+    action: runBranch
+  })
+
+  const getNodeInfoOption = (showNodeHelp: () => void): MenuOption => ({
+    label: t('contextMenu.Node Info'),
+    icon: 'icon-[lucide--info]',
+    action: showNodeHelp
+  })
+
+  return {
+    getNodeInfoOption,
+    getAdjustSizeOption,
+    getNodeVisualOptions,
+    getPinOption,
+    getBypassOption,
+    getRunBranchOption,
+    colorSubmenu
+  }
+}
diff --git a/src/composables/graph/useSelectedNodeActions.ts b/src/composables/graph/useSelectedNodeActions.ts
new file mode 100644
index 000000000..7ea48b545
--- /dev/null
+++ b/src/composables/graph/useSelectedNodeActions.ts
@@ -0,0 +1,68 @@
+import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
+import { useCommandStore } from '@/stores/commandStore'
+import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+
+/**
+ * Composable for handling node information and utility operations
+ */
+export function useSelectedNodeActions() {
+  const { getSelectedNodes, toggleSelectedNodesMode } =
+    useSelectedLiteGraphItems()
+  const commandStore = useCommandStore()
+  const workflowStore = useWorkflowStore()
+
+  const adjustNodeSize = () => {
+    const selectedNodes = getSelectedNodes()
+
+    selectedNodes.forEach((node) => {
+      const optimalSize = node.computeSize()
+      node.setSize([optimalSize[0], optimalSize[1]])
+    })
+
+    app.canvas.setDirty(true, true)
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const toggleNodeCollapse = () => {
+    const selectedNodes = getSelectedNodes()
+    selectedNodes.forEach((node) => {
+      node.collapse()
+    })
+
+    app.canvas.setDirty(true, true)
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const toggleNodePin = () => {
+    const selectedNodes = getSelectedNodes()
+    selectedNodes.forEach((node) => {
+      node.pin(!node.pinned)
+    })
+
+    app.canvas.setDirty(true, true)
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const toggleNodeBypass = () => {
+    toggleSelectedNodesMode(LGraphEventMode.BYPASS)
+    app.canvas.setDirty(true, true)
+  }
+
+  const runBranch = async () => {
+    const selectedNodes = getSelectedNodes()
+    const selectedOutputNodes = filterOutputNodes(selectedNodes)
+    if (selectedOutputNodes.length === 0) return
+    await commandStore.execute('Comfy.QueueSelectedOutputNodes')
+  }
+
+  return {
+    adjustNodeSize,
+    toggleNodeCollapse,
+    toggleNodePin,
+    toggleNodeBypass,
+    runBranch
+  }
+}
diff --git a/src/composables/graph/useSelectionMenuOptions.ts b/src/composables/graph/useSelectionMenuOptions.ts
new file mode 100644
index 000000000..0a90df1f8
--- /dev/null
+++ b/src/composables/graph/useSelectionMenuOptions.ts
@@ -0,0 +1,147 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+import { useFrameNodes } from './useFrameNodes'
+import { BadgeVariant, type MenuOption } from './useMoreOptionsMenu'
+import { useNodeArrangement } from './useNodeArrangement'
+import { useSelectionOperations } from './useSelectionOperations'
+import { useSubgraphOperations } from './useSubgraphOperations'
+
+/**
+ * Composable for selection-related menu operations
+ */
+export function useSelectionMenuOptions() {
+  const { t } = useI18n()
+  const {
+    copySelection,
+    duplicateSelection,
+    deleteSelection,
+    renameSelection
+  } = useSelectionOperations()
+
+  const { alignOptions, distributeOptions, applyAlign, applyDistribute } =
+    useNodeArrangement()
+
+  const { convertToSubgraph, unpackSubgraph, addSubgraphToLibrary } =
+    useSubgraphOperations()
+
+  const { frameNodes } = useFrameNodes()
+
+  const alignSubmenu = computed(() =>
+    alignOptions.map((align) => ({
+      label: align.localizedName,
+      icon: align.icon,
+      action: () => applyAlign(align)
+    }))
+  )
+
+  const distributeSubmenu = computed(() =>
+    distributeOptions.map((distribute) => ({
+      label: distribute.localizedName,
+      icon: distribute.icon,
+      action: () => applyDistribute(distribute)
+    }))
+  )
+
+  const getBasicSelectionOptions = (): MenuOption[] => [
+    {
+      label: t('contextMenu.Rename'),
+      action: renameSelection
+    },
+    {
+      label: t('contextMenu.Copy'),
+      shortcut: 'Ctrl+C',
+      action: copySelection
+    },
+    {
+      label: t('contextMenu.Duplicate'),
+      shortcut: 'Ctrl+D',
+      action: duplicateSelection
+    }
+  ]
+
+  const getSubgraphOptions = (hasSubgraphs: boolean): MenuOption[] => {
+    if (hasSubgraphs) {
+      return [
+        {
+          label: t('contextMenu.Add Subgraph to Library'),
+          icon: 'icon-[lucide--folder-plus]',
+          action: addSubgraphToLibrary
+        },
+        {
+          label: t('contextMenu.Unpack Subgraph'),
+          icon: 'icon-[lucide--expand]',
+          action: unpackSubgraph
+        }
+      ]
+    } else {
+      return [
+        {
+          label: t('contextMenu.Convert to Subgraph'),
+          icon: 'icon-[lucide--shrink]',
+          action: convertToSubgraph,
+          badge: BadgeVariant.NEW
+        }
+      ]
+    }
+  }
+
+  const getMultipleNodesOptions = (): MenuOption[] => {
+    const convertToGroupNodes = () => {
+      const commandStore = useCommandStore()
+      void commandStore.execute(
+        'Comfy.GroupNode.ConvertSelectedNodesToGroupNode'
+      )
+    }
+
+    return [
+      {
+        label: t('contextMenu.Convert to Group Node'),
+        icon: 'icon-[lucide--group]',
+        action: convertToGroupNodes,
+        badge: BadgeVariant.DEPRECATED
+      },
+      {
+        label: t('g.frameNodes'),
+        icon: 'icon-[lucide--frame]',
+        action: frameNodes
+      }
+    ]
+  }
+
+  const getAlignmentOptions = (): MenuOption[] => [
+    {
+      label: t('contextMenu.Align Selected To'),
+      icon: 'icon-[lucide--align-start-horizontal]',
+      hasSubmenu: true,
+      submenu: alignSubmenu.value,
+      action: () => {}
+    },
+    {
+      label: t('contextMenu.Distribute Nodes'),
+      icon: 'icon-[lucide--align-center-horizontal]',
+      hasSubmenu: true,
+      submenu: distributeSubmenu.value,
+      action: () => {}
+    }
+  ]
+
+  const getDeleteOption = (): MenuOption => ({
+    label: t('contextMenu.Delete'),
+    icon: 'icon-[lucide--trash-2]',
+    shortcut: 'Delete',
+    action: deleteSelection
+  })
+
+  return {
+    getBasicSelectionOptions,
+    getSubgraphOptions,
+    getMultipleNodesOptions,
+    getDeleteOption,
+    getAlignmentOptions,
+    alignSubmenu,
+    distributeSubmenu
+  }
+}
diff --git a/src/composables/graph/useSelectionOperations.ts b/src/composables/graph/useSelectionOperations.ts
new file mode 100644
index 000000000..857e8871d
--- /dev/null
+++ b/src/composables/graph/useSelectionOperations.ts
@@ -0,0 +1,168 @@
+// import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems' // Unused for now
+import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import {
+  useCanvasStore,
+  useTitleEditorStore
+} from '@/renderer/core/canvas/canvasStore'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+
+/**
+ * Composable for handling basic selection operations like copy, paste, duplicate, delete, rename
+ */
+export function useSelectionOperations() {
+  // const { getSelectedNodes } = useSelectedLiteGraphItems() // Unused for now
+  const canvasStore = useCanvasStore()
+  const toastStore = useToastStore()
+  const dialogService = useDialogService()
+  const titleEditorStore = useTitleEditorStore()
+  const workflowStore = useWorkflowStore()
+
+  const copySelection = () => {
+    const canvas = app.canvas
+    if (!canvas.selectedItems || canvas.selectedItems.size === 0) {
+      toastStore.add({
+        severity: 'warn',
+        summary: t('g.nothingToCopy'),
+        detail: t('g.selectItemsToCopy'),
+        life: 3000
+      })
+      return
+    }
+
+    canvas.copyToClipboard()
+    toastStore.add({
+      severity: 'success',
+      summary: t('g.copied'),
+      detail: t('g.itemsCopiedToClipboard'),
+      life: 2000
+    })
+  }
+
+  const pasteSelection = () => {
+    const canvas = app.canvas
+    canvas.pasteFromClipboard({ connectInputs: false })
+
+    // Trigger change tracking
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const duplicateSelection = () => {
+    const canvas = app.canvas
+    if (!canvas.selectedItems || canvas.selectedItems.size === 0) {
+      toastStore.add({
+        severity: 'warn',
+        summary: t('g.nothingToDuplicate'),
+        detail: t('g.selectItemsToDuplicate'),
+        life: 3000
+      })
+      return
+    }
+
+    // Copy current selection
+    canvas.copyToClipboard()
+
+    // Clear selection to avoid confusion
+    canvas.selectedItems.clear()
+    canvasStore.updateSelectedItems()
+
+    // Paste to create duplicates
+    canvas.pasteFromClipboard({ connectInputs: false })
+
+    // Trigger change tracking
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const deleteSelection = () => {
+    const canvas = app.canvas
+    if (!canvas.selectedItems || canvas.selectedItems.size === 0) {
+      toastStore.add({
+        severity: 'warn',
+        summary: t('g.nothingToDelete'),
+        detail: t('g.selectItemsToDelete'),
+        life: 3000
+      })
+      return
+    }
+
+    canvas.deleteSelected()
+    canvas.setDirty(true, true)
+
+    // Trigger change tracking
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const renameSelection = async () => {
+    const selectedItems = Array.from(canvasStore.selectedItems)
+
+    // Handle single node selection
+    if (selectedItems.length === 1) {
+      const item = selectedItems[0]
+
+      // For nodes, use the title editor
+      if (item instanceof LGraphNode) {
+        titleEditorStore.titleEditorTarget = item
+        return
+      }
+
+      // For other items like groups, use prompt dialog
+      const currentTitle = 'title' in item ? (item.title as string) : ''
+      const newTitle = await dialogService.prompt({
+        title: t('g.rename'),
+        message: t('g.enterNewName'),
+        defaultValue: currentTitle
+      })
+
+      if (newTitle && newTitle !== currentTitle) {
+        if ('title' in item) {
+          // Type-safe assignment for items with title property
+          const titledItem = item as { title: string }
+          titledItem.title = newTitle
+          app.canvas.setDirty(true, true)
+          workflowStore.activeWorkflow?.changeTracker?.checkState()
+        }
+      }
+      return
+    }
+
+    // Handle multiple selections - batch rename
+    if (selectedItems.length > 1) {
+      const baseTitle = await dialogService.prompt({
+        title: t('g.batchRename'),
+        message: t('g.enterBaseName'),
+        defaultValue: 'Item'
+      })
+
+      if (baseTitle) {
+        selectedItems.forEach((item, index) => {
+          if ('title' in item) {
+            // Type-safe assignment for items with title property
+            const titledItem = item as { title: string }
+            titledItem.title = `${baseTitle} ${index + 1}`
+          }
+        })
+        app.canvas.setDirty(true, true)
+        workflowStore.activeWorkflow?.changeTracker?.checkState()
+      }
+      return
+    }
+
+    toastStore.add({
+      severity: 'warn',
+      summary: t('g.nothingToRename'),
+      detail: t('g.selectItemsToRename'),
+      life: 3000
+    })
+  }
+
+  return {
+    copySelection,
+    pasteSelection,
+    duplicateSelection,
+    deleteSelection,
+    renameSelection
+  }
+}
diff --git a/src/composables/graph/useSelectionState.ts b/src/composables/graph/useSelectionState.ts
new file mode 100644
index 000000000..23268ba2a
--- /dev/null
+++ b/src/composables/graph/useSelectionState.ts
@@ -0,0 +1,143 @@
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+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'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
+import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+
+export interface NodeSelectionState {
+  collapsed: boolean
+  pinned: boolean
+  bypassed: boolean
+}
+
+/**
+ * Centralized computed selection state + shared helper actions to avoid duplication
+ * between selection toolbox, context menus, and other UI affordances.
+ */
+export function useSelectionState() {
+  const canvasStore = useCanvasStore()
+  const nodeDefStore = useNodeDefStore()
+  const sidebarTabStore = useSidebarTabStore()
+  const nodeHelpStore = useNodeHelpStore()
+  const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+  const { selectedItems } = storeToRefs(canvasStore)
+
+  const selectedNodes = computed(() => {
+    return selectedItems.value.filter((i: unknown) =>
+      isLGraphNode(i)
+    ) as LGraphNode[]
+  })
+
+  const nodeDef = computed(() => {
+    if (selectedNodes.value.length !== 1) return null
+    return nodeDefStore.fromLGraphNode(selectedNodes.value[0])
+  })
+
+  const hasAnySelection = computed(() => selectedItems.value.length > 0)
+  const hasSingleSelection = computed(() => selectedItems.value.length === 1)
+  const hasMultipleSelection = computed(() => selectedItems.value.length > 1)
+
+  const isSingleNode = computed(
+    () => hasSingleSelection.value && isLGraphNode(selectedItems.value[0])
+  )
+  const isSingleSubgraph = computed(
+    () =>
+      isSingleNode.value &&
+      (selectedItems.value[0] as LGraphNode)?.isSubgraphNode?.()
+  )
+  const isSingleImageNode = computed(
+    () =>
+      isSingleNode.value && isImageNode(selectedItems.value[0] as LGraphNode)
+  )
+
+  const hasSubgraphs = computed(() =>
+    selectedItems.value.some((i: unknown) => i instanceof SubgraphNode)
+  )
+
+  const hasAny3DNodeSelected = computed(() => {
+    const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+    return (
+      selectedNodes.value.length === 1 &&
+      selectedNodes.value.some(isLoad3dNode) &&
+      enable3DViewer
+    )
+  })
+
+  const hasImageNode = computed(() => isSingleImageNode.value)
+  const hasOutputNodesSelected = computed(
+    () => filterOutputNodes(selectedNodes.value).length > 0
+  )
+
+  // Helper function to compute selection flags (reused by both computed and function)
+  const computeSelectionStatesFromNodes = (
+    nodes: LGraphNode[]
+  ): NodeSelectionState => {
+    if (!nodes.length)
+      return { collapsed: false, pinned: false, bypassed: false }
+    return {
+      collapsed: nodes.some((n) => n.flags?.collapsed),
+      pinned: nodes.some((n) => n.pinned),
+      bypassed: nodes.some((n) => n.mode === LGraphEventMode.BYPASS)
+    }
+  }
+
+  const selectedNodesStates = computed<NodeSelectionState>(() =>
+    computeSelectionStatesFromNodes(selectedNodes.value)
+  )
+
+  // On-demand computation (non-reactive) so callers can fetch fresh flags
+  const computeSelectionFlags = (): NodeSelectionState =>
+    computeSelectionStatesFromNodes(selectedNodes.value)
+
+  /** Toggle node help sidebar/panel for the single selected node (if any). */
+  const showNodeHelp = () => {
+    const def = nodeDef.value
+    if (!def) return
+
+    const isSidebarActive =
+      sidebarTabStore.activeSidebarTabId === nodeLibraryTabId
+    const currentHelpNode: any = nodeHelpStore.currentHelpNode
+    const isSameNodeHelpOpen =
+      isSidebarActive &&
+      nodeHelpStore.isHelpOpen &&
+      currentHelpNode &&
+      currentHelpNode.nodePath === def.nodePath
+
+    if (isSameNodeHelpOpen) {
+      nodeHelpStore.closeHelp()
+      sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+      return
+    }
+
+    if (!isSidebarActive) sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+    nodeHelpStore.openHelp(def)
+  }
+
+  return {
+    selectedItems,
+    selectedNodes,
+    nodeDef,
+    showNodeHelp,
+    hasAny3DNodeSelected,
+    hasAnySelection,
+    hasSingleSelection,
+    hasMultipleSelection,
+    isSingleNode,
+    isSingleSubgraph,
+    isSingleImageNode,
+    hasSubgraphs,
+    hasImageNode,
+    hasOutputNodesSelected,
+    selectedNodesStates,
+    computeSelectionFlags
+  }
+}
diff --git a/src/composables/graph/useSubgraphOperations.ts b/src/composables/graph/useSubgraphOperations.ts
new file mode 100644
index 000000000..b42cc2ec4
--- /dev/null
+++ b/src/composables/graph/useSubgraphOperations.ts
@@ -0,0 +1,131 @@
+import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+/**
+ * Composable for handling subgraph-related operations
+ */
+export function useSubgraphOperations() {
+  const { getSelectedNodes } = useSelectedLiteGraphItems()
+  const canvasStore = useCanvasStore()
+  const workflowStore = useWorkflowStore()
+  const nodeOutputStore = useNodeOutputStore()
+  const nodeDefStore = useNodeDefStore()
+  const nodeBookmarkStore = useNodeBookmarkStore()
+
+  const convertToSubgraph = () => {
+    const canvas = canvasStore.getCanvas()
+    const graph = canvas.subgraph ?? canvas.graph
+    if (!graph) {
+      return null
+    }
+
+    const res = graph.convertToSubgraph(canvas.selectedItems)
+    if (!res) {
+      return
+    }
+
+    const { node } = res
+    canvas.select(node)
+    canvasStore.updateSelectedItems()
+    // Trigger change tracking
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const unpackSubgraph = () => {
+    const canvas = canvasStore.getCanvas()
+    const graph = canvas.subgraph ?? canvas.graph
+
+    if (!graph) {
+      return
+    }
+
+    const selectedItems = Array.from(canvas.selectedItems)
+    const subgraphNodes = selectedItems.filter(
+      (item): item is SubgraphNode => item instanceof SubgraphNode
+    )
+
+    if (subgraphNodes.length === 0) {
+      return
+    }
+
+    subgraphNodes.forEach((subgraphNode) => {
+      // Revoke any image previews for the subgraph
+      nodeOutputStore.revokeSubgraphPreviews(subgraphNode)
+
+      // Unpack the subgraph
+      graph.unpackSubgraph(subgraphNode)
+    })
+
+    // Trigger change tracking
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
+  const addSubgraphToLibrary = async () => {
+    const selectedItems = Array.from(canvasStore.selectedItems)
+
+    // Handle single node selection like BookmarkButton.vue
+    if (selectedItems.length === 1) {
+      const item = selectedItems[0]
+      if (isLGraphNode(item)) {
+        const nodeDef = nodeDefStore.fromLGraphNode(item)
+        if (nodeDef) {
+          await nodeBookmarkStore.addBookmark(nodeDef.nodePath)
+          return
+        }
+      }
+    }
+
+    // Handle multiple nodes - convert to subgraph first then bookmark
+    const selectedNodes = getSelectedNodes()
+
+    if (selectedNodes.length === 0) {
+      return
+    }
+
+    // Check if selection contains subgraph nodes
+    const hasSubgraphs = selectedNodes.some(
+      (node) => node instanceof SubgraphNode
+    )
+
+    if (!hasSubgraphs) {
+      // Convert regular nodes to subgraph first
+      convertToSubgraph()
+      return
+    }
+
+    // For subgraph nodes, bookmark them
+    let bookmarkedCount = 0
+    for (const node of selectedNodes) {
+      if (node instanceof SubgraphNode) {
+        const nodeDef = nodeDefStore.fromLGraphNode(node)
+        if (nodeDef) {
+          await nodeBookmarkStore.addBookmark(nodeDef.nodePath)
+          bookmarkedCount++
+        }
+      }
+    }
+  }
+
+  const isSubgraphSelected = (): boolean => {
+    const selectedItems = Array.from(canvasStore.selectedItems)
+    return selectedItems.some((item) => item instanceof SubgraphNode)
+  }
+
+  const hasSelectableNodes = (): boolean => {
+    return getSelectedNodes().length > 0
+  }
+
+  return {
+    convertToSubgraph,
+    unpackSubgraph,
+    addSubgraphToLibrary,
+    isSubgraphSelected,
+    hasSelectableNodes
+  }
+}
diff --git a/src/composables/graph/useSubmenuPositioning.ts b/src/composables/graph/useSubmenuPositioning.ts
new file mode 100644
index 000000000..2dda2bd1c
--- /dev/null
+++ b/src/composables/graph/useSubmenuPositioning.ts
@@ -0,0 +1,163 @@
+import { nextTick } from 'vue'
+
+import type { MenuOption } from './useMoreOptionsMenu'
+
+/**
+ * Composable for handling submenu positioning logic
+ */
+export function useSubmenuPositioning() {
+  /**
+   * Toggle submenu visibility with proper positioning
+   * @param option - Menu option with submenu
+   * @param event - Click event
+   * @param submenu - PrimeVue Popover reference
+   * @param currentSubmenu - Currently open submenu name
+   * @param menuOptionsWithSubmenu - All menu options with submenus
+   * @param submenuRefs - References to all submenu popovers
+   */
+  const toggleSubmenu = async (
+    option: MenuOption,
+    event: Event,
+    submenu: any, // Component instance with show/hide methods
+    currentSubmenu: { value: string | null },
+    menuOptionsWithSubmenu: MenuOption[],
+    submenuRefs: Record<string, any> // Component instances
+  ): Promise<void> => {
+    if (!option.label || !option.hasSubmenu) return
+
+    // Check if this submenu is currently open
+    const isCurrentlyOpen = currentSubmenu.value === option.label
+
+    // Hide all submenus first
+    menuOptionsWithSubmenu.forEach((opt) => {
+      const sm = submenuRefs[`submenu-${opt.label}`]
+      if (sm) {
+        sm.hide()
+      }
+    })
+    currentSubmenu.value = null
+
+    // If it wasn't open before, show it now
+    if (!isCurrentlyOpen) {
+      currentSubmenu.value = option.label
+      await nextTick()
+
+      const menuItem = event.currentTarget as HTMLElement
+      const menuItemRect = menuItem.getBoundingClientRect()
+
+      // Find the parent popover content element that contains this menu item
+      const mainPopoverContent = menuItem.closest(
+        '[data-pc-section="content"]'
+      ) as HTMLElement
+
+      if (mainPopoverContent) {
+        const mainPopoverRect = mainPopoverContent.getBoundingClientRect()
+
+        // Create a temporary positioned element as the target
+        const tempTarget = createPositionedTarget(
+          mainPopoverRect.right + 8,
+          menuItemRect.top,
+          `submenu-target-${option.label}`
+        )
+
+        // Create event using the temp target
+        const tempEvent = createMouseEvent(
+          mainPopoverRect.right + 8,
+          menuItemRect.top
+        )
+
+        // Show submenu relative to temp target
+        submenu.show(tempEvent, tempTarget)
+
+        // Clean up temp target after a delay
+        cleanupTempTarget(tempTarget, 100)
+      } else {
+        // Fallback: position to the right of the menu item
+        const tempTarget = createPositionedTarget(
+          menuItemRect.right + 8,
+          menuItemRect.top,
+          `submenu-fallback-target-${option.label}`
+        )
+
+        // Create event using the temp target
+        const tempEvent = createMouseEvent(
+          menuItemRect.right + 8,
+          menuItemRect.top
+        )
+
+        // Show submenu relative to temp target
+        submenu.show(tempEvent, tempTarget)
+
+        // Clean up temp target after a delay
+        cleanupTempTarget(tempTarget, 100)
+      }
+    }
+  }
+
+  /**
+   * Create a temporary positioned DOM element for submenu targeting
+   */
+  const createPositionedTarget = (
+    left: number,
+    top: number,
+    id: string
+  ): HTMLElement => {
+    const tempTarget = document.createElement('div')
+    tempTarget.style.position = 'absolute'
+    tempTarget.style.left = `${left}px`
+    tempTarget.style.top = `${top}px`
+    tempTarget.style.width = '1px'
+    tempTarget.style.height = '1px'
+    tempTarget.style.pointerEvents = 'none'
+    tempTarget.style.visibility = 'hidden'
+    tempTarget.id = id
+
+    document.body.appendChild(tempTarget)
+    return tempTarget
+  }
+
+  /**
+   * Create a mouse event with specific coordinates
+   */
+  const createMouseEvent = (clientX: number, clientY: number): MouseEvent => {
+    return new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY
+    })
+  }
+
+  /**
+   * Clean up temporary target element after delay
+   */
+  const cleanupTempTarget = (target: HTMLElement, delay: number): void => {
+    setTimeout(() => {
+      if (target.parentNode) {
+        target.parentNode.removeChild(target)
+      }
+    }, delay)
+  }
+
+  /**
+   * Hide all submenus
+   */
+  const hideAllSubmenus = (
+    menuOptionsWithSubmenu: MenuOption[],
+    submenuRefs: Record<string, any>, // Component instances
+    currentSubmenu: { value: string | null }
+  ): void => {
+    menuOptionsWithSubmenu.forEach((option) => {
+      const submenu = submenuRefs[`submenu-${option.label}`]
+      if (submenu) {
+        submenu.hide()
+      }
+    })
+    currentSubmenu.value = null
+  }
+
+  return {
+    toggleSubmenu,
+    hideAllSubmenus
+  }
+}
diff --git a/src/composables/graph/useViewportCulling.ts b/src/composables/graph/useViewportCulling.ts
index b5c996f93..30cf82e56 100644
--- a/src/composables/graph/useViewportCulling.ts
+++ b/src/composables/graph/useViewportCulling.ts
@@ -1,212 +1,103 @@
 /**
- * Viewport Culling Composable
+ * Vue Nodes Viewport Culling
  *
- * Handles viewport culling optimization for Vue nodes including:
- * - Transform state synchronization
- * - Visible node calculation with screen space transforms
- * - Adaptive margin computation based on zoom level
- * - Performance optimizations for large graphs
+ * Principles:
+ * 1. Query DOM directly using data attributes (no cache to maintain)
+ * 2. Set display none on element to avoid cascade resolution overhead
+ * 3. Only run when transform changes (event driven)
  */
-import { type Ref, computed, readonly, ref } from 'vue'
+import { createSharedComposable, useThrottleFn } from '@vueuse/core'
+import { computed } from 'vue'
 
-import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { useTransformState } from '@/renderer/core/layout/useTransformState'
-import { app as comfyApp } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+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]
 }
 
-export function useViewportCulling(
-  isVueNodesEnabled: Ref<boolean>,
-  vueNodeData: Ref<ReadonlyMap<string, VueNodeData>>,
-  nodeDataTrigger: Ref<number>,
-  nodeManager: Ref<NodeManager | null>
-) {
+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]
+}
+
+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 { syncWithCanvas } = useTransformState()
+  const { nodeManager } = useVueNodeLifecycle()
 
-  // Transform tracking for performance optimization
-  const lastScale = ref(1)
-  const lastOffsetX = ref(0)
-  const lastOffsetY = ref(0)
+  const viewport = computed(() => viewportEdges(canvasStore.canvas))
 
-  // Current transform state
-  const currentTransformState = computed(() => ({
-    scale: lastScale.value,
-    offsetX: lastOffsetX.value,
-    offsetY: lastOffsetY.value
-  }))
+  function inViewport(node: LGraphNode | undefined): boolean {
+    if (!viewport.value || !node) {
+      return true
+    }
+    const nodeBounds = getNodeBounds(node)
+    return boundsIntersect(nodeBounds, viewport.value)
+  }
 
   /**
-   * Computed property that returns nodes visible in the current viewport
-   * Implements sophisticated culling algorithm with adaptive margins
+   * Update visibility of all nodes based on viewport
+   * Queries DOM directly - no cache maintenance needed
    */
-  const nodesToRender = computed(() => {
-    if (!isVueNodesEnabled.value) {
-      return []
-    }
+  function updateVisibility() {
+    if (!nodeManager.value || !app.canvas) return // load bearing app.canvas check for workflows being loaded.
 
-    // Access trigger to force re-evaluation after nodeManager initialization
-    void nodeDataTrigger.value
+    const nodeElements = document.querySelectorAll('[data-node-id]')
+    for (const element of nodeElements) {
+      const nodeId = element.getAttribute('data-node-id')
+      if (!nodeId) continue
 
-    if (!comfyApp.graph) {
-      return []
-    }
-
-    const allNodes = Array.from(vueNodeData.value.values())
-
-    // Apply viewport culling - check if node bounds intersect with viewport
-    // TODO: use quadtree
-    if (nodeManager.value && canvasStore.canvas && comfyApp.canvas) {
-      const canvas = canvasStore.canvas
-      const manager = nodeManager.value
-
-      // Ensure transform is synced before checking visibility
-      syncWithCanvas(comfyApp.canvas)
-
-      const ds = canvas.ds
-
-      // Work in screen space - viewport is simply the canvas element size
-      const viewport_width = canvas.canvas.width
-      const viewport_height = canvas.canvas.height
-
-      // Add margin that represents a constant distance in canvas space
-      // Convert canvas units to screen pixels by multiplying by scale
-      const canvasMarginDistance = 200 // Fixed margin in canvas units
-      const margin_x = canvasMarginDistance * ds.scale
-      const margin_y = canvasMarginDistance * ds.scale
-
-      const filtered = allNodes.filter((nodeData) => {
-        const node = manager.getNode(nodeData.id)
-        if (!node) return false
-
-        // Transform node position to screen space (same as DOM widgets)
-        const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
-        const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
-        const screen_width = node.size[0] * ds.scale
-        const screen_height = node.size[1] * ds.scale
-
-        // Check if node bounds intersect with expanded viewport (in screen space)
-        const isVisible = !(
-          screen_x + screen_width < -margin_x ||
-          screen_x > viewport_width + margin_x ||
-          screen_y + screen_height < -margin_y ||
-          screen_y > viewport_height + margin_y
-        )
-
-        return isVisible
-      })
-
-      return filtered
-    }
-
-    return allNodes
-  })
-
-  /**
-   * Handle transform updates with performance optimization
-   * Only syncs when transform actually changes to avoid unnecessary reflows
-   */
-  const handleTransformUpdate = (detectChangesInRAF: () => void) => {
-    // Skip all work if Vue nodes are disabled
-    if (!isVueNodesEnabled.value) {
-      return
-    }
-
-    // Sync transform state only when it changes (avoids reflows)
-    if (comfyApp.canvas?.ds) {
-      const currentScale = comfyApp.canvas.ds.scale
-      const currentOffsetX = comfyApp.canvas.ds.offset[0]
-      const currentOffsetY = comfyApp.canvas.ds.offset[1]
+      const node = nodeManager.value.getNode(nodeId)
+      if (!node) continue
 
+      const displayValue = inViewport(node) ? '' : 'none'
       if (
-        currentScale !== lastScale.value ||
-        currentOffsetX !== lastOffsetX.value ||
-        currentOffsetY !== lastOffsetY.value
+        element instanceof HTMLElement &&
+        element.style.display !== displayValue
       ) {
-        syncWithCanvas(comfyApp.canvas)
-        lastScale.value = currentScale
-        lastOffsetX.value = currentOffsetX
-        lastOffsetY.value = currentOffsetY
+        element.style.display = displayValue
       }
     }
-
-    // Detect node changes during transform updates
-    detectChangesInRAF()
-
-    // Trigger reactivity for nodesToRender
-    void nodesToRender.value.length
   }
 
-  /**
-   * Calculate if a specific node is visible in viewport
-   * Useful for individual node visibility checks
-   */
-  const isNodeVisible = (nodeData: VueNodeData): boolean => {
-    if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) {
-      return true // Default to visible if culling not available
-    }
+  const handleTransformUpdate = useThrottleFn(() => updateVisibility, 100, true)
 
-    const canvas = canvasStore.canvas
-    const node = nodeManager.value.getNode(nodeData.id)
-    if (!node) return false
-
-    syncWithCanvas(comfyApp.canvas)
-    const ds = canvas.ds
-
-    const viewport_width = canvas.canvas.width
-    const viewport_height = canvas.canvas.height
-    const canvasMarginDistance = 200
-    const margin_x = canvasMarginDistance * ds.scale
-    const margin_y = canvasMarginDistance * ds.scale
-
-    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
-
-    return !(
-      screen_x + screen_width < -margin_x ||
-      screen_x > viewport_width + margin_x ||
-      screen_y + screen_height < -margin_y ||
-      screen_y > viewport_height + margin_y
-    )
-  }
-
-  /**
-   * Get viewport bounds information for debugging
-   */
-  const getViewportInfo = () => {
-    if (!canvasStore.canvas || !comfyApp.canvas) {
-      return null
-    }
-
-    const canvas = canvasStore.canvas
-    const ds = canvas.ds
-
-    return {
-      viewport_width: canvas.canvas.width,
-      viewport_height: canvas.canvas.height,
-      scale: ds.scale,
-      offset: [ds.offset[0], ds.offset[1]],
-      margin_distance: 200,
-      margin_x: 200 * ds.scale,
-      margin_y: 200 * ds.scale
-    }
-  }
-
-  return {
-    nodesToRender,
-    handleTransformUpdate,
-    isNodeVisible,
-    getViewportInfo,
-
-    // Transform state
-    currentTransformState: readonly(currentTransformState),
-    lastScale: readonly(lastScale),
-    lastOffsetX: readonly(lastOffsetX),
-    lastOffsetY: readonly(lastOffsetY)
-  }
+  return { handleTransformUpdate }
 }
+
+export const useViewportCulling = createSharedComposable(
+  useViewportCullingIndividual
+)
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index ea275e220..84e095b5f 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -1,36 +1,27 @@
-/**
- * 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'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { useLinkLayoutSync } from '@/renderer/core/layout/sync/useLinkLayoutSync'
 import { useSlotLayoutSync } from '@/renderer/core/layout/sync/useSlotLayoutSync'
 import { app as comfyApp } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
 
-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 b80bcde29..41a06b851 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -8,10 +8,11 @@ import {
   LGraphBadge,
   type LGraphNode
 } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
+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 a1fa3ad3a..f299d2215 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 83600aec2..ad0a04178 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/useNodeImageUpload.ts b/src/composables/node/useNodeImageUpload.ts
index e586a9c0b..21a4d7f72 100644
--- a/src/composables/node/useNodeImageUpload.ts
+++ b/src/composables/node/useNodeImageUpload.ts
@@ -2,9 +2,9 @@ import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop'
 import { useNodeFileInput } from '@/composables/node/useNodeFileInput'
 import { useNodePaste } from '@/composables/node/useNodePaste'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
-import { useToastStore } from '@/stores/toastStore'
 
 const PASTED_IMAGE_EXPIRY_MS = 2000
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index e85e6adb6..91f957463 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 07e7488ea..184258ba2 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/useBrowserTabTitle.ts b/src/composables/useBrowserTabTitle.ts
index 82da27149..82b08d71a 100644
--- a/src/composables/useBrowserTabTitle.ts
+++ b/src/composables/useBrowserTabTitle.ts
@@ -2,9 +2,9 @@ import { useTitle } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { t } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
 const DEFAULT_TITLE = 'ComfyUI'
 const TITLE_SUFFIX = ' - ComfyUI'
diff --git a/src/composables/useCanvasDrop.ts b/src/composables/useCanvasDrop.ts
index 00e4f3ca8..76db7e513 100644
--- a/src/composables/useCanvasDrop.ts
+++ b/src/composables/useCanvasDrop.ts
@@ -1,17 +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 { useWorkflowService } from '@/services/workflowService'
 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 { ComfyWorkflow } from '@/stores/workflowStore'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
   const modelToNodeStore = useModelToNodeStore()
@@ -27,16 +28,19 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
 
       if (dndData.type === 'tree-explorer-node') {
         const node = dndData.data as RenderedTreeExplorerNode
+        const conv = useSharedCanvasPositionConversion()
+        const basePos = conv.clientPosToCanvasPos([loc.clientX, loc.clientY])
+
         if (node.data instanceof ComfyNodeDefImpl) {
           const nodeDef = node.data
-          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          const pos = [...basePos]
           // Add an offset on y to make sure after adding the node, the cursor
           // is on the node (top left corner)
           pos[1] += LiteGraph.NODE_TITLE_HEIGHT
           litegraphService.addNodeOnGraph(nodeDef, { pos })
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
-          const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+          const pos = basePos
           const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
           let targetProvider: ModelNodeProvider | null = null
           let targetGraphNode: LGraphNode | null = null
@@ -73,11 +77,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement>) => {
           }
         } else if (node.data instanceof ComfyWorkflow) {
           const workflow = node.data
-          const position = comfyApp.clientPosToCanvasPos([
-            loc.clientX,
-            loc.clientY
-          ])
-          await workflowService.insertWorkflow(workflow, { position })
+          await workflowService.insertWorkflow(workflow, { position: basePos })
         }
       }
     }
diff --git a/src/composables/useConflictDetection.ts b/src/composables/useConflictDetection.ts
deleted file mode 100644
index abf4d9498..000000000
--- 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/useCopy.ts b/src/composables/useCopy.ts
index 15f6183de..d24e7603c 100644
--- a/src/composables/useCopy.ts
+++ b/src/composables/useCopy.ts
@@ -1,6 +1,6 @@
 import { useEventListener } from '@vueuse/core'
 
-import { useCanvasStore } from '@/stores/graphStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 /**
  * Adds a handler on copy that serializes selected nodes to JSON
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 00a5431f9..80ffeb573 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,
@@ -15,33 +14,43 @@ 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'
+import {
+  type ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
+import {
+  useCanvasStore,
+  useTitleEditorStore
+} from '@/renderer/core/canvas/canvasStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
-import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { useToastStore } from '@/stores/toastStore'
-import { type ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 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/useErrorHandling.ts b/src/composables/useErrorHandling.ts
index 607997ac8..91cf0df32 100644
--- a/src/composables/useErrorHandling.ts
+++ b/src/composables/useErrorHandling.ts
@@ -1,5 +1,5 @@
 import { t } from '@/i18n'
-import { useToastStore } from '@/stores/toastStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 export function useErrorHandling() {
   const toast = useToastStore()
diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index 4066787fc..203db8f1b 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -2,15 +2,15 @@ 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'
-import { useToastStore } from '@/stores/toastStore'
 
 interface Load3dViewerState {
   backgroundColor: string
diff --git a/src/composables/usePaste.ts b/src/composables/usePaste.ts
index 2a4d2d8ad..c04901951 100644
--- a/src/composables/usePaste.ts
+++ b/src/composables/usePaste.ts
@@ -2,9 +2,9 @@ import { useEventListener } from '@vueuse/core'
 
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
 
diff --git a/src/composables/useRefreshableSelection.ts b/src/composables/useRefreshableSelection.ts
index bf2a6660f..8e1db9fc5 100644
--- a/src/composables/useRefreshableSelection.ts
+++ b/src/composables/useRefreshableSelection.ts
@@ -1,7 +1,7 @@
 import { computed, ref, watchEffect } from 'vue'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 
 interface RefreshableItem {
diff --git a/src/composables/useServerLogs.ts b/src/composables/useServerLogs.ts
index e15bd975f..8398f5542 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/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index 6bf0b53a2..cd30cc4fa 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -1,6 +1,6 @@
 import { type Ref, computed, ref } from 'vue'
 
-import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 
 // @ts-expect-error unused (To be used later?)
 interface TemplateFilterOptions {
diff --git a/src/composables/useTreeExpansion.ts b/src/composables/useTreeExpansion.ts
index 16f1151c5..b232c63f8 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 8816555d1..f863fc187 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 '@/stores/settingStore'
+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 c3dc718a1..e5fbd2af7 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/coreColorPalettes.ts b/src/constants/coreColorPalettes.ts
index 58c7f1522..f20cb260d 100644
--- a/src/constants/coreColorPalettes.ts
+++ b/src/constants/coreColorPalettes.ts
@@ -1,9 +1,9 @@
-import arc from '@/assets/palettes/arc.json'
-import dark from '@/assets/palettes/dark.json'
-import github from '@/assets/palettes/github.json'
-import light from '@/assets/palettes/light.json'
-import nord from '@/assets/palettes/nord.json'
-import solarized from '@/assets/palettes/solarized.json'
+import arc from '@/assets/palettes/arc.json' with { type: 'json' }
+import dark from '@/assets/palettes/dark.json' with { type: 'json' }
+import github from '@/assets/palettes/github.json' with { type: 'json' }
+import light from '@/assets/palettes/light.json' with { type: 'json' }
+import nord from '@/assets/palettes/nord.json' with { type: 'json' }
+import solarized from '@/assets/palettes/solarized.json' with { type: 'json' }
 import type {
   ColorPalettes,
   CompletedPalette
diff --git a/src/constants/coreKeybindings.ts b/src/constants/coreKeybindings.ts
index b4245f789..fe2bde835 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 000000000..d43e80de2
--- /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 45991f737..2ec27d180 100644
--- a/src/constants/serverConfig.ts
+++ b/src/constants/serverConfig.ts
@@ -1,3 +1,4 @@
+import type { FormItem } from '@/platform/settings/types'
 import {
   CrossAttentionMethod,
   CudaMalloc,
@@ -7,7 +8,6 @@ import {
   LogLevel,
   VramManagement
 } from '@/types/serverArgs'
-import { FormItem } from '@/types/settingTypes'
 
 export type ServerConfigValue = string | number | true | null | undefined
 
diff --git a/src/core/graph/subgraph/proxyWidget.ts b/src/core/graph/subgraph/proxyWidget.ts
new file mode 100644
index 000000000..8992995b2
--- /dev/null
+++ b/src/core/graph/subgraph/proxyWidget.ts
@@ -0,0 +1,185 @@
+import { useNodeImage } from '@/composables/node/useNodeImage'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
+import { disconnectedWidget } from '@/lib/litegraph/src/widgets/DisconnectedWidget'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { DOMWidgetImpl } from '@/scripts/domWidget'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+
+/**
+ * @typedef {object} Overlay - Each proxy Widget has an associated overlay object
+ * Accessing a property which exists in the overlay object will
+ * instead result in the action being performed on the overlay object
+ * 3 properties are added for locating the proxied widget
+ * @property {LGraph} graph - The graph the widget resides in. Used for widget lookup
+ * @property {string} nodeId - The NodeId the proxy Widget is located on
+ * @property {string} widgetName - The name of the linked widget
+ *
+ * @property {boolean} isProxyWidget - Always true, used as type guard
+ * @property {LGraphNode} node - not included on IBaseWidget, but required for overlay
+ */
+type Overlay = Partial<IBaseWidget> & {
+  graph: LGraph
+  nodeId: string
+  widgetName: string
+  isProxyWidget: boolean
+  node?: LGraphNode
+}
+// A ProxyWidget can be treated like a normal widget.
+// the _overlay property can be used to directly access the Overlay object
+/**
+ * @typedef {object} ProxyWidget - a reference to a widget that can
+ * be displayed and owned by a separate node
+ * @property {Overlay} _overlay - a special property to access the overlay of the widget
+ * Any property that exists in the overlay will be accessed instead of the property
+ * on the linked widget
+ */
+type ProxyWidget = IBaseWidget & { _overlay: Overlay }
+function isProxyWidget(w: IBaseWidget): w is ProxyWidget {
+  return (w as { _overlay?: Overlay })?._overlay?.isProxyWidget ?? false
+}
+
+const originalOnConfigure = SubgraphNode.prototype.onConfigure
+SubgraphNode.prototype.onConfigure = function (serialisedNode) {
+  if (!this.isSubgraphNode())
+    throw new Error("Can't add proxyWidgets to non-subgraphNode")
+
+  const canvasStore = useCanvasStore()
+  //Must give value to proxyWidgets prior to defining or it won't serialize
+  this.properties.proxyWidgets ??= '[]'
+  let proxyWidgets = this.properties.proxyWidgets
+
+  originalOnConfigure?.call(this, serialisedNode)
+
+  Object.defineProperty(this.properties, 'proxyWidgets', {
+    get: () => {
+      return proxyWidgets
+    },
+    set: (property: string) => {
+      const parsed = parseProxyWidgets(property)
+      const { deactivateWidget, setWidget } = useDomWidgetStore()
+      for (const w of this.widgets.filter((w) => isProxyWidget(w))) {
+        if (w instanceof DOMWidgetImpl) deactivateWidget(w.id)
+      }
+      this.widgets = this.widgets.filter((w) => !isProxyWidget(w))
+      for (const [nodeId, widgetName] of parsed) {
+        const w = addProxyWidget(this, `${nodeId}`, widgetName)
+        if (w instanceof DOMWidgetImpl) setWidget(w)
+      }
+      proxyWidgets = property
+      canvasStore.canvas?.setDirty(true, true)
+      this._setConcreteSlots()
+      this.arrange()
+    }
+  })
+  this.properties.proxyWidgets = proxyWidgets
+}
+
+function addProxyWidget(
+  subgraphNode: SubgraphNode,
+  nodeId: string,
+  widgetName: string
+) {
+  const name = `${nodeId}: ${widgetName}`
+  const overlay = {
+    nodeId,
+    widgetName,
+    graph: subgraphNode.subgraph,
+    name,
+    label: name,
+    isProxyWidget: true,
+    y: 0,
+    last_y: undefined,
+    width: undefined,
+    computedHeight: undefined,
+    afterQueued: undefined,
+    onRemove: undefined,
+    node: subgraphNode
+  }
+  return addProxyFromOverlay(subgraphNode, overlay)
+}
+function resolveLinkedWidget(
+  overlay: Overlay
+): [LGraphNode | undefined, IBaseWidget | undefined] {
+  const { graph, nodeId, widgetName } = overlay
+  const n = getNodeByExecutionId(graph, nodeId)
+  if (!n) return [undefined, undefined]
+  return [n, n.widgets?.find((w: IBaseWidget) => w.name === widgetName)]
+}
+function addProxyFromOverlay(subgraphNode: SubgraphNode, overlay: Overlay) {
+  let [linkedNode, linkedWidget] = resolveLinkedWidget(overlay)
+  let backingWidget = linkedWidget ?? disconnectedWidget
+  if (overlay.widgetName == '$$canvas-image-preview')
+    overlay.node = new Proxy(subgraphNode, {
+      get(_t, p) {
+        if (p !== 'imgs') return Reflect.get(subgraphNode, p)
+        if (!linkedNode) return []
+        const images =
+          useNodeOutputStore().getNodeOutputs(linkedNode)?.images ?? []
+        if (images !== linkedNode.images) {
+          linkedNode.images = images
+          useNodeImage(linkedNode).showPreview()
+        }
+        return linkedNode.imgs
+      }
+    })
+  /**
+   * A set of handlers which define widget interaction
+   * Many arguments are shared between function calls
+   * @param {IBaseWidget} _t - The "target" the call is originally made on.
+   *   This argument is never used, but must be defined for typechecking
+   * @param {string} property - The name of the accessed value.
+   *   Checked for conditional logic, but never changed
+   * @param {object} receiver - The object the result is set to
+   *   and the vlaue used as 'this' if property is a get/set method
+   * @param {unknown} value - only used on set calls. The thing being assigned
+   */
+  const handler = {
+    get(_t: IBaseWidget, property: string, receiver: object) {
+      let redirectedTarget: object = backingWidget
+      let redirectedReceiver = receiver
+      if (property == '_overlay') return overlay
+      else if (property == 'value') redirectedReceiver = backingWidget
+      if (Object.prototype.hasOwnProperty.call(overlay, property)) {
+        redirectedTarget = overlay
+        redirectedReceiver = overlay
+      }
+      return Reflect.get(redirectedTarget, property, redirectedReceiver)
+    },
+    set(_t: IBaseWidget, property: string, value: unknown, receiver: object) {
+      let redirectedTarget: object = backingWidget
+      let redirectedReceiver = receiver
+      if (property == 'value') redirectedReceiver = backingWidget
+      else if (property == 'computedHeight') {
+        //update linkage regularly, but no more than once per frame
+        ;[linkedNode, linkedWidget] = resolveLinkedWidget(overlay)
+        backingWidget = linkedWidget ?? disconnectedWidget
+      }
+      if (Object.prototype.hasOwnProperty.call(overlay, property)) {
+        redirectedTarget = overlay
+        redirectedReceiver = overlay
+      }
+      return Reflect.set(redirectedTarget, property, value, redirectedReceiver)
+    },
+    getPrototypeOf() {
+      return Reflect.getPrototypeOf(backingWidget)
+    },
+    ownKeys() {
+      return Reflect.ownKeys(backingWidget)
+    },
+    has(_t: IBaseWidget, property: string) {
+      let redirectedTarget: object = backingWidget
+      if (Object.prototype.hasOwnProperty.call(overlay, property)) {
+        redirectedTarget = overlay
+      }
+      return Reflect.has(redirectedTarget, property)
+    }
+  }
+  const w = new Proxy(disconnectedWidget, handler)
+  subgraphNode.widgets.push(w)
+  return w
+}
diff --git a/src/core/graph/subgraph/proxyWidgetUtils.ts b/src/core/graph/subgraph/proxyWidgetUtils.ts
index 564ba9378..76c9591ef 100644
--- a/src/core/graph/subgraph/proxyWidgetUtils.ts
+++ b/src/core/graph/subgraph/proxyWidgetUtils.ts
@@ -2,7 +2,7 @@ import type {
   IContextMenuValue,
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
-import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
 import {
   type ProxyWidgetsProperty,
diff --git a/src/core/schemas/proxyWidget.ts b/src/core/schemas/proxyWidget.ts
new file mode 100644
index 000000000..a85e50a2a
--- /dev/null
+++ b/src/core/schemas/proxyWidget.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
+
+const proxyWidgetsPropertySchema = z.array(z.tuple([z.string(), z.string()]))
+type ProxyWidgetsProperty = z.infer<typeof proxyWidgetsPropertySchema>
+
+export function parseProxyWidgets(
+  property: NodeProperty | undefined
+): ProxyWidgetsProperty {
+  if (typeof property !== 'string') {
+    throw new Error(
+      'Invalid assignment for properties.proxyWidgets:\nValue must be a string'
+    )
+  }
+  const parsed = JSON.parse(property)
+  const result = proxyWidgetsPropertySchema.safeParse(parsed)
+  if (result.success) return result.data
+
+  const error = fromZodError(result.error)
+  throw new Error(`Invalid assignment for properties.proxyWidgets:\n${error}`)
+}
diff --git a/src/extensions/core/electronAdapter.ts b/src/extensions/core/electronAdapter.ts
index da28ac0c2..718639b47 100644
--- a/src/extensions/core/electronAdapter.ts
+++ b/src/extensions/core/electronAdapter.ts
@@ -2,13 +2,19 @@ import log from 'loglevel'
 
 import { PYTHON_MIRROR } from '@/constants/uvMirrors'
 import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
-import { useToastStore } from '@/stores/toastStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 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 ae92cfc5b..4b3ce78bc 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -9,18 +9,18 @@ import {
   LiteGraph,
   SubgraphNode
 } from '@/lib/litegraph/src/litegraph'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import {
-  ComfyLink,
-  ComfyNode,
-  ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+  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 { useToastStore } from '@/stores/toastStore'
 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/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
index 7cc7fb220..355af0ccd 100644
--- a/src/extensions/core/groupNodeManage.ts
+++ b/src/extensions/core/groupNodeManage.ts
@@ -4,7 +4,7 @@ import {
   type LGraphNodeConstructor,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
-import { useToastStore } from '@/stores/toastStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import { type ComfyApp, app } from '../../scripts/app'
 import { $el } from '../../scripts/ui'
diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts
index 297f62521..5d49e0444 100644
--- a/src/extensions/core/groupOptions.ts
+++ b/src/extensions/core/groupOptions.ts
@@ -2,7 +2,7 @@ import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 import { app } from '../../scripts/app'
 
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
index e70f96820..c2d8b5d69 100644
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -8,14 +8,14 @@ import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { t } from '@/i18n'
 import type { IStringWidget } from '@/lib/litegraph/src/types/widgets'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { type CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { api } from '@/scripts/api'
 import { ComfyApp, app } from '@/scripts/app'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useToastStore } from '@/stores/toastStore'
 import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 async function handleModelUpload(files: FileList, node: any) {
diff --git a/src/extensions/core/load3d/AnimationManager.ts b/src/extensions/core/load3d/AnimationManager.ts
index f3efd220e..542edfdc2 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 2b6b568c9..624ce6882 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 d19160b53..ab28b7698 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 e06669ce2..64b87eb9b 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 20212dbdc..384df3110 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/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index a79ae3fb2..235ce7279 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -1,8 +1,8 @@
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
-import { useSettingStore } from '@/stores/settingStore'
 
 class Load3DConfiguration {
   constructor(private load3d: Load3d) {}
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 37121ba6b..0b4c4f307 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 78a9dfae8..82ff2c099 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/Load3dUtils.ts b/src/extensions/core/load3d/Load3dUtils.ts
index 213019293..4a63e6b5a 100644
--- a/src/extensions/core/load3d/Load3dUtils.ts
+++ b/src/extensions/core/load3d/Load3dUtils.ts
@@ -1,7 +1,7 @@
 import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useToastStore } from '@/stores/toastStore'
 
 class Load3dUtils {
   static async uploadTempImage(
diff --git a/src/extensions/core/load3d/LoaderManager.ts b/src/extensions/core/load3d/LoaderManager.ts
index d9bc66c36..2c753e6fc 100644
--- a/src/extensions/core/load3d/LoaderManager.ts
+++ b/src/extensions/core/load3d/LoaderManager.ts
@@ -6,12 +6,12 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
 import { t } from '@/i18n'
-import { useToastStore } from '@/stores/toastStore'
+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/ModelExporter.ts b/src/extensions/core/load3d/ModelExporter.ts
index 3181cbd36..bf677ba44 100644
--- a/src/extensions/core/load3d/ModelExporter.ts
+++ b/src/extensions/core/load3d/ModelExporter.ts
@@ -4,7 +4,7 @@ import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter'
 
 import { t } from '@/i18n'
-import { useToastStore } from '@/stores/toastStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 export class ModelExporter {
   static detectFormatFromURL(url: string): string | null {
diff --git a/src/extensions/core/load3d/NodeStorage.ts b/src/extensions/core/load3d/NodeStorage.ts
index 44417fbc6..09aac60d4 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 514fd3726..36cd2b325 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 252e6b58b..679fa9c5d 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 4f46dda4b..722e4f439 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 d4cd6f795..94f597bf2 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 eeb8f9ad2..f68e5e0cb 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 86d33edc9..967465a9d 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 238056f74..2497fd287 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/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
index 5ca26a934..5737ba54d 100644
--- a/src/extensions/core/nodeTemplates.ts
+++ b/src/extensions/core/nodeTemplates.ts
@@ -1,7 +1,7 @@
 import { t } from '@/i18n'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
-import { useToastStore } from '@/stores/toastStore'
 import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { api } from '../../scripts/api'
diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts
index 9931ddaa1..5266f9af9 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 2c6f0857c..3c84cf942 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 dd6351244..4c0e25b2c 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -10,12 +10,12 @@ import type {
   IBaseWidget,
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { DOMWidget } from '@/scripts/domWidget'
 import { useAudioService } from '@/services/audioService'
-import { useToastStore } from '@/stores/toastStore'
-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 4ed7130ee..4cb910dae 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/extensions/core/webcamCapture.ts b/src/extensions/core/webcamCapture.ts
index 0836a0767..7e3a79e58 100644
--- a/src/extensions/core/webcamCapture.ts
+++ b/src/extensions/core/webcamCapture.ts
@@ -1,5 +1,5 @@
 import { t } from '@/i18n'
-import { useToastStore } from '@/stores/toastStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
diff --git a/src/extensions/core/widgetInputs.ts b/src/extensions/core/widgetInputs.ts
index 7f772aefc..fdd7146a1 100644
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -8,7 +8,7 @@ import type {
   INodeOutputSlot,
   ISlotType,
   LLink,
-  Vector2
+  Point
 } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
@@ -557,7 +557,7 @@ app.registerExtension({
       }
     )
 
-    function isNodeAtPos(pos: Vector2) {
+    function isNodeAtPos(pos: Point) {
       for (const n of app.graph.nodes) {
         if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
           return true
diff --git a/src/i18n.ts b/src/i18n.ts
index 08369af62..38a8dfe95 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,41 +1,45 @@
 import { createI18n } from 'vue-i18n'
 
-import arCommands from './locales/ar/commands.json'
-import ar from './locales/ar/main.json'
-import arNodes from './locales/ar/nodeDefs.json'
-import arSettings from './locales/ar/settings.json'
-import enCommands from './locales/en/commands.json'
-import en from './locales/en/main.json'
-import enNodes from './locales/en/nodeDefs.json'
-import enSettings from './locales/en/settings.json'
-import esCommands from './locales/es/commands.json'
-import es from './locales/es/main.json'
-import esNodes from './locales/es/nodeDefs.json'
-import esSettings from './locales/es/settings.json'
-import frCommands from './locales/fr/commands.json'
-import fr from './locales/fr/main.json'
-import frNodes from './locales/fr/nodeDefs.json'
-import frSettings from './locales/fr/settings.json'
-import jaCommands from './locales/ja/commands.json'
-import ja from './locales/ja/main.json'
-import jaNodes from './locales/ja/nodeDefs.json'
-import jaSettings from './locales/ja/settings.json'
-import koCommands from './locales/ko/commands.json'
-import ko from './locales/ko/main.json'
-import koNodes from './locales/ko/nodeDefs.json'
-import koSettings from './locales/ko/settings.json'
-import ruCommands from './locales/ru/commands.json'
-import ru from './locales/ru/main.json'
-import ruNodes from './locales/ru/nodeDefs.json'
-import ruSettings from './locales/ru/settings.json'
-import zhTWCommands from './locales/zh-TW/commands.json'
-import zhTW from './locales/zh-TW/main.json'
-import zhTWNodes from './locales/zh-TW/nodeDefs.json'
-import zhTWSettings from './locales/zh-TW/settings.json'
-import zhCommands from './locales/zh/commands.json'
-import zh from './locales/zh/main.json'
-import zhNodes from './locales/zh/nodeDefs.json'
-import zhSettings from './locales/zh/settings.json'
+import arCommands from './locales/ar/commands.json' with { type: 'json' }
+import ar from './locales/ar/main.json' with { type: 'json' }
+import arNodes from './locales/ar/nodeDefs.json' with { type: 'json' }
+import arSettings from './locales/ar/settings.json' with { type: 'json' }
+import enCommands from './locales/en/commands.json' with { type: 'json' }
+import en from './locales/en/main.json' with { type: 'json' }
+import enNodes from './locales/en/nodeDefs.json' with { type: 'json' }
+import enSettings from './locales/en/settings.json' with { type: 'json' }
+import esCommands from './locales/es/commands.json' with { type: 'json' }
+import es from './locales/es/main.json' with { type: 'json' }
+import esNodes from './locales/es/nodeDefs.json' with { type: 'json' }
+import esSettings from './locales/es/settings.json' with { type: 'json' }
+import frCommands from './locales/fr/commands.json' with { type: 'json' }
+import fr from './locales/fr/main.json' with { type: 'json' }
+import frNodes from './locales/fr/nodeDefs.json' with { type: 'json' }
+import frSettings from './locales/fr/settings.json' with { type: 'json' }
+import jaCommands from './locales/ja/commands.json' with { type: 'json' }
+import ja from './locales/ja/main.json' with { type: 'json' }
+import jaNodes from './locales/ja/nodeDefs.json' with { type: 'json' }
+import jaSettings from './locales/ja/settings.json' with { type: 'json' }
+import koCommands from './locales/ko/commands.json' with { type: 'json' }
+import ko from './locales/ko/main.json' with { type: 'json' }
+import koNodes from './locales/ko/nodeDefs.json' with { type: 'json' }
+import koSettings from './locales/ko/settings.json' with { type: 'json' }
+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' }
+import zhTWSettings from './locales/zh-TW/settings.json' with { type: 'json' }
+import zhCommands from './locales/zh/commands.json' with { type: 'json' }
+import zh from './locales/zh/main.json' with { type: 'json' }
+import zhNodes from './locales/zh/nodeDefs.json' with { type: 'json' }
+import zhSettings from './locales/zh/settings.json' with { type: 'json' }
 
 function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
   return {
@@ -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 830e4b076..4a536ce0a 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 b4eb9e99b..8fb7c56ae 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'
@@ -2348,7 +2349,7 @@ export class LGraphCanvas
     if (
       ctrlOrMeta &&
       !e.altKey &&
-      LiteGraph.canvasNavigationMode === 'legacy'
+      LiteGraph.leftMouseClickBehavior === 'panning'
     ) {
       this.#setupNodeSelectionDrag(e, pointer, node)
 
@@ -2616,8 +2617,8 @@ export class LGraphCanvas
       !pointer.onDrag &&
       this.allow_dragcanvas
     ) {
-      // allow dragging canvas if canvas is not in standard, or read-only (pan mode in standard)
-      if (LiteGraph.canvasNavigationMode !== 'standard' || this.read_only) {
+      // allow dragging canvas based on leftMouseClickBehavior or read-only mode
+      if (LiteGraph.leftMouseClickBehavior === 'panning' || this.read_only) {
         pointer.onClick = () => this.processSelect(null, e)
         pointer.finally = () => (this.dragging_canvas = false)
         this.dragging_canvas = true
@@ -3629,8 +3630,8 @@ export class LGraphCanvas
       e.ctrlKey || (e.metaKey && navigator.platform.includes('Mac'))
     const isZoomModifier = isCtrlOrMacMeta && !e.altKey && !e.shiftKey
 
-    if (isZoomModifier || LiteGraph.canvasNavigationMode === 'legacy') {
-      // Legacy mode or standard mode with ctrl - use wheel for zoom
+    if (isZoomModifier || LiteGraph.mouseWheelScroll === 'zoom') {
+      // Zoom mode or modifier key pressed - use wheel for zoom
       if (isTrackpad) {
         // Trackpad gesture - use smooth scaling
         scale *= 1 + e.deltaY * (1 - this.zoom_speed) * 0.18
@@ -3645,7 +3646,6 @@ export class LGraphCanvas
         this.ds.changeScale(scale, [e.clientX, e.clientY])
       }
     } else {
-      // Standard mode without ctrl - use wheel / gestures to pan
       // Trackpads and mice work on significantly different scales
       const factor = isTrackpad ? 0.18 : 0.008_333
 
@@ -4032,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()
@@ -4717,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
               }
             )
           }
@@ -6314,7 +6317,14 @@ export class LGraphCanvas
         }
 
         // that.graph.beforeChange();
-        const newNode = LiteGraph.createNode(nodeNewType)
+        const xSizeFix = opts.posSizeFix[0] * LiteGraph.NODE_WIDTH
+        const ySizeFix = opts.posSizeFix[1] * LiteGraph.NODE_SLOT_HEIGHT
+        const nodeX = opts.position[0] + opts.posAdd[0] + xSizeFix
+        const nodeY = opts.position[1] + opts.posAdd[1] + ySizeFix
+        const pos = [nodeX, nodeY]
+        const newNode = LiteGraph.createNode(nodeNewType, nodeNewOpts.title, {
+          pos
+        })
         if (newNode) {
           // if is object pass options
           if (nodeNewOpts) {
@@ -6341,9 +6351,6 @@ export class LGraphCanvas
                 )
               }
             }
-            if (nodeNewOpts.title) {
-              newNode.title = nodeNewOpts.title
-            }
             if (nodeNewOpts.json) {
               newNode.configure(nodeNewOpts.json)
             }
@@ -6353,14 +6360,6 @@ export class LGraphCanvas
           if (!this.graph) throw new NullGraphError()
 
           this.graph.add(newNode)
-          newNode.pos = [
-            opts.position[0] +
-              opts.posAdd[0] +
-              (opts.posSizeFix[0] ? opts.posSizeFix[0] * newNode.size[0] : 0),
-            opts.position[1] +
-              opts.posAdd[1] +
-              (opts.posSizeFix[1] ? opts.posSizeFix[1] * newNode.size[1] : 0)
-          ]
 
           // Interim API - allow the link connection to be canceled.
           // TODO: https://github.com/Comfy-Org/litegraph.js/issues/946
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.ts b/src/lib/litegraph/src/LGraphNodeProperties.ts
index 33eafa02f..41bb1f673 100644
--- a/src/lib/litegraph/src/LGraphNodeProperties.ts
+++ b/src/lib/litegraph/src/LGraphNodeProperties.ts
@@ -3,7 +3,11 @@ import type { LGraphNode } from './LGraphNode'
 /**
  * Default properties to track
  */
-const DEFAULT_TRACKED_PROPERTIES: string[] = ['title', 'flags.collapsed']
+const DEFAULT_TRACKED_PROPERTIES: string[] = [
+  'title',
+  'flags.collapsed',
+  'mode'
+]
 
 /**
  * Manages node properties with optional change tracking and instrumentation.
diff --git a/src/lib/litegraph/src/LLink.ts b/src/lib/litegraph/src/LLink.ts
index 58ae4e090..71b41f23d 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/LiteGraphGlobal.ts b/src/lib/litegraph/src/LiteGraphGlobal.ts
index 7549c442d..66c27458e 100644
--- a/src/lib/litegraph/src/LiteGraphGlobal.ts
+++ b/src/lib/litegraph/src/LiteGraphGlobal.ts
@@ -305,9 +305,14 @@ export class LiteGraphGlobal {
   /**
    * "standard": change the dragging on left mouse button click to select, enable middle-click or spacebar+left-click dragging
    * "legacy": Enable dragging on left-click (original behavior)
+   * "custom": Use leftMouseClickBehavior and mouseWheelScroll settings
    * @default "legacy"
    */
-  canvasNavigationMode: 'standard' | 'legacy' = 'legacy'
+  canvasNavigationMode: 'standard' | 'legacy' | 'custom' = 'legacy'
+
+  leftMouseClickBehavior: 'panning' | 'select' = 'panning'
+
+  mouseWheelScroll: 'panning' | 'zoom' = 'panning'
 
   /**
    * If `true`, widget labels and values will both be truncated (proportionally to size),
diff --git a/src/lib/litegraph/src/interfaces.ts b/src/lib/litegraph/src/interfaces.ts
index f48a7f141..d8f623712 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 46202a219..098c30e7a 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 0419b18d3..50fde9c52 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 afb52b120..b4e54cada 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 ed41f3a83..06da1a8d9 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 58ea65cad..b56852aa5 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,7 +315,8 @@ 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 promotedWidget = toConcreteWidget(widget, this).createCopyForNode(
@@ -370,7 +376,13 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
       subgraphNode: this
     })
 
-    input.widget = { name: subgraphInput.name }
+    // 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.
+    input.widget ??= { name: subgraphInput.name }
+    input.widget.name = subgraphInput.name
+    if (inputWidget) Object.setPrototypeOf(input.widget, inputWidget)
+
     input._widget = promotedWidget
   }
 
diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts
index 40b3ab5ac..6c7a7a875 100644
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -76,6 +76,7 @@ export type IWidget =
   | IImageCompareWidget
   | ISelectButtonWidget
   | ITextareaWidget
+  | IAssetWidget
 
 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
   type: 'toggle'
@@ -224,6 +225,12 @@ export interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
   value: string
 }
 
+export interface IAssetWidget
+  extends IBaseWidget<string, 'asset', IWidgetOptions<string[]>> {
+  type: 'asset'
+  value: string
+}
+
 /**
  * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
  * Override linkedWidgets[]
diff --git a/src/lib/litegraph/src/utils/linkColors.ts b/src/lib/litegraph/src/utils/linkColors.ts
new file mode 100644
index 000000000..e6e966133
--- /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
new file mode 100644
index 000000000..1a5047beb
--- /dev/null
+++ b/src/lib/litegraph/src/widgets/AssetWidget.ts
@@ -0,0 +1,57 @@
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IAssetWidget } from '@/lib/litegraph/src/types/widgets'
+
+import { BaseWidget, type DrawWidgetOptions } from './BaseWidget'
+
+export class AssetWidget
+  extends BaseWidget<IAssetWidget>
+  implements IAssetWidget
+{
+  constructor(widget: IAssetWidget, node: LGraphNode) {
+    super(widget, node)
+    this.type ??= 'asset'
+    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
+  }
+
+  override drawWidget(
+    ctx: CanvasRenderingContext2D,
+    { width, showText = true }: DrawWidgetOptions
+  ) {
+    // Store original context attributes
+    const { fillStyle, strokeStyle, textAlign } = ctx
+
+    this.drawWidgetShape(ctx, { width, showText })
+
+    if (showText) {
+      this.drawTruncatingText({ ctx, width, leftPadding: 0, rightPadding: 0 })
+    }
+
+    // Restore original context attributes
+    Object.assign(ctx, { textAlign, strokeStyle, fillStyle })
+  }
+
+  override onClick() {
+    //Open Modal
+    this.callback?.(this.value)
+  }
+}
diff --git a/src/lib/litegraph/src/widgets/ComboWidget.ts b/src/lib/litegraph/src/widgets/ComboWidget.ts
index 4cfc682d7..01e10d0f1 100644
--- a/src/lib/litegraph/src/widgets/ComboWidget.ts
+++ b/src/lib/litegraph/src/widgets/ComboWidget.ts
@@ -45,7 +45,7 @@ export class ComboWidget
     return typeof this.value === 'number' ? String(this.value) : this.value
   }
 
-  getValues(node: LGraphNode): Values {
+  private getValues(node: LGraphNode): Values {
     const { values } = this.options
     if (values == null) throw new Error('[ComboWidget]: values is required')
 
@@ -57,7 +57,7 @@ export class ComboWidget
    * @param increment `true` if checking the use of the increment button, `false` for decrement
    * @returns `true` if the value is at the given index, otherwise `false`.
    */
-  canUseButton(increment: boolean): boolean {
+  private canUseButton(increment: boolean): boolean {
     const { values } = this.options
     // If using legacy duck-typed method, false is the most permissive return value
     if (typeof values === 'function') return false
@@ -93,7 +93,7 @@ export class ComboWidget
     this.tryChangeValue(-1, options)
   }
 
-  tryChangeValue(delta: number, options: WidgetEventOptions): void {
+  private tryChangeValue(delta: number, options: WidgetEventOptions): void {
     const values = this.getValues(options.node)
     const indexedValues = toArray(values)
 
diff --git a/src/lib/litegraph/src/widgets/DisconnectedWidget.ts b/src/lib/litegraph/src/widgets/DisconnectedWidget.ts
index 6ae9218fa..5e32d74fc 100644
--- a/src/lib/litegraph/src/widgets/DisconnectedWidget.ts
+++ b/src/lib/litegraph/src/widgets/DisconnectedWidget.ts
@@ -1,11 +1,11 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IButtonWidget } from '@/lib/litegraph/src/types/widgets'
 
 import { BaseWidget, type DrawWidgetOptions } from './BaseWidget'
 
 class DisconnectedWidget extends BaseWidget<IButtonWidget> {
-  constructor(widget: IButtonWidget, node: LGraphNode) {
-    super(widget, node)
+  constructor(widget: IButtonWidget) {
+    super(widget, new LGraphNode('DisconnectedPlaceholder'))
     this.disabled = true
   }
 
@@ -35,4 +35,4 @@ const conf: IButtonWidget = {
   y: 0,
   clicked: false
 }
-export const disconnectedWidget = new DisconnectedWidget(conf, {} as LGraphNode)
+export const disconnectedWidget = new DisconnectedWidget(conf)
diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts
index 42a8f5663..0e6a34fe5 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,
@@ -7,6 +8,7 @@ import type {
 } from '@/lib/litegraph/src/types/widgets'
 import { toClass } from '@/lib/litegraph/src/utils/type'
 
+import { AssetWidget } from './AssetWidget'
 import { BaseWidget } from './BaseWidget'
 import { BooleanWidget } from './BooleanWidget'
 import { ButtonWidget } from './ButtonWidget'
@@ -47,6 +49,7 @@ export type WidgetTypeMap = {
   imagecompare: ImageCompareWidget
   selectbutton: SelectButtonWidget
   textarea: TextareaWidget
+  asset: AssetWidget
   [key: string]: BaseWidget
 }
 
@@ -115,6 +118,8 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(SelectButtonWidget, narrowedWidget, node)
     case 'textarea':
       return toClass(TextareaWidget, narrowedWidget, node)
+    case 'asset':
+      return toClass(AssetWidget, narrowedWidget, node)
     default: {
       if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
     }
@@ -128,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 42990a3fd..51bdf257c 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 ecbfc26ea..5fed192d2 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 c9d734350..9a9dff2f6 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/__snapshots__/ConfigureGraph.test.ts.snap b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
index 80e344d5b..a90c8d3de 100644
--- a/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
+++ b/src/lib/litegraph/test/__snapshots__/ConfigureGraph.test.ts.snap
@@ -1,333 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = `
-LGraph {
-  "_groups": [
-    LGraphGroup {
-      "_bounding": Float32Array [
-        20,
-        20,
-        1,
-        3,
-      ],
-      "_children": Set {},
-      "_nodes": [],
-      "_pos": Float32Array [
-        20,
-        20,
-      ],
-      "_size": Float32Array [
-        1,
-        3,
-      ],
-      "color": "#6029aa",
-      "flags": {},
-      "font": undefined,
-      "font_size": 14,
-      "graph": [Circular],
-      "id": 123,
-      "isPointInside": [Function],
-      "selected": undefined,
-      "setDirtyCanvas": [Function],
-      "title": "A group to test with",
-    },
-  ],
-  "_input_nodes": undefined,
-  "_last_trigger_time": undefined,
-  "_links": Map {},
-  "_nodes": [
-    LGraphNode {
-      "_collapsed_width": undefined,
-      "_level": undefined,
-      "_pos": Float32Array [
-        10,
-        10,
-      ],
-      "_posSize": Float32Array [
-        10,
-        10,
-        140,
-        60,
-      ],
-      "_relative_id": undefined,
-      "_shape": undefined,
-      "_size": Float32Array [
-        140,
-        60,
-      ],
-      "action_call": undefined,
-      "action_triggered": undefined,
-      "badgePosition": "top-left",
-      "badges": [],
-      "bgcolor": undefined,
-      "block_delete": undefined,
-      "boxcolor": undefined,
-      "clip_area": undefined,
-      "clonable": undefined,
-      "color": undefined,
-      "console": undefined,
-      "exec_version": undefined,
-      "execute_triggered": undefined,
-      "flags": {},
-      "freeWidgetSpace": undefined,
-      "gotFocusAt": undefined,
-      "graph": [Circular],
-      "has_errors": undefined,
-      "id": 1,
-      "ignore_remove": undefined,
-      "inputs": [],
-      "last_serialization": undefined,
-      "locked": undefined,
-      "lostFocusAt": undefined,
-      "mode": 0,
-      "mouseOver": undefined,
-      "order": 0,
-      "outputs": [],
-      "progress": undefined,
-      "properties": {},
-      "properties_info": [],
-      "redraw_on_mouse": undefined,
-      "removable": undefined,
-      "resizable": undefined,
-      "selected": undefined,
-      "serialize_widgets": undefined,
-      "showAdvanced": undefined,
-      "strokeStyles": {
-        "error": [Function],
-        "selected": [Function],
-      },
-      "title": "LGraphNode",
-      "title_buttons": [],
-      "type": "mustBeSet",
-      "widgets": undefined,
-      "widgets_start_y": undefined,
-      "widgets_up": undefined,
-    },
-  ],
-  "_nodes_by_id": {
-    "1": LGraphNode {
-      "_collapsed_width": undefined,
-      "_level": undefined,
-      "_pos": Float32Array [
-        10,
-        10,
-      ],
-      "_posSize": Float32Array [
-        10,
-        10,
-        140,
-        60,
-      ],
-      "_relative_id": undefined,
-      "_shape": undefined,
-      "_size": Float32Array [
-        140,
-        60,
-      ],
-      "action_call": undefined,
-      "action_triggered": undefined,
-      "badgePosition": "top-left",
-      "badges": [],
-      "bgcolor": undefined,
-      "block_delete": undefined,
-      "boxcolor": undefined,
-      "clip_area": undefined,
-      "clonable": undefined,
-      "color": undefined,
-      "console": undefined,
-      "exec_version": undefined,
-      "execute_triggered": undefined,
-      "flags": {},
-      "freeWidgetSpace": undefined,
-      "gotFocusAt": undefined,
-      "graph": [Circular],
-      "has_errors": undefined,
-      "id": 1,
-      "ignore_remove": undefined,
-      "inputs": [],
-      "last_serialization": undefined,
-      "locked": undefined,
-      "lostFocusAt": undefined,
-      "mode": 0,
-      "mouseOver": undefined,
-      "order": 0,
-      "outputs": [],
-      "progress": undefined,
-      "properties": {},
-      "properties_info": [],
-      "redraw_on_mouse": undefined,
-      "removable": undefined,
-      "resizable": undefined,
-      "selected": undefined,
-      "serialize_widgets": undefined,
-      "showAdvanced": undefined,
-      "strokeStyles": {
-        "error": [Function],
-        "selected": [Function],
-      },
-      "title": "LGraphNode",
-      "title_buttons": [],
-      "type": "mustBeSet",
-      "widgets": undefined,
-      "widgets_start_y": undefined,
-      "widgets_up": undefined,
-    },
-  },
-  "_nodes_executable": [],
-  "_nodes_in_order": [
-    LGraphNode {
-      "_collapsed_width": undefined,
-      "_level": undefined,
-      "_pos": Float32Array [
-        10,
-        10,
-      ],
-      "_posSize": Float32Array [
-        10,
-        10,
-        140,
-        60,
-      ],
-      "_relative_id": undefined,
-      "_shape": undefined,
-      "_size": Float32Array [
-        140,
-        60,
-      ],
-      "action_call": undefined,
-      "action_triggered": undefined,
-      "badgePosition": "top-left",
-      "badges": [],
-      "bgcolor": undefined,
-      "block_delete": undefined,
-      "boxcolor": undefined,
-      "clip_area": undefined,
-      "clonable": undefined,
-      "color": undefined,
-      "console": undefined,
-      "exec_version": undefined,
-      "execute_triggered": undefined,
-      "flags": {},
-      "freeWidgetSpace": undefined,
-      "gotFocusAt": undefined,
-      "graph": [Circular],
-      "has_errors": undefined,
-      "id": 1,
-      "ignore_remove": undefined,
-      "inputs": [],
-      "last_serialization": undefined,
-      "locked": undefined,
-      "lostFocusAt": undefined,
-      "mode": 0,
-      "mouseOver": undefined,
-      "order": 0,
-      "outputs": [],
-      "progress": undefined,
-      "properties": {},
-      "properties_info": [],
-      "redraw_on_mouse": undefined,
-      "removable": undefined,
-      "resizable": undefined,
-      "selected": undefined,
-      "serialize_widgets": undefined,
-      "showAdvanced": undefined,
-      "strokeStyles": {
-        "error": [Function],
-        "selected": [Function],
-      },
-      "title": "LGraphNode",
-      "title_buttons": [],
-      "type": "mustBeSet",
-      "widgets": undefined,
-      "widgets_start_y": undefined,
-      "widgets_up": undefined,
-    },
-  ],
-  "_subgraphs": Map {},
-  "_version": 3,
-  "catch_errors": true,
-  "config": {},
-  "elapsed_time": 0.01,
-  "errors_in_execution": undefined,
-  "events": CustomEventTarget {},
-  "execution_time": undefined,
-  "execution_timer_id": undefined,
-  "extra": {},
-  "filter": undefined,
-  "fixedtime": 0,
-  "fixedtime_lapse": 0.01,
-  "globaltime": 0,
-  "id": "ca9da7d8-fddd-4707-ad32-67be9be13140",
-  "iteration": 0,
-  "last_update_time": 0,
-  "links": Map {},
-  "list_of_graphcanvas": null,
-  "nodes_actioning": [],
-  "nodes_executedAction": [],
-  "nodes_executing": [],
-  "revision": 0,
-  "runningtime": 0,
-  "starttime": 0,
-  "state": {
-    "lastGroupId": 123,
-    "lastLinkId": 0,
-    "lastNodeId": 1,
-    "lastRerouteId": 0,
-  },
-  "status": 1,
-  "vars": {},
-  "version": 1,
-}
-`;
-
-exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredMinGraph 1`] = `
-LGraph {
-  "_groups": [],
-  "_input_nodes": undefined,
-  "_last_trigger_time": undefined,
-  "_links": Map {},
-  "_nodes": [],
-  "_nodes_by_id": {},
-  "_nodes_executable": [],
-  "_nodes_in_order": [],
-  "_subgraphs": Map {},
-  "_version": 0,
-  "catch_errors": true,
-  "config": {},
-  "elapsed_time": 0.01,
-  "errors_in_execution": undefined,
-  "events": CustomEventTarget {},
-  "execution_time": undefined,
-  "execution_timer_id": undefined,
-  "extra": {},
-  "filter": undefined,
-  "fixedtime": 0,
-  "fixedtime_lapse": 0.01,
-  "globaltime": 0,
-  "id": "d175890f-716a-4ece-ba33-1d17a513b7be",
-  "iteration": 0,
-  "last_update_time": 0,
-  "links": Map {},
-  "list_of_graphcanvas": null,
-  "nodes_actioning": [],
-  "nodes_executedAction": [],
-  "nodes_executing": [],
-  "revision": 0,
-  "runningtime": 0,
-  "starttime": 0,
-  "state": {
-    "lastGroupId": 0,
-    "lastLinkId": 0,
-    "lastNodeId": 0,
-    "lastRerouteId": 0,
-  },
-  "status": 1,
-  "vars": {},
-  "version": 1,
-}
-`;
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
 exports[`LGraph configure() > LGraph matches previous snapshot (normal configure() usage) > configuredBasicGraph 1`] = `
 LGraph {
   "_groups": [
diff --git a/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts b/src/lib/litegraph/test/canvas/LinkConnectorSubgraphInputValidation.test.ts
index d9951656e..7d7ad9093 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 7ba3749fd..16cf40a55 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 51ef2f5bd..5711c3d4b 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 05cf543a2..e094812e1 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 05421f616..970b88d06 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 a83ef5e5f..54ed77a00 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/lib/litegraph/test/testExtensions.ts b/src/lib/litegraph/test/testExtensions.ts
index 097808fd2..bb59e7221 100644
--- a/src/lib/litegraph/test/testExtensions.ts
+++ b/src/lib/litegraph/test/testExtensions.ts
@@ -7,10 +7,10 @@ import type {
   ISerialisedGraph,
   SerialisableGraph
 } from '../src/types/serialisation'
-import floatingBranch from './assets/floatingBranch.json'
-import floatingLink from './assets/floatingLink.json'
-import linkedNodes from './assets/linkedNodes.json'
-import reroutesComplex from './assets/reroutesComplex.json'
+import floatingBranch from './assets/floatingBranch.json' with { type: 'json' }
+import floatingLink from './assets/floatingLink.json' with { type: 'json' }
+import linkedNodes from './assets/linkedNodes.json' with { type: 'json' }
+import reroutesComplex from './assets/reroutesComplex.json' with { type: 'json' }
 import {
   basicSerialisableGraph,
   minimalSerialisableGraph,
diff --git a/src/locales/CONTRIBUTING.md b/src/locales/CONTRIBUTING.md
index 99b149a08..3e05c10bc 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 50bec9eb9..047eed565 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 da02de9dc..ff4e4e4d0 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -6,9 +6,21 @@
     "noWorkflowsFound": "No workflows found.",
     "comingSoon": "Coming Soon",
     "download": "Download",
+    "downloadImage": "Download image",
+    "editOrMaskImage": "Edit or mask image",
+    "removeImage": "Remove image",
+    "viewImageOfTotal": "View image {index} of {total}",
+    "imagePreview": "Image preview - Use arrow keys to navigate between images",
+    "galleryImage": "Gallery image",
+    "galleryThumbnail": "Gallery thumbnail",
+    "errorLoadingImage": "Error loading image",
+    "failedToDownloadImage": "Failed to download image",
+    "calculatingDimensions": "Calculating dimensions",
     "import": "Import",
     "loadAllFolders": "Load All Folders",
+    "logoAlt": "ComfyUI Logo",
     "refresh": "Refresh",
+    "refreshNode": "Refresh Node",
     "terminal": "Terminal",
     "logs": "Logs",
     "videoFailedToLoad": "Video failed to load",
@@ -30,7 +42,9 @@
     "icon": "Icon",
     "color": "Color",
     "error": "Error",
-    "help": "Help",
+    "info": "Node Info",
+    "bookmark": "Save to Library",
+    "moreOptions": "More Options",
     "loading": "Loading",
     "loadingPanel": "Loading {panel} panel...",
     "preview": "PREVIEW",
@@ -144,6 +158,8 @@
     "releaseTitle": "{package} {version} Release",
     "itemSelected": "{selectedCount} item selected",
     "itemsSelected": "{selectedCount} items selected",
+    "multiSelectDropdown": "Multi-select dropdown",
+    "singleSelectDropdown": "Single-select dropdown",
     "progressCountOf": "of",
     "keybindingAlreadyExists": "Keybinding already exists on",
     "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
@@ -158,7 +174,8 @@
     "nodeContentError": "Node Content Error",
     "nodeHeaderError": "Node Header Error",
     "nodeSlotsError": "Node Slots Error",
-    "nodeWidgetsError": "Node Widgets Error"
+    "nodeWidgetsError": "Node Widgets Error",
+    "frameNodes": "Frame Nodes"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -312,7 +329,37 @@
     "Save Selected as Template": "Save Selected as Template",
     "Node Templates": "Node Templates",
     "Manage": "Manage",
-    "Search": "Search"
+    "Search": "Search",
+    "Open in Mask Editor": "Open in Mask Editor",
+    "Open Image": "Open Image",
+    "Copy Image": "Copy Image",
+    "Save Image": "Save Image",
+    "Rename": "Rename",
+    "Copy": "Copy",
+    "Duplicate": "Duplicate",
+    "Paste": "Paste",
+    "Node Info": "Node Info",
+    "Adjust Size": "Adjust Size",
+    "Minimize Node": "Minimize Node",
+    "Expand Node": "Expand Node",
+    "Shape": "Shape",
+    "Color": "Color",
+    "Add Subgraph to Library": "Add Subgraph to Library",
+    "Unpack Subgraph": "Unpack Subgraph",
+    "Convert to Subgraph": "Convert to Subgraph",
+    "Align Selected To": "Align Selected To",
+    "Distribute Nodes": "Distribute Nodes",
+    "Remove Bypass": "Remove Bypass",
+    "Run Branch": "Run Branch",
+    "Delete": "Delete",
+    "Top": "Top",
+    "Bottom": "Bottom",
+    "Left": "Left",
+    "Right": "Right",
+    "Horizontal": "Horizontal",
+    "Vertical": "Vertical",
+    "new": "new",
+    "deprecated": "deprecated"
   },
   "icon": {
     "bookmark": "Bookmark",
@@ -361,6 +408,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",
@@ -445,16 +513,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"
     }
   },
@@ -463,6 +541,14 @@
     "revertChanges": "Revert Changes",
     "restart": "Restart"
   },
+  "shape": {
+    "default": "Default",
+    "round": "Round",
+    "CARD": "Card",
+    "circle": "Circle",
+    "arrow": "Arrow",
+    "box": "Box"
+  },
   "sideToolbar": {
     "themeToggle": "Toggle Theme",
     "helpCenter": "Help Center",
@@ -1025,7 +1111,6 @@
     "Workflow": "Workflow",
     "Edit": "Edit",
     "View": "View",
-    "Manager": "Manager",
     "Help": "Help",
     "Check for Updates": "Check for Updates",
     "Open Custom Nodes Folder": "Open Custom Nodes Folder",
@@ -1758,7 +1843,10 @@
     "executeButton": {
       "tooltip": "Execute to selected output nodes (Highlighted with orange border)",
       "disabledTooltip": "No output nodes selected"
-    }
+    },
+    "Set Group Nodes to Never": "Set Group Nodes to Never",
+    "Bypass Group Nodes": "Bypass Group Nodes",
+    "Set Group Nodes to Always": "Set Group Nodes to Always"
   },
   "chatHistory": {
     "cancelEdit": "Cancel",
@@ -1809,5 +1897,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 7c7cec305..ae0ce0204 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",
@@ -30,7 +33,7 @@
     "tooltip": "Image URL for the canvas background. You can right-click an image in the outputs panel and select \"Set as Background\" to use it, or upload your own image using the upload button."
   },
   "Comfy_Canvas_NavigationMode": {
-    "name": "Canvas Navigation Mode",
+    "name": "Navigation Mode",
     "options": {
       "Standard (New)": "Standard (New)",
       "Drag Navigation": "Drag Navigation"
@@ -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 000000000..36cc9592b
--- /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 000000000..bc1b31f5a
--- /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 000000000..40c8d3ea6
--- /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 000000000..06db2ad95
--- /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 000000000..bb27153c2
--- /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 000000000..f062fe71f
--- /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 000000000..1182fdfa9
--- /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 000000000..2b3532a05
--- /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 000000000..90b8734bc
--- /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 000000000..ac0316d3b
--- /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 000000000..3ec844b30
--- /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 000000000..35122fd52
--- /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 000000000..831b6c9ac
--- /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 000000000..e0095b619
--- /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 000000000..ac42177b2
--- /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 000000000..30572d8c9
--- /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 000000000..482a48af9
--- /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
new file mode 100644
index 000000000..2c051a30d
--- /dev/null
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -0,0 +1,57 @@
+import { z } from 'zod'
+
+// Zod schemas for asset API validation matching ComfyUI Assets REST API spec
+const zAsset = z.object({
+  id: z.string(),
+  name: z.string(),
+  asset_hash: z.string().nullable(),
+  size: z.number(),
+  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({
+  assets: z.array(zAsset).optional(),
+  total: z.number().optional(),
+  has_more: z.boolean().optional()
+})
+
+const zModelFolder = z.object({
+  name: z.string(),
+  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>
+
+// Legacy interface for backward compatibility (now aligned with Zod schema)
+export interface ModelFolderInfo {
+  name: string
+  folders: string[]
+}
diff --git a/src/services/assetService.ts b/src/platform/assets/services/assetService.ts
similarity index 62%
rename from src/services/assetService.ts
rename to src/platform/assets/services/assetService.ts
index ffc825260..7d0f82cbb 100644
--- a/src/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -1,11 +1,12 @@
 import { fromZodError } from 'zod-validation-error'
 
 import {
+  type AssetItem,
   type AssetResponse,
   type ModelFile,
   type ModelFolder,
   assetResponseSchema
-} from '@/schemas/assetSchema'
+} from '@/platform/assets/schemas/assetSchema'
 import { api } from '@/scripts/api'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
@@ -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 000000000..2d32fa07f
--- /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/components/dialog/content/setting/ColorPaletteMessage.vue b/src/platform/settings/components/ColorPaletteMessage.vue
similarity index 96%
rename from src/components/dialog/content/setting/ColorPaletteMessage.vue
rename to src/platform/settings/components/ColorPaletteMessage.vue
index 2269a53ae..fbdb79ce0 100644
--- a/src/components/dialog/content/setting/ColorPaletteMessage.vue
+++ b/src/platform/settings/components/ColorPaletteMessage.vue
@@ -43,8 +43,8 @@ import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
-import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const settingStore = useSettingStore()
diff --git a/src/components/dialog/content/setting/ExtensionPanel.vue b/src/platform/settings/components/ExtensionPanel.vue
similarity index 97%
rename from src/components/dialog/content/setting/ExtensionPanel.vue
rename to src/platform/settings/components/ExtensionPanel.vue
index 3fd246093..92be564f5 100644
--- a/src/components/dialog/content/setting/ExtensionPanel.vue
+++ b/src/platform/settings/components/ExtensionPanel.vue
@@ -92,10 +92,9 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, onMounted, ref } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
+import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
-import { useSettingStore } from '@/stores/settingStore'
-
-import PanelTemplate from './PanelTemplate.vue'
 
 const filterTypes = ['All', 'Core', 'Custom']
 const filterType = ref('All')
diff --git a/src/components/dialog/content/setting/ServerConfigPanel.vue b/src/platform/settings/components/ServerConfigPanel.vue
similarity index 93%
rename from src/components/dialog/content/setting/ServerConfigPanel.vue
rename to src/platform/settings/components/ServerConfigPanel.vue
index 2c07f2f48..8f2cd1cd7 100644
--- a/src/components/dialog/content/setting/ServerConfigPanel.vue
+++ b/src/platform/settings/components/ServerConfigPanel.vue
@@ -54,7 +54,7 @@
       <div v-for="item in items" :key="item.name" class="mb-4">
         <FormItem
           :id="item.id"
-          v-model:formValue="item.value"
+          v-model:form-value="item.value"
           :item="translateItem(item)"
           :label-class="{
             'text-highlight': item.initialValue !== item.value
@@ -74,15 +74,14 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
+import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { FormItem as FormItemType } from '@/platform/settings/types'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
-import { useSettingStore } from '@/stores/settingStore'
-import type { FormItem as FormItemType } from '@/types/settingTypes'
 import { electronAPI } from '@/utils/envUtil'
 
-import PanelTemplate from './PanelTemplate.vue'
-
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
 const {
diff --git a/src/components/dialog/content/SettingDialogContent.vue b/src/platform/settings/components/SettingDialogContent.vue
similarity index 83%
rename from src/components/dialog/content/SettingDialogContent.vue
rename to src/platform/settings/components/SettingDialogContent.vue
index 9f6eb3216..bbeb53ca5 100644
--- a/src/components/dialog/content/SettingDialogContent.vue
+++ b/src/platform/settings/components/SettingDialogContent.vue
@@ -2,7 +2,7 @@
   <div class="settings-container">
     <ScrollPanel class="settings-sidebar shrink-0 p-2 w-48 2xl:w-64">
       <SearchBox
-        v-model:modelValue="searchQuery"
+        v-model:model-value="searchQuery"
         class="settings-search-box w-full mb-2"
         :placeholder="$t('g.searchSettings') + '...'"
         :debounce-time="128"
@@ -66,18 +66,17 @@ import Tabs from 'primevue/tabs'
 import { computed, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
+import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
+import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useSettingSearch } from '@/composables/setting/useSettingSearch'
-import { useSettingUI } from '@/composables/setting/useSettingUI'
-import { SettingTreeNode } from '@/stores/settingStore'
-import { ISettingGroup, SettingParams } from '@/types/settingTypes'
+import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
+import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
+import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
+import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
+import type { SettingTreeNode } from '@/platform/settings/settingStore'
+import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { flattenTree } from '@/utils/treeUtil'
 
-import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
-import CurrentUserMessage from './setting/CurrentUserMessage.vue'
-import PanelTemplate from './setting/PanelTemplate.vue'
-import SettingsPanel from './setting/SettingsPanel.vue'
-
 const { defaultPanel } = defineProps<{
   defaultPanel?:
     | 'about'
@@ -113,7 +112,12 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
     .sort((a, b) => a.label.localeCompare(b.label))
     .map((group) => ({
       label: group.label,
-      settings: flattenTree<SettingParams>(group)
+      settings: flattenTree<SettingParams>(group).sort((a, b) => {
+        const sortOrderA = a.sortOrder ?? 0
+        const sortOrderB = b.sortOrder ?? 0
+
+        return sortOrderB - sortOrderA
+      })
     }))
 }
 
diff --git a/src/components/dialog/content/setting/SettingGroup.vue b/src/platform/settings/components/SettingGroup.vue
similarity index 82%
rename from src/components/dialog/content/setting/SettingGroup.vue
rename to src/platform/settings/components/SettingGroup.vue
index 9b780a27e..ea18aa569 100644
--- a/src/components/dialog/content/setting/SettingGroup.vue
+++ b/src/platform/settings/components/SettingGroup.vue
@@ -19,8 +19,8 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 
-import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
-import { SettingParams } from '@/types/settingTypes'
+import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import type { SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
diff --git a/src/components/dialog/content/setting/SettingItem.vue b/src/platform/settings/components/SettingItem.vue
similarity index 93%
rename from src/components/dialog/content/setting/SettingItem.vue
rename to src/platform/settings/components/SettingItem.vue
index 0e3f8394d..c83a4e77a 100644
--- a/src/components/dialog/content/setting/SettingItem.vue
+++ b/src/platform/settings/components/SettingItem.vue
@@ -29,8 +29,8 @@ import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
 import { st } from '@/i18n'
-import { useSettingStore } from '@/stores/settingStore'
-import type { SettingOption, SettingParams } from '@/types/settingTypes'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { SettingOption, SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const props = defineProps<{
diff --git a/src/components/dialog/content/setting/SettingsPanel.vue b/src/platform/settings/components/SettingsPanel.vue
similarity index 79%
rename from src/components/dialog/content/setting/SettingsPanel.vue
rename to src/platform/settings/components/SettingsPanel.vue
index 443869c36..58b686a96 100644
--- a/src/components/dialog/content/setting/SettingsPanel.vue
+++ b/src/platform/settings/components/SettingsPanel.vue
@@ -17,9 +17,8 @@
 
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { ISettingGroup } from '@/types/settingTypes'
-
-import SettingGroup from './SettingGroup.vue'
+import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
+import type { ISettingGroup } from '@/platform/settings/types'
 
 const props = defineProps<{
   settingGroups: ISettingGroup[]
diff --git a/src/composables/useLitegraphSettings.ts b/src/platform/settings/composables/useLitegraphSettings.ts
similarity index 86%
rename from src/composables/useLitegraphSettings.ts
rename to src/platform/settings/composables/useLitegraphSettings.ts
index fd340bb09..468c7d339 100644
--- a/src/composables/useLitegraphSettings.ts
+++ b/src/platform/settings/composables/useLitegraphSettings.ts
@@ -5,8 +5,8 @@ import {
   LGraphNode,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 /**
  * Watch for changes in the setting store and update the LiteGraph settings accordingly.
@@ -131,11 +131,26 @@ export const useLitegraphSettings = () => {
     const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode') as
       | 'standard'
       | 'legacy'
+      | 'custom'
 
     LiteGraph.canvasNavigationMode = navigationMode
     LiteGraph.macTrackpadGestures = navigationMode === 'standard'
   })
 
+  watchEffect(() => {
+    const leftMouseBehavior = settingStore.get(
+      'Comfy.Canvas.LeftMouseClickBehavior'
+    ) as 'panning' | 'select'
+    LiteGraph.leftMouseClickBehavior = leftMouseBehavior
+  })
+
+  watchEffect(() => {
+    const mouseWheelScroll = settingStore.get(
+      'Comfy.Canvas.MouseWheelScroll'
+    ) as 'panning' | 'zoom'
+    LiteGraph.mouseWheelScroll = mouseWheelScroll
+  })
+
   watchEffect(() => {
     LiteGraph.saveViewportWithGraph = settingStore.get(
       'Comfy.EnableWorkflowViewRestore'
diff --git a/src/composables/setting/useSettingSearch.ts b/src/platform/settings/composables/useSettingSearch.ts
similarity index 94%
rename from src/composables/setting/useSettingSearch.ts
rename to src/platform/settings/composables/useSettingSearch.ts
index 259eef736..c2bf3cfe8 100644
--- a/src/composables/setting/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 '@/stores/settingStore'
-import { ISettingGroup, SettingParams } from '@/types/settingTypes'
+} from '@/platform/settings/settingStore'
+import type { ISettingGroup, SettingParams } from '@/platform/settings/types'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 export function useSettingSearch() {
diff --git a/src/composables/setting/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
similarity index 91%
rename from src/composables/setting/useSettingUI.ts
rename to src/platform/settings/composables/useSettingUI.ts
index 1fd2bf307..8a01ec1e2 100644
--- a/src/composables/setting/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -7,14 +7,14 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { SettingTreeNode, useSettingStore } from '@/stores/settingStore'
-import type { SettingParams } from '@/types/settingTypes'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+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'
 import { buildTree } from '@/utils/treeUtil'
 
-import { useCurrentUser } from '../auth/useCurrentUser'
-
 interface SettingPanelItem {
   node: SettingTreeNode
   component: Component
@@ -112,7 +112,7 @@ export function useSettingUI(
       children: []
     },
     component: defineAsyncComponent(
-      () => import('@/components/dialog/content/setting/ExtensionPanel.vue')
+      () => import('@/platform/settings/components/ExtensionPanel.vue')
     )
   }
 
@@ -123,7 +123,7 @@ export function useSettingUI(
       children: []
     },
     component: defineAsyncComponent(
-      () => import('@/components/dialog/content/setting/ServerConfigPanel.vue')
+      () => import('@/platform/settings/components/ServerConfigPanel.vue')
     )
   }
 
diff --git a/src/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
similarity index 90%
rename from src/constants/coreSettings.ts
rename to src/platform/settings/constants/coreSettings.ts
index 068d102ad..4adf2db9d 100644
--- a/src/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -1,9 +1,10 @@
 import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { SettingParams } from '@/platform/settings/types'
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import type { SettingParams } from '@/types/settingTypes'
 
 /**
  * Core settings are essential configuration parameters required for ComfyUI's basic functionality.
@@ -138,6 +139,95 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: false
   },
+  {
+    id: 'Comfy.Canvas.NavigationMode',
+    category: ['LiteGraph', 'Canvas Navigation', 'NavigationMode'],
+    name: 'Navigation Mode',
+    defaultValue: 'legacy',
+    type: 'combo',
+    sortOrder: 100,
+    options: [
+      { value: 'standard', text: 'Standard (New)' },
+      { value: 'legacy', text: 'Drag Navigation' },
+      { value: 'custom', text: 'Custom' }
+    ],
+    versionAdded: '1.25.0',
+    defaultsByInstallVersion: {
+      '1.25.0': 'legacy'
+    },
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      if (newValue === 'standard') {
+        // Update related settings to match standard mode - select + panning
+        await settingStore.set('Comfy.Canvas.LeftMouseClickBehavior', 'select')
+        await settingStore.set('Comfy.Canvas.MouseWheelScroll', 'panning')
+      } else if (newValue === 'legacy') {
+        // Update related settings to match legacy mode - panning + zoom
+        await settingStore.set('Comfy.Canvas.LeftMouseClickBehavior', 'panning')
+        await settingStore.set('Comfy.Canvas.MouseWheelScroll', 'zoom')
+      }
+    }
+  },
+  {
+    id: 'Comfy.Canvas.LeftMouseClickBehavior',
+    category: ['LiteGraph', 'Canvas Navigation', 'LeftMouseClickBehavior'],
+    name: 'Left Mouse Click Behavior',
+    defaultValue: 'panning',
+    type: 'radio',
+    sortOrder: 50,
+    options: [
+      { value: 'panning', text: 'Panning' },
+      { value: 'select', text: 'Select' }
+    ],
+    versionAdded: '1.27.4',
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode')
+
+      if (navigationMode !== 'custom') {
+        if (
+          (newValue === 'select' && navigationMode === 'standard') ||
+          (newValue === 'panning' && navigationMode === 'legacy')
+        ) {
+          return
+        }
+
+        // only set to custom if it doesn't match the preset modes
+        await settingStore.set('Comfy.Canvas.NavigationMode', 'custom')
+      }
+    }
+  },
+  {
+    id: 'Comfy.Canvas.MouseWheelScroll',
+    category: ['LiteGraph', 'Canvas Navigation', 'MouseWheelScroll'],
+    name: 'Mouse Wheel Scroll',
+    defaultValue: 'zoom',
+    type: 'radio',
+    options: [
+      { value: 'panning', text: 'Panning' },
+      { value: 'zoom', text: 'Zoom in/out' }
+    ],
+    versionAdded: '1.27.4',
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode')
+
+      if (navigationMode !== 'custom') {
+        if (
+          (newValue === 'panning' && navigationMode === 'standard') ||
+          (newValue === 'zoom' && navigationMode === 'legacy')
+        ) {
+          return
+        }
+
+        // only set to custom if it doesn't match the preset modes
+        await settingStore.set('Comfy.Canvas.NavigationMode', 'custom')
+      }
+    }
+  },
   {
     id: 'Comfy.Graph.CanvasInfo',
     category: ['LiteGraph', 'Canvas', 'CanvasInfo'],
@@ -314,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'
   },
@@ -504,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
       })
@@ -813,21 +904,6 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 8,
     versionAdded: '1.26.7'
   },
-  {
-    id: 'Comfy.Canvas.NavigationMode',
-    category: ['LiteGraph', 'Canvas', 'CanvasNavigationMode'],
-    name: 'Canvas Navigation Mode',
-    defaultValue: 'legacy',
-    type: 'combo',
-    options: [
-      { value: 'standard', text: 'Standard (New)' },
-      { value: 'legacy', text: 'Drag Navigation' }
-    ],
-    versionAdded: '1.25.0',
-    defaultsByInstallVersion: {
-      '1.25.0': 'legacy'
-    }
-  },
   {
     id: 'Comfy.Canvas.SelectionToolbox',
     category: ['LiteGraph', 'Canvas', 'SelectionToolbox'],
diff --git a/src/stores/settingStore.ts b/src/platform/settings/settingStore.ts
similarity index 92%
rename from src/stores/settingStore.ts
rename to src/platform/settings/settingStore.ts
index 3887688ac..5a1573efb 100644
--- a/src/stores/settingStore.ts
+++ b/src/platform/settings/settingStore.ts
@@ -1,13 +1,13 @@
 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'
 import type { Settings } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import type { SettingParams } from '@/types/settingTypes'
 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/types/settingTypes.ts b/src/platform/settings/types.ts
similarity index 91%
rename from src/types/settingTypes.ts
rename to src/platform/settings/types.ts
index 08453bde9..b1efbe9a1 100644
--- a/src/types/settingTypes.ts
+++ b/src/platform/settings/types.ts
@@ -6,6 +6,7 @@ type SettingInputType =
   | 'slider'
   | 'knob'
   | 'combo'
+  | 'radio'
   | 'text'
   | 'image'
   | 'color'
@@ -43,6 +44,9 @@ export interface SettingParams<TValue = unknown> extends FormItem {
   versionAdded?: string
   // Version of the setting when it was last modified
   versionModified?: string
+  // sortOrder for sorting settings within a group. Higher values appear first.
+  // Default is 0 if not specified.
+  sortOrder?: number
 }
 
 /**
diff --git a/src/services/releaseService.ts b/src/platform/updates/common/releaseService.ts
similarity index 97%
rename from src/services/releaseService.ts
rename to src/platform/updates/common/releaseService.ts
index 7c55ae8f0..189421678 100644
--- a/src/services/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/stores/releaseStore.ts b/src/platform/updates/common/releaseStore.ts
similarity index 94%
rename from src/stores/releaseStore.ts
rename to src/platform/updates/common/releaseStore.ts
index a4f87281e..470c92272 100644
--- a/src/stores/releaseStore.ts
+++ b/src/platform/updates/common/releaseStore.ts
@@ -1,12 +1,14 @@
 import { until } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { compare } from 'semver'
 import { computed, ref } from 'vue'
 
-import { type ReleaseNote, useReleaseService } from '@/services/releaseService'
-import { useSettingStore } from '@/stores/settingStore'
+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'
 
 // Store for managing release notes
 export const useReleaseStore = defineStore('release', () => {
@@ -55,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/stores/toastStore.ts b/src/platform/updates/common/toastStore.ts
similarity index 100%
rename from src/stores/toastStore.ts
rename to src/platform/updates/common/toastStore.ts
diff --git a/src/composables/useFrontendVersionMismatchWarning.ts b/src/platform/updates/common/useFrontendVersionMismatchWarning.ts
similarity index 95%
rename from src/composables/useFrontendVersionMismatchWarning.ts
rename to src/platform/updates/common/useFrontendVersionMismatchWarning.ts
index e74f2ee5c..adb1bd702 100644
--- a/src/composables/useFrontendVersionMismatchWarning.ts
+++ b/src/platform/updates/common/useFrontendVersionMismatchWarning.ts
@@ -2,8 +2,8 @@ import { whenever } from '@vueuse/core'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useToastStore } from '@/stores/toastStore'
-import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+import { useToastStore } from './toastStore'
+import { useVersionCompatibilityStore } from './versionCompatibilityStore'
 
 interface UseFrontendVersionMismatchWarningOptions {
   immediate?: boolean
diff --git a/src/stores/versionCompatibilityStore.ts b/src/platform/updates/common/versionCompatibilityStore.ts
similarity index 94%
rename from src/stores/versionCompatibilityStore.ts
rename to src/platform/updates/common/versionCompatibilityStore.ts
index 46b25cf33..cc85f945b 100644
--- a/src/stores/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/components/helpcenter/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
similarity index 98%
rename from src/components/helpcenter/ReleaseNotificationToast.vue
rename to src/platform/updates/components/ReleaseNotificationToast.vue
index 4984b84d8..1abcf472e 100644
--- a/src/components/helpcenter/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -48,10 +48,11 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { ReleaseNote } from '@/services/releaseService'
-import { useReleaseStore } from '@/stores/releaseStore'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
+import type { ReleaseNote } from '../common/releaseService'
+import { useReleaseStore } from '../common/releaseStore'
+
 const { locale } = useI18n()
 const releaseStore = useReleaseStore()
 
diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
similarity index 98%
rename from src/components/helpcenter/WhatsNewPopup.vue
rename to src/platform/updates/components/WhatsNewPopup.vue
index 794c61e9b..d0049d873 100644
--- a/src/components/helpcenter/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -68,10 +68,11 @@ import { marked } from 'marked'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type { ReleaseNote } from '@/services/releaseService'
-import { useReleaseStore } from '@/stores/releaseStore'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
+import type { ReleaseNote } from '../common/releaseService'
+import { useReleaseStore } from '../common/releaseStore'
+
 const { locale, t } = useI18n()
 const releaseStore = useReleaseStore()
 
diff --git a/src/services/workflowService.ts b/src/platform/workflow/core/services/workflowService.ts
similarity index 93%
rename from src/services/workflowService.ts
rename to src/platform/workflow/core/services/workflowService.ts
index db76ad139..c4234cf45 100644
--- a/src/services/workflowService.ts
+++ b/src/platform/workflow/core/services/workflowService.ts
@@ -2,20 +2,22 @@ import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
 import { LGraph, LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import type { SerialisableGraph, Vector2 } from '@/lib/litegraph/src/litegraph'
-import { useWorkflowThumbnail } from '@/renderer/thumbnail/composables/useWorkflowThumbnail'
-import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { Point, SerialisableGraph } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
+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'
 import { downloadBlob } from '@/scripts/utils'
+import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
-import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { appendJsonExt, generateUUID } from '@/utils/formatUtil'
-
-import { useDialogService } from './dialogService'
+import { appendJsonExt } from '@/utils/formatUtil'
 
 export const useWorkflowService = () => {
   const settingStore = useSettingStore()
@@ -110,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)
@@ -344,7 +339,7 @@ export const useWorkflowService = () => {
    */
   const insertWorkflow = async (
     workflow: ComfyWorkflow,
-    options: { position?: Vector2 } = {}
+    options: { position?: Point } = {}
   ) => {
     const loadedWorkflow = await workflow.load()
     const workflowJSON = toRaw(loadedWorkflow.initialState)
diff --git a/src/constants/supportedWorkflowFormats.ts b/src/platform/workflow/core/types/formats.ts
similarity index 100%
rename from src/constants/supportedWorkflowFormats.ts
rename to src/platform/workflow/core/types/formats.ts
diff --git a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts b/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
similarity index 84%
rename from src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
rename to src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
index 0e3891f26..544570f22 100644
--- a/src/composables/sidebarTabs/useWorkflowsSidebarTab.ts
+++ b/src/platform/workflow/management/composables/useWorkflowsSidebarTab.ts
@@ -1,8 +1,8 @@
 import { markRaw } from 'vue'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
diff --git a/src/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
similarity index 97%
rename from src/stores/workflowStore.ts
rename to src/platform/workflow/management/stores/workflowStore.ts
index 943787c40..a007e7d26 100644
--- a/src/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -8,14 +8,15 @@ import type {
   LGraphNode,
   Subgraph
 } from '@/lib/litegraph/src/litegraph'
-import { useWorkflowThumbnail } from '@/renderer/thumbnail/composables/useWorkflowThumbnail'
-import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+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'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { defaultGraphJSON } from '@/scripts/defaultGraph'
 import { useDialogService } from '@/services/dialogService'
+import { UserFile } from '@/stores/userFileStore'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
 import {
   createNodeExecutionId,
@@ -23,12 +24,10 @@ 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'
 
-import { UserFile } from './userFileStore'
-
 export class ComfyWorkflow extends UserFile {
   static readonly basePath: string = 'workflows/'
   readonly tintCanvasBg?: string
@@ -326,12 +325,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/composables/useWorkflowAutoSave.ts b/src/platform/workflow/persistence/composables/useWorkflowAutoSave.ts
similarity index 91%
rename from src/composables/useWorkflowAutoSave.ts
rename to src/platform/workflow/persistence/composables/useWorkflowAutoSave.ts
index b13474d7f..6f85e6b19 100644
--- a/src/composables/useWorkflowAutoSave.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowAutoSave.ts
@@ -1,9 +1,9 @@
 import { computed, onUnmounted, watch } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { api } from '@/scripts/api'
-import { useWorkflowService } from '@/services/workflowService'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
 export function useWorkflowAutoSave() {
   const workflowStore = useWorkflowStore()
diff --git a/src/composables/useWorkflowPersistence.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
similarity index 95%
rename from src/composables/useWorkflowPersistence.ts
rename to src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
index f5527fdd7..0e3d92b15 100644
--- a/src/composables/useWorkflowPersistence.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
@@ -1,13 +1,13 @@
 import { tryOnScopeDispose } from '@vueuse/core'
 import { computed, watch } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { getStorageValue, setStorageValue } from '@/scripts/utils'
-import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
 export function useWorkflowPersistence() {
   const workflowStore = useWorkflowStore()
diff --git a/src/composables/useTemplateWorkflows.ts b/src/platform/workflow/templates/composables/useTemplateWorkflows.ts
similarity index 96%
rename from src/composables/useTemplateWorkflows.ts
rename to src/platform/workflow/templates/composables/useTemplateWorkflows.ts
index f10237a7d..beb229d53 100644
--- a/src/composables/useTemplateWorkflows.ts
+++ b/src/platform/workflow/templates/composables/useTemplateWorkflows.ts
@@ -1,15 +1,15 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type {
   TemplateGroup,
   TemplateInfo,
   WorkflowTemplates
-} from '@/types/workflowTemplateTypes'
+} from '@/platform/workflow/templates/types/template'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useDialogStore } from '@/stores/dialogStore'
 
 export function useTemplateWorkflows() {
   const { t } = useI18n()
diff --git a/src/stores/workflowTemplatesStore.ts b/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
similarity index 99%
rename from src/stores/workflowTemplatesStore.ts
rename to src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
index 08220e004..efec88205 100644
--- a/src/stores/workflowTemplatesStore.ts
+++ b/src/platform/workflow/templates/repositories/workflowTemplatesStore.ts
@@ -3,12 +3,12 @@ import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 
 import { st } from '@/i18n'
-import { api } from '@/scripts/api'
 import type {
   TemplateGroup,
   TemplateInfo,
   WorkflowTemplates
-} from '@/types/workflowTemplateTypes'
+} from '@/platform/workflow/templates/types/template'
+import { api } from '@/scripts/api'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const SHOULD_SORT_CATEGORIES = new Set([
diff --git a/src/types/workflowTemplateTypes.ts b/src/platform/workflow/templates/types/template.ts
similarity index 100%
rename from src/types/workflowTemplateTypes.ts
rename to src/platform/workflow/templates/types/template.ts
diff --git a/src/composables/useWorkflowValidation.ts b/src/platform/workflow/validation/composables/useWorkflowValidation.ts
similarity index 89%
rename from src/composables/useWorkflowValidation.ts
rename to src/platform/workflow/validation/composables/useWorkflowValidation.ts
index 1c218dc2e..c6d7c70ca 100644
--- a/src/composables/useWorkflowValidation.ts
+++ b/src/platform/workflow/validation/composables/useWorkflowValidation.ts
@@ -1,7 +1,7 @@
 import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
-import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
-import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
-import { useToastStore } from '@/stores/toastStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { fixBadLinks } from '@/utils/linkFixer'
 
 interface ValidationResult {
diff --git a/src/schemas/comfyWorkflowSchema.ts b/src/platform/workflow/validation/schemas/workflowSchema.ts
similarity index 100%
rename from src/schemas/comfyWorkflowSchema.ts
rename to src/platform/workflow/validation/schemas/workflowSchema.ts
diff --git a/src/stores/graphStore.ts b/src/renderer/core/canvas/canvasStore.ts
similarity index 76%
rename from src/stores/graphStore.ts
rename to src/renderer/core/canvas/canvasStore.ts
index 6e09d95a3..ec38940fe 100644
--- a/src/stores/graphStore.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 4134846c3..000000000
--- a/src/renderer/core/canvas/injectionKeys.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-
-/**
- * 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')
diff --git a/src/renderer/core/canvas/links/slotLinkCompatibility.ts b/src/renderer/core/canvas/links/slotLinkCompatibility.ts
new file mode 100644
index 000000000..b8beffc38
--- /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 000000000..5d2bbcfc4
--- /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 000000000..b69cd9b7a
--- /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 88d32485f..1bb3f7dae 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,
@@ -208,6 +204,8 @@ export class LitegraphLinkAdapter {
         return 'up'
       case LinkDirection.DOWN:
         return 'down'
+      case LinkDirection.CENTER:
+        return 'none'
       default:
         return 'right'
     }
@@ -499,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 eb458b180..126b98e00 100644
--- a/src/renderer/core/canvas/pathRenderer.ts
+++ b/src/renderer/core/canvas/pathRenderer.ts
@@ -12,7 +12,7 @@ export interface Point {
   y: number
 }
 
-export type Direction = 'left' | 'right' | 'up' | 'down'
+export type Direction = 'left' | 'right' | 'up' | 'down' | 'none'
 export type RenderMode = 'spline' | 'straight' | 'linear'
 export type ArrowShape = 'triangle' | 'circle' | 'square'
 
@@ -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
@@ -255,6 +255,8 @@ export class CanvasPathRenderer {
       case 'down':
         innerA.y += l
         break
+      case 'none':
+        break
     }
 
     switch (endDir) {
@@ -270,6 +272,8 @@ export class CanvasPathRenderer {
       case 'down':
         innerB.y += l
         break
+      case 'none':
+        break
     }
 
     // Draw 4-point path: start -> innerA -> innerB -> end
@@ -306,6 +310,8 @@ export class CanvasPathRenderer {
       case 'down':
         innerA.y += l
         break
+      case 'none':
+        break
     }
 
     switch (endDir) {
@@ -321,6 +327,8 @@ export class CanvasPathRenderer {
       case 'down':
         innerB.y += l
         break
+      case 'none':
+        break
     }
 
     // Calculate midpoint using innerA/innerB positions (matching original)
@@ -399,6 +407,9 @@ export class CanvasPathRenderer {
         return { x: 0, y: -distance }
       case 'down':
         return { x: 0, y: distance }
+      case 'none':
+      default:
+        return { x: 0, y: 0 }
     }
   }
 
@@ -473,6 +484,8 @@ export class CanvasPathRenderer {
       case 'down':
         pa.y += dist * factor
         break
+      case 'none':
+        break
     }
 
     switch (endDirection) {
@@ -488,6 +501,8 @@ export class CanvasPathRenderer {
       case 'down':
         pb.y += dist * factor
         break
+      case 'none':
+        break
     }
 
     // Calculate bezier point (matching original computeConnectionPoint)
@@ -608,6 +623,9 @@ export class CanvasPathRenderer {
         return 'down'
       case 'down':
         return 'up'
+      case 'none':
+      default:
+        return 'none'
     }
   }
 
diff --git a/src/composables/graph/useCanvasInteractions.ts b/src/renderer/core/canvas/useCanvasInteractions.ts
similarity index 83%
rename from src/composables/graph/useCanvasInteractions.ts
rename to src/renderer/core/canvas/useCanvasInteractions.ts
index 05d0b7e28..cddc50d08 100644
--- a/src/composables/graph/useCanvasInteractions.ts
+++ b/src/renderer/core/canvas/useCanvasInteractions.ts
@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 /**
  * Composable for handling canvas interactions from Vue components.
@@ -11,12 +11,21 @@ import { useSettingStore } from '@/stores/settingStore'
  */
 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/TransformPane.vue b/src/renderer/core/layout/TransformPane.vue
deleted file mode 100644
index 2f623257c..000000000
--- a/src/renderer/core/layout/TransformPane.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div
-    class="transform-pane"
-    :class="{ 'transform-pane--interacting': isInteracting }"
-    :style="transformStyle"
-    @pointerdown="handlePointerDown"
-  >
-    <!-- Vue nodes will be rendered here -->
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from 'vue'
-
-import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
-import { useTransformSettling } from '@/composables/graph/useTransformSettling'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { useTransformState } from '@/renderer/core/layout/useTransformState'
-
-interface TransformPaneProps {
-  canvas?: LGraphCanvas
-}
-
-const props = defineProps<TransformPaneProps>()
-
-const {
-  camera,
-  transformStyle,
-  syncWithCanvas,
-  canvasToScreen,
-  screenToCanvas,
-  isNodeInViewport
-} = useTransformState()
-
-const canvasElement = computed(() => props.canvas?.canvas)
-const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
-  settleDelay: 200,
-  trackPan: true
-})
-
-provide('transformState', {
-  camera,
-  canvasToScreen,
-  screenToCanvas,
-  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]
-}>()
-
-useCanvasTransformSync(props.canvas, syncWithCanvas, {
-  onStart: () => emit('rafStatusChange', true),
-  onUpdate: (duration) => emit('transformUpdate', duration),
-  onStop: () => emit('rafStatusChange', false)
-})
-</script>
-
-<style scoped>
-.transform-pane {
-  position: absolute;
-  inset: 0;
-  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/__tests__/TransformPane.spec.ts b/src/renderer/core/layout/__tests__/TransformPane.spec.ts
index f6fe7126c..f6b4f463e 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 TransformPane from '../TransformPane.vue'
+import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
-// Mock the transform state composable
-const mockTransformState = {
-  camera: ref({ x: 0, y: 0, z: 1 }),
-  transformStyle: ref({
+import TransformPane from '../transform/TransformPane.vue'
+
+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()
+
+vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
+  useLOD: vi.fn(() => ({
+    isLOD: false
+  }))
+}))
+
+function createMockCanvas(): LGraphCanvas {
+  return {
+    canvas: {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    }
+  } as unknown as LGraphCanvas
+}
 
 describe('TransformPane', () => {
-  let wrapper: ReturnType<typeof mount>
-  let mockCanvas: any
-
   beforeEach(() => {
-    vi.clearAllMocks()
+    vi.useFakeTimers()
+    vi.resetAllMocks()
 
     // Create mock canvas with LiteGraph interface
-    mockCanvas = {
-      canvas: {
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn()
-      },
-      ds: {
-        offset: [0, 0],
-        scale: 1
-      }
-    }
-
-    // Reset mock transform state
-    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
-    mockTransformState.transformStyle.value = {
-      transform: 'scale(1) translate(0px, 0px)',
-      transformOrigin: '0 0'
-    }
-  })
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount()
-    }
   })
 
   describe('component mounting', () => {
     it('should mount successfully with minimal props', () => {
-      wrapper = mount(TransformPane, {
+      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
new file mode 100644
index 000000000..8e0e0e1d6
--- /dev/null
+++ b/src/renderer/core/layout/injectionKeys.ts
@@ -0,0 +1,31 @@
+import type { InjectionKey } from 'vue'
+
+import type { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+
+/**
+ * Lightweight, injectable transform state used by layout-aware components.
+ *
+ * Consumers use this interface to convert coordinates between LiteGraph's
+ * canvas space and the DOM's screen space, access the current pan/zoom
+ * (camera), and perform basic viewport culling checks.
+ *
+ * Coordinate mapping:
+ * - screen = (canvas + offset) * scale
+ * - canvas = screen / scale - offset
+ *
+ * The full implementation and additional helpers live in
+ * `useTransformState()`. This interface deliberately exposes only the
+ * minimal surface needed outside that composable.
+ *
+ * @example
+ * const state = inject(TransformStateKey)!
+ * const screen = state.canvasToScreen({ x: 100, y: 50 })
+ */
+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 0c656899d..f8eb7cfad 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/slots/useDomSlotRegistration.ts b/src/renderer/core/layout/slots/useDomSlotRegistration.ts
deleted file mode 100644
index 94a1f09e5..000000000
--- a/src/renderer/core/layout/slots/useDomSlotRegistration.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * DOM-based slot registration with performance optimization
- *
- * Measures the actual DOM position of a Vue slot connector and registers it
- * into the LayoutStore so hit-testing and link rendering use the true position.
- *
- * Performance strategy:
- * - Cache slot offset relative to node (avoids DOM reads during drag)
- * - No measurements during pan/zoom (camera transforms don't change canvas coords)
- * - Batch DOM reads via requestAnimationFrame
- * - Only remeasure on structural changes (resize, collapse, LOD)
- */
-import {
-  type Ref,
-  type WatchStopHandle,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch
-} from 'vue'
-
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import type { Point as LayoutPoint } from '@/renderer/core/layout/types'
-
-import { getSlotKey } from './slotIdentifier'
-
-export type TransformState = {
-  screenToCanvas: (p: LayoutPoint) => LayoutPoint
-}
-
-// Shared RAF queue for batching measurements
-const measureQueue = new Set<() => void>()
-let rafId: number | null = null
-// Track mounted components to prevent execution on unmounted ones
-const mountedComponents = new WeakSet<object>()
-
-function scheduleMeasurement(fn: () => void) {
-  measureQueue.add(fn)
-  if (rafId === null) {
-    rafId = requestAnimationFrame(() => {
-      rafId = null
-      const batch = Array.from(measureQueue)
-      measureQueue.clear()
-      batch.forEach((measure) => measure())
-    })
-  }
-}
-
-const cleanupFunctions = new WeakMap<
-  Ref<HTMLElement | null>,
-  {
-    stopWatcher?: WatchStopHandle
-    handleResize?: () => void
-  }
->()
-
-interface SlotRegistrationOptions {
-  nodeId: string
-  slotIndex: number
-  isInput: boolean
-  element: Ref<HTMLElement | null>
-  transform?: TransformState
-}
-
-export function useDomSlotRegistration(options: SlotRegistrationOptions) {
-  const { nodeId, slotIndex, isInput, element: elRef, transform } = options
-
-  // Early return if no nodeId
-  if (!nodeId || nodeId === '') {
-    return {
-      remeasure: () => {}
-    }
-  }
-  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
-  // Track if this component is mounted
-  const componentToken = {}
-
-  // Cached offset from node position (avoids DOM reads during drag)
-  const cachedOffset = ref<LayoutPoint | null>(null)
-  const lastMeasuredBounds = ref<DOMRect | null>(null)
-
-  // Measure DOM and cache offset (expensive, minimize calls)
-  const measureAndCacheOffset = () => {
-    // Skip if component was unmounted
-    if (!mountedComponents.has(componentToken)) return
-
-    const el = elRef.value
-    if (!el || !transform?.screenToCanvas) return
-
-    const rect = el.getBoundingClientRect()
-
-    // Skip if bounds haven't changed significantly (within 0.5px)
-    if (lastMeasuredBounds.value) {
-      const prev = lastMeasuredBounds.value
-      if (
-        Math.abs(rect.left - prev.left) < 0.5 &&
-        Math.abs(rect.top - prev.top) < 0.5 &&
-        Math.abs(rect.width - prev.width) < 0.5 &&
-        Math.abs(rect.height - prev.height) < 0.5
-      ) {
-        return // No significant change - skip update
-      }
-    }
-
-    lastMeasuredBounds.value = rect
-
-    // Center of the visual connector (dot) in screen coords
-    const centerScreen = {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2
-    }
-    const centerCanvas = transform.screenToCanvas(centerScreen)
-
-    // Cache offset from node position for fast updates during drag
-    const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
-    if (nodeLayout) {
-      cachedOffset.value = {
-        x: centerCanvas.x - nodeLayout.position.x,
-        y: centerCanvas.y - nodeLayout.position.y
-      }
-    }
-
-    updateSlotPosition(centerCanvas)
-  }
-
-  // Fast update using cached offset (no DOM read)
-  const updateFromCachedOffset = () => {
-    if (!cachedOffset.value) {
-      // No cached offset yet, need to measure
-      scheduleMeasurement(measureAndCacheOffset)
-      return
-    }
-
-    const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
-    if (!nodeLayout) {
-      return
-    }
-
-    // Calculate absolute position from node position + cached offset
-    const centerCanvas = {
-      x: nodeLayout.position.x + cachedOffset.value.x,
-      y: nodeLayout.position.y + cachedOffset.value.y
-    }
-
-    updateSlotPosition(centerCanvas)
-  }
-
-  // Update slot position in layout store
-  const updateSlotPosition = (centerCanvas: LayoutPoint) => {
-    const size = LiteGraph.NODE_SLOT_HEIGHT
-    const half = size / 2
-
-    layoutStore.updateSlotLayout(slotKey, {
-      nodeId,
-      index: slotIndex,
-      type: isInput ? 'input' : 'output',
-      position: { x: centerCanvas.x, y: centerCanvas.y },
-      bounds: {
-        x: centerCanvas.x - half,
-        y: centerCanvas.y - half,
-        width: size,
-        height: size
-      }
-    })
-  }
-
-  onMounted(async () => {
-    // Mark component as mounted
-    mountedComponents.add(componentToken)
-
-    // Initial measure after mount
-    await nextTick()
-    measureAndCacheOffset()
-
-    // Subscribe to node position changes for fast cached updates
-    const nodeRef = layoutStore.getNodeLayoutRef(nodeId)
-
-    const stopWatcher = watch(
-      nodeRef,
-      (newLayout) => {
-        if (newLayout) {
-          // Node moved/resized - update using cached offset
-          updateFromCachedOffset()
-        }
-      },
-      { immediate: false }
-    )
-
-    // Store cleanup functions without type assertions
-    const cleanup = cleanupFunctions.get(elRef) || {}
-    cleanup.stopWatcher = stopWatcher
-
-    // Window resize - remeasure as viewport changed
-    const handleResize = () => {
-      scheduleMeasurement(measureAndCacheOffset)
-    }
-    window.addEventListener('resize', handleResize, { passive: true })
-    cleanup.handleResize = handleResize
-    cleanupFunctions.set(elRef, cleanup)
-  })
-
-  onUnmounted(() => {
-    // Mark component as unmounted
-    mountedComponents.delete(componentToken)
-
-    // Clean up watchers and listeners
-    const cleanup = cleanupFunctions.get(elRef)
-    if (cleanup) {
-      if (cleanup.stopWatcher) cleanup.stopWatcher()
-      if (cleanup.handleResize) {
-        window.removeEventListener('resize', cleanup.handleResize)
-      }
-      cleanupFunctions.delete(elRef)
-    }
-
-    // Remove from layout store
-    layoutStore.deleteSlotLayout(slotKey)
-
-    // Remove from measurement queue if pending
-    measureQueue.delete(measureAndCacheOffset)
-  })
-
-  return {
-    // Expose for forced remeasure on structural changes
-    remeasure: () => scheduleMeasurement(measureAndCacheOffset)
-  }
-}
diff --git a/src/renderer/core/layout/store/layoutStore.ts b/src/renderer/core/layout/store/layoutStore.ts
index ca5d67120..15d412814 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'
@@ -36,9 +36,23 @@ import {
   type Point,
   type RerouteId,
   type RerouteLayout,
-  type Size,
   type SlotLayout
 } from '@/renderer/core/layout/types'
+import {
+  isBoundsEqual,
+  isPointEqual
+} from '@/renderer/core/layout/utils/geometry'
+import {
+  REROUTE_RADIUS,
+  boundsIntersect,
+  pointInBounds
+} from '@/renderer/core/layout/utils/layoutMath'
+import { makeLinkSegmentKey } from '@/renderer/core/layout/utils/layoutUtils'
+import {
+  type NodeLayoutMap,
+  layoutToYNode,
+  yNodeToLayout
+} from '@/renderer/core/layout/utils/mappers'
 import { SpatialIndexManager } from '@/renderer/core/spatial/SpatialIndex'
 
 type YEventChange = {
@@ -48,9 +62,6 @@ type YEventChange = {
 
 const logger = log.getLogger('LayoutStore')
 
-// Constants
-const REROUTE_RADIUS = 8
-
 // Utility functions
 function asRerouteId(id: string | number): RerouteId {
   return Number(id)
@@ -60,15 +71,6 @@ function asLinkId(id: string | number): LinkId {
   return Number(id)
 }
 
-interface NodeLayoutData {
-  id: NodeId
-  position: Point
-  size: Size
-  zIndex: number
-  visible: boolean
-  bounds: Bounds
-}
-
 interface LinkData {
   id: LinkId
   sourceNodeId: NodeId
@@ -91,15 +93,6 @@ interface TypedYMap<T> {
 }
 
 class LayoutStoreImpl implements LayoutStore {
-  private static readonly NODE_DEFAULTS: NodeLayoutData = {
-    id: 'unknown-node',
-    position: { x: 0, y: 0 },
-    size: { width: 100, height: 50 },
-    zIndex: 0,
-    visible: true,
-    bounds: { x: 0, y: 0, width: 100, height: 50 }
-  }
-
   private static readonly REROUTE_DEFAULTS: RerouteData = {
     id: 0,
     position: { x: 0, y: 0 },
@@ -109,7 +102,7 @@ class LayoutStoreImpl implements LayoutStore {
 
   // Yjs document and shared data structures
   private ydoc = new Y.Doc()
-  private ynodes: Y.Map<Y.Map<unknown>> // Maps nodeId -> Y.Map containing NodeLayout data
+  private ynodes: Y.Map<NodeLayoutMap> // Maps nodeId -> NodeLayoutMap containing NodeLayout data
   private ylinks: Y.Map<Y.Map<unknown>> // Maps linkId -> Y.Map containing link data
   private yreroutes: Y.Map<Y.Map<unknown>> // Maps rerouteId -> Y.Map containing reroute data
   private yoperations: Y.Array<LayoutOperation> // Operation log
@@ -141,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')
@@ -155,7 +151,7 @@ class LayoutStoreImpl implements LayoutStore {
     this.rerouteSpatialIndex = new SpatialIndexManager()
 
     // Listen for Yjs changes and trigger Vue reactivity
-    this.ynodes.observe((event: Y.YMapEvent<Y.Map<unknown>>) => {
+    this.ynodes.observe((event: Y.YMapEvent<NodeLayoutMap>) => {
       this.version++
 
       // Trigger all affected node refs
@@ -184,16 +180,6 @@ class LayoutStoreImpl implements LayoutStore {
     })
   }
 
-  private getNodeField<K extends keyof NodeLayoutData>(
-    ynode: Y.Map<unknown>,
-    field: K,
-    defaultValue: NodeLayoutData[K] = LayoutStoreImpl.NODE_DEFAULTS[field]
-  ): NodeLayoutData[K] {
-    const typedNode = ynode as TypedYMap<NodeLayoutData>
-    const value = typedNode.get(field)
-    return value ?? defaultValue
-  }
-
   private getLinkField<K extends keyof LinkData>(
     ylink: Y.Map<unknown>,
     field: K
@@ -227,7 +213,7 @@ class LayoutStoreImpl implements LayoutStore {
           get: () => {
             track()
             const ynode = this.ynodes.get(nodeId)
-            const layout = ynode ? this.yNodeToLayout(ynode) : null
+            const layout = ynode ? yNodeToLayout(ynode) : null
             return layout
           },
           set: (newLayout: NodeLayout | null) => {
@@ -242,7 +228,7 @@ class LayoutStoreImpl implements LayoutStore {
                   timestamp: Date.now(),
                   source: this.currentSource,
                   actor: this.currentActor,
-                  previousLayout: this.yNodeToLayout(existing)
+                  previousLayout: yNodeToLayout(existing)
                 })
               }
             } else {
@@ -260,7 +246,7 @@ class LayoutStoreImpl implements LayoutStore {
                   actor: this.currentActor
                 })
               } else {
-                const existingLayout = this.yNodeToLayout(existing)
+                const existingLayout = yNodeToLayout(existing)
 
                 // Check what properties changed
                 if (
@@ -330,8 +316,8 @@ class LayoutStoreImpl implements LayoutStore {
       for (const [nodeId] of this.ynodes) {
         const ynode = this.ynodes.get(nodeId)
         if (ynode) {
-          const layout = this.yNodeToLayout(ynode)
-          if (layout && this.boundsIntersect(layout.bounds, bounds)) {
+          const layout = yNodeToLayout(ynode)
+          if (layout && boundsIntersect(layout.bounds, bounds)) {
             result.push(nodeId)
           }
         }
@@ -352,7 +338,7 @@ class LayoutStoreImpl implements LayoutStore {
       for (const [nodeId] of this.ynodes) {
         const ynode = this.ynodes.get(nodeId)
         if (ynode) {
-          const layout = this.yNodeToLayout(ynode)
+          const layout = yNodeToLayout(ynode)
           if (layout) {
             result.set(nodeId, layout)
           }
@@ -378,7 +364,7 @@ class LayoutStoreImpl implements LayoutStore {
     for (const [nodeId] of this.ynodes) {
       const ynode = this.ynodes.get(nodeId)
       if (ynode) {
-        const layout = this.yNodeToLayout(ynode)
+        const layout = yNodeToLayout(ynode)
         if (layout) {
           nodes.push([nodeId, layout])
         }
@@ -389,7 +375,7 @@ class LayoutStoreImpl implements LayoutStore {
     nodes.sort(([, a], [, b]) => b.zIndex - a.zIndex)
 
     for (const [nodeId, layout] of nodes) {
-      if (this.pointInBounds(point, layout.bounds)) {
+      if (pointInBounds(point, layout.bounds)) {
         return nodeId
       }
     }
@@ -413,12 +399,8 @@ class LayoutStoreImpl implements LayoutStore {
     // Short-circuit if bounds and centerPos unchanged
     if (
       existing &&
-      existing.bounds.x === layout.bounds.x &&
-      existing.bounds.y === layout.bounds.y &&
-      existing.bounds.width === layout.bounds.width &&
-      existing.bounds.height === layout.bounds.height &&
-      existing.centerPos.x === layout.centerPos.x &&
-      existing.centerPos.y === layout.centerPos.y
+      isBoundsEqual(existing.bounds, layout.bounds) &&
+      isPointEqual(existing.centerPos, layout.centerPos)
     ) {
       // Only update path if provided (for hit detection)
       if (layout.path) {
@@ -457,6 +439,13 @@ class LayoutStoreImpl implements LayoutStore {
     const existing = this.slotLayouts.get(key)
 
     if (existing) {
+      // Short-circuit if geometry is unchanged
+      if (
+        isPointEqual(existing.position, layout.position) &&
+        isBoundsEqual(existing.bounds, layout.bounds)
+      ) {
+        return
+      }
       // Update spatial index
       this.slotSpatialIndex.update(key, layout.bounds)
     } else {
@@ -467,6 +456,34 @@ class LayoutStoreImpl implements LayoutStore {
     this.slotLayouts.set(key, layout)
   }
 
+  /**
+   * Batch update slot layouts and spatial index in one pass
+   */
+  batchUpdateSlotLayouts(
+    updates: Array<{ key: string; layout: SlotLayout }>
+  ): void {
+    if (!updates.length) return
+
+    // Update spatial index and map entries (skip unchanged)
+    for (const { key, layout } of updates) {
+      const existing = this.slotLayouts.get(key)
+
+      if (existing) {
+        // Short-circuit if geometry is unchanged
+        if (
+          isPointEqual(existing.position, layout.position) &&
+          isBoundsEqual(existing.bounds, layout.bounds)
+        ) {
+          continue
+        }
+        this.slotSpatialIndex.update(key, layout.bounds)
+      } else {
+        this.slotSpatialIndex.insert(key, layout.bounds)
+      }
+      this.slotLayouts.set(key, layout)
+    }
+  }
+
   /**
    * Delete slot layout data
    */
@@ -561,16 +578,6 @@ class LayoutStoreImpl implements LayoutStore {
     return this.rerouteLayouts.get(rerouteId) || null
   }
 
-  /**
-   * Helper to create internal key for link segment
-   */
-  private makeLinkSegmentKey(
-    linkId: LinkId,
-    rerouteId: RerouteId | null
-  ): string {
-    return `${linkId}:${rerouteId ?? 'final'}`
-  }
-
   /**
    * Update link segment layout data
    */
@@ -579,18 +586,14 @@ class LayoutStoreImpl implements LayoutStore {
     rerouteId: RerouteId | null,
     layout: Omit<LinkSegmentLayout, 'linkId' | 'rerouteId'>
   ): void {
-    const key = this.makeLinkSegmentKey(linkId, rerouteId)
+    const key = makeLinkSegmentKey(linkId, rerouteId)
     const existing = this.linkSegmentLayouts.get(key)
 
     // Short-circuit if bounds and centerPos unchanged (prevents spatial index churn)
     if (
       existing &&
-      existing.bounds.x === layout.bounds.x &&
-      existing.bounds.y === layout.bounds.y &&
-      existing.bounds.width === layout.bounds.width &&
-      existing.bounds.height === layout.bounds.height &&
-      existing.centerPos.x === layout.centerPos.x &&
-      existing.centerPos.y === layout.centerPos.y
+      isBoundsEqual(existing.bounds, layout.bounds) &&
+      isPointEqual(existing.centerPos, layout.centerPos)
     ) {
       // Only update path if provided (for hit detection)
       if (layout.path) {
@@ -629,7 +632,7 @@ class LayoutStoreImpl implements LayoutStore {
    * Delete link segment layout data
    */
   deleteLinkSegmentLayout(linkId: LinkId, rerouteId: RerouteId | null): void {
-    const key = this.makeLinkSegmentKey(linkId, rerouteId)
+    const key = makeLinkSegmentKey(linkId, rerouteId)
     const deleted = this.linkSegmentLayouts.delete(key)
     if (deleted) {
       // Remove from spatial index
@@ -693,7 +696,7 @@ class LayoutStoreImpl implements LayoutStore {
             rerouteId: segmentLayout.rerouteId
           }
         }
-      } else if (this.pointInBounds(point, segmentLayout.bounds)) {
+      } else if (pointInBounds(point, segmentLayout.bounds)) {
         // Fallback to bounding box test
         return {
           linkId: segmentLayout.linkId,
@@ -733,7 +736,7 @@ class LayoutStoreImpl implements LayoutStore {
     // Check precise bounds for candidates
     for (const key of candidateSlotKeys) {
       const slotLayout = this.slotLayouts.get(key)
-      if (slotLayout && this.pointInBounds(point, slotLayout.bounds)) {
+      if (slotLayout && pointInBounds(point, slotLayout.bounds)) {
         return slotLayout
       }
     }
@@ -969,7 +972,7 @@ class LayoutStoreImpl implements LayoutStore {
           }
         }
 
-        this.ynodes.set(layout.id, this.layoutToYNode(layout))
+        this.ynodes.set(layout.id, layoutToYNode(layout))
 
         // Add to spatial index
         this.spatialIndex.insert(layout.id, layout.bounds)
@@ -987,7 +990,7 @@ class LayoutStoreImpl implements LayoutStore {
       return
     }
 
-    const size = this.getNodeField(ynode, 'size')
+    const size = yNodeToLayout(ynode).size
     const newBounds = {
       x: operation.position.x,
       y: operation.position.y,
@@ -999,9 +1002,6 @@ class LayoutStoreImpl implements LayoutStore {
     // Hit detection queries can run before CRDT updates complete
     this.spatialIndex.update(operation.nodeId, newBounds)
 
-    // Update associated slot positions synchronously
-    this.updateNodeSlotPositions(operation.nodeId, operation.position)
-
     // Then update CRDT
     ynode.set('position', operation.position)
     this.updateNodeBounds(ynode, operation.position, size)
@@ -1016,7 +1016,7 @@ class LayoutStoreImpl implements LayoutStore {
     const ynode = this.ynodes.get(operation.nodeId)
     if (!ynode) return
 
-    const position = this.getNodeField(ynode, 'position')
+    const position = yNodeToLayout(ynode).position
     const newBounds = {
       x: position.x,
       y: position.y,
@@ -1028,9 +1028,6 @@ class LayoutStoreImpl implements LayoutStore {
     // Hit detection queries can run before CRDT updates complete
     this.spatialIndex.update(operation.nodeId, newBounds)
 
-    // Update associated slot positions synchronously (size changes may affect slot positions)
-    this.updateNodeSlotPositions(operation.nodeId, position)
-
     // Then update CRDT
     ynode.set('size', operation.size)
     this.updateNodeBounds(ynode, position, operation.size)
@@ -1053,7 +1050,7 @@ class LayoutStoreImpl implements LayoutStore {
     operation: CreateNodeOperation,
     change: LayoutChange
   ): void {
-    const ynode = this.layoutToYNode(operation.layout)
+    const ynode = layoutToYNode(operation.layout)
     this.ynodes.set(operation.nodeId, ynode)
 
     // Add to spatial index
@@ -1187,7 +1184,7 @@ class LayoutStoreImpl implements LayoutStore {
    * Update node bounds helper
    */
   private updateNodeBounds(
-    ynode: Y.Map<unknown>,
+    ynode: NodeLayoutMap,
     position: Point,
     size: { width: number; height: number }
   ): void {
@@ -1311,51 +1308,7 @@ class LayoutStoreImpl implements LayoutStore {
     }
   }
 
-  /**
-   * Update slot positions when a node moves
-   * TODO: This should be handled by the layout sync system (useSlotLayoutSync)
-   * rather than manually here. For now, we'll mark affected slots as needing recalculation.
-   */
-  private updateNodeSlotPositions(nodeId: NodeId, _nodePosition: Point): void {
-    // Mark all slots for this node as potentially stale
-    // The layout sync system will recalculate positions on the next frame
-    const slotsToRemove: string[] = []
-
-    for (const [key, slotLayout] of this.slotLayouts) {
-      if (slotLayout.nodeId === nodeId) {
-        slotsToRemove.push(key)
-      }
-    }
-
-    // Remove from spatial index so they'll be recalculated
-    for (const key of slotsToRemove) {
-      this.slotSpatialIndex.remove(key)
-      this.slotLayouts.delete(key)
-    }
-  }
-
   // Helper methods
-  private layoutToYNode(layout: NodeLayout): Y.Map<unknown> {
-    const ynode = new Y.Map<unknown>()
-    ynode.set('id', layout.id)
-    ynode.set('position', layout.position)
-    ynode.set('size', layout.size)
-    ynode.set('zIndex', layout.zIndex)
-    ynode.set('visible', layout.visible)
-    ynode.set('bounds', layout.bounds)
-    return ynode
-  }
-
-  private yNodeToLayout(ynode: Y.Map<unknown>): NodeLayout {
-    return {
-      id: this.getNodeField(ynode, 'id'),
-      position: this.getNodeField(ynode, 'position'),
-      size: this.getNodeField(ynode, 'size'),
-      zIndex: this.getNodeField(ynode, 'zIndex'),
-      visible: this.getNodeField(ynode, 'visible'),
-      bounds: this.getNodeField(ynode, 'bounds')
-    }
-  }
 
   private notifyChange(change: LayoutChange): void {
     this.changeListeners.forEach((listener) => {
@@ -1367,24 +1320,6 @@ class LayoutStoreImpl implements LayoutStore {
     })
   }
 
-  private pointInBounds(point: Point, bounds: Bounds): boolean {
-    return (
-      point.x >= bounds.x &&
-      point.x <= bounds.x + bounds.width &&
-      point.y >= bounds.y &&
-      point.y <= bounds.y + bounds.height
-    )
-  }
-
-  private boundsIntersect(a: Bounds, b: Bounds): boolean {
-    return !(
-      a.x + a.width < b.x ||
-      b.x + b.width < a.x ||
-      a.y + a.height < b.y ||
-      b.y + b.height < a.y
-    )
-  }
-
   // CRDT-specific methods
   getOperationsSince(timestamp: number): LayoutOperation[] {
     const operations: LayoutOperation[] = []
@@ -1444,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 55a464140..281199e8b 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
new file mode 100644
index 000000000..0ed23a90c
--- /dev/null
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    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"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
+import { computed, provide } from 'vue'
+
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
+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
+}
+
+const props = defineProps<TransformPaneProps>()
+
+const {
+  camera,
+  transformStyle,
+  syncWithCanvas,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+} = useTransformState()
+
+const { isLOD } = useLOD(camera)
+
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
+  settleDelay: 200,
+  trackPan: true
+})
+
+provide(TransformStateKey, {
+  camera,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+})
+
+const emit = defineEmits<{
+  transformUpdate: []
+}>()
+
+useRafFn(
+  () => {
+    if (!props.canvas) {
+      return
+    }
+    syncWithCanvas(props.canvas)
+    emit('transformUpdate')
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.transform-pane--interacting {
+  will-change: transform;
+}
+</style>
diff --git a/src/composables/graph/useTransformSettling.ts b/src/renderer/core/layout/transform/useTransformSettling.ts
similarity index 100%
rename from src/composables/graph/useTransformSettling.ts
rename to src/renderer/core/layout/transform/useTransformSettling.ts
diff --git a/src/renderer/core/layout/useTransformState.ts b/src/renderer/core/layout/transform/useTransformState.ts
similarity index 100%
rename from src/renderer/core/layout/useTransformState.ts
rename to src/renderer/core/layout/transform/useTransformState.ts
diff --git a/src/renderer/core/layout/types.ts b/src/renderer/core/layout/types.ts
index 1dbd936d9..ae2b76139 100644
--- a/src/renderer/core/layout/types.ts
+++ b/src/renderer/core/layout/types.ts
@@ -330,4 +330,8 @@ export interface LayoutStore {
   batchUpdateNodeBounds(
     updates: Array<{ nodeId: NodeId; bounds: Bounds }>
   ): void
+
+  batchUpdateSlotLayouts(
+    updates: Array<{ key: string; layout: SlotLayout }>
+  ): void
 }
diff --git a/src/renderer/core/layout/utils/geometry.ts b/src/renderer/core/layout/utils/geometry.ts
new file mode 100644
index 000000000..176cb0c98
--- /dev/null
+++ b/src/renderer/core/layout/utils/geometry.ts
@@ -0,0 +1,15 @@
+import type { Bounds, Point, Size } from '@/renderer/core/layout/types'
+
+export function isPointEqual(a: Point, b: Point): boolean {
+  return a.x === b.x && a.y === b.y
+}
+
+export function isBoundsEqual(a: Bounds, b: Bounds): boolean {
+  return (
+    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+  )
+}
+
+export function isSizeEqual(a: Size, b: Size): boolean {
+  return a.width === b.width && a.height === b.height
+}
diff --git a/src/renderer/core/layout/utils/layoutMath.ts b/src/renderer/core/layout/utils/layoutMath.ts
new file mode 100644
index 000000000..786e261dd
--- /dev/null
+++ b/src/renderer/core/layout/utils/layoutMath.ts
@@ -0,0 +1,21 @@
+import type { Bounds, Point } from '@/renderer/core/layout/types'
+
+export const REROUTE_RADIUS = 8
+
+export function pointInBounds(point: Point, bounds: Bounds): boolean {
+  return (
+    point.x >= bounds.x &&
+    point.x <= bounds.x + bounds.width &&
+    point.y >= bounds.y &&
+    point.y <= bounds.y + bounds.height
+  )
+}
+
+export function boundsIntersect(a: Bounds, b: Bounds): boolean {
+  return !(
+    a.x + a.width < b.x ||
+    b.x + b.width < a.x ||
+    a.y + a.height < b.y ||
+    b.y + b.height < a.y
+  )
+}
diff --git a/src/renderer/core/layout/utils/layoutUtils.ts b/src/renderer/core/layout/utils/layoutUtils.ts
new file mode 100644
index 000000000..408e2718d
--- /dev/null
+++ b/src/renderer/core/layout/utils/layoutUtils.ts
@@ -0,0 +1,11 @@
+import type { LinkId, RerouteId } from '@/renderer/core/layout/types'
+
+/**
+ * Creates a unique key for identifying link segments in spatial indexes
+ */
+export function makeLinkSegmentKey(
+  linkId: LinkId,
+  rerouteId: RerouteId | null
+): string {
+  return `${linkId}:${rerouteId ?? 'final'}`
+}
diff --git a/src/renderer/core/layout/utils/mappers.ts b/src/renderer/core/layout/utils/mappers.ts
new file mode 100644
index 000000000..48b85dc53
--- /dev/null
+++ b/src/renderer/core/layout/utils/mappers.ts
@@ -0,0 +1,45 @@
+import * as Y from 'yjs'
+
+import type { NodeLayout } from '@/renderer/core/layout/types'
+
+export type NodeLayoutMap = Y.Map<NodeLayout[keyof NodeLayout]>
+
+export const NODE_LAYOUT_DEFAULTS: NodeLayout = {
+  id: 'unknown-node',
+  position: { x: 0, y: 0 },
+  size: { width: 100, height: 50 },
+  zIndex: 0,
+  visible: true,
+  bounds: { x: 0, y: 0, width: 100, height: 50 }
+}
+
+export function layoutToYNode(layout: NodeLayout): NodeLayoutMap {
+  const ynode = new Y.Map<NodeLayout[keyof NodeLayout]>() as NodeLayoutMap
+  ynode.set('id', layout.id)
+  ynode.set('position', layout.position)
+  ynode.set('size', layout.size)
+  ynode.set('zIndex', layout.zIndex)
+  ynode.set('visible', layout.visible)
+  ynode.set('bounds', layout.bounds)
+  return ynode
+}
+
+function getOr<K extends keyof NodeLayout>(
+  map: NodeLayoutMap,
+  key: K,
+  fallback: NodeLayout[K]
+): NodeLayout[K] {
+  const v = map.get(key)
+  return (v ?? fallback) as NodeLayout[K]
+}
+
+export function yNodeToLayout(ynode: NodeLayoutMap): NodeLayout {
+  return {
+    id: getOr(ynode, 'id', NODE_LAYOUT_DEFAULTS.id),
+    position: getOr(ynode, 'position', NODE_LAYOUT_DEFAULTS.position),
+    size: getOr(ynode, 'size', NODE_LAYOUT_DEFAULTS.size),
+    zIndex: getOr(ynode, 'zIndex', NODE_LAYOUT_DEFAULTS.zIndex),
+    visible: getOr(ynode, 'visible', NODE_LAYOUT_DEFAULTS.visible),
+    bounds: getOr(ynode, 'bounds', NODE_LAYOUT_DEFAULTS.bounds)
+  }
+}
diff --git a/src/renderer/thumbnail/graphThumbnailRenderer.ts b/src/renderer/core/thumbnail/graphThumbnailRenderer.ts
similarity index 85%
rename from src/renderer/thumbnail/graphThumbnailRenderer.ts
rename to src/renderer/core/thumbnail/graphThumbnailRenderer.ts
index 5aac33bd2..815006760 100644
--- a/src/renderer/thumbnail/graphThumbnailRenderer.ts
+++ b/src/renderer/core/thumbnail/graphThumbnailRenderer.ts
@@ -1,12 +1,12 @@
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import {
   calculateMinimapScale,
   calculateNodeBounds
 } from '@/renderer/core/spatial/boundsCalculator'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
-import { renderMinimapToCanvas } from '../extensions/minimap/minimapCanvasRenderer'
+import { renderMinimapToCanvas } from '../../extensions/minimap/minimapCanvasRenderer'
 
 /**
  * Create a thumbnail of the current canvas's active graph.
diff --git a/src/renderer/thumbnail/composables/useWorkflowThumbnail.ts b/src/renderer/core/thumbnail/useWorkflowThumbnail.ts
similarity index 93%
rename from src/renderer/thumbnail/composables/useWorkflowThumbnail.ts
rename to src/renderer/core/thumbnail/useWorkflowThumbnail.ts
index 391453bf9..ff49ac472 100644
--- a/src/renderer/thumbnail/composables/useWorkflowThumbnail.ts
+++ b/src/renderer/core/thumbnail/useWorkflowThumbnail.ts
@@ -1,7 +1,8 @@
 import { ref } from 'vue'
 
-import { createGraphThumbnail } from '@/renderer/thumbnail/graphThumbnailRenderer'
-import { ComfyWorkflow } from '@/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+
+import { createGraphThumbnail } from './graphThumbnailRenderer'
 
 // Store thumbnails for each workflow
 const workflowThumbnails = ref<Map<string, string>>(new Map())
diff --git a/src/renderer/extensions/minimap/composables/useMinimap.ts b/src/renderer/extensions/minimap/composables/useMinimap.ts
index e2bcea30e..343a5ad55 100644
--- a/src/renderer/extensions/minimap/composables/useMinimap.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimap.ts
@@ -2,9 +2,9 @@ import { useRafFn } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import type { MinimapCanvas, MinimapSettingsKey } from '../types'
 import { useMinimapGraph } from './useMinimapGraph'
diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts
index 9cf050e55..c5bf9aa6c 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 '@/schemas/comfyWorkflowSchema'
+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/useMinimapSettings.ts b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
index e6cf31c29..cb5db2aa7 100644
--- a/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
+++ b/src/renderer/extensions/minimap/composables/useMinimapSettings.ts
@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 /**
diff --git a/src/renderer/extensions/minimap/composables/useMinimapViewport.ts b/src/renderer/extensions/minimap/composables/useMinimapViewport.ts
index da67e5a7c..0dd4d19df 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) {
+    // Use unified data source
+    const dataSource = MinimapDataSourceFactory.create(graph.value)
+
+    if (!dataSource.hasData()) {
       return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
     }
 
-    const bounds = calculateNodeBounds(g._nodes)
-    if (!bounds) {
-      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 000000000..4aae340b4
--- /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 000000000..c0daf7030
--- /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 000000000..8e1048e75
--- /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 000000000..49b15ed9e
--- /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 69528d5c3..3e547ce68 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
+  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
 
-    let color = colors.nodeColor
-
-    if (context.settings.renderBypass && node.mode === LGraphEventMode.BYPASS) {
-      color = colors.bypassColor
-    } else if (context.settings.nodeColors) {
-      color = colors.nodeColorDefault
-
-      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
+  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 x1 = (node.pos[0] - context.bounds.minX) * context.scale + offsetX
-    const y1 = (node.pos[1] - 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
 
-    for (const output of node.outputs) {
-      if (!output.links) continue
+    // Draw connection line
+    ctx.beginPath()
+    ctx.moveTo(outputX, outputY)
+    ctx.lineTo(inputX, inputY)
+    ctx.stroke()
 
-      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()
-
-        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 fbea21c83..b458718ea 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
new file mode 100644
index 000000000..26ff64e1e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -0,0 +1,263 @@
+<template>
+  <div
+    v-if="imageUrls.length > 0"
+    class="image-preview relative group flex flex-col items-center"
+    tabindex="0"
+    role="region"
+    :aria-label="$t('g.imagePreview')"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @keydown="handleKeyDown"
+  >
+    <!-- Image Wrapper -->
+    <div
+      class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
+    >
+      <!-- Error State -->
+      <div
+        v-if="imageError"
+        class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
+      >
+        <i-lucide:image-off class="w-12 h-12 mb-2 text-gray-400" />
+        <p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
+        <p class="text-xs text-gray-400 mt-1">{{ currentImageUrl }}</p>
+      </div>
+
+      <!-- Loading State -->
+      <Skeleton
+        v-else-if="isLoading"
+        class="w-full h-[352px]"
+        border-radius="5px"
+      />
+
+      <!-- Main Image -->
+      <img
+        v-else
+        :src="currentImageUrl"
+        :alt="imageAltText"
+        class="w-full h-[352px] object-contain block"
+        @load="handleImageLoad"
+        @error="handleImageError"
+      />
+
+      <!-- Floating Action Buttons (appear on hover) -->
+      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
+        <!-- Mask/Edit Button -->
+        <button
+          v-if="!hasMultipleImages"
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.editOrMaskImage')"
+          :aria-label="$t('g.editOrMaskImage')"
+          @click="handleEditMask"
+        >
+          <i-lucide:venetian-mask class="w-4 h-4" />
+        </button>
+
+        <!-- Download Button -->
+        <button
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.downloadImage')"
+          :aria-label="$t('g.downloadImage')"
+          @click="handleDownload"
+        >
+          <i-lucide:download class="w-4 h-4" />
+        </button>
+
+        <!-- Close Button -->
+        <button
+          class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
+          :title="$t('g.removeImage')"
+          :aria-label="$t('g.removeImage')"
+          @click="handleRemove"
+        >
+          <i-lucide:x class="w-4 h-4" />
+        </button>
+      </div>
+
+      <!-- Multiple Images Navigation -->
+      <div
+        v-if="hasMultipleImages"
+        class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
+      >
+        <button
+          v-for="(_, index) in imageUrls"
+          :key="index"
+          :class="getNavigationDotClass(index)"
+          :aria-label="
+            $t('g.viewImageOfTotal', {
+              index: index + 1,
+              total: imageUrls.length
+            })
+          "
+          @click="setCurrentIndex(index)"
+        />
+      </div>
+    </div>
+
+    <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>
+
+<script setup lang="ts">
+import { useToast } from 'primevue'
+import Skeleton from 'primevue/skeleton'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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[]
+  /** Optional node ID for context-aware actions */
+  readonly nodeId?: string
+}
+
+const props = defineProps<ImagePreviewProps>()
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const nodeOutputStore = useNodeOutputStore()
+
+// Component state
+const currentIndex = ref(0)
+const isHovered = ref(false)
+const actualDimensions = ref<string | null>(null)
+const imageError = ref(false)
+const isLoading = ref(false)
+
+// Computed values
+const currentImageUrl = computed(() => props.imageUrls[currentIndex.value])
+const hasMultipleImages = computed(() => props.imageUrls.length > 1)
+const imageAltText = computed(() => `Node output ${currentIndex.value + 1}`)
+
+// Watch for URL changes and reset state
+watch(
+  () => props.imageUrls,
+  (newUrls) => {
+    // Reset current index if it's out of bounds
+    if (currentIndex.value >= newUrls.length) {
+      currentIndex.value = 0
+    }
+
+    // Reset loading and error states when URLs change
+    actualDimensions.value = null
+    imageError.value = false
+    isLoading.value = false
+  },
+  { deep: true }
+)
+
+// Event handlers
+const handleImageLoad = (event: Event) => {
+  if (!event.target || !(event.target instanceof HTMLImageElement)) return
+  const img = event.target
+  isLoading.value = false
+  imageError.value = false
+  if (img.naturalWidth && img.naturalHeight) {
+    actualDimensions.value = `${img.naturalWidth} x ${img.naturalHeight}`
+  }
+}
+
+const handleImageError = () => {
+  isLoading.value = false
+  imageError.value = true
+  actualDimensions.value = null
+}
+
+const handleEditMask = () => {
+  void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
+}
+
+const handleDownload = () => {
+  try {
+    downloadFile(currentImageUrl.value)
+  } catch (error) {
+    useToast().add({
+      severity: 'error',
+      summary: 'Error',
+      detail: t('g.failedToDownloadImage'),
+      life: 3000,
+      group: 'image-preview'
+    })
+  }
+}
+
+const handleRemove = () => {
+  if (!props.nodeId) return
+  nodeOutputStore.removeNodeOutputs(props.nodeId)
+}
+
+const setCurrentIndex = (index: number) => {
+  if (index >= 0 && index < props.imageUrls.length) {
+    currentIndex.value = index
+    actualDimensions.value = null
+    isLoading.value = true
+    imageError.value = false
+  }
+}
+
+const handleMouseEnter = () => {
+  isHovered.value = true
+}
+
+const handleMouseLeave = () => {
+  isHovered.value = false
+}
+
+const getNavigationDotClass = (index: number) => {
+  return [
+    'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer',
+    index === currentIndex.value ? 'bg-white' : 'bg-white/50 hover:bg-white/80'
+  ]
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (props.imageUrls.length <= 1) return
+
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.preventDefault()
+      setCurrentIndex(
+        currentIndex.value > 0
+          ? currentIndex.value - 1
+          : props.imageUrls.length - 1
+      )
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      setCurrentIndex(
+        currentIndex.value < props.imageUrls.length - 1
+          ? currentIndex.value + 1
+          : 0
+      )
+      break
+    case 'Home':
+      event.preventDefault()
+      setCurrentIndex(0)
+      break
+    case 'End':
+      event.preventDefault()
+      setCurrentIndex(props.imageUrls.length - 1)
+      break
+  }
+}
+</script>
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 124597d6b..1e8387335 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,36 +1,31 @@
 <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-[#9FA2BD] text-[#888682]"
-    >
-      {{ 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,
@@ -40,17 +35,17 @@ import {
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
-import { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
-// DOM-based slot registration for arbitrary positioning
-import {
-  type TransformState,
-  useDomSlotRegistration
-} from '@/renderer/core/layout/slots/useDomSlotRegistration'
+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
@@ -66,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)
@@ -75,9 +84,18 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
-const transformState = inject<TransformState | undefined>(
-  'transformState',
-  undefined
+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<{
@@ -92,11 +110,17 @@ watchEffect(() => {
   slotElRef.value = el || null
 })
 
-useDomSlotRegistration({
+useSlotElementTracking({
   nodeId: props.nodeId ?? '',
-  slotIndex: props.index,
-  isInput: true,
-  element: slotElRef,
-  transform: transformState
+  index: props.index,
+  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 bdaf28354..7401471ef 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -4,33 +4,36 @@
   </div>
   <div
     v-else
+    ref="nodeContainerRef"
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-white dark-theme:bg-charcoal-100',
-        'min-w-[445px]',
+        'bg-white dark-theme:bg-charcoal-800',
         'lg-node absolute rounded-2xl',
-        // border
-        'border border-solid border-sand-100 dark-theme:border-charcoal-300',
-        !!error && 'border-red-700 dark-theme:border-red-300',
-        // hover
-        'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
-        // Selected
+        'border border-solid border-sand-100 dark-theme:border-charcoal-600',
+        // 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',
-        !!isSelected && 'outline-black dark-theme:outline-white',
-        !!(isSelected && error) && 'outline-red-500 dark-theme:outline-red-500',
+        borderClass,
+        outlineClass,
         {
           'animate-pulse': executing,
-          'opacity-50': nodeData.mode === 4,
+          '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
@@ -38,6 +41,7 @@
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
+    @wheel="handleWheel"
   >
     <div class="flex items-center">
       <template v-if="isCollapsed">
@@ -46,18 +50,43 @@
       </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>
 
-    <template v-if="!isMinimalLOD && !isCollapsed">
-      <div :class="cn(separatorClasses, 'mb-4')" />
+    <div
+      v-if="isCollapsed && executing && progress !== undefined"
+      :class="
+        cn(
+          'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
+          progressClasses
+        )
+      "
+      :style="{ width: `${Math.min(progress * 100, 100)}%` }"
+    />
+
+    <template v-if="!isCollapsed">
+      <div class="mb-4 relative">
+        <div :class="separatorClasses" />
+        <!-- Progress bar for executing state -->
+        <div
+          v-if="executing && progress !== undefined"
+          :class="
+            cn(
+              'absolute inset-x-0 top-1/2 -translate-y-1/2',
+              !!(progress < 1) && 'rounded-r-full',
+              progressClasses
+            )
+          "
+          :style="{ width: `${Math.min(progress * 100, 100)}%` }"
+        />
+      </div>
 
       <!-- Node Body - rendered based on LOD level and collapsed state -->
       <div
@@ -66,64 +95,68 @@
       >
         <!-- 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"
-        />
-
-        <div
-          v-if="shouldRenderSlots && shouldShowWidgets"
-          :class="separatorClasses"
         />
 
         <!-- 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"
-        />
-
-        <div
-          v-if="(shouldRenderSlots || shouldShowWidgets) && shouldShowContent"
-          :class="separatorClasses"
         />
 
         <!-- 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 -->
+        <div
+          v-if="shouldShowPreviewImg"
+          v-memo="[latestPreviewUrl]"
+          class="px-4"
+        >
+          <img
+            :src="latestPreviewUrl"
+            alt="preview"
+            class="w-full max-h-64 object-contain"
+          />
+        </div>
       </div>
     </template>
-
-    <!-- Progress bar for executing state -->
-    <div
-      v-if="executing && progress !== undefined"
-      class="absolute bottom-0 left-0 h-1 bg-primary-500 transition-all duration-300"
-      :style="{ width: `${progress * 100}%` }"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onErrorCaptured, 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 { app } from '@/scripts/app'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+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'
@@ -133,56 +166,59 @@ 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
-  executing?: boolean
-  progress?: number
   error?: string | null
   zoomLevel?: number
 }
 
-const props = defineProps<LGraphNodeProps>()
+const {
+  nodeData,
+  error = null,
+  readonly = false
+} = defineProps<LGraphNodeProps>()
 
-const emit = defineEmits<{
-  'node-click': [event: PointerEvent, nodeData: VueNodeData]
-  'slot-click': [
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    slotIndex: number,
-    isInput: boolean
-  ]
-  'update:collapsed': [nodeId: string, collapsed: boolean]
-  'update:title': [nodeId: string, newTitle: string]
-}>()
+const { handleNodeCollapse, handleNodeTitleUpdate, handleNodeSelect } =
+  useNodeEventHandlers()
 
-useVueElementTracking(props.nodeData.id, 'node')
+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 { selectedNodeIds } = storeToRefs(useCanvasStore())
+
+// Inject transform state for coordinate conversion
+const transformState = inject(TransformStateKey)
 
 // Computed selection state - only this node re-evaluates when its selection changes
 const isSelected = computed(() => {
-  return selectedNodeIds.value.has(props.nodeData.id)
+  return selectedNodeIds.value.has(nodeData.id)
 })
 
-// LOD (Level of Detail) system based on zoom level
-const zoomRef = toRef(() => props.zoomLevel ?? 1)
-const {
-  lodLevel,
-  shouldRenderWidgets,
-  shouldRenderSlots,
-  shouldRenderContent,
-  lodCssClass
-} = useLOD(zoomRef)
+// Use execution state composable
+const { executing, progress } = useNodeExecutionState(() => nodeData.id)
 
-// Computed properties for template usage
-const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+// Direct access to execution store for error state
+const executionStore = useExecutionStore()
+const hasExecutionError = computed(
+  () => executionStore.lastExecutionErrorNodeId === nodeData.id
+)
+
+// Computed error states for styling
+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
+
+// 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)
@@ -195,100 +231,131 @@ 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
-} = useNodeLayout(props.nodeData.id)
+  handlePointerDown,
+  handlePointerUp,
+  handlePointerMove,
+  isDragging,
+  dragStyle
+} = useNodePointerInteractions(() => nodeData, handleNodeSelect)
 
-// Drag state for styling
-const isDragging = ref(false)
-const dragStyle = computed(() => ({
-  cursor: isDragging.value ? 'grabbing' : 'grab'
-}))
+onMounted(() => {
+  if (size.value && transformState?.camera) {
+    const scale = transformState.camera.z
+    const screenSize = {
+      width: size.value.width * scale,
+      height: size.value.height * scale
+    }
+    resize(screenSize)
+  }
+})
 
 // Track collapsed state
-const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
+const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
 
-// Watch for external changes to the collapsed state
-watch(
-  () => props.nodeData.flags?.collapsed,
-  (newCollapsed: boolean | undefined) => {
-    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
-      isCollapsed.value = newCollapsed
-    }
-  }
-)
-
-// Check if node has custom content
+// Check if node has custom content (like image outputs)
 const hasCustomContent = computed(() => {
-  // Currently all content is handled through widgets
-  // This remains false but provides extensibility point
-  return false
+  // Show custom content if node has image outputs
+  return nodeImageUrls.value.length > 0
 })
 
 // Computed classes and conditions for better reusability
 const separatorClasses =
-  'bg-sand-100 dark-theme:bg-charcoal-300 h-[1px] 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'
 
-// Common condition computations to avoid repetition
-const shouldShowWidgets = computed(
-  () => shouldRenderWidgets.value && props.nodeData.widgets?.length
+const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
+  () => nodeData.id,
+  {
+    isCollapsed
+  }
 )
 
-const shouldShowContent = computed(
-  () => shouldRenderContent.value && hasCustomContent.value
-)
+const borderClass = computed(() => {
+  if (hasAnyError.value) {
+    return 'border-error dark-theme:border-error'
+  }
+  if (executing.value) {
+    return 'border-blue-500'
+  }
+  return undefined
+})
+
+const outlineClass = computed(() => {
+  if (!isSelected.value) {
+    return undefined
+  }
+  if (hasAnyError.value) {
+    return 'outline-error dark-theme:outline-error'
+  }
+  if (executing.value) {
+    return 'outline-blue-500 dark-theme:outline-blue-500'
+  }
+  return 'outline-black dark-theme:outline-white'
+})
 
 // Event handlers
-const handlePointerDown = (event: PointerEvent) => {
-  if (!props.nodeData) {
-    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
-    return
-  }
-
-  // Start drag using layout system
-  isDragging.value = true
-  startDrag(event)
-
-  // Emit node-click for selection handling in GraphCanvas
-  emit('node-click', event, props.nodeData)
-}
-
-const handlePointerMove = (event: PointerEvent) => {
-  if (isDragging.value) {
-    void handleLayoutDrag(event)
-  }
-}
-
-const handlePointerUp = (event: PointerEvent) => {
-  if (isDragging.value) {
-    isDragging.value = false
-    void endDrag(event)
-  }
-}
-
 const handleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
-  // Emit event so parent can sync with LiteGraph if needed
-  emit('update:collapsed', props.nodeData.id, isCollapsed.value)
+  handleNodeCollapse(nodeData.id, !isCollapsed.value)
 }
 
-const handleSlotClick = (
-  event: PointerEvent,
-  slotIndex: number,
-  isInput: boolean
-) => {
-  if (!props.nodeData) {
-    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+const handleHeaderTitleUpdate = (newTitle: string) => {
+  handleNodeTitleUpdate(nodeData.id, newTitle)
+}
+
+const handleEnterSubgraph = () => {
+  const graph = app.graph?.rootGraph || app.graph
+  if (!graph) {
+    console.warn('LGraphNode: No graph available for subgraph navigation')
     return
   }
-  emit('slot-click', event, props.nodeData, slotIndex, isInput)
+
+  const locatorId = getLocatorIdFromNodeData(nodeData)
+
+  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
+  }
+
+  canvas.openSubgraph(litegraphNode.subgraph, litegraphNode)
 }
 
-const handleTitleUpdate = (newTitle: string) => {
-  emit('update:title', props.nodeData.id, newTitle)
-}
+const nodeOutputs = useNodeOutputStore()
+
+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) {
+    return []
+  }
+
+  const node = getNodeByLocatorId(rootGraph, locatorId)
+
+  if (node && newOutputs?.images?.length) {
+    const urls = nodeOutputs.getNodeImageUrls(node)
+    if (urls) {
+      return urls
+    }
+  }
+  // Clear URLs if no outputs or no images
+  return []
+})
+
+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 000000000..a6513f039
--- /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 000000000..9f77a3de9
--- /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 f99e10917..9137df463 100644
--- a/src/renderer/extensions/vueNodes/components/NodeContent.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeContent.vue
@@ -5,28 +5,40 @@
   <div v-else class="lg-node-content">
     <!-- Default slot for custom content -->
     <slot>
-      <!-- This component serves as a placeholder for future extensibility -->
-      <!-- Currently all node content is rendered through the widget system -->
+      <ImagePreview
+        v-if="hasImages"
+        :image-urls="props.imageUrls || []"
+        :node-id="nodeId"
+        class="mt-2"
+      />
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onErrorCaptured, ref } from 'vue'
+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'
 
 interface NodeContentProps {
   node?: LGraphNode // For backwards compatibility
   nodeData?: VueNodeData // New clean data structure
   readonly?: boolean
-  lodLevel?: LODLevel
+  imageUrls?: string[]
 }
 
-defineProps<NodeContentProps>()
+const props = defineProps<NodeContentProps>()
+
+const hasImages = computed(() => props.imageUrls && props.imageUrls.length > 0)
+
+// Get node ID from nodeData or node prop
+const nodeId = computed(() => {
+  return props.nodeData?.id?.toString() || props.node?.id?.toString()
+})
 
 // Error boundary implementation
 const renderError = ref<string | null>(null)
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts b/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts
new file mode 100644
index 000000000..775dd6ba6
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.spec.ts
@@ -0,0 +1,272 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import InputText from 'primevue/inputtext'
+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'
+
+const makeNodeData = (overrides: Partial<VueNodeData> = {}): VueNodeData => ({
+  id: '1',
+  title: 'KSampler',
+  type: 'KSampler',
+  mode: 0,
+  selected: false,
+  executing: false,
+  widgets: [],
+  inputs: [],
+  outputs: [],
+  flags: { collapsed: false },
+  ...overrides
+})
+
+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 }
+  })
+
+  const { pinia } = setupMockStores()
+
+  return {
+    global: {
+      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,
+      collapsed: false,
+      ...props
+    }
+  })
+}
+
+describe('NodeHeader.vue', () => {
+  it('emits collapse when collapse button is clicked', async () => {
+    const wrapper = mountHeader()
+    const btn = wrapper.get('[data-testid="node-collapse-button"]')
+    await btn.trigger('click')
+    expect(wrapper.emitted('collapse')).toBeTruthy()
+  })
+
+  it('shows the current node title and updates when prop changes', async () => {
+    const wrapper = mountHeader({
+      nodeData: makeNodeData({ title: 'Original' })
+    })
+    // Title visible via EditableText in view mode
+    expect(wrapper.get('[data-testid="node-title"]').text()).toContain(
+      'Original'
+    )
+
+    // Update prop title; should sync displayTitle
+    await wrapper.setProps({ nodeData: makeNodeData({ title: 'Updated' }) })
+    expect(wrapper.get('[data-testid="node-title"]').text()).toContain(
+      'Updated'
+    )
+  })
+
+  it('allows renaming via double click and emits update:title on confirm', async () => {
+    const wrapper = mountHeader({ nodeData: makeNodeData({ title: 'Start' }) })
+
+    // Enter edit mode
+    await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+
+    // Edit and confirm (EditableText uses blur or enter to emit)
+    const input = wrapper.get('[data-testid="node-title-input"]')
+    await input.setValue('My Custom Sampler')
+    await input.trigger('keyup.enter')
+    await input.trigger('blur')
+
+    // NodeHeader should emit update:title with trimmed value
+    const e = wrapper.emitted('update:title')
+    expect(e).toBeTruthy()
+    expect(e?.[0]).toEqual(['My Custom Sampler'])
+  })
+
+  it('cancels rename on escape and keeps previous title', async () => {
+    const wrapper = mountHeader({ nodeData: makeNodeData({ title: 'KeepMe' }) })
+
+    await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+    const input = wrapper.get('[data-testid="node-title-input"]')
+    await input.setValue('Should Not Save')
+    await input.trigger('keyup.escape')
+
+    // Should not emit update:title
+    expect(wrapper.emitted('update:title')).toBeFalsy()
+
+    // Title remains the original
+    expect(wrapper.get('[data-testid="node-title"]').text()).toContain('KeepMe')
+  })
+
+  it('honors readonly: hides collapse button and prevents editing', async () => {
+    const wrapper = mountHeader({ readonly: true })
+
+    // Collapse button should be hidden
+    const btn = wrapper.find('[data-testid="node-collapse-button"]')
+    expect(btn.exists()).toBe(true)
+    // v-show hides via display:none
+    expect((btn.element as HTMLButtonElement).style.display).toBe('none')
+    // In unit test, presence is fine; simulate double click should not create input
+    await wrapper.get('[data-testid="node-header-1"]').trigger('dblclick')
+    const input = wrapper.find('[data-testid="node-title-input"]')
+    expect(input.exists()).toBe(false)
+  })
+
+  it('renders correct chevron icon based on collapsed prop', async () => {
+    const wrapper = mountHeader({ collapsed: false })
+    const expandedIcon = wrapper.get('i')
+    expect(expandedIcon.classes()).toContain('pi-chevron-down')
+
+    await wrapper.setProps({ collapsed: true })
+    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 3b3da3101..d66e00d92 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-[1px] text-[#888682] dark-theme:text-[#5B5E7D]"
-      ></i>
-    </button>
+    <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 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"
-      />
+      <!-- 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,28 +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: VueNodeData | undefined) => {
+  const title = (info?.title ?? '').trim()
+  if (title.length > 0) return title
+
+  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(nodeInfo.value?.title || 'Untitled')
+const displayTitle = ref(resolveTitle(nodeData))
 
-// Watch for external changes to the node title
+// Watch for external changes to the node title or type
 watch(
-  () => nodeInfo.value?.title,
-  (newTitle) => {
-    if (newTitle && newTitle !== displayTitle.value) {
-      displayTitle.value = newTitle
+  () => [nodeData?.title, nodeData?.type] as const,
+  () => {
+    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
   }
 }
@@ -109,7 +179,9 @@ const handleTitleEdit = (newTitle: string) => {
 
 const handleTitleCancel = () => {
   isEditing.value = false
-  // Reset displayTitle to the current node title
-  displayTitle.value = nodeInfo.value?.title || 'Untitled'
+}
+
+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 522a9e8a6..ed8bb8ed2 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.spec.ts
@@ -5,7 +5,9 @@ import { type PropType, defineComponent } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import enMessages from '@/locales/en/main.json'
+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 68f247932..26187899d 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 0cd7a59cc..c27cf8976 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 e83019aa9..dceab8111 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-[#9FA2BD] text-[#888682]"
-    >
-      {{ 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,6 +24,7 @@
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
+  type Ref,
   computed,
   inject,
   onErrorCaptured,
@@ -41,17 +34,17 @@ import {
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
-import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
-// DOM-based slot registration for arbitrary positioning
-import {
-  type TransformState,
-  useDomSlotRegistration
-} from '@/renderer/core/layout/slots/useDomSlotRegistration'
+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
@@ -68,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)
@@ -77,9 +84,18 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
-const transformState = inject<TransformState | undefined>(
-  'transformState',
-  undefined
+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<{
@@ -94,11 +110,17 @@ watchEffect(() => {
   slotElRef.value = el || null
 })
 
-useDomSlotRegistration({
+useSlotElementTracking({
   nodeId: props.nodeId ?? '',
-  slotIndex: props.index,
-  isInput: false,
-  element: slotElRef,
-  transform: transformState
+  index: props.index,
+  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 d5b8b1ad8..85c7ec17d 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 95c8b40a3..370393e58 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
+# ComfyUI Widget LOD System: Architecture and Implementation
 
-## What is Level of Detail (LOD)?
+## Executive Summary
 
-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.
+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.
 
-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
+## The Two Approaches: Reactive vs. Static LOD
 
-## Why LOD Matters
+### Approach 1: Reactive LOD (Original Design)
 
-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
+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.
 
-With LOD optimization:
-- Smooth performance even with large node graphs
-- Battery life improvement on laptops
-- Better user experience across different zoom levels
+**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.
 
-## How to Implement LOD in Your Widget
+### Approach 2: Static LOD with CSS (Current Implementation)
 
-### Step 1: Get the LOD Context
+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.
 
-Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+**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.
 
-```vue
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
+## The GPU Texture Bottleneck
 
-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-  // ... other props
-}>()
+The key insight driving the current architecture comes from understanding how browsers handle CSS transforms:
 
-// Get LOD information
-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
-</script>
-```
+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:
 
-**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
-**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+### Traditional Assumption
 
-### Step 2: Choose What to Show at Different Zoom Levels
+"If we render less content, we get better performance. Therefore, hiding complex widgets should improve zoom/pan performance."
 
-#### 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)
+### Actual Browser Behavior
 
-#### 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)
+When all nodes are children of a single transformed parent:
 
-### Step 3: Implement Your Widget's LOD Strategy
+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
 
-Here's a complete example of a slider widget with LOD:
+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.
 
-```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>
+## Two Distinct Performance Concerns
 
-<script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { useLOD } from '@/composables/graph/useLOD'
+The analysis reveals two often-conflated performance considerations that should be understood separately:
 
-const props = defineProps<{
-  widget: any
-  zoomLevel: number
-}>()
+### 1. Rendering Performance
 
-const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+**Question:** How fast can the browser paint and composite the node graph during interactions?
 
-// 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
-})
+**Traditional thinking:** Show less content → render faster  
+**Reality with CSS transforms:** GPU texture size dominates performance, not content complexity
 
-const showValue = computed(() => {
-  // Show precise value only when zoomed in close
-  return lodScore.value > 0.7  // User is focused on this specific widget
-})
+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.
 
-const showDescription = computed(() => {
-  // Description only at full detail
-  return lodLevel.value === 'full'  // Maximum zoom level
-})
+### 2. Memory and Lifecycle Management
 
-// 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>
+**Question:** How much memory do widget instances consume, and what's the cost of maintaining them?
 
-<style scoped>
-/* Apply different styles based on LOD */
-.widget--minimal {
-  /* Simplified appearance when zoomed out */
-  .widget-slider {
-    height: 4px;  /* Thinner slider */
-    opacity: 0.9;
-  }
-}
+This is where unmounting widgets might theoretically help:
 
-/* Normal styling */
-.widget-slider {
-  height: 8px;
-  transition: height 0.2s ease;
-}
+- 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
 
-.widget-label {
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
+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.
 
-.widget-value {
-  font-family: monospace;
-  font-size: 0.7rem;
-  color: var(--text-accent);
-}
+## Design Philosophy and Trade-offs
 
-.widget-description {
-  font-size: 0.6rem;
-  color: var(--text-muted);
-  margin-top: 4px;
-}
-</style>
-```
+The current CSS-based approach makes several deliberate trade-offs:
 
-## Common LOD Patterns
+### What We Optimize For
 
-### Pattern 1: Essential vs. Nice-to-Have
-```typescript
-// Always show the main functionality
-const showMainControl = computed(() => true)
+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
 
-// Granular control with lodScore
-const showLabels = computed(() => lodScore.value > 0.4)
-const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+### What We Accept
 
-// Simple control with lodLevel  
-const showExtras = computed(() => lodLevel.value === 'full')
-```
+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
 
-### 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))
-})
-```
+## Open Questions and Future Considerations
 
-### 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'
-})
-```
+### Should widgets have any LOD control?
 
-## LOD Guidelines by Widget Type
+The current system provides a uniform gray rectangle fallback with CSS visibility hiding. This works for 99% of widgets, but raises questions:
 
-### 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
+**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?
 
-### Button Widgets  
-- **Always show**: The button
-- **Medium zoom**: Show button text
-- **High zoom**: Show button description
-- **Full zoom**: Show keyboard shortcuts, tooltips
+The challenge is that introducing selective unmounting would require:
 
-### 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
+- Maintaining widget state across mount/unmount cycles
+- Accepting the performance cost of remounting when zooming in
+- Adding complexity to the widget API
 
-### 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
+### Could we reduce GPU texture size?
 
-## Design Collaboration Guidelines
+Since texture dimensions are the limiting factor, could we:
 
-### For Designers
-When designing widgets, consider creating variants for different zoom levels:
+- Use multiple compositor layers for different regions (chunk the transformpane)?
+- Render the nodes using the canvas fallback when 500+ nodes and < 30% zoom.
 
-1. **Minimal Design** (far away view)
-   - Essential elements only
-   - Higher contrast for visibility
-   - Simplified shapes and fewer details
+These approaches would require significant architectural changes and might introduce their own performance trade-offs.
 
-2. **Standard Design** (normal view)
-   - Balanced detail and simplicity
-   - Clear labels and readable text
-   - Good for most use cases
+### Is there a hybrid approach?
 
-3. **Full Detail Design** (close-up view)
-   - All labels, descriptions, and help text
-   - Rich visual effects and polish
-   - Maximum information density
+Could we identify specific threshold scenarios where reactive LOD makes sense?
 
-### 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
+- When node count is low (< 50 nodes)
+- For specifically registered "expensive" widgets
+- At extreme zoom levels only
 
-## Testing Your LOD Implementation
+## Implementation Guidelines
 
-### 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
+Given the current architecture, here's how to work within the system:
 
-### 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
+### For Widget Developers
 
-### 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
+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
 
-✅ **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
+### For System Architects
 
-## Getting Help
+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
 
-- 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
+## 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 5b354bf25..6adee1e89 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
@@ -8,31 +8,37 @@
  * - 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'
-import { useCanvasStore } from '@/stores/graphStore'
 
-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
    * Supports single selection and multi-select with Ctrl/Cmd
    */
-  const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+  const handleNodeSelect = (
+    event: PointerEvent,
+    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
@@ -42,9 +48,12 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
         canvasStore.canvas.select(node)
       }
     } else {
+      // If it wasn't a drag: single-select the node
+      if (!wasDragging) {
+        canvasStore.canvas.deselectAll()
+        canvasStore.canvas.select(node)
+      }
       // Regular click -> single select
-      canvasStore.canvas.deselectAll()
-      canvasStore.canvas.select(node)
     }
 
     // Bring node to front when clicked (similar to LiteGraph behavior)
@@ -62,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)
@@ -79,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)
@@ -96,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)
@@ -107,7 +122,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     // TODO: add custom double-click behavior here
     // For now, ensure node is selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData)
+      handleNodeSelect(event, nodeData, false)
     }
   }
 
@@ -116,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)
@@ -126,7 +143,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
 
     // Select the node if not already selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData)
+      handleNodeSelect(event, nodeData, false)
     }
 
     // Let LiteGraph handle the context menu
@@ -138,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)
@@ -151,7 +170,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
         metaKey: event.metaKey,
         bubbles: true
       })
-      handleNodeSelect(syntheticEvent, nodeData)
+      handleNodeSelect(syntheticEvent, nodeData, false)
     }
 
     // Set drag data for potential drop operations
@@ -166,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) {
@@ -186,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) => {
@@ -212,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 000000000..f5ba08374
--- /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 000000000..6fbfb9733
--- /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/useNodeZIndex.ts b/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts
index 3a6e71077..8aff1aef4 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeZIndex.ts
@@ -4,9 +4,9 @@
  * Provides focused functionality for managing node layering through z-index.
  * Integrates with the layout system to ensure proper visual ordering.
  */
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 
 interface NodeZIndexOptions {
   /**
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
new file mode 100644
index 000000000..4b6cbf811
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/composables/useSlotElementTracking.ts
@@ -0,0 +1,224 @@
+/**
+ * Centralized Slot Element Tracking
+ *
+ * Registers slot connector DOM elements per node, measures their canvas-space
+ * positions in a single batched pass, and caches offsets so that node moves
+ * update slot positions without DOM reads.
+ */
+import { type Ref, onMounted, onUnmounted, watch } from 'vue'
+
+import { useSharedCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+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 {
+  isPointEqual,
+  isSizeEqual
+} from '@/renderer/core/layout/utils/geometry'
+import { useNodeSlotRegistryStore } from '@/renderer/extensions/vueNodes/stores/nodeSlotRegistryStore'
+
+// RAF batching
+const pendingNodes = new Set<string>()
+let rafId: number | null = null
+
+function scheduleSlotLayoutSync(nodeId: string) {
+  pendingNodes.add(nodeId)
+  if (rafId == null) {
+    rafId = requestAnimationFrame(() => {
+      rafId = null
+      flushScheduledSlotLayoutSync()
+    })
+  }
+}
+
+function flushScheduledSlotLayoutSync() {
+  if (pendingNodes.size === 0) return
+  const conv = useSharedCanvasPositionConversion()
+  for (const nodeId of Array.from(pendingNodes)) {
+    pendingNodes.delete(nodeId)
+    syncNodeSlotLayoutsFromDOM(nodeId, conv)
+  }
+}
+
+export function syncNodeSlotLayoutsFromDOM(
+  nodeId: string,
+  conv?: ReturnType<typeof useSharedCanvasPositionConversion>
+) {
+  const nodeSlotRegistryStore = useNodeSlotRegistryStore()
+  const node = nodeSlotRegistryStore.getNode(nodeId)
+  if (!node) return
+  const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
+  if (!nodeLayout) return
+
+  const batch: Array<{ key: string; layout: SlotLayout }> = []
+
+  for (const [slotKey, entry] of node.slots) {
+    const rect = entry.el.getBoundingClientRect()
+    const screenCenter: [number, number] = [
+      rect.left + rect.width / 2,
+      rect.top + rect.height / 2
+    ]
+    const [x, y] = (
+      conv ?? useSharedCanvasPositionConversion()
+    ).clientPosToCanvasPos(screenCenter)
+    const centerCanvas = { x, y }
+
+    // Cache offset relative to node position for fast updates later
+    entry.cachedOffset = {
+      x: centerCanvas.x - nodeLayout.position.x,
+      y: centerCanvas.y - nodeLayout.position.y
+    }
+
+    // Persist layout in canvas coordinates
+    const size = LiteGraph.NODE_SLOT_HEIGHT
+    const half = size / 2
+    batch.push({
+      key: slotKey,
+      layout: {
+        nodeId,
+        index: entry.index,
+        type: entry.type,
+        position: { x: centerCanvas.x, y: centerCanvas.y },
+        bounds: {
+          x: centerCanvas.x - half,
+          y: centerCanvas.y - half,
+          width: size,
+          height: size
+        }
+      }
+    })
+  }
+  if (batch.length) layoutStore.batchUpdateSlotLayouts(batch)
+}
+
+function updateNodeSlotsFromCache(nodeId: string) {
+  const nodeSlotRegistryStore = useNodeSlotRegistryStore()
+  const node = nodeSlotRegistryStore.getNode(nodeId)
+  if (!node) return
+  const nodeLayout = layoutStore.getNodeLayoutRef(nodeId).value
+  if (!nodeLayout) return
+
+  const batch: Array<{ key: string; layout: SlotLayout }> = []
+
+  for (const [slotKey, entry] of node.slots) {
+    if (!entry.cachedOffset) {
+      // schedule a sync to seed offset
+      scheduleSlotLayoutSync(nodeId)
+      continue
+    }
+
+    const centerCanvas = {
+      x: nodeLayout.position.x + entry.cachedOffset.x,
+      y: nodeLayout.position.y + entry.cachedOffset.y
+    }
+    const size = LiteGraph.NODE_SLOT_HEIGHT
+    const half = size / 2
+    batch.push({
+      key: slotKey,
+      layout: {
+        nodeId,
+        index: entry.index,
+        type: entry.type,
+        position: { x: centerCanvas.x, y: centerCanvas.y },
+        bounds: {
+          x: centerCanvas.x - half,
+          y: centerCanvas.y - half,
+          width: size,
+          height: size
+        }
+      }
+    })
+  }
+
+  if (batch.length) layoutStore.batchUpdateSlotLayouts(batch)
+}
+
+export function useSlotElementTracking(options: {
+  nodeId: string
+  index: number
+  type: 'input' | 'output'
+  element: Ref<HTMLElement | null>
+}) {
+  const { nodeId, index, type, element } = options
+  const nodeSlotRegistryStore = useNodeSlotRegistryStore()
+
+  onMounted(() => {
+    if (!nodeId) return
+    const stop = watch(
+      element,
+      (el) => {
+        if (!el) return
+
+        const node = nodeSlotRegistryStore.ensureNode(nodeId)
+
+        if (!node.stopWatch) {
+          const layoutRef = layoutStore.getNodeLayoutRef(nodeId)
+
+          const stopPositionWatch = watch(
+            () => layoutRef.value?.position,
+            (newPosition, oldPosition) => {
+              if (!newPosition) return
+              if (!oldPosition || !isPointEqual(newPosition, oldPosition)) {
+                updateNodeSlotsFromCache(nodeId)
+              }
+            }
+          )
+
+          const stopSizeWatch = watch(
+            () => layoutRef.value?.size,
+            (newSize, oldSize) => {
+              if (!newSize) return
+              if (!oldSize || !isSizeEqual(newSize, oldSize)) {
+                scheduleSlotLayoutSync(nodeId)
+              }
+            }
+          )
+
+          node.stopWatch = () => {
+            stopPositionWatch()
+            stopSizeWatch()
+          }
+        }
+
+        // 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
+        scheduleSlotLayoutSync(nodeId)
+
+        // Stop watching once registered
+        stop()
+      },
+      { immediate: true, flush: 'post' }
+    )
+  })
+
+  onUnmounted(() => {
+    if (!nodeId) return
+    const node = nodeSlotRegistryStore.getNode(nodeId)
+    if (!node) return
+
+    // Remove this slot from registry and layout
+    const slotKey = getSlotKey(nodeId, index, type === 'input')
+    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) {
+      if (node.stopWatch) node.stopWatch()
+      nodeSlotRegistryStore.deleteNode(nodeId)
+    }
+  })
+
+  return {
+    requestSlotLayoutSync: () => scheduleSlotLayoutSync(nodeId)
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts b/src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.ts
new file mode 100644
index 000000000..f82deab7d
--- /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 c6be50285..e8c38164d 100644
--- a/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
+++ b/src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts
@@ -8,11 +8,21 @@
  * 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'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 
+import { syncNodeSlotLayoutsFromDOM } from './useSlotElementTracking'
+
 /**
  * Generic update item for element bounds tracking
  */
@@ -54,8 +64,12 @@ const trackingConfigs: Map<string, ElementTrackingConfig> = new Map([
 
 // Single ResizeObserver instance for all Vue elements
 const resizeObserver = new ResizeObserver((entries) => {
-  // Group updates by element type
+  // Canvas is ready when this code runs; no defensive guards needed.
+  const conv = useSharedCanvasPositionConversion()
+  // Group updates by type, then flush via each config's handler
   const updatesByType = new Map<string, ElementBoundsUpdate[]>()
+  // Track nodes whose slots should be resynced after node size changes
+  const nodesNeedingSlotResync = new Set<string>()
 
   for (const entry of entries) {
     if (!(entry.target instanceof HTMLElement)) continue
@@ -76,30 +90,50 @@ const resizeObserver = new ResizeObserver((entries) => {
 
     if (!elementType || !elementId) continue
 
-    const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0]
+    // Use contentBoxSize when available; fall back to contentRect for older engines/tests
+    const contentBox = Array.isArray(entry.contentBoxSize)
+      ? entry.contentBoxSize[0]
+      : {
+          inlineSize: entry.contentRect.width,
+          blockSize: entry.contentRect.height
+        }
+    const width = contentBox.inlineSize
+    const height = contentBox.blockSize
+
+    // Screen-space rect
     const rect = element.getBoundingClientRect()
-
+    const [cx, cy] = conv.clientPosToCanvasPos([rect.left, rect.top])
+    const topLeftCanvas = { x: cx, y: cy }
     const bounds: Bounds = {
-      x: rect.left,
-      y: rect.top,
-      width,
-      height: height
+      x: topLeftCanvas.x,
+      y: topLeftCanvas.y + LiteGraph.NODE_TITLE_HEIGHT,
+      width: Math.max(0, width),
+      height: Math.max(0, height - LiteGraph.NODE_TITLE_HEIGHT)
     }
 
-    if (!updatesByType.has(elementType)) {
-      updatesByType.set(elementType, [])
+    let updates = updatesByType.get(elementType)
+    if (!updates) {
+      updates = []
+      updatesByType.set(elementType, updates)
     }
-    const updates = updatesByType.get(elementType)
-    if (updates) {
-      updates.push({ id: elementId, bounds })
+    updates.push({ id: elementId, bounds })
+
+    // If this entry is a node, mark it for slot layout resync
+    if (elementType === 'node' && elementId) {
+      nodesNeedingSlotResync.add(elementId)
     }
   }
 
-  // Process updates by type
+  // Flush per-type
   for (const [type, updates] of updatesByType) {
     const config = trackingConfigs.get(type)
-    if (config && updates.length > 0) {
-      config.updateHandler(updates)
+    if (config && updates.length) config.updateHandler(updates)
+  }
+
+  // After node bounds are updated, refresh slot cached offsets and layouts
+  if (nodesNeedingSlotResync.size > 0) {
+    for (const nodeId of nodesNeedingSlotResync) {
+      syncNodeSlotLayoutsFromDOM(nodeId)
     }
   }
 })
@@ -126,19 +160,20 @@ 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
 
     const config = trackingConfigs.get(trackingType)
-    if (config) {
-      // Set the appropriate data attribute
-      element.dataset[config.dataAttribute] = appIdentifier
-      resizeObserver.observe(element)
-    }
+    if (!config) return
+
+    // Set the data attribute expected by the RO pipeline for this type
+    element.dataset[config.dataAttribute] = appIdentifier
+    resizeObserver.observe(element)
   })
 
   onUnmounted(() => {
@@ -146,10 +181,10 @@ export function useVueElementTracking(
     if (!(element instanceof HTMLElement)) return
 
     const config = trackingConfigs.get(trackingType)
-    if (config) {
-      // Remove the data attribute
-      delete element.dataset[config.dataAttribute]
-      resizeObserver.unobserve(element)
-    }
+    if (!config) return
+
+    // Remove the data attribute and observer
+    delete element.dataset[config.dataAttribute]
+    resizeObserver.unobserve(element)
   })
 }
diff --git a/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
new file mode 100644
index 000000000..aa4867db9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts
@@ -0,0 +1,51 @@
+import { storeToRefs } from 'pinia'
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+
+import { useExecutionStore } from '@/stores/executionStore'
+
+/**
+ * Composable for managing execution state of Vue-based nodes
+ *
+ * Provides reactive access to execution state and progress for a specific node
+ * by injecting execution data from the parent GraphCanvas provider.
+ *
+ * @param nodeIdMaybe - The ID of the node to track execution state for
+ * @returns Object containing reactive execution state and progress
+ */
+export const useNodeExecutionState = (
+  nodeIdMaybe: MaybeRefOrGetter<string>
+) => {
+  const nodeId = toValue(nodeIdMaybe)
+  const { uniqueExecutingNodeIdStrings, nodeProgressStates } =
+    storeToRefs(useExecutionStore())
+
+  const executing = computed(() => {
+    return uniqueExecutingNodeIdStrings.value.has(nodeId)
+  })
+
+  const progress = computed(() => {
+    const state = nodeProgressStates.value[nodeId]
+    return state?.max > 0 ? state.value / state.max : undefined
+  })
+
+  const progressState = computed(() => nodeProgressStates.value[nodeId])
+
+  const progressPercentage = computed(() => {
+    const prog = progress.value
+    return prog !== undefined ? Math.round(prog * 100) : undefined
+  })
+
+  const executionState = computed(() => {
+    const state = progressState.value
+    if (!state) return 'idle'
+    return state.state
+  })
+
+  return {
+    executing,
+    progress,
+    progressPercentage,
+    progressState,
+    executionState
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
index 407a14243..60e5a7fd8 100644
--- a/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
+++ b/src/renderer/extensions/vueNodes/layout/useNodeLayout.ts
@@ -1,11 +1,14 @@
-/**
- * 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 { 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'
 import { LayoutSource, type Point } from '@/renderer/core/layout/types'
@@ -14,20 +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('transformState') as
-    | {
-        canvasToScreen: (point: Point) => Point
-        screenToCanvas: (point: Point) => Point
-      }
-    | undefined
+  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(() => {
@@ -54,6 +53,7 @@ export function useNodeLayout(nodeId: string) {
   let isDragging = false
   let dragStartPos: Point | null = null
   let dragStartMouse: Point | null = null
+  let otherSelectedNodesStartPositions: Map<string, Point> | null = null
 
   /**
    * Start dragging the node
@@ -65,6 +65,24 @@ export function useNodeLayout(nodeId: string) {
     dragStartPos = { ...position.value }
     dragStartMouse = { x: event.clientX, y: event.clientY }
 
+    // capture the starting positions of all other selected nodes
+    if (selectedNodeIds?.value?.has(nodeId) && selectedNodeIds.value.size > 1) {
+      otherSelectedNodesStartPositions = new Map()
+
+      // Iterate through all selected node IDs
+      for (const id of selectedNodeIds.value) {
+        // Skip the current node being dragged
+        if (id === nodeId) continue
+
+        const nodeLayout = layoutStore.getNodeLayoutRef(id).value
+        if (nodeLayout) {
+          otherSelectedNodesStartPositions.set(id, { ...nodeLayout.position })
+        }
+      }
+    } else {
+      otherSelectedNodesStartPositions = null
+    }
+
     // Set mutation source
     mutations.setSource(LayoutSource.Vue)
 
@@ -95,7 +113,7 @@ export function useNodeLayout(nodeId: string) {
       y: canvasWithDelta.y - canvasOrigin.y
     }
 
-    // Calculate new position
+    // Calculate new position for the current node
     const newPosition = {
       x: dragStartPos.x + canvasDelta.x,
       y: dragStartPos.y + canvasDelta.y
@@ -103,6 +121,20 @@ export function useNodeLayout(nodeId: string) {
 
     // Apply mutation through the layout system
     mutations.moveNode(nodeId, newPosition)
+
+    // If we're dragging multiple selected nodes, move them all together
+    if (
+      otherSelectedNodesStartPositions &&
+      otherSelectedNodesStartPositions.size > 0
+    ) {
+      for (const [otherNodeId, startPos] of otherSelectedNodesStartPositions) {
+        const newOtherPosition = {
+          x: startPos.x + canvasDelta.x,
+          y: startPos.y + canvasDelta.y
+        }
+        mutations.moveNode(otherNodeId, newOtherPosition)
+      }
+    }
   }
 
   /**
@@ -114,6 +146,7 @@ export function useNodeLayout(nodeId: string) {
     isDragging = false
     dragStartPos = null
     dragStartMouse = null
+    otherSelectedNodesStartPositions = null
 
     // Release pointer
     const target = event.target as HTMLElement
@@ -155,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 584e21f9a..2f59ba020 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'
+ * 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'
 
-export enum LODLevel {
-  MINIMAL = 'minimal', // zoom <= 0.4
-  REDUCED = 'reduced', // 0.4 < zoom <= 0.8
-  FULL = 'full' // zoom > 0.8
+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
-}
+export function useLOD(camera: Camera) {
+  const isLOD = computed(() => {
+    const { pixelRatio } = useDevicePixelRatio()
+    const baseFontSize = 14
+    const dprAdjustment = Math.sqrt(pixelRatio.value)
 
-// 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'
-  }
-}
+    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
 
-/**
- * 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))
+    return camera.z < threshold
   })
 
-  // Determine current LOD level based on zoom
-  const lodLevel = computed<LODLevel>(() => {
-    const zoom = zoomRef.value
-
-    if (zoom > 0.8) return LODLevel.FULL
-    if (zoom > 0.4) return LODLevel.REDUCED
-    return LODLevel.MINIMAL
-  })
-
-  // 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
new file mode 100644
index 000000000..cb997f236
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts
@@ -0,0 +1,47 @@
+import { storeToRefs } from 'pinia'
+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 = (
+  nodeIdMaybe: MaybeRefOrGetter<string>,
+  options?: {
+    isCollapsed?: Ref<boolean>
+  }
+) => {
+  const nodeId = toValue(nodeIdMaybe)
+  const workflowStore = useWorkflowStore()
+  const { nodePreviewImages } = storeToRefs(useNodeOutputStore())
+
+  const locatorId = computed(() => workflowStore.nodeIdToNodeLocatorId(nodeId))
+
+  const previewUrls = computed(() => {
+    const key = locatorId.value
+    if (!key) return undefined
+    const urls = nodePreviewImages.value[key]
+    return urls?.length ? urls : undefined
+  })
+
+  const hasPreview = computed(() => !!previewUrls.value?.length)
+
+  const latestPreviewUrl = computed(() => {
+    const urls = previewUrls.value
+    return urls?.length ? urls.at(-1) : ''
+  })
+
+  const shouldShowPreviewImg = computed(() => {
+    if (!options?.isCollapsed) {
+      return hasPreview.value
+    }
+    return !options.isCollapsed.value && hasPreview.value
+  })
+
+  return {
+    locatorId,
+    previewUrls,
+    hasPreview,
+    latestPreviewUrl,
+    shouldShowPreviewImg
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/stores/nodeSlotRegistryStore.ts b/src/renderer/extensions/vueNodes/stores/nodeSlotRegistryStore.ts
new file mode 100644
index 000000000..c5e76d4b4
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/stores/nodeSlotRegistryStore.ts
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { markRaw } from 'vue'
+
+type SlotEntry = {
+  el: HTMLElement
+  index: number
+  type: 'input' | 'output'
+  cachedOffset?: { x: number; y: number }
+}
+
+type NodeEntry = {
+  nodeId: string
+  slots: Map<string, SlotEntry>
+  stopWatch?: () => void
+}
+
+export const useNodeSlotRegistryStore = defineStore('nodeSlotRegistry', () => {
+  const registry = markRaw(new Map<string, NodeEntry>())
+
+  function getNode(nodeId: string) {
+    return registry.get(nodeId)
+  }
+
+  function ensureNode(nodeId: string) {
+    let node = registry.get(nodeId)
+    if (!node) {
+      node = {
+        nodeId,
+        slots: markRaw(new Map<string, SlotEntry>())
+      }
+      registry.set(nodeId, node)
+    }
+    return node
+  }
+
+  function deleteNode(nodeId: string) {
+    registry.delete(nodeId)
+  }
+
+  function clear() {
+    registry.clear()
+  }
+
+  return {
+    getNode,
+    ensureNode,
+    deleteNode,
+    clear
+  }
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
new file mode 100644
index 000000000..72d6726a5
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts
@@ -0,0 +1,248 @@
+import { mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import type { ButtonProps } from 'primevue/button'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+
+import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+describe('WidgetButton Interactions', () => {
+  const createMockWidget = (
+    options: Partial<ButtonProps> = {},
+    callback?: () => void,
+    name: string = 'test_button'
+  ): SimplifiedWidget<void> => ({
+    name,
+    type: 'button',
+    value: undefined,
+    options,
+    callback
+  })
+
+  const mountComponent = (widget: SimplifiedWidget<void>, readonly = false) => {
+    return mount(WidgetButton, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Button }
+      },
+      props: {
+        widget,
+        readonly
+      }
+    })
+  }
+
+  const clickButton = async (wrapper: ReturnType<typeof mount>) => {
+    const button = wrapper.findComponent({ name: 'Button' })
+    await button.trigger('click')
+    return button
+  }
+
+  describe('Click Handling', () => {
+    it('calls callback when button is clicked', async () => {
+      const mockCallback = vi.fn()
+      const widget = createMockWidget({}, mockCallback)
+      const wrapper = mountComponent(widget)
+
+      await clickButton(wrapper)
+
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not call callback when button is readonly', async () => {
+      const mockCallback = vi.fn()
+      const widget = createMockWidget({}, mockCallback)
+      const wrapper = mountComponent(widget, true)
+
+      await clickButton(wrapper)
+
+      expect(mockCallback).not.toHaveBeenCalled()
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget({}, undefined)
+      const wrapper = mountComponent(widget)
+
+      // Should not throw error when clicking without callback
+      await expect(clickButton(wrapper)).resolves.toBeDefined()
+    })
+
+    it('calls callback multiple times when clicked multiple times', async () => {
+      const mockCallback = vi.fn()
+      const widget = createMockWidget({}, mockCallback)
+      const wrapper = mountComponent(widget)
+
+      const numClicks = 8
+
+      await clickButton(wrapper)
+      for (let i = 0; i < numClicks; i++) {
+        await clickButton(wrapper)
+      }
+
+      expect(mockCallback).toHaveBeenCalledTimes(numClicks)
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders button component', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.exists()).toBe(true)
+    })
+
+    it('renders widget label when name is provided', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget)
+
+      const label = wrapper.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.text()).toBe('test_button')
+    })
+
+    it('does not render label when widget name is empty', () => {
+      const widget = createMockWidget({}, undefined, '')
+      const wrapper = mountComponent(widget)
+
+      const label = wrapper.find('label')
+      expect(label.exists()).toBe(false)
+    })
+
+    it('sets button size to small', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('size')).toBe('small')
+    })
+
+    it('passes widget options to button component', () => {
+      const buttonOptions = {
+        label: 'Custom Label',
+        icon: 'pi pi-check',
+        severity: 'success' as const
+      }
+      const widget = createMockWidget(buttonOptions)
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('label')).toBe('Custom Label')
+      expect(button.props('icon')).toBe('pi pi-check')
+      expect(button.props('severity')).toBe('success')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables button when readonly', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget, true)
+
+      // Test the actual DOM button element instead of the Vue component props
+      const buttonElement = wrapper.find('button')
+      expect(buttonElement.element.disabled).toBe(true)
+    })
+
+    it('enables button when not readonly', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget, false)
+
+      // Test the actual DOM button element instead of the Vue component props
+      const buttonElement = wrapper.find('button')
+      expect(buttonElement.element.disabled).toBe(false)
+    })
+  })
+
+  describe('Widget Options', () => {
+    it('handles button with text only', () => {
+      const widget = createMockWidget({ label: 'Click Me' })
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('label')).toBe('Click Me')
+      expect(button.props('icon')).toBeNull()
+    })
+
+    it('handles button with icon only', () => {
+      const widget = createMockWidget({ icon: 'pi pi-star' })
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('icon')).toBe('pi pi-star')
+    })
+
+    it('handles button with both text and icon', () => {
+      const widget = createMockWidget({
+        label: 'Save',
+        icon: 'pi pi-save'
+      })
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('label')).toBe('Save')
+      expect(button.props('icon')).toBe('pi pi-save')
+    })
+
+    it.for([
+      'secondary',
+      'success',
+      'info',
+      'warning',
+      'danger',
+      'help',
+      'contrast'
+    ] as const)('handles button severity: %s', (severity) => {
+      const widget = createMockWidget({ severity })
+      const wrapper = mountComponent(widget)
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.props('severity')).toBe(severity)
+    })
+
+    it.for(['outlined', 'text'] as const)(
+      'handles button variant: %s',
+      (variant) => {
+        const widget = createMockWidget({ variant })
+        const wrapper = mountComponent(widget)
+        const button = wrapper.findComponent({ name: 'Button' })
+        expect(button.props('variant')).toBe(variant)
+      }
+    )
+  })
+
+  describe('Edge Cases', () => {
+    it('handles widget with no options', () => {
+      const widget = createMockWidget()
+      const wrapper = mountComponent(widget)
+
+      const button = wrapper.findComponent({ name: 'Button' })
+      expect(button.exists()).toBe(true)
+    })
+
+    it('handles callback that throws error', async () => {
+      const mockCallback = vi.fn(() => {
+        throw new Error('Callback error')
+      })
+      const widget = createMockWidget({}, mockCallback)
+      const wrapper = mountComponent(widget)
+
+      // Should not break the component when callback throws
+      await expect(clickButton(wrapper)).rejects.toThrow('Callback error')
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+    })
+
+    it('handles rapid consecutive clicks', async () => {
+      const mockCallback = vi.fn()
+      const widget = createMockWidget({}, mockCallback)
+      const wrapper = mountComponent(widget)
+
+      // Simulate rapid clicks
+      const clickPromises = Array.from({ length: 16 }, () =>
+        clickButton(wrapper)
+      )
+      await Promise.all(clickPromises)
+
+      expect(mockCallback).toHaveBeenCalledTimes(16)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
new file mode 100644
index 000000000..96bb4ed3e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.test.ts
@@ -0,0 +1,304 @@
+import { mount } from '@vue/test-utils'
+import ColorPicker from 'primevue/colorpicker'
+import type { ColorPickerProps } from 'primevue/colorpicker'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetColorPicker from './WidgetColorPicker.vue'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+describe('WidgetColorPicker Value Binding', () => {
+  const createMockWidget = (
+    value: string = '#000000',
+    options: Partial<ColorPickerProps> = {},
+    callback?: (value: string) => void
+  ): SimplifiedWidget<string> => ({
+    name: 'test_color_picker',
+    type: 'color',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<string>,
+    modelValue: string,
+    readonly = false
+  ) => {
+    return mount(WidgetColorPicker, {
+      global: {
+        plugins: [PrimeVue],
+        components: {
+          ColorPicker,
+          WidgetLayoutField
+        }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const setColorPickerValue = async (
+    wrapper: ReturnType<typeof mount>,
+    value: unknown
+  ) => {
+    const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+    await colorPicker.setValue(value)
+    return wrapper.emitted('update:modelValue')
+  }
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when color changes', async () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const emitted = await setColorPickerValue(wrapper, '#00ff00')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
+    })
+
+    it('handles different color formats', async () => {
+      const widget = createMockWidget('#ffffff')
+      const wrapper = mountComponent(widget, '#ffffff')
+
+      const emitted = await setColorPickerValue(wrapper, '#123abc')
+
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#123abc')
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('#000000', {}, undefined)
+      const wrapper = mountComponent(widget, '#000000')
+
+      const emitted = await setColorPickerValue(wrapper, '#ff00ff')
+
+      // Should still emit Vue event
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#ff00ff')
+    })
+
+    it('normalizes bare hex without # to #hex on emit', async () => {
+      const widget = createMockWidget('ff0000')
+      const wrapper = mountComponent(widget, 'ff0000')
+
+      const emitted = await setColorPickerValue(wrapper, '00ff00')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
+    })
+
+    it('normalizes rgb() strings to #hex on emit', async () => {
+      const widget = createMockWidget('#000000')
+      const wrapper = mountComponent(widget, '#000000')
+
+      const emitted = await setColorPickerValue(wrapper, 'rgb(255, 0, 0)')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#ff0000')
+    })
+
+    it('normalizes hsb() strings to #hex on emit', async () => {
+      const widget = createMockWidget('#000000', { format: 'hsb' })
+      const wrapper = mountComponent(widget, '#000000')
+
+      const emitted = await setColorPickerValue(wrapper, 'hsb(120, 100, 100)')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#00ff00')
+    })
+
+    it('normalizes HSB object values to #hex on emit', async () => {
+      const widget = createMockWidget('#000000', { format: 'hsb' })
+      const wrapper = mountComponent(widget, '#000000')
+
+      const emitted = await setColorPickerValue(wrapper, {
+        h: 240,
+        s: 100,
+        b: 100
+      })
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#0000ff')
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders color picker component', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.exists()).toBe(true)
+    })
+
+    it('normalizes display to a single leading #', () => {
+      // Case 1: model value already includes '#'
+      let widget = createMockWidget('#ff0000')
+      let wrapper = mountComponent(widget, '#ff0000')
+      let colorText = wrapper.find('[data-testid="widget-color-text"]')
+      expect.soft(colorText.text()).toBe('#ff0000')
+
+      // Case 2: model value missing '#'
+      widget = createMockWidget('ff0000')
+      wrapper = mountComponent(widget, 'ff0000')
+      colorText = wrapper.find('[data-testid="widget-color-text"]')
+      expect.soft(colorText.text()).toBe('#ff0000')
+    })
+
+    it('renders layout field wrapper', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.exists()).toBe(true)
+    })
+
+    it('displays current color value as text', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
+      expect(colorText.text()).toBe('#ff0000')
+    })
+
+    it('updates color text when value changes', async () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      await setColorPickerValue(wrapper, '#00ff00')
+
+      // Need to check the local state update
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
+      // Be specific about the displayed value including the leading '#'
+      expect.soft(colorText.text()).toBe('#00ff00')
+    })
+
+    it('uses default color when no value provided', () => {
+      const widget = createMockWidget('')
+      const wrapper = mountComponent(widget, '')
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      // Should use the default value from the composable
+      expect(colorPicker.exists()).toBe(true)
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables color picker when readonly', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000', true)
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.props('disabled')).toBe(true)
+    })
+
+    it('enables color picker when not readonly', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000', false)
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.props('disabled')).toBe(false)
+    })
+  })
+
+  describe('Color Formats', () => {
+    it('handles valid hex colors', async () => {
+      const validHexColors = [
+        '#000000',
+        '#ffffff',
+        '#ff0000',
+        '#00ff00',
+        '#0000ff',
+        '#123abc'
+      ]
+
+      for (const color of validHexColors) {
+        const widget = createMockWidget(color)
+        const wrapper = mountComponent(widget, color)
+
+        const colorText = wrapper.find('[data-testid="widget-color-text"]')
+        expect.soft(colorText.text()).toBe(color)
+      }
+    })
+
+    it('handles short hex colors', () => {
+      const widget = createMockWidget('#fff')
+      const wrapper = mountComponent(widget, '#fff')
+
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
+      expect(colorText.text()).toBe('#fff')
+    })
+
+    it('passes widget options to color picker', () => {
+      const colorOptions = {
+        format: 'hex' as const,
+        inline: true
+      }
+      const widget = createMockWidget('#ff0000', colorOptions)
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.props('format')).toBe('hex')
+      expect(colorPicker.props('inline')).toBe(true)
+    })
+  })
+
+  describe('Widget Layout Integration', () => {
+    it('passes widget to layout field', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.props('widget')).toEqual(widget)
+    })
+
+    it('maintains proper component structure', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      // Should have layout field containing label with color picker and text
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      const label = wrapper.find('label')
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      const colorText = wrapper.find('span')
+
+      expect(layoutField.exists()).toBe(true)
+      expect(label.exists()).toBe(true)
+      expect(colorPicker.exists()).toBe(true)
+      expect(colorText.exists()).toBe(true)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty color value', () => {
+      const widget = createMockWidget('')
+      const wrapper = mountComponent(widget, '')
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.exists()).toBe(true)
+    })
+
+    it('handles invalid color formats gracefully', async () => {
+      const widget = createMockWidget('invalid-color')
+      const wrapper = mountComponent(widget, 'invalid-color')
+
+      const colorText = wrapper.find('[data-testid="widget-color-text"]')
+      expect(colorText.text()).toBe('#000000')
+
+      const emitted = await setColorPickerValue(wrapper, 'invalid-color')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toContain('#000000')
+    })
+
+    it('handles widget with no options', () => {
+      const widget = createMockWidget('#ff0000')
+      const wrapper = mountComponent(widget, '#ff0000')
+
+      const colorPicker = wrapper.findComponent({ name: 'ColorPicker' })
+      expect(colorPicker.exists()).toBe(true)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index ed5f2b0ec..a3fcb1725 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -14,19 +14,26 @@
         :pt="{
           preview: '!w-full !h-full !border-none'
         }"
-        @update:model-value="onChange"
+        @update:model-value="onPickerUpdate"
       />
-      <span class="text-xs">#{{ localValue }}</span>
+      <span class="text-xs" data-testid="widget-color-text">{{
+        toHexFromFormat(localValue, format)
+      }}</span>
     </label>
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
 import ColorPicker from 'primevue/colorpicker'
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  type ColorFormat,
+  type HSB,
+  isColorFormat,
+  toHexFromFormat
+} from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 import {
   PANEL_EXCLUDED_PROPS,
@@ -36,8 +43,10 @@ import {
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
+type WidgetOptions = { format?: ColorFormat } & Record<string, unknown>
+
 const props = defineProps<{
-  widget: SimplifiedWidget<string>
+  widget: SimplifiedWidget<string, WidgetOptions>
   modelValue: string
   readonly?: boolean
 }>()
@@ -46,14 +55,33 @@ const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-// Use the composable for consistent widget value handling
-const { localValue, onChange } = useWidgetValue({
-  widget: props.widget,
-  modelValue: props.modelValue,
-  defaultValue: '#000000',
-  emit
+const format = computed<ColorFormat>(() => {
+  const optionFormat = props.widget.options?.format
+  return isColorFormat(optionFormat) ? optionFormat : 'hex'
 })
 
+type PickerValue = string | HSB
+const localValue = ref<PickerValue>(
+  toHexFromFormat(
+    props.modelValue || '#000000',
+    isColorFormat(props.widget.options?.format)
+      ? props.widget.options.format
+      : 'hex'
+  )
+)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    localValue.value = toHexFromFormat(newVal || '#000000', format.value)
+  }
+)
+
+function onPickerUpdate(val: unknown) {
+  localValue.value = val as PickerValue
+  emit('update:modelValue', toHexFromFormat(val, format.value))
+}
+
 // ColorPicker specific excluded props include panel/overlay classes
 const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.test.ts
new file mode 100644
index 000000000..dc4bcb1cc
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.test.ts
@@ -0,0 +1,588 @@
+import { mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import PrimeVue from 'primevue/config'
+import Select from 'primevue/select'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import { createMockFile, createMockWidget } from '../testUtils'
+import WidgetFileUpload from './WidgetFileUpload.vue'
+
+describe('WidgetFileUpload File Handling', () => {
+  const mountComponent = (
+    widget: SimplifiedWidget<File[] | null>,
+    modelValue: File[] | null,
+    readonly = false
+  ) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          ...enMessages,
+          'Drop your file or': 'Drop your file or'
+        }
+      }
+    })
+
+    return mount(WidgetFileUpload, {
+      global: {
+        plugins: [PrimeVue, i18n],
+        components: { Button, Select }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const mockObjectURL = 'blob:mock-url'
+
+  beforeEach(() => {
+    // Mock URL.createObjectURL and revokeObjectURL
+    global.URL.createObjectURL = vi.fn(() => mockObjectURL)
+    global.URL.revokeObjectURL = vi.fn()
+  })
+
+  describe('Initial States', () => {
+    it('shows upload UI when no file is selected', () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      expect(wrapper.text()).toContain('Drop your file or')
+      expect(wrapper.text()).toContain('Browse Files')
+      expect(wrapper.find('button').text()).toBe('Browse Files')
+    })
+
+    it('renders file input with correct attributes', () => {
+      const widget = createMockWidget<File[] | null>(
+        null,
+        { accept: 'image/*' },
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, null)
+
+      const fileInput = wrapper.find('input[type="file"]')
+      expect(fileInput.exists()).toBe(true)
+      expect(fileInput.attributes('accept')).toBe('image/*')
+      expect(fileInput.classes()).toContain('hidden')
+    })
+  })
+
+  describe('File Selection', () => {
+    it('triggers file input when browse button is clicked', async () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const fileInput = wrapper.find('input[type="file"]')
+      const inputElement = fileInput.element
+      if (!(inputElement instanceof HTMLInputElement)) {
+        throw new Error('Expected HTMLInputElement')
+      }
+      const clickSpy = vi.spyOn(inputElement, 'click')
+
+      const browseButton = wrapper.find('button')
+      await browseButton.trigger('click')
+
+      expect(clickSpy).toHaveBeenCalled()
+    })
+
+    it('handles file selection', async () => {
+      const mockCallback = vi.fn()
+      const widget = createMockWidget<File[] | null>(null, {}, mockCallback, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const file = createMockFile('test.jpg', 'image/jpeg')
+      const fileInput = wrapper.find('input[type="file"]')
+
+      Object.defineProperty(fileInput.element, 'files', {
+        value: [file],
+        writable: false
+      })
+
+      await fileInput.trigger('change')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([[file]])
+    })
+
+    it('resets file input after selection', async () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const file = createMockFile('test.jpg', 'image/jpeg')
+      const fileInput = wrapper.find('input[type="file"]')
+
+      Object.defineProperty(fileInput.element, 'files', {
+        value: [file],
+        writable: false
+      })
+
+      await fileInput.trigger('change')
+
+      const inputElement = fileInput.element
+      if (!(inputElement instanceof HTMLInputElement)) {
+        throw new Error('Expected HTMLInputElement')
+      }
+      expect(inputElement.value).toBe('')
+    })
+  })
+
+  describe('Image File Display', () => {
+    it('shows image preview for image files', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      const img = wrapper.find('img')
+      expect(img.exists()).toBe(true)
+      expect(img.attributes('src')).toBe(mockObjectURL)
+      expect(img.attributes('alt')).toBe('test.jpg')
+    })
+
+    it('shows select dropdown with filename for images', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      const select = wrapper.getComponent({ name: 'Select' })
+      expect(select.props('modelValue')).toBe('test.jpg')
+      expect(select.props('options')).toEqual(['test.jpg'])
+      expect(select.props('disabled')).toBe(true)
+    })
+
+    it('shows edit and delete buttons on hover for images', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      // The pi-pencil and pi-times classes are on the <i> elements inside the buttons
+      const editIcon = wrapper.find('i.pi-pencil')
+      const deleteIcon = wrapper.find('i.pi-times')
+
+      expect(editIcon.exists()).toBe(true)
+      expect(deleteIcon.exists()).toBe(true)
+    })
+
+    it('hides control buttons in readonly mode', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile], true)
+
+      const controlButtons = wrapper.find('.absolute.top-2.right-2')
+      expect(controlButtons.exists()).toBe(false)
+    })
+  })
+
+  describe('Audio File Display', () => {
+    it('shows audio player for audio files', () => {
+      const audioFile = createMockFile('test.mp3', 'audio/mpeg')
+      const widget = createMockWidget<File[] | null>(
+        [audioFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [audioFile])
+
+      expect(wrapper.find('.pi-volume-up').exists()).toBe(true)
+      expect(wrapper.text()).toContain('test.mp3')
+      expect(wrapper.text()).toContain('1.0 KB')
+    })
+
+    it('shows file size for audio files', () => {
+      const audioFile = createMockFile('test.mp3', 'audio/mpeg', 2048)
+      const widget = createMockWidget<File[] | null>(
+        [audioFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [audioFile])
+
+      expect(wrapper.text()).toContain('2.0 KB')
+    })
+
+    it('shows delete button for audio files', () => {
+      const audioFile = createMockFile('test.mp3', 'audio/mpeg')
+      const widget = createMockWidget<File[] | null>(
+        [audioFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [audioFile])
+
+      const deleteIcon = wrapper.find('i.pi-times')
+      expect(deleteIcon.exists()).toBe(true)
+    })
+  })
+
+  describe('File Type Detection', () => {
+    const imageFiles = [
+      { name: 'image.jpg', type: 'image/jpeg' },
+      { name: 'image.png', type: 'image/png' }
+    ]
+
+    const audioFiles = [
+      { name: 'audio.mp3', type: 'audio/mpeg' },
+      { name: 'audio.wav', type: 'audio/wav' }
+    ]
+
+    const normalFiles = [
+      { name: 'video.mp4', type: 'video/mp4' },
+      { name: 'document.pdf', type: 'application/pdf' }
+    ]
+
+    it.for(imageFiles)(
+      'shows image preview for $type files',
+      ({ name, type }) => {
+        const file = createMockFile(name, type)
+        const widget = createMockWidget<File[] | null>([file], {}, undefined, {
+          name: 'test_file_upload',
+          type: 'file'
+        })
+        const wrapper = mountComponent(widget, [file])
+
+        expect(wrapper.find('img').exists()).toBe(true)
+        expect(wrapper.find('.pi-volume-up').exists()).toBe(false)
+      }
+    )
+
+    it.for(audioFiles)(
+      'shows audio player for $type files',
+      ({ name, type }) => {
+        const file = createMockFile(name, type)
+        const widget = createMockWidget<File[] | null>([file], {}, undefined, {
+          name: 'test_file_upload',
+          type: 'file'
+        })
+        const wrapper = mountComponent(widget, [file])
+
+        expect(wrapper.find('.pi-volume-up').exists()).toBe(true)
+        expect(wrapper.find('img').exists()).toBe(false)
+      }
+    )
+
+    it.for(normalFiles)('shows normal UI for $type files', ({ name, type }) => {
+      const file = createMockFile(name, type)
+      const widget = createMockWidget<File[] | null>([file], {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, [file])
+
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('.pi-volume-up').exists()).toBe(false)
+    })
+  })
+
+  describe('File Actions', () => {
+    it('clears file when delete button is clicked', async () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      // Find button that contains the times icon
+      const buttons = wrapper.findAll('button')
+      const deleteButton = buttons.find((button) =>
+        button.find('i.pi-times').exists()
+      )
+
+      if (!deleteButton) {
+        throw new Error('Delete button with times icon not found')
+      }
+
+      await deleteButton.trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual([null])
+    })
+
+    it('handles edit button click', async () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      // Find button that contains the pencil icon
+      const buttons = wrapper.findAll('button')
+      const editButton = buttons.find((button) =>
+        button.find('i.pi-pencil').exists()
+      )
+
+      if (!editButton) {
+        throw new Error('Edit button with pencil icon not found')
+      }
+
+      // Should not throw error when clicked (TODO: implement edit functionality)
+      await expect(editButton.trigger('click')).resolves.not.toThrow()
+    })
+
+    it('triggers file input when folder button is clicked', async () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      const fileInput = wrapper.find('input[type="file"]')
+      const inputElement = fileInput.element
+      if (!(inputElement instanceof HTMLInputElement)) {
+        throw new Error('Expected HTMLInputElement')
+      }
+      const clickSpy = vi.spyOn(inputElement, 'click')
+
+      // Find PrimeVue Button component with folder icon
+      const folderButton = wrapper.getComponent(Button)
+
+      await folderButton.trigger('click')
+
+      expect(clickSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables browse button in readonly mode', () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null, true)
+
+      const browseButton = wrapper.find('button')
+      expect(browseButton.element.disabled).toBe(true)
+    })
+
+    it('disables file input in readonly mode', () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null, true)
+
+      const fileInput = wrapper.find('input[type="file"]')
+      const inputElement = fileInput.element
+      if (!(inputElement instanceof HTMLInputElement)) {
+        throw new Error('Expected HTMLInputElement')
+      }
+      expect(inputElement.disabled).toBe(true)
+    })
+
+    it('disables folder button for images in readonly mode', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile], true)
+
+      const buttons = wrapper.findAll('button')
+      const folderButton = buttons.find((button) =>
+        button.element.innerHTML.includes('pi-folder')
+      )
+
+      if (!folderButton) {
+        throw new Error('Folder button not found')
+      }
+
+      expect(folderButton.element.disabled).toBe(true)
+    })
+
+    it('does not handle file changes in readonly mode', async () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null, true)
+
+      const file = createMockFile('test.jpg', 'image/jpeg')
+      const fileInput = wrapper.find('input[type="file"]')
+
+      Object.defineProperty(fileInput.element, 'files', {
+        value: [file],
+        writable: false
+      })
+
+      await fileInput.trigger('change')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeUndefined()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty file selection gracefully', async () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const fileInput = wrapper.find('input[type="file"]')
+
+      Object.defineProperty(fileInput.element, 'files', {
+        value: [],
+        writable: false
+      })
+
+      await fileInput.trigger('change')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeUndefined()
+    })
+
+    it('handles missing file input gracefully', () => {
+      const widget = createMockWidget<File[] | null>(null, {}, undefined, {
+        name: 'test_file_upload',
+        type: 'file'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      // Remove file input ref to simulate missing element
+      wrapper.vm.$refs.fileInputRef = null
+
+      // Should not throw error when method exists
+      const vm = wrapper.vm as any
+      expect(() => vm.triggerFileInput?.()).not.toThrow()
+    })
+
+    it('handles clearing file when no file input exists', async () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      // Remove file input ref to simulate missing element
+      wrapper.vm.$refs.fileInputRef = null
+
+      // Find button that contains the times icon
+      const buttons = wrapper.findAll('button')
+      const deleteButton = buttons.find((button) =>
+        button.find('i.pi-times').exists()
+      )
+
+      if (!deleteButton) {
+        throw new Error('Delete button with times icon not found')
+      }
+
+      // Should not throw error
+      await expect(deleteButton.trigger('click')).resolves.not.toThrow()
+    })
+
+    it('cleans up object URLs on unmount', () => {
+      const imageFile = createMockFile('test.jpg', 'image/jpeg')
+      const widget = createMockWidget<File[] | null>(
+        [imageFile],
+        {},
+        undefined,
+        {
+          name: 'test_file_upload',
+          type: 'file'
+        }
+      )
+      const wrapper = mountComponent(widget, [imageFile])
+
+      wrapper.unmount()
+
+      expect(global.URL.revokeObjectURL).toHaveBeenCalledWith(mockObjectURL)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
index 9f69eca82..c096abdf6 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
@@ -187,7 +187,11 @@ import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
-const props = defineProps<{
+const {
+  widget,
+  modelValue,
+  readonly = false
+} = defineProps<{
   widget: SimplifiedWidget<File[] | null>
   modelValue: File[] | null
   readonly?: boolean
@@ -198,8 +202,8 @@ const emit = defineEmits<{
 }>()
 
 const { localValue, onChange } = useWidgetValue({
-  widget: props.widget,
-  modelValue: props.modelValue,
+  widget,
+  modelValue,
   defaultValue: null,
   emit
 })
@@ -280,7 +284,7 @@ const triggerFileInput = () => {
 
 const handleFileChange = (event: Event) => {
   const target = event.target as HTMLInputElement
-  if (!props.readonly && target.files && target.files.length > 0) {
+  if (!readonly && target.files && target.files.length > 0) {
     // Since we only support single file, take the first one
     const file = target.files[0]
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
new file mode 100644
index 000000000..72d149d98
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.test.ts
@@ -0,0 +1,443 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Galleria from 'primevue/galleria'
+import type { GalleriaProps } from 'primevue/galleria'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetGalleria, {
+  type GalleryImage,
+  type GalleryValue
+} from './WidgetGalleria.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      'Gallery image': 'Gallery image'
+    }
+  }
+})
+
+// Test data constants for better test isolation
+const TEST_IMAGES_SMALL: readonly string[] = Object.freeze([
+  'https://example.com/image0.jpg',
+  'https://example.com/image1.jpg',
+  'https://example.com/image2.jpg'
+])
+
+const TEST_IMAGES_SINGLE: readonly string[] = Object.freeze([
+  'https://example.com/single.jpg'
+])
+
+const TEST_IMAGE_OBJECTS: readonly GalleryImage[] = Object.freeze([
+  {
+    itemImageSrc: 'https://example.com/image0.jpg',
+    thumbnailImageSrc: 'https://example.com/thumb0.jpg',
+    alt: 'Test image 0'
+  },
+  {
+    itemImageSrc: 'https://example.com/image1.jpg',
+    thumbnailImageSrc: 'https://example.com/thumb1.jpg',
+    alt: 'Test image 1'
+  }
+])
+
+// Helper functions outside describe blocks for better clarity
+function createMockWidget(
+  value: GalleryValue = [],
+  options: Partial<GalleriaProps> = {}
+): SimplifiedWidget<GalleryValue> {
+  return {
+    name: 'test_galleria',
+    type: 'array',
+    value,
+    options
+  }
+}
+
+function mountComponent(
+  widget: SimplifiedWidget<GalleryValue>,
+  modelValue: GalleryValue,
+  readonly = false
+) {
+  return mount(WidgetGalleria, {
+    global: {
+      plugins: [PrimeVue, i18n],
+      components: { Galleria }
+    },
+    props: {
+      widget,
+      readonly,
+      modelValue
+    }
+  })
+}
+
+function createImageStrings(count: number): string[] {
+  return Array.from(
+    { length: count },
+    (_, i) => `https://example.com/image${i}.jpg`
+  )
+}
+
+// Factory function that takes images, creates widget internally, returns wrapper
+function createGalleriaWrapper(
+  images: GalleryValue,
+  options: Partial<GalleriaProps> = {},
+  readonly = false
+) {
+  const widget = createMockWidget(images, options)
+  return mountComponent(widget, images, readonly)
+}
+
+describe('WidgetGalleria Image Display', () => {
+  // Group tests using the readonly constants where appropriate
+
+  describe('Component Rendering', () => {
+    it('renders galleria component', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.exists()).toBe(true)
+    })
+
+    it('displays empty gallery when no images provided', () => {
+      const widget = createMockWidget([])
+      const wrapper = mountComponent(widget, [])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('value')).toEqual([])
+    })
+
+    it('handles null or undefined value gracefully', () => {
+      const widget = createMockWidget([])
+      const wrapper = mountComponent(widget, [])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('value')).toEqual([])
+    })
+  })
+
+  describe('String Array Input', () => {
+    it('converts string array to image objects', () => {
+      const widget = createMockWidget([...TEST_IMAGES_SMALL])
+      const wrapper = mountComponent(widget, [...TEST_IMAGES_SMALL])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      const value = galleria.props('value')
+
+      expect(value).toHaveLength(3)
+      expect(value[0]).toEqual({
+        itemImageSrc: 'https://example.com/image0.jpg',
+        thumbnailImageSrc: 'https://example.com/image0.jpg',
+        alt: 'Image 0'
+      })
+    })
+
+    it('handles single string image', () => {
+      const widget = createMockWidget([...TEST_IMAGES_SINGLE])
+      const wrapper = mountComponent(widget, [...TEST_IMAGES_SINGLE])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      const value = galleria.props('value')
+
+      expect(value).toHaveLength(1)
+      expect(value[0]).toEqual({
+        itemImageSrc: 'https://example.com/single.jpg',
+        thumbnailImageSrc: 'https://example.com/single.jpg',
+        alt: 'Image 0'
+      })
+    })
+  })
+
+  describe('Object Array Input', () => {
+    it('preserves image objects as-is', () => {
+      const widget = createMockWidget([...TEST_IMAGE_OBJECTS])
+      const wrapper = mountComponent(widget, [...TEST_IMAGE_OBJECTS])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      const value = galleria.props('value')
+
+      expect(value).toEqual([...TEST_IMAGE_OBJECTS])
+    })
+
+    it('handles mixed object properties', () => {
+      const images: GalleryImage[] = [
+        { src: 'https://example.com/image1.jpg', alt: 'First' },
+        { itemImageSrc: 'https://example.com/image2.jpg' },
+        { thumbnailImageSrc: 'https://example.com/thumb3.jpg' }
+      ]
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      const value = galleria.props('value')
+
+      expect(value).toEqual(images)
+    })
+  })
+
+  describe('Thumbnail Display', () => {
+    it('shows thumbnails when multiple images present', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showThumbnails')).toBe(true)
+    })
+
+    it('hides thumbnails for single image', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showThumbnails')).toBe(false)
+    })
+
+    it('respects widget option to hide thumbnails', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL], {
+        showThumbnails: false
+      })
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showThumbnails')).toBe(false)
+    })
+
+    it('shows thumbnails when explicitly enabled for multiple images', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL], {
+        showThumbnails: true
+      })
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showThumbnails')).toBe(true)
+    })
+  })
+
+  describe('Navigation Buttons', () => {
+    it('shows navigation buttons when multiple images present', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SMALL])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showItemNavigators')).toBe(true)
+    })
+
+    it('hides navigation buttons for single image', () => {
+      const wrapper = createGalleriaWrapper([...TEST_IMAGES_SINGLE])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showItemNavigators')).toBe(false)
+    })
+
+    it('respects widget option to hide navigation buttons', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images, { showItemNavigators: false })
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showItemNavigators')).toBe(false)
+    })
+
+    it('shows navigation buttons when explicitly enabled for multiple images', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images, { showItemNavigators: true })
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('showItemNavigators')).toBe(true)
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('passes readonly state to galleria when readonly', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images, true)
+
+      // Galleria component should receive readonly state (though it may not support disabled)
+      expect(wrapper.props('readonly')).toBe(true)
+    })
+
+    it('passes readonly state to galleria when not readonly', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images, false)
+
+      expect(wrapper.props('readonly')).toBe(false)
+    })
+  })
+
+  describe('Widget Options Handling', () => {
+    it('passes through valid widget options', () => {
+      const images = createImageStrings(2)
+      const widget = createMockWidget(images, {
+        circular: true,
+        autoPlay: true,
+        transitionInterval: 3000
+      })
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('circular')).toBe(true)
+      expect(galleria.props('autoPlay')).toBe(true)
+      expect(galleria.props('transitionInterval')).toBe(3000)
+    })
+
+    it('applies custom styling props', () => {
+      const images = createImageStrings(2)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      // Check that galleria has styling attributes rather than specific classes
+      expect(galleria.attributes('class')).toBeDefined()
+    })
+  })
+
+  describe('Active Index Management', () => {
+    it('initializes with zero active index', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('activeIndex')).toBe(0)
+    })
+
+    it('can update active index', async () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      await galleria.vm.$emit('update:activeIndex', 2)
+
+      // Check that the internal activeIndex ref was updated
+      const vm = wrapper.vm as any
+      expect(vm.activeIndex).toBe(2)
+    })
+  })
+
+  describe('Image Template Rendering', () => {
+    it('renders item template with correct image source priorities', () => {
+      const images: GalleryImage[] = [
+        {
+          itemImageSrc: 'https://example.com/item.jpg',
+          src: 'https://example.com/fallback.jpg'
+        },
+        { src: 'https://example.com/only-src.jpg' }
+      ]
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      // The template logic should prioritize itemImageSrc > src > fallback to the item itself
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.exists()).toBe(true)
+    })
+
+    it('renders thumbnail template with correct image source priorities', () => {
+      const images: GalleryImage[] = [
+        {
+          thumbnailImageSrc: 'https://example.com/thumb.jpg',
+          src: 'https://example.com/fallback.jpg'
+        },
+        { src: 'https://example.com/only-src.jpg' }
+      ]
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      // The template logic should prioritize thumbnailImageSrc > src > fallback to the item itself
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.exists()).toBe(true)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty array gracefully', () => {
+      const widget = createMockWidget([])
+      const wrapper = mountComponent(widget, [])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('value')).toEqual([])
+      expect(galleria.props('showThumbnails')).toBe(false)
+      expect(galleria.props('showItemNavigators')).toBe(false)
+    })
+
+    it('handles malformed image objects', () => {
+      const malformedImages = [
+        {}, // Empty object
+        { randomProp: 'value' }, // Object without expected image properties
+        null, // Null value
+        undefined // Undefined value
+      ]
+      const widget = createMockWidget(malformedImages as string[])
+      const wrapper = mountComponent(widget, malformedImages as string[])
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      // Null/undefined should be filtered out, leaving only the objects
+      const expectedValue = [{}, { randomProp: 'value' }]
+      expect(galleria.props('value')).toEqual(expectedValue)
+    })
+
+    it('handles very large image arrays', () => {
+      const largeImageArray = createImageStrings(100)
+      const widget = createMockWidget(largeImageArray)
+      const wrapper = mountComponent(widget, largeImageArray)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('value')).toHaveLength(100)
+      expect(galleria.props('showThumbnails')).toBe(true)
+      expect(galleria.props('showItemNavigators')).toBe(true)
+    })
+
+    it('handles mixed string and object arrays gracefully', () => {
+      // This is technically invalid input, but the component should handle it
+      const mixedArray = [
+        'https://example.com/string.jpg',
+        { itemImageSrc: 'https://example.com/object.jpg' },
+        'https://example.com/another-string.jpg'
+      ]
+      const widget = createMockWidget(mixedArray as string[])
+
+      // The component expects consistent typing, but let's test it handles mixed input
+      expect(() => mountComponent(widget, mixedArray as string[])).not.toThrow()
+    })
+
+    it('handles invalid URL strings', () => {
+      const invalidUrls = ['not-a-url', '', ' ', 'http://', 'ftp://invalid']
+      const widget = createMockWidget(invalidUrls)
+      const wrapper = mountComponent(widget, invalidUrls)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      expect(galleria.props('value')).toHaveLength(5)
+    })
+  })
+
+  describe('Styling and Layout', () => {
+    it('applies max-width constraint', () => {
+      const images = createImageStrings(2)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      // Check that component has styling applied rather than specific classes
+      expect(galleria.attributes('class')).toBeDefined()
+    })
+
+    it('applies passthrough props for thumbnails', () => {
+      const images = createImageStrings(3)
+      const widget = createMockWidget(images)
+      const wrapper = mountComponent(widget, images)
+
+      const galleria = wrapper.findComponent({ name: 'Galleria' })
+      const pt = galleria.props('pt')
+
+      expect(pt).toBeDefined()
+      expect(pt.thumbnails).toBeDefined()
+      expect(pt.thumbnailContent).toBeDefined()
+      expect(pt.thumbnailPrevButton).toBeDefined()
+      expect(pt.thumbnailNextButton).toBeDefined()
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
index 3603b7ab6..28be93117 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="flex flex-col gap-1">
     <Galleria
-      v-model:activeIndex="activeIndex"
+      v-model:active-index="activeIndex"
       :value="galleryImages"
       v-bind="filteredProps"
-      :disabled="readonly"
       :show-thumbnails="showThumbnails"
-      :show-nav-buttons="showNavButtons"
+      :show-item-navigators="showNavButtons"
       class="max-w-full"
       :pt="{
         thumbnails: {
@@ -25,16 +24,22 @@
     >
       <template #item="{ item }">
         <img
-          :src="item.itemImageSrc || item.src || item"
-          :alt="item.alt || 'Gallery image'"
+          :src="item?.itemImageSrc || item?.src || ''"
+          :alt="
+            item?.alt ||
+            `${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
+          "
           class="w-full h-auto max-h-64 object-contain"
         />
       </template>
       <template #thumbnail="{ item }">
         <div class="p-1 w-full h-full">
           <img
-            :src="item.thumbnailImageSrc || item.src || item"
-            :alt="item.alt || 'Gallery thumbnail'"
+            :src="item?.thumbnailImageSrc || item?.src || ''"
+            :alt="
+              item?.alt ||
+              `${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
+            "
             class="w-full h-full object-cover rounded-lg"
           />
         </div>
@@ -46,6 +51,7 @@
 <script setup lang="ts">
 import Galleria from 'primevue/galleria'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import {
@@ -53,14 +59,14 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
-interface GalleryImage {
+export interface GalleryImage {
   itemImageSrc?: string
   thumbnailImageSrc?: string
   src?: string
   alt?: string
 }
 
-type GalleryValue = string[] | GalleryImage[]
+export type GalleryValue = string[] | GalleryImage[]
 
 const value = defineModel<GalleryValue>({ required: true })
 
@@ -71,6 +77,8 @@ const props = defineProps<{
 
 const activeIndex = ref(0)
 
+const { t } = useI18n()
+
 const filteredProps = computed(() =>
   filterWidgetProps(props.widget.options, GALLERIA_EXCLUDED_PROPS)
 )
@@ -78,16 +86,18 @@ const filteredProps = computed(() =>
 const galleryImages = computed(() => {
   if (!value.value || !Array.isArray(value.value)) return []
 
-  return value.value.map((item, index) => {
-    if (typeof item === 'string') {
-      return {
-        itemImageSrc: item,
-        thumbnailImageSrc: item,
-        alt: `Image ${index + 1}`
+  return value.value
+    .filter((item) => item !== null && item !== undefined) // Filter out null/undefined
+    .map((item, index) => {
+      if (typeof item === 'string') {
+        return {
+          itemImageSrc: item,
+          thumbnailImageSrc: item,
+          alt: `Image ${index}`
+        }
       }
-    }
-    return item
-  })
+      return item ?? {} // Ensure we have at least an empty object
+    })
 })
 
 const showThumbnails = computed(() => {
@@ -99,7 +109,7 @@ const showThumbnails = computed(() => {
 
 const showNavButtons = computed(() => {
   return (
-    props.widget.options?.showNavButtons !== false &&
+    props.widget.options?.showItemNavigators !== false &&
     galleryImages.value.length > 1
   )
 })
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 000000000..798d5ee39
--- /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 e51413a30..1cf455c78 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 45ce81aa1..b5676f97a 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 000000000..d83f89142
--- /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 6e91171b3..4922ae1c2 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/WidgetInputNumberSlider.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
index 179c342d2..828029e89 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.test.ts
@@ -1,62 +1,63 @@
 import { mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
-import InputText from 'primevue/inputtext'
-import Slider from 'primevue/slider'
-import type { SliderProps } from 'primevue/slider'
+import InputNumber from 'primevue/inputnumber'
 import { describe, expect, it } from 'vitest'
 
+import Slider from '@/components/ui/slider/Slider.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
 
-describe('WidgetInputNumberSlider Value Binding', () => {
-  const createMockWidget = (
-    value: number = 5,
-    options: Partial<SliderProps & { precision?: number }> = {},
-    callback?: (value: number) => void
-  ): SimplifiedWidget<number> => ({
+function createMockWidget(
+  value: number = 5,
+  options: SimplifiedWidget['options'] = {},
+  callback?: (value: number) => void
+): SimplifiedWidget<number> {
+  return {
     name: 'test_slider',
     type: 'float',
     value,
     options: { min: 0, max: 100, step: 1, precision: 0, ...options },
     callback
-  })
-
-  const mountComponent = (
-    widget: SimplifiedWidget<number>,
-    modelValue: number,
-    readonly = false
-  ) => {
-    return mount(WidgetInputNumberSlider, {
-      global: {
-        plugins: [PrimeVue],
-        components: { InputText, Slider }
-      },
-      props: {
-        widget,
-        modelValue,
-        readonly
-      }
-    })
   }
+}
 
-  const getNumberInput = (wrapper: ReturnType<typeof mount>) => {
-    const input = wrapper.find('input[type="number"]')
-    if (!(input.element instanceof HTMLInputElement)) {
-      throw new Error(
-        'Number input element not found or is not an HTMLInputElement'
-      )
+function mountComponent(
+  widget: SimplifiedWidget<number>,
+  modelValue: number,
+  readonly = false
+) {
+  return mount(WidgetInputNumberSlider, {
+    global: {
+      plugins: [PrimeVue],
+      components: { InputNumber, Slider }
+    },
+    props: {
+      widget,
+      modelValue,
+      readonly
     }
-    return { element: input.element }
-  }
+  })
+}
 
+function getNumberInput(wrapper: ReturnType<typeof mount>) {
+  const input = wrapper.find('input[inputmode="numeric"]')
+  if (!(input.element instanceof HTMLInputElement)) {
+    throw new Error(
+      'Number input element not found or is not an HTMLInputElement'
+    )
+  }
+  return input.element
+}
+
+describe('WidgetInputNumberSlider Value Binding', () => {
   describe('Props and Values', () => {
     it('passes modelValue to slider component', () => {
       const widget = createMockWidget(5)
       const wrapper = mountComponent(widget, 5)
 
       const slider = wrapper.findComponent({ name: 'Slider' })
-      expect(slider.props('modelValue')).toBe(5)
+      expect(slider.props('modelValue')).toEqual([5])
     })
 
     it('handles different initial values', () => {
@@ -67,10 +68,10 @@ describe('WidgetInputNumberSlider Value Binding', () => {
       const wrapper2 = mountComponent(widget2, 10)
 
       const slider1 = wrapper1.findComponent({ name: 'Slider' })
-      expect(slider1.props('modelValue')).toBe(5)
+      expect(slider1.props('modelValue')).toEqual([5])
 
       const slider2 = wrapper2.findComponent({ name: 'Slider' })
-      expect(slider2.props('modelValue')).toBe(10)
+      expect(slider2.props('modelValue')).toEqual([10])
     })
   })
 
@@ -85,8 +86,9 @@ describe('WidgetInputNumberSlider Value Binding', () => {
     it('renders input field', () => {
       const widget = createMockWidget(5)
       const wrapper = mountComponent(widget, 5)
+      console.log(wrapper.html())
 
-      expect(wrapper.find('input[type="number"]').exists()).toBe(true)
+      expect(wrapper.find('input[inputmode="numeric"]').exists()).toBe(true)
     })
 
     it('displays initial value in input field', () => {
@@ -94,7 +96,7 @@ describe('WidgetInputNumberSlider Value Binding', () => {
       const wrapper = mountComponent(widget, 42)
 
       const input = getNumberInput(wrapper)
-      expect(input.element.value).toBe('42')
+      expect(input.value).toBe('42')
     })
 
     it('disables components in readonly mode', () => {
@@ -105,7 +107,7 @@ describe('WidgetInputNumberSlider Value Binding', () => {
       expect(slider.props('disabled')).toBe(true)
 
       const input = getNumberInput(wrapper)
-      expect(input.element.disabled).toBe(true)
+      expect(input.disabled).toBe(true)
     })
   })
 
@@ -127,5 +129,47 @@ describe('WidgetInputNumberSlider Value Binding', () => {
       expect(slider.props('min')).toBe(-100)
       expect(slider.props('max')).toBe(100)
     })
+
+    describe('Step Size', () => {
+      it('should default to 1', () => {
+        const widget = createMockWidget(5)
+        const wrapper = mountComponent(widget, 5)
+
+        const slider = wrapper.findComponent({ name: 'Slider' })
+        expect(slider.props('step')).toBe(1)
+      })
+
+      it('should get the step2 value if present', () => {
+        const widget = createMockWidget(5, { step2: 0.01 })
+        const wrapper = mountComponent(widget, 5)
+
+        const slider = wrapper.findComponent({ name: 'Slider' })
+        expect(slider.props('step')).toBe(0.01)
+      })
+
+      it('should be 1 for precision 0', () => {
+        const widget = createMockWidget(5, { precision: 0 })
+        const wrapper = mountComponent(widget, 5)
+
+        const slider = wrapper.findComponent({ name: 'Slider' })
+        expect(slider.props('step')).toBe(1)
+      })
+
+      it('should be .1 for precision 1', () => {
+        const widget = createMockWidget(5, { precision: 1 })
+        const wrapper = mountComponent(widget, 5)
+
+        const slider = wrapper.findComponent({ name: 'Slider' })
+        expect(slider.props('step')).toBe(0.1)
+      })
+
+      it('should be .00001 for precision 5', () => {
+        const widget = createMockWidget(5, { precision: 5 })
+        const wrapper = mountComponent(widget, 5)
+
+        const slider = wrapper.findComponent({ name: 'Slider' })
+        expect(slider.props('step')).toBe(0.00001)
+      })
+    })
   })
 })
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index c9894f4b8..97cfd3606 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -6,31 +6,35 @@
       "
     >
       <Slider
-        v-model="localValue"
+        :model-value="[localValue]"
         v-bind="filteredProps"
         :disabled="readonly"
         class="flex-grow text-xs"
-        @update:model-value="onChange"
-      />
-      <InputText
-        v-model="inputDisplayValue"
-        :disabled="readonly"
-        type="number"
         :step="stepValue"
-        class="w-[4em] text-center text-xs px-0 !border-none !shadow-none !bg-transparent"
+        @update:model-value="updateLocalValue"
+      />
+      <InputNumber
+        :key="timesEmptied"
+        :model-value="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        :step="stepValue"
+        :min-fraction-digits="precision"
+        :max-fraction-digits="precision"
         size="small"
-        @blur="handleInputBlur"
-        @keydown="handleInputKeydown"
+        pt:pc-input-text:root="min-w-full bg-transparent border-none text-center"
+        class="w-16"
+        @update:model-value="handleNumberInputUpdate"
       />
     </div>
   </WidgetLayoutField>
 </template>
 
 <script setup lang="ts">
-import InputText from 'primevue/inputtext'
-import Slider from 'primevue/slider'
-import { computed, ref, watch } from 'vue'
+import InputNumber from 'primevue/inputnumber'
+import { computed, ref } from 'vue'
 
+import Slider from '@/components/ui/slider/Slider.vue'
 import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
@@ -42,7 +46,7 @@ import {
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
-const props = defineProps<{
+const { widget, modelValue, readonly } = defineProps<{
   widget: SimplifiedWidget<number>
   modelValue: number
   readonly?: boolean
@@ -53,19 +57,29 @@ const emit = defineEmits<{
 }>()
 
 // Use the composable for consistent widget value handling
-const { localValue, onChange } = useNumberWidgetValue(
-  props.widget,
-  props.modelValue,
-  emit
-)
+const { localValue, onChange } = useNumberWidgetValue(widget, modelValue, emit)
+
+const timesEmptied = ref(0)
+
+const updateLocalValue = (newValue: number[] | undefined): void => {
+  onChange(newValue ?? [localValue.value])
+}
+
+const handleNumberInputUpdate = (newValue: number | undefined) => {
+  if (newValue) {
+    updateLocalValue([newValue])
+    return
+  }
+  timesEmptied.value += 1
+}
 
 const filteredProps = computed(() =>
-  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+  filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )
 
 // Get the precision value for proper number formatting
 const precision = computed(() => {
-  const p = props.widget.options?.precision
+  const p = widget.options?.precision
   // Treat negative or non-numeric precision as undefined
   return typeof p === 'number' && p >= 0 ? p : undefined
 })
@@ -73,96 +87,21 @@ const precision = computed(() => {
 // Calculate the step value based on precision or widget options
 const stepValue = computed(() => {
   // Use step2 (correct input spec value) instead of step (legacy 10x value)
-  if (props.widget.options?.step2 !== undefined) {
-    return String(props.widget.options.step2)
+  if (widget.options?.step2 !== undefined) {
+    return widget.options.step2
   }
+
   // Otherwise, derive from precision
-  if (precision.value !== undefined) {
-    if (precision.value === 0) {
-      return '1'
-    }
-    // For precision > 0, step = 1 / (10^precision)
-    // precision 1 → 0.1, precision 2 → 0.01, etc.
-    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
-  }
-  // Default to 'any' for unrestricted stepping
-  return 'any'
-})
-
-// Format a number according to the widget's precision
-const formatNumber = (value: number): string => {
   if (precision.value === undefined) {
-    // No precision specified, return as-is
-    return String(value)
+    return undefined
   }
-  // Use toFixed to ensure correct decimal places
-  return value.toFixed(precision.value)
-}
 
-// Apply precision-based rounding to a number
-const applyPrecision = (value: number): number => {
-  if (precision.value === undefined) {
-    // No precision specified, return as-is
-    return value
-  }
   if (precision.value === 0) {
-    // Integer precision
-    return Math.round(value)
+    return 1
   }
-  // Round to the specified decimal places
-  const multiplier = Math.pow(10, precision.value)
-  return Math.round(value * multiplier) / multiplier
-}
 
-// Keep a separate display value for the input field
-const inputDisplayValue = ref(formatNumber(localValue.value))
-
-// Update display value when localValue changes from external sources
-watch(localValue, (newValue) => {
-  inputDisplayValue.value = formatNumber(newValue)
+  // For precision > 0, step = 1 / (10^precision)
+  // precision 1 → 0.1, precision 2 → 0.01, etc.
+  return 1 / Math.pow(10, precision.value)
 })
-
-const handleInputBlur = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = target.value || '0'
-  const parsed = parseFloat(value)
-
-  if (!isNaN(parsed)) {
-    // Apply precision-based rounding
-    const roundedValue = applyPrecision(parsed)
-    onChange(roundedValue)
-    // Update display value with proper formatting
-    inputDisplayValue.value = formatNumber(roundedValue)
-  }
-}
-
-const handleInputKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    const target = event.target as HTMLInputElement
-    const value = target.value || '0'
-    const parsed = parseFloat(value)
-
-    if (!isNaN(parsed)) {
-      // Apply precision-based rounding
-      const roundedValue = applyPrecision(parsed)
-      onChange(roundedValue)
-      // Update display value with proper formatting
-      inputDisplayValue.value = formatNumber(roundedValue)
-    }
-  }
-}
 </script>
-
-<style scoped>
-/* Remove number input spinners */
-:deep(input[type='number']::-webkit-inner-spin-button),
-:deep(input[type='number']::-webkit-outer-spin-button) {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-:deep(input[type='number']) {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-</style>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
new file mode 100644
index 000000000..836f2b357
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.test.ts
@@ -0,0 +1,432 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Textarea from 'primevue/textarea'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetMarkdown from './WidgetMarkdown.vue'
+
+// Mock the markdown renderer utility
+vi.mock('@/utils/markdownRendererUtil', () => ({
+  renderMarkdownToHtml: vi.fn((markdown: string) => {
+    // Simple mock that converts some markdown to HTML
+    return markdown
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      .replace(/^# (.*?)$/gm, '<h1>$1</h1>')
+      .replace(/^## (.*?)$/gm, '<h2>$1</h2>')
+      .replace(/\n/g, '<br>')
+  })
+}))
+
+describe('WidgetMarkdown Dual Mode Display', () => {
+  const createMockWidget = (
+    value: string = '# Default Heading\nSome **bold** text.',
+    options: Record<string, unknown> = {},
+    callback?: (value: string) => void
+  ): SimplifiedWidget<string> => ({
+    name: 'test_markdown',
+    type: 'string',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<string>,
+    modelValue: string,
+    readonly = false
+  ) => {
+    return mount(WidgetMarkdown, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Textarea }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const clickToEdit = async (wrapper: ReturnType<typeof mount>) => {
+    const container = wrapper.find('.widget-markdown')
+    await container.trigger('click')
+    await nextTick()
+    return container
+  }
+
+  const blurTextarea = async (wrapper: ReturnType<typeof mount>) => {
+    const textarea = wrapper.find('textarea')
+    if (textarea.exists()) {
+      await textarea.trigger('blur')
+      await nextTick()
+    }
+    return textarea
+  }
+
+  describe('Display Mode', () => {
+    it('renders markdown content as HTML in display mode', () => {
+      const markdown = '# Heading\nSome **bold** and *italic* text.'
+      const widget = createMockWidget(markdown)
+      const wrapper = mountComponent(widget, markdown)
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.exists()).toBe(true)
+      expect(displayDiv.html()).toContain('<h1>Heading</h1>')
+      expect(displayDiv.html()).toContain('<strong>bold</strong>')
+      expect(displayDiv.html()).toContain('<em>italic</em>')
+    })
+
+    it('starts in display mode by default', () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+      expect(wrapper.find('textarea').exists()).toBe(false)
+    })
+
+    it('applies styling classes to display container', () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.classes()).toContain('text-xs')
+      expect(displayDiv.classes()).toContain('min-h-[60px]')
+      expect(displayDiv.classes()).toContain('rounded-lg')
+      expect(displayDiv.classes()).toContain('px-4')
+      expect(displayDiv.classes()).toContain('py-2')
+      expect(displayDiv.classes()).toContain('overflow-y-auto')
+    })
+
+    it('handles empty markdown content', () => {
+      const widget = createMockWidget('')
+      const wrapper = mountComponent(widget, '')
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.exists()).toBe(true)
+      expect(displayDiv.text()).toBe('')
+    })
+  })
+
+  describe('Edit Mode Toggle', () => {
+    it('switches to edit mode when clicked', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+
+      await clickToEdit(wrapper)
+
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(false)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+    })
+
+    it('does not switch to edit mode when readonly', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test', true)
+
+      await clickToEdit(wrapper)
+
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+      expect(wrapper.find('textarea').exists()).toBe(false)
+    })
+
+    it('does not switch to edit mode when already editing', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      // First click to enter edit mode
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+
+      // Second click should not have any effect
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+    })
+
+    it('switches back to display mode on textarea blur', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+
+      await blurTextarea(wrapper)
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+      expect(wrapper.find('textarea').exists()).toBe(false)
+    })
+  })
+
+  describe('Edit Mode', () => {
+    it('displays textarea with current value when editing', async () => {
+      const markdown = '# Original Content'
+      const widget = createMockWidget(markdown)
+      const wrapper = mountComponent(widget, markdown)
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      expect(textarea.exists()).toBe(true)
+      expect(textarea.element.value).toBe('# Original Content')
+    })
+
+    it('applies styling and configuration to textarea', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.findComponent({ name: 'Textarea' })
+      expect(textarea.props('size')).toBe('small')
+      // Check rows attribute in the DOM instead of props
+      const textareaElement = wrapper.find('textarea')
+      expect(textareaElement.attributes('rows')).toBe('6')
+      expect(textarea.classes()).toContain('text-xs')
+      expect(textarea.classes()).toContain('w-full')
+    })
+
+    it('disables textarea when readonly', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test', true)
+
+      // Readonly should prevent entering edit mode
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(false)
+    })
+
+    it('stops click and keydown event propagation in edit mode', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      const clickSpy = vi.fn()
+      const keydownSpy = vi.fn()
+
+      wrapper.element.addEventListener('click', clickSpy)
+      wrapper.element.addEventListener('keydown', keydownSpy)
+
+      await textarea.trigger('click')
+      await textarea.trigger('keydown', { key: 'Enter' })
+
+      // Events should be stopped from propagating
+      expect(clickSpy).not.toHaveBeenCalled()
+      expect(keydownSpy).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Value Updates', () => {
+    it('emits update:modelValue when textarea content changes', async () => {
+      const widget = createMockWidget('# Original')
+      const wrapper = mountComponent(widget, '# Original')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('# Updated Content')
+      await textarea.trigger('input')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual(['# Updated Content'])
+    })
+
+    it('renders updated HTML after value change and blur', async () => {
+      const widget = createMockWidget('# Original')
+      const wrapper = mountComponent(widget, '# Original')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('## New Heading\nWith **bold** text')
+      await textarea.trigger('input')
+      await blurTextarea(wrapper)
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.html()).toContain('<h2>New Heading</h2>')
+      expect(displayDiv.html()).toContain('<strong>bold</strong>')
+    })
+
+    it('emits update:modelValue for callback handling at parent level', async () => {
+      const widget = createMockWidget('# Test', {})
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('# Changed')
+      await textarea.trigger('input')
+
+      // The widget should emit the change for parent (NodeWidgets) to handle callbacks
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual(['# Changed'])
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('# Test', {}, undefined)
+      const wrapper = mountComponent(widget, '# Test')
+
+      await clickToEdit(wrapper)
+
+      const textarea = wrapper.find('textarea')
+      await textarea.setValue('# Changed')
+
+      // Should not throw error and should still emit Vue event
+      await expect(textarea.trigger('input')).resolves.not.toThrow()
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+    })
+  })
+
+  describe('Complex Markdown Rendering', () => {
+    it('handles multiple markdown elements', () => {
+      const complexMarkdown = `# Main Heading
+## Subheading
+This paragraph has **bold** and *italic* text.
+Another line with more content.`
+
+      const widget = createMockWidget(complexMarkdown)
+      const wrapper = mountComponent(widget, complexMarkdown)
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.html()).toContain('<h1>Main Heading</h1>')
+      expect(displayDiv.html()).toContain('<h2>Subheading</h2>')
+      expect(displayDiv.html()).toContain('<strong>bold</strong>')
+      expect(displayDiv.html()).toContain('<em>italic</em>')
+    })
+
+    it('handles line breaks in markdown', () => {
+      const markdownWithBreaks = 'Line 1\nLine 2\nLine 3'
+      const widget = createMockWidget(markdownWithBreaks)
+      const wrapper = mountComponent(widget, markdownWithBreaks)
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.html()).toContain('<br>')
+    })
+
+    it('handles empty or whitespace-only markdown', () => {
+      const whitespaceMarkdown = '   \n\n   '
+      const widget = createMockWidget(whitespaceMarkdown)
+      const wrapper = mountComponent(widget, whitespaceMarkdown)
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.exists()).toBe(true)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles very long markdown content', async () => {
+      const longMarkdown = '# Heading\n' + 'Lorem ipsum '.repeat(1000)
+      const widget = createMockWidget(longMarkdown)
+      const wrapper = mountComponent(widget, longMarkdown)
+
+      // Should render without issues
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.exists()).toBe(true)
+
+      // Should switch to edit mode
+      await clickToEdit(wrapper)
+      const textarea = wrapper.find('textarea')
+      expect(textarea.exists()).toBe(true)
+      expect(textarea.element.value).toBe(longMarkdown)
+    })
+
+    it('handles special characters in markdown', async () => {
+      const specialChars = '# Special: @#$%^&*()[]{}|\\:";\'<>?,./'
+      const widget = createMockWidget(specialChars)
+      const wrapper = mountComponent(widget, specialChars)
+
+      await clickToEdit(wrapper)
+      const textarea = wrapper.find('textarea')
+      expect(textarea.element.value).toBe(specialChars)
+    })
+
+    it('handles unicode characters', async () => {
+      const unicode = '# Unicode: 🎨 αβγ 中文 العربية 🚀'
+      const widget = createMockWidget(unicode)
+      const wrapper = mountComponent(widget, unicode)
+
+      await clickToEdit(wrapper)
+      const textarea = wrapper.find('textarea')
+      expect(textarea.element.value).toBe(unicode)
+
+      await textarea.setValue(unicode + ' more unicode')
+      await textarea.trigger('input')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![emitted!.length - 1]).toEqual([unicode + ' more unicode'])
+    })
+
+    it('handles rapid edit mode toggling', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      // Rapid toggling
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+
+      await blurTextarea(wrapper)
+      expect(wrapper.find('.comfy-markdown-content').exists()).toBe(true)
+
+      await clickToEdit(wrapper)
+      expect(wrapper.find('textarea').exists()).toBe(true)
+    })
+  })
+
+  describe('Styling and Layout', () => {
+    it('applies widget-markdown class to container', () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+
+      const container = wrapper.find('.widget-markdown')
+      expect(container.exists()).toBe(true)
+      expect(container.classes()).toContain('relative')
+      expect(container.classes()).toContain('w-full')
+      expect(container.classes()).toContain('cursor-text')
+    })
+
+    it('applies overflow handling to display mode', () => {
+      const widget = createMockWidget(
+        '# Long Content\n' + 'Content '.repeat(100)
+      )
+      const wrapper = mountComponent(
+        widget,
+        '# Long Content\n' + 'Content '.repeat(100)
+      )
+
+      const displayDiv = wrapper.find('.comfy-markdown-content')
+      expect(displayDiv.classes()).toContain('overflow-y-auto')
+    })
+  })
+
+  describe('Focus Management', () => {
+    it('creates textarea reference when entering edit mode', async () => {
+      const widget = createMockWidget('# Test')
+      const wrapper = mountComponent(widget, '# Test')
+      const vm = wrapper.vm as InstanceType<typeof WidgetMarkdown>
+
+      // Test that the component creates a textarea reference when entering edit mode
+      // @ts-expect-error - isEditing is not exposed
+      expect(vm.isEditing).toBe(false)
+
+      // @ts-expect-error - startEditing is not exposed
+      await vm.startEditing()
+
+      // @ts-expect-error - isEditing is not exposed
+      expect(vm.isEditing).toBe(true)
+      await wrapper.vm.$nextTick()
+
+      // Check that textarea exists after entering edit mode
+      const textarea = wrapper.findComponent({ name: 'Textarea' })
+      expect(textarea.exists()).toBe(true)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue
index 35950aa5c..7f3995f9e 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/WidgetMultiSelect.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.test.ts
new file mode 100644
index 000000000..38497555d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.test.ts
@@ -0,0 +1,360 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import MultiSelect from 'primevue/multiselect'
+import type { MultiSelectProps } from 'primevue/multiselect'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+import WidgetMultiSelect from './WidgetMultiSelect.vue'
+
+describe('WidgetMultiSelect Value Binding', () => {
+  const createMockWidget = (
+    value: WidgetValue[] = [],
+    options: Partial<MultiSelectProps> & { values?: WidgetValue[] } = {},
+    callback?: (value: WidgetValue[]) => void
+  ): SimplifiedWidget<WidgetValue[]> => ({
+    name: 'test_multiselect',
+    type: 'array',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<WidgetValue[]>,
+    modelValue: WidgetValue[],
+    readonly = false
+  ) => {
+    return mount(WidgetMultiSelect, {
+      global: {
+        plugins: [PrimeVue],
+        components: { MultiSelect }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const setMultiSelectValueAndEmit = async (
+    wrapper: ReturnType<typeof mount>,
+    values: WidgetValue[]
+  ) => {
+    const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+    await multiselect.vm.$emit('update:modelValue', values)
+    return multiselect
+  }
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when selection changes', async () => {
+      const widget = createMockWidget([], {
+        values: ['option1', 'option2', 'option3']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['option1', 'option2'])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['option1', 'option2']])
+    })
+
+    it('emits Vue event when selection is cleared', async () => {
+      const widget = createMockWidget(['option1'], {
+        values: ['option1', 'option2']
+      })
+      const wrapper = mountComponent(widget, ['option1'])
+
+      await setMultiSelectValueAndEmit(wrapper, [])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([[]])
+    })
+
+    it('handles single item selection', async () => {
+      const widget = createMockWidget([], {
+        values: ['single']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['single'])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['single']])
+    })
+
+    it('emits update:modelValue for callback handling at parent level', async () => {
+      const widget = createMockWidget([], {
+        values: ['option1', 'option2']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['option1'])
+
+      // The widget should emit the change for parent (NodeWidgets) to handle callbacks
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['option1']])
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget(
+        [],
+        {
+          values: ['option1']
+        },
+        undefined
+      )
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['option1'])
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['option1']])
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders multiselect component', () => {
+      const widget = createMockWidget([], {
+        values: ['option1', 'option2']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.exists()).toBe(true)
+    })
+
+    it('displays options from widget values', () => {
+      const options = ['apple', 'banana', 'cherry']
+      const widget = createMockWidget([], { values: options })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('options')).toEqual(options)
+    })
+
+    it('displays initial selected values', () => {
+      const widget = createMockWidget(['banana'], {
+        values: ['apple', 'banana', 'cherry']
+      })
+      const wrapper = mountComponent(widget, ['banana'])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('modelValue')).toEqual(['banana'])
+    })
+
+    it('applies small size styling', () => {
+      const widget = createMockWidget([], { values: ['test'] })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('size')).toBe('small')
+    })
+
+    it('uses chip display mode', () => {
+      const widget = createMockWidget([], { values: ['test'] })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('display')).toBe('chip')
+    })
+
+    it('applies text-xs class', () => {
+      const widget = createMockWidget([], { values: ['test'] })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.classes()).toContain('text-xs')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables multiselect when readonly', () => {
+      const widget = createMockWidget(['selected'], {
+        values: ['selected', 'other']
+      })
+      const wrapper = mountComponent(widget, ['selected'], true)
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('disabled')).toBe(true)
+    })
+
+    it('disables interaction but allows programmatic changes', async () => {
+      const widget = createMockWidget(['initial'], {
+        values: ['initial', 'other']
+      })
+      const wrapper = mountComponent(widget, ['initial'], true)
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+
+      // The MultiSelect should be disabled, preventing user interaction
+      expect(multiselect.props('disabled')).toBe(true)
+
+      // But programmatic changes (like from external updates) should still work
+      // This is the expected behavior - readonly prevents UI interaction, not programmatic updates
+    })
+  })
+
+  describe('Widget Options Handling', () => {
+    it('passes through valid widget options', () => {
+      const widget = createMockWidget([], {
+        values: ['option1', 'option2'],
+        placeholder: 'Select items...',
+        filter: true,
+        showClear: true
+      })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('placeholder')).toBe('Select items...')
+      expect(multiselect.props('filter')).toBe(true)
+      expect(multiselect.props('showClear')).toBe(true)
+    })
+
+    it('excludes panel-related props', () => {
+      const widget = createMockWidget([], {
+        values: ['option1'],
+        overlayStyle: { color: 'red' },
+        panelClass: 'custom-panel'
+      })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      // These props should be filtered out by the prop filter
+      expect(multiselect.props('overlayStyle')).not.toEqual({ color: 'red' })
+      expect(multiselect.props('panelClass')).not.toBe('custom-panel')
+    })
+
+    it('handles empty values array', () => {
+      const widget = createMockWidget([], { values: [] })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('options')).toEqual([])
+    })
+
+    it('handles missing values option', () => {
+      const widget = createMockWidget([])
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      // Should not crash, options might be undefined
+      expect(multiselect.exists()).toBe(true)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles numeric values', async () => {
+      const widget = createMockWidget([], {
+        values: [1, 2, 3, 4, 5]
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, [1, 3, 5])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([[1, 3, 5]])
+    })
+
+    it('handles mixed type values', async () => {
+      const widget = createMockWidget([], {
+        values: ['string', 123, true, null]
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['string', 123])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['string', 123]])
+    })
+
+    it('handles object values', async () => {
+      const objectValues = [
+        { id: 1, label: 'First' },
+        { id: 2, label: 'Second' }
+      ]
+      const widget = createMockWidget([], {
+        values: objectValues,
+        optionLabel: 'label',
+        optionValue: 'id'
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, [1, 2])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([[1, 2]])
+    })
+
+    it('handles duplicate selections gracefully', async () => {
+      const widget = createMockWidget([], {
+        values: ['option1', 'option2']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      // MultiSelect should handle duplicates internally
+      await setMultiSelectValueAndEmit(wrapper, ['option1', 'option1'])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      // The actual behavior depends on PrimeVue implementation
+      expect(emitted![0]).toEqual([['option1', 'option1']])
+    })
+
+    it('handles very large option lists', () => {
+      const largeOptionList = Array.from(
+        { length: 1000 },
+        (_, i) => `option${i}`
+      )
+      const widget = createMockWidget([], { values: largeOptionList })
+      const wrapper = mountComponent(widget, [])
+
+      const multiselect = wrapper.findComponent({ name: 'MultiSelect' })
+      expect(multiselect.props('options')).toHaveLength(1000)
+    })
+
+    it('handles empty string values', async () => {
+      const widget = createMockWidget([], {
+        values: ['', 'not empty', '  ', 'normal']
+      })
+      const wrapper = mountComponent(widget, [])
+
+      await setMultiSelectValueAndEmit(wrapper, ['', '  '])
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([['', '  ']])
+    })
+  })
+
+  describe('Integration with Layout', () => {
+    it('renders within WidgetLayoutField', () => {
+      const widget = createMockWidget([], { values: ['test'] })
+      const wrapper = mountComponent(widget, [])
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.exists()).toBe(true)
+      expect(layoutField.props('widget')).toEqual(widget)
+    })
+
+    it('passes widget name to layout field', () => {
+      const widget = createMockWidget([], { values: ['test'] })
+      widget.name = 'custom_multiselect'
+      const wrapper = mountComponent(widget, [])
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.props('widget').name).toBe('custom_multiselect')
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
index 7ec1a4c7f..fc1bc87c8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetMultiSelect.vue
@@ -2,6 +2,7 @@
   <WidgetLayoutField :widget="widget">
     <MultiSelect
       v-model="localValue"
+      :options="multiSelectOptions"
       v-bind="combinedProps"
       :disabled="readonly"
       class="w-full text-xs"
@@ -15,13 +16,13 @@
   </WidgetLayoutField>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends WidgetValue = WidgetValue">
 import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 
 import { useWidgetValue } from '@/composables/graph/useWidgetValue'
 import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
 import {
   PANEL_EXCLUDED_PROPS,
   filterWidgetProps
@@ -30,17 +31,17 @@ import {
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
 const props = defineProps<{
-  widget: SimplifiedWidget<any[]>
-  modelValue: any[]
+  widget: SimplifiedWidget<T[]>
+  modelValue: T[]
   readonly?: boolean
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: any[]]
+  'update:modelValue': [value: T[]]
 }>()
 
 // Use the composable for consistent widget value handling
-const { localValue, onChange } = useWidgetValue({
+const { localValue, onChange } = useWidgetValue<T[]>({
   widget: props.widget,
   modelValue: props.modelValue,
   defaultValue: [],
@@ -60,4 +61,15 @@ const combinedProps = computed(() => ({
   ...filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS),
   ...transformCompatProps.value
 }))
+
+// Extract multiselect options from widget options
+const multiSelectOptions = computed((): T[] => {
+  const options = props.widget.options
+
+  if (Array.isArray(options?.values)) {
+    return options.values
+  }
+
+  return []
+})
 </script>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.test.ts
new file mode 100644
index 000000000..5e5494a09
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectButton.test.ts
@@ -0,0 +1,433 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetSelectButton from './WidgetSelectButton.vue'
+
+function createMockWidget(
+  value: string = 'option1',
+  options: SimplifiedWidget['options'] = {},
+  callback?: (value: string) => void
+): SimplifiedWidget<string> {
+  return {
+    name: 'test_selectbutton',
+    type: 'string',
+    value,
+    options,
+    callback
+  }
+}
+
+function mountComponent(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  readonly = false
+) {
+  return mount(WidgetSelectButton, {
+    global: {
+      plugins: [PrimeVue]
+    },
+    props: {
+      widget,
+      modelValue,
+      readonly
+    }
+  })
+}
+
+async function clickSelectButton(
+  wrapper: ReturnType<typeof mount>,
+  optionText: string
+) {
+  const buttons = wrapper.findAll('button')
+  const targetButton = buttons.find((button) =>
+    button.text().includes(optionText)
+  )
+
+  if (!targetButton) {
+    throw new Error(`Button with text "${optionText}" not found`)
+  }
+
+  await targetButton.trigger('click')
+  return targetButton
+}
+
+describe('WidgetSelectButton Button Selection', () => {
+  describe('Basic Rendering', () => {
+    it('renders FormSelectButton component', () => {
+      const widget = createMockWidget('option1', {
+        values: ['option1', 'option2', 'option3']
+      })
+      const wrapper = mountComponent(widget, 'option1')
+
+      const formSelectButton = wrapper.findComponent({
+        name: 'FormSelectButton'
+      })
+      expect(formSelectButton.exists()).toBe(true)
+    })
+
+    it('renders buttons for each option', () => {
+      const options = ['first', 'second', 'third']
+      const widget = createMockWidget('first', { values: options })
+      const wrapper = mountComponent(widget, 'first')
+
+      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('handles empty options array', () => {
+      const widget = createMockWidget('', { values: [] })
+      const wrapper = mountComponent(widget, '')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(0)
+    })
+
+    it('handles missing values option', () => {
+      const widget = createMockWidget('')
+      const wrapper = mountComponent(widget, '')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(0)
+    })
+  })
+
+  describe('Selection State', () => {
+    it('highlights selected option', () => {
+      const options = ['apple', 'banana', 'cherry']
+      const widget = createMockWidget('banana', { values: options })
+      const wrapper = mountComponent(widget, 'banana')
+
+      const buttons = wrapper.findAll('button')
+      const selectedButton = buttons[1] // 'banana'
+      const unselectedButton = buttons[0] // 'apple'
+
+      expect(selectedButton.classes()).toContain('bg-white')
+      expect(selectedButton.classes()).toContain('text-neutral-900')
+      expect(unselectedButton.classes()).not.toContain('bg-white')
+      expect(unselectedButton.classes()).not.toContain('text-neutral-900')
+    })
+
+    it('handles no selection gracefully', () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('nonexistent', { values: options })
+      const wrapper = mountComponent(widget, 'nonexistent')
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).not.toContain('bg-white')
+        expect(button.classes()).not.toContain('text-neutral-900')
+      })
+    })
+
+    it('updates selection when modelValue changes', async () => {
+      const options = ['first', 'second', 'third']
+      const widget = createMockWidget('first', { values: options })
+      const wrapper = mountComponent(widget, 'first')
+
+      // Initially 'first' is selected
+      let buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).toContain('bg-white')
+
+      // Update to 'second'
+      await wrapper.setProps({ modelValue: 'second' })
+      buttons = wrapper.findAll('button')
+      expect(buttons[0].classes()).not.toContain('bg-white')
+      expect(buttons[1].classes()).toContain('bg-white')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('emits update:modelValue when button is clicked', async () => {
+      const options = ['first', 'second', 'third']
+      const widget = createMockWidget('first', { values: options })
+      const wrapper = mountComponent(widget, 'first')
+
+      await clickSelectButton(wrapper, 'second')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toEqual(['second'])
+    })
+
+    it('handles callback execution when provided', async () => {
+      const mockCallback = vi.fn()
+      const options = ['option1', 'option2']
+      const widget = createMockWidget(
+        'option1',
+        { values: options },
+        mockCallback
+      )
+      const wrapper = mountComponent(widget, 'option1')
+
+      await clickSelectButton(wrapper, 'option2')
+
+      expect(mockCallback).toHaveBeenCalledWith('option2')
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options }, undefined)
+      const wrapper = mountComponent(widget, 'option1')
+
+      await clickSelectButton(wrapper, 'option2')
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toEqual(['option2'])
+    })
+
+    it('allows clicking same option again', async () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1')
+
+      await clickSelectButton(wrapper, 'option1')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toEqual(['option1'])
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables all buttons when readonly', () => {
+      const options = ['option1', 'option2', 'option3']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1', true)
+
+      const formSelectButton = wrapper.findComponent({
+        name: 'FormSelectButton'
+      })
+      expect(formSelectButton.props('disabled')).toBe(true)
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.element.disabled).toBe(true)
+        expect(button.classes()).toContain('cursor-not-allowed')
+        expect(button.classes()).toContain('opacity-50')
+      })
+    })
+
+    it('does not emit changes in readonly mode', async () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1', true)
+
+      await clickSelectButton(wrapper, 'option2')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeUndefined()
+    })
+
+    it('does not change visual state in readonly mode', () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1', true)
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).not.toContain('hover:bg-zinc-200/50')
+      })
+    })
+  })
+
+  describe('Option Types', () => {
+    it('handles string options', () => {
+      const options = ['apple', 'banana', 'cherry']
+      const widget = createMockWidget('banana', { values: options })
+      const wrapper = mountComponent(widget, 'banana')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('apple')
+      expect(buttons[1].text()).toBe('banana')
+      expect(buttons[2].text()).toBe('cherry')
+    })
+
+    it('handles number options', () => {
+      const options = [1, 2, 3]
+      const widget = createMockWidget('2', { values: options })
+      const wrapper = mountComponent(widget, '2')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('1')
+      expect(buttons[1].text()).toBe('2')
+      expect(buttons[2].text()).toBe('3')
+
+      // The selected button should be the one with '2'
+      expect(buttons[1].classes()).toContain('bg-white')
+    })
+
+    it('handles object options with label and value', () => {
+      const options = [
+        { label: 'First Option', value: 'first' },
+        { label: 'Second Option', value: 'second' },
+        { label: 'Third Option', value: 'third' }
+      ]
+      const widget = createMockWidget('second', { values: options })
+      const wrapper = mountComponent(widget, 'second')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('First Option')
+      expect(buttons[1].text()).toBe('Second Option')
+      expect(buttons[2].text()).toBe('Third Option')
+
+      // 'second' should be selected
+      expect(buttons[1].classes()).toContain('bg-white')
+    })
+
+    it('emits correct values for object options', async () => {
+      const options = [
+        { label: 'First', value: 'first_val' },
+        { label: 'Second', value: 'second_val' }
+      ]
+      const widget = createMockWidget('first_val', { values: options })
+      const wrapper = mountComponent(widget, 'first_val')
+
+      await clickSelectButton(wrapper, 'Second')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toEqual(['second_val'])
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles options with special characters', () => {
+      const options = ['@#$%^&*()', '{}[]|\\:";\'<>?,./']
+      const widget = createMockWidget(options[0], { values: options })
+      const wrapper = mountComponent(widget, options[0])
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[0].text()).toBe('@#$%^&*()')
+      expect(buttons[1].text()).toBe('{}[]|\\:";\'<>?,./')
+    })
+
+    it('handles empty string options', () => {
+      const options = ['', 'not empty', '  ', 'normal']
+      const widget = createMockWidget('', { values: options })
+      const wrapper = mountComponent(widget, '')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(4)
+      expect(buttons[0].classes()).toContain('bg-white') // Empty string is selected
+    })
+
+    it('handles null/undefined in options', () => {
+      const options: (string | null | undefined)[] = [
+        'valid',
+        null,
+        undefined,
+        'another'
+      ]
+      const widget = createMockWidget('valid', { values: options })
+      const wrapper = mountComponent(widget, 'valid')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(4)
+      expect(buttons[0].classes()).toContain('bg-white')
+    })
+
+    it('handles very long option text', () => {
+      const longText =
+        'This is a very long option text that might cause layout issues if not handled properly'
+      const options = ['short', longText, 'normal']
+      const widget = createMockWidget('short', { values: options })
+      const wrapper = mountComponent(widget, 'short')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons[1].text()).toBe(longText)
+    })
+
+    it('handles large number of options', () => {
+      const options = Array.from({ length: 20 }, (_, i) => `option${i + 1}`)
+      const widget = createMockWidget('option5', { values: options })
+      const wrapper = mountComponent(widget, 'option5')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(20)
+      expect(buttons[4].classes()).toContain('bg-white') // option5 is at index 4
+    })
+
+    it('handles duplicate options', () => {
+      const options = ['duplicate', 'unique', 'duplicate', 'unique']
+      const widget = createMockWidget('duplicate', { values: options })
+      const wrapper = mountComponent(widget, 'duplicate')
+
+      const buttons = wrapper.findAll('button')
+      expect(buttons).toHaveLength(4)
+      // Both 'duplicate' buttons should be highlighted (due to value matching)
+      expect(buttons[0].classes()).toContain('bg-white')
+      expect(buttons[2].classes()).toContain('bg-white')
+    })
+  })
+
+  describe('Styling and Layout', () => {
+    it('applies proper button styling', () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1')
+
+      const buttons = wrapper.findAll('button')
+      buttons.forEach((button) => {
+        expect(button.classes()).toContain('flex-1')
+        expect(button.classes()).toContain('h-6')
+        expect(button.classes()).toContain('px-5')
+        expect(button.classes()).toContain('rounded')
+        expect(button.classes()).toContain('text-center')
+        expect(button.classes()).toContain('text-xs')
+      })
+    })
+
+    it('applies container styling', () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1')
+
+      const container = wrapper.find('div').element
+      expect(container.className).toContain('p-1')
+      expect(container.className).toContain('inline-flex')
+      expect(container.className).toContain('justify-center')
+      expect(container.className).toContain('items-center')
+      expect(container.className).toContain('gap-1')
+    })
+
+    it('applies hover effects for non-selected options', () => {
+      const options = ['option1', 'option2']
+      const widget = createMockWidget('option1', { values: options })
+      const wrapper = mountComponent(widget, 'option1', false)
+
+      const buttons = wrapper.findAll('button')
+      const unselectedButton = buttons[1] // 'option2'
+
+      expect(unselectedButton.classes()).toContain('hover:bg-zinc-200/50')
+      expect(unselectedButton.classes()).toContain('cursor-pointer')
+    })
+  })
+
+  describe('Integration with Layout', () => {
+    it('renders within WidgetLayoutField', () => {
+      const widget = createMockWidget('test', { values: ['test'] })
+      const wrapper = mountComponent(widget, 'test')
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.exists()).toBe(true)
+      expect(layoutField.props('widget')).toEqual(widget)
+    })
+
+    it('passes widget name to layout field', () => {
+      const widget = createMockWidget('test', { values: ['test'] })
+      widget.name = 'custom_select_button'
+      const wrapper = mountComponent(widget, 'test')
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.props('widget').name).toBe('custom_select_button')
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
new file mode 100644
index 000000000..be16d31a9
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
@@ -0,0 +1,260 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import Textarea from 'primevue/textarea'
+import { describe, expect, it } from 'vitest'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetTextarea from './WidgetTextarea.vue'
+
+function createMockWidget(
+  value: string = 'default text',
+  options: SimplifiedWidget['options'] = {},
+  callback?: (value: string) => void
+): SimplifiedWidget<string> {
+  return {
+    name: 'test_textarea',
+    type: 'string',
+    value,
+    options,
+    callback
+  }
+}
+
+function mountComponent(
+  widget: SimplifiedWidget<string>,
+  modelValue: string,
+  readonly = false,
+  placeholder?: string
+) {
+  return mount(WidgetTextarea, {
+    global: {
+      plugins: [PrimeVue],
+      components: { Textarea }
+    },
+    props: {
+      widget,
+      modelValue,
+      readonly,
+      placeholder
+    }
+  })
+}
+
+async function setTextareaValueAndTrigger(
+  wrapper: ReturnType<typeof mount>,
+  value: string,
+  trigger: 'blur' | 'input' = 'blur'
+) {
+  const textarea = wrapper.find('textarea')
+  if (!(textarea.element instanceof HTMLTextAreaElement)) {
+    throw new Error(
+      'Textarea element not found or is not an HTMLTextAreaElement'
+    )
+  }
+  await textarea.setValue(value)
+  await textarea.trigger(trigger)
+  return textarea
+}
+
+describe('WidgetTextarea Value Binding', () => {
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when textarea value changes on blur', async () => {
+      const widget = createMockWidget('hello')
+      const wrapper = mountComponent(widget, 'hello')
+
+      await setTextareaValueAndTrigger(wrapper, 'world', 'blur')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('world')
+    })
+
+    it('emits Vue event when textarea value changes on input', async () => {
+      const widget = createMockWidget('initial')
+      const wrapper = mountComponent(widget, 'initial')
+
+      await setTextareaValueAndTrigger(wrapper, 'new content', 'input')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('new content')
+    })
+
+    it('handles empty string values', async () => {
+      const widget = createMockWidget('something')
+      const wrapper = mountComponent(widget, 'something')
+
+      await setTextareaValueAndTrigger(wrapper, '')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('')
+    })
+
+    it('handles multiline text correctly', async () => {
+      const widget = createMockWidget('single line')
+      const wrapper = mountComponent(widget, 'single line')
+
+      const multilineText = 'Line 1\nLine 2\nLine 3'
+      await setTextareaValueAndTrigger(wrapper, multilineText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(multilineText)
+    })
+
+    it('handles special characters correctly', async () => {
+      const widget = createMockWidget('normal')
+      const wrapper = mountComponent(widget, 'normal')
+
+      const specialText = 'special @#$%^&*()[]{}|\\:";\'<>?,./'
+      await setTextareaValueAndTrigger(wrapper, specialText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(specialText)
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const widget = createMockWidget('test', {}, undefined)
+      const wrapper = mountComponent(widget, 'test')
+
+      await setTextareaValueAndTrigger(wrapper, 'new value')
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('new value')
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('emits update:modelValue on blur', async () => {
+      const widget = createMockWidget('original')
+      const wrapper = mountComponent(widget, 'original')
+
+      await setTextareaValueAndTrigger(wrapper, 'updated')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('updated')
+    })
+
+    it('emits update:modelValue on input', async () => {
+      const widget = createMockWidget('start')
+      const wrapper = mountComponent(widget, 'start')
+
+      await setTextareaValueAndTrigger(wrapper, 'finish', 'input')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain('finish')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables textarea when readonly', () => {
+      const widget = createMockWidget('readonly test')
+      const wrapper = mountComponent(widget, 'readonly test', true)
+
+      const textarea = wrapper.find('textarea')
+      if (!(textarea.element instanceof HTMLTextAreaElement)) {
+        throw new Error(
+          'Textarea element not found or is not an HTMLTextAreaElement'
+        )
+      }
+      expect(textarea.element.disabled).toBe(true)
+    })
+  })
+
+  describe('Component Rendering', () => {
+    it('renders textarea component', () => {
+      const widget = createMockWidget('test value')
+      const wrapper = mountComponent(widget, 'test value')
+
+      const textarea = wrapper.find('textarea')
+      expect(textarea.exists()).toBe(true)
+    })
+
+    it('displays initial value in textarea', () => {
+      const widget = createMockWidget('initial content')
+      const wrapper = mountComponent(widget, 'initial content')
+
+      const textarea = wrapper.find('textarea')
+      if (!(textarea.element instanceof HTMLTextAreaElement)) {
+        throw new Error(
+          'Textarea element not found or is not an HTMLTextAreaElement'
+        )
+      }
+      expect(textarea.element.value).toBe('initial content')
+    })
+
+    it('uses widget name as placeholder when no placeholder provided', () => {
+      const widget = createMockWidget('test')
+      const wrapper = mountComponent(widget, 'test')
+
+      const textarea = wrapper.find('textarea')
+      expect(textarea.attributes('placeholder')).toBe('test_textarea')
+    })
+
+    it('uses provided placeholder when specified', () => {
+      const widget = createMockWidget('test')
+      const wrapper = mountComponent(
+        widget,
+        'test',
+        false,
+        'Custom placeholder'
+      )
+
+      const textarea = wrapper.find('textarea')
+      expect(textarea.attributes('placeholder')).toBe('Custom placeholder')
+    })
+
+    it('sets default rows attribute', () => {
+      const widget = createMockWidget('test')
+      const wrapper = mountComponent(widget, 'test')
+
+      const textarea = wrapper.find('textarea')
+      expect(textarea.attributes('rows')).toBe('3')
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles very long text', async () => {
+      const widget = createMockWidget('short')
+      const wrapper = mountComponent(widget, 'short')
+
+      const longText = 'a'.repeat(10000)
+      await setTextareaValueAndTrigger(wrapper, longText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(longText)
+    })
+
+    it('handles unicode characters', async () => {
+      const widget = createMockWidget('ascii')
+      const wrapper = mountComponent(widget, 'ascii')
+
+      const unicodeText = '🎨 Unicode: αβγ 中文 العربية 🚀'
+      await setTextareaValueAndTrigger(wrapper, unicodeText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(unicodeText)
+    })
+
+    it('handles text with tabs and spaces', async () => {
+      const widget = createMockWidget('normal')
+      const wrapper = mountComponent(widget, 'normal')
+
+      const formattedText = '\tIndented line\n  Spaced line\n\t\tDouble indent'
+      await setTextareaValueAndTrigger(wrapper, formattedText)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted?.[0]).toContain(formattedText)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
index 157da563e..bd7ac7818 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/WidgetTreeSelect.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.test.ts
new file mode 100644
index 000000000..fce247027
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.test.ts
@@ -0,0 +1,538 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import TreeSelect from 'primevue/treeselect'
+import type { TreeSelectProps } from 'primevue/treeselect'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+import WidgetTreeSelect, { type TreeNode } from './WidgetTreeSelect.vue'
+
+const createTreeData = (): TreeNode[] => [
+  {
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    children: [
+      {
+        key: '0-0',
+        label: 'Work',
+        data: 'Work Folder',
+        children: [
+          {
+            key: '0-0-0',
+            label: 'Expenses.doc',
+            data: 'Expenses Document',
+            leaf: true
+          },
+          {
+            key: '0-0-1',
+            label: 'Resume.doc',
+            data: 'Resume Document',
+            leaf: true
+          }
+        ]
+      },
+      {
+        key: '0-1',
+        label: 'Home',
+        data: 'Home Folder',
+        children: [
+          {
+            key: '0-1-0',
+            label: 'Invoices.txt',
+            data: 'Invoices for this month',
+            leaf: true
+          }
+        ]
+      }
+    ]
+  },
+  {
+    key: '1',
+    label: 'Events',
+    data: 'Events Folder',
+    children: [
+      { key: '1-0', label: 'Meeting', data: 'Meeting', leaf: true },
+      {
+        key: '1-1',
+        label: 'Product Launch',
+        data: 'Product Launch',
+        leaf: true
+      },
+      {
+        key: '1-2',
+        label: 'Report Review',
+        data: 'Report Review',
+        leaf: true
+      }
+    ]
+  }
+]
+
+describe('WidgetTreeSelect Tree Navigation', () => {
+  const createMockWidget = (
+    value: WidgetValue = null,
+    options: Partial<TreeSelectProps> = {},
+    callback?: (value: WidgetValue) => void
+  ): SimplifiedWidget<WidgetValue> => ({
+    name: 'test_treeselect',
+    type: 'object',
+    value,
+    options,
+    callback
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<WidgetValue>,
+    modelValue: WidgetValue,
+    readonly = false
+  ) => {
+    return mount(WidgetTreeSelect, {
+      global: {
+        plugins: [PrimeVue],
+        components: { TreeSelect }
+      },
+      props: {
+        widget,
+        modelValue,
+        readonly
+      }
+    })
+  }
+
+  const setTreeSelectValueAndEmit = async (
+    wrapper: ReturnType<typeof mount>,
+    value: unknown
+  ) => {
+    const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+    await treeSelect.vm.$emit('update:modelValue', value)
+    return treeSelect
+  }
+
+  describe('Component Rendering', () => {
+    it('renders treeselect component', () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.exists()).toBe(true)
+    })
+
+    it('displays tree options from widget options', () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(options)
+    })
+
+    it('displays initial selected value', () => {
+      const options = createTreeData()
+      const selectedValue = {
+        key: '0-0-0',
+        label: 'Expenses.doc',
+        data: 'Expenses Document',
+        leaf: true
+      }
+      const widget = createMockWidget(selectedValue, { options })
+      const wrapper = mountComponent(widget, selectedValue)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('modelValue')).toEqual(selectedValue)
+    })
+
+    it('applies small size styling', () => {
+      const widget = createMockWidget(null, { options: [] })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('size')).toBe('small')
+    })
+
+    it('applies text-xs class', () => {
+      const widget = createMockWidget(null, { options: [] })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.classes()).toContain('text-xs')
+    })
+  })
+
+  describe('Vue Event Emission', () => {
+    it('emits Vue event when selection changes', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options })
+      const wrapper = mountComponent(widget, null)
+
+      const selectedNode = { key: '0-0-0', label: 'Expenses.doc' }
+      await setTreeSelectValueAndEmit(wrapper, selectedNode)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([selectedNode])
+    })
+
+    it('emits Vue event when selection is cleared', async () => {
+      const options = createTreeData()
+      const initialValue = { key: '0-0-0', label: 'Expenses.doc' }
+      const widget = createMockWidget(initialValue, { options })
+      const wrapper = mountComponent(widget, initialValue)
+
+      await setTreeSelectValueAndEmit(wrapper, null)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([null])
+    })
+
+    it('handles callback when widget value changes', async () => {
+      const mockCallback = vi.fn()
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options }, mockCallback)
+      const wrapper = mountComponent(widget, null)
+
+      // Test that the treeselect has the callback widget
+      expect(widget.callback).toBe(mockCallback)
+
+      // Manually trigger the composable's onChange to test callback
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.exists()).toBe(true)
+    })
+
+    it('handles missing callback gracefully', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options }, undefined)
+      const wrapper = mountComponent(widget, null)
+
+      const selectedNode = { key: '0-1-0', label: 'Invoices.txt' }
+      await setTreeSelectValueAndEmit(wrapper, selectedNode)
+
+      // Should still emit Vue event
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([selectedNode])
+    })
+  })
+
+  describe('Tree Structure Handling', () => {
+    it('handles flat tree structure', () => {
+      const flatOptions: TreeNode[] = [
+        { key: 'item1', label: 'Item 1', leaf: true },
+        { key: 'item2', label: 'Item 2', leaf: true },
+        { key: 'item3', label: 'Item 3', leaf: true }
+      ]
+      const widget = createMockWidget(null, { options: flatOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(flatOptions)
+    })
+
+    it('handles nested tree structure', () => {
+      const nestedOptions = createTreeData()
+      const widget = createMockWidget(null, { options: nestedOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(nestedOptions)
+    })
+
+    it('handles tree with mixed leaf and parent nodes', () => {
+      const mixedOptions: TreeNode[] = [
+        { key: 'leaf1', label: 'Leaf Node', leaf: true },
+        {
+          key: 'parent1',
+          label: 'Parent Node',
+          children: [{ key: 'child1', label: 'Child Node', leaf: true }]
+        },
+        { key: 'leaf2', label: 'Another Leaf', leaf: true }
+      ]
+      const widget = createMockWidget(null, { options: mixedOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(mixedOptions)
+    })
+
+    it('handles deeply nested tree structure', () => {
+      const deepOptions: TreeNode[] = [
+        {
+          key: 'level1',
+          label: 'Level 1',
+          children: [
+            {
+              key: 'level2',
+              label: 'Level 2',
+              children: [
+                {
+                  key: 'level3',
+                  label: 'Level 3',
+                  children: [{ key: 'level4', label: 'Level 4', leaf: true }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+      const widget = createMockWidget(null, { options: deepOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(deepOptions)
+    })
+  })
+
+  describe('Selection Modes', () => {
+    it('handles single selection mode', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, {
+        options,
+        selectionMode: 'single'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const selectedNode = { key: '0-0-0', label: 'Expenses.doc' }
+      await setTreeSelectValueAndEmit(wrapper, selectedNode)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([selectedNode])
+    })
+
+    it('handles multiple selection mode', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, {
+        options,
+        selectionMode: 'multiple'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const selectedNodes = [
+        { key: '0-0-0', label: 'Expenses.doc' },
+        { key: '1-0', label: 'Meeting' }
+      ]
+      await setTreeSelectValueAndEmit(wrapper, selectedNodes)
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined()
+      expect(emitted![0]).toEqual([selectedNodes])
+    })
+
+    it('handles checkbox selection mode', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, {
+        options,
+        selectionMode: 'checkbox'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('selectionMode')).toBe('checkbox')
+    })
+  })
+
+  describe('Readonly Mode', () => {
+    it('disables treeselect when readonly', () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options })
+      const wrapper = mountComponent(widget, null, true)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('disabled')).toBe(true)
+    })
+
+    it('does not emit changes in readonly mode', async () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, { options })
+      const wrapper = mountComponent(widget, null, true)
+
+      // Try to emit a change (though the component should prevent it)
+      await setTreeSelectValueAndEmit(wrapper, { key: '0-0-0', label: 'Test' })
+
+      // The component will still emit the event, but the disabled prop should prevent interaction
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeDefined() // The event is emitted but the TreeSelect should be disabled
+    })
+  })
+
+  describe('Widget Options Handling', () => {
+    it('passes through valid widget options', () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, {
+        options,
+        placeholder: 'Select a node...',
+        filter: true,
+        showClear: true,
+        selectionMode: 'single'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('placeholder')).toBe('Select a node...')
+      expect(treeSelect.props('filter')).toBe(true)
+      expect(treeSelect.props('showClear')).toBe(true)
+      expect(treeSelect.props('selectionMode')).toBe('single')
+    })
+
+    it('excludes panel-related props', () => {
+      const options = createTreeData()
+      const widget = createMockWidget(null, {
+        options,
+        inputClass: 'custom-input',
+        inputStyle: { color: 'red' },
+        panelClass: 'custom-panel'
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      // These props should be filtered out by the widgetPropFilter
+      const inputClass = treeSelect.props('inputClass')
+      const inputStyle = treeSelect.props('inputStyle')
+
+      // Either undefined or null are acceptable as "excluded"
+      expect(inputClass == null).toBe(true)
+      expect(inputStyle == null).toBe(true)
+      expect(treeSelect.exists()).toBe(true)
+    })
+
+    it('handles empty options gracefully', () => {
+      const widget = createMockWidget(null, { options: [] })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual([])
+    })
+
+    it('handles missing options gracefully', () => {
+      const widget = createMockWidget(null)
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      // Should not crash, options might be undefined
+      expect(treeSelect.exists()).toBe(true)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles malformed tree nodes', () => {
+      const malformedOptions: unknown[] = [
+        { key: 'empty', label: 'Empty Object' }, // Valid object to prevent issues
+        { key: 'random', label: 'Random', randomProp: 'value' } // Object with extra properties
+      ]
+      const widget = createMockWidget(null, {
+        options: malformedOptions as TreeNode[]
+      })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(malformedOptions)
+    })
+
+    it('handles nodes with missing keys', () => {
+      const noKeyOptions = [
+        { key: 'generated-1', label: 'No Key 1', leaf: true },
+        { key: 'generated-2', label: 'No Key 2', leaf: true }
+      ] as TreeNode[]
+      const widget = createMockWidget(null, { options: noKeyOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(noKeyOptions)
+    })
+
+    it('handles nodes with missing labels', () => {
+      const noLabelOptions: TreeNode[] = [
+        { key: 'key1', leaf: true },
+        { key: 'key2', leaf: true }
+      ]
+      const widget = createMockWidget(null, { options: noLabelOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(noLabelOptions)
+    })
+
+    it('handles very large tree structure', () => {
+      const largeTree: TreeNode[] = Array.from({ length: 100 }, (_, i) => ({
+        key: `node${i}`,
+        label: `Node ${i}`,
+        children: Array.from({ length: 10 }, (_, j) => ({
+          key: `node${i}-${j}`,
+          label: `Child ${j}`,
+          leaf: true
+        }))
+      }))
+      const widget = createMockWidget(null, { options: largeTree })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toHaveLength(100)
+    })
+
+    it('handles tree with circular references safely', () => {
+      // Create nodes that could potentially have circular references
+      const circularOptions: TreeNode[] = [
+        {
+          key: 'parent',
+          label: 'Parent',
+          children: [{ key: 'child1', label: 'Child 1', leaf: true }]
+        }
+      ]
+      const widget = createMockWidget(null, { options: circularOptions })
+
+      expect(() => mountComponent(widget, null)).not.toThrow()
+    })
+
+    it('handles nodes with special characters', () => {
+      const specialCharOptions: TreeNode[] = [
+        { key: '@#$%^&*()', label: 'Special Chars @#$%', leaf: true },
+        {
+          key: '{}[]|\\:";\'<>?,./`~',
+          label: 'More Special {}[]|\\',
+          leaf: true
+        }
+      ]
+      const widget = createMockWidget(null, { options: specialCharOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(specialCharOptions)
+    })
+
+    it('handles unicode in node labels', () => {
+      const unicodeOptions: TreeNode[] = [
+        { key: 'unicode1', label: '🌟 Unicode Star', leaf: true },
+        { key: 'unicode2', label: '中文 Chinese', leaf: true },
+        { key: 'unicode3', label: 'العربية Arabic', leaf: true }
+      ]
+      const widget = createMockWidget(null, { options: unicodeOptions })
+      const wrapper = mountComponent(widget, null)
+
+      const treeSelect = wrapper.findComponent({ name: 'TreeSelect' })
+      expect(treeSelect.props('options')).toEqual(unicodeOptions)
+    })
+  })
+
+  describe('Integration with Layout', () => {
+    it('renders within WidgetLayoutField', () => {
+      const widget = createMockWidget(null, { options: [] })
+      const wrapper = mountComponent(widget, null)
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.exists()).toBe(true)
+      expect(layoutField.props('widget')).toEqual(widget)
+    })
+
+    it('passes widget name to layout field', () => {
+      const widget = createMockWidget(null, { options: [] })
+      widget.name = 'custom_treeselect'
+      const wrapper = mountComponent(widget, null)
+
+      const layoutField = wrapper.findComponent({ name: 'WidgetLayoutField' })
+      expect(layoutField.props('widget').name).toBe('custom_treeselect')
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
index 443ba5f9c..39c5b3d92 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetTreeSelect.vue
@@ -25,6 +25,15 @@ import {
 
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
 
+export type TreeNode = {
+  key: string
+  label?: string
+  data?: unknown
+  children?: TreeNode[]
+  leaf?: boolean
+  selectable?: boolean
+}
+
 const props = defineProps<{
   widget: SimplifiedWidget<any>
   modelValue: any
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 000000000..738d62028
--- /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 9b41b204a..905cc16fd 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 5d7e46f5d..e29e09437 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-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
-    >
-      {{ widget.name }}
-    </p>
-    <div
-      class="w-75"
-      @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/components/layout/index.ts b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
index 5de9f97aa..2ad3a4858 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/index.ts
@@ -1,4 +1,6 @@
-export const WidgetInputBaseClass = [
+import { cn } from '@/utils/tailwindUtil'
+
+export const WidgetInputBaseClass = cn([
   // Background
   'bg-zinc-500/10',
   // Outline
@@ -11,4 +13,4 @@ export const WidgetInputBaseClass = [
   '!rounded-lg',
   // Hover
   'hover:outline-blue-500/80'
-].join(' ')
+])
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget.ts
index bc307e3b0..b2e0fbd01 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 586cfb27e..59705458c 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -3,13 +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'
@@ -22,8 +23,6 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidgets
 } from '@/scripts/widgets'
-import { assetService } from '@/services/assetService'
-import { useSettingStore } from '@/stores/settingStore'
 
 import { useRemoteWidget } from './useRemoteWidget'
 
@@ -69,17 +68,31 @@ const addComboWidget = (
   )
 
   if (isUsingAssetAPI && isEligible) {
-    // Create button widget for Asset Browser
+    // Get the default value for the button text (currently selected model)
     const currentValue = getDefaultValue(inputSpec)
+    const displayLabel = currentValue ?? t('widgets.selectModel')
+
+    const assetBrowserDialog = useAssetBrowserDialog()
 
     const widget = node.addWidget(
-      'button',
+      'asset',
       inputSpec.name,
-      t('widgets.selectModel'),
-      () => {
-        console.log(
-          `Asset Browser would open here for:\nNode: ${node.type}\nWidget: ${inputSpec.name}\nCurrent Value:${currentValue}`
-        )
+      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)
+          }
+        })
       }
     )
 
@@ -100,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()
 
@@ -120,9 +136,12 @@ 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)
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
index c9017ea6c..ac0f9e5e9 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -2,12 +2,12 @@ import { clamp } from 'es-toolkit/compat'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import {
   type InputSpec,
   isFloatInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-import { useSettingStore } from '@/stores/settingStore'
+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 b6d923bd2..7c3c16d0a 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -8,12 +8,12 @@ import type {
   IBaseWidget,
   IWidgetOptions
 } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
+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 bf4e18fcb..28b1228cd 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/useIntWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
index d7b0719e9..21cc0512f 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
@@ -1,5 +1,6 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import {
   type InputSpec,
@@ -9,7 +10,6 @@ import {
   type ComfyWidgetConstructorV2,
   addValueControlWidget
 } from '@/scripts/widgets'
-import { useSettingStore } from '@/stores/settingStore'
 
 function onValueChange(this: INumericWidget, v: number) {
   // For integers, always round to the nearest step
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget.ts
index fd91330be..c3f200efa 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 9022ab8c1..36134e928 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 4766925ee..c449295c4 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useStringWidget.ts
@@ -1,11 +1,11 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import {
   type InputSpec,
   isStringInputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { app } from '@/scripts/app'
-import { type ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-import { useSettingStore } from '@/stores/settingStore'
+import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 
 const TRACKPAD_DETECTION_THRESHOLD = 50
 
diff --git a/src/renderer/extensions/vueNodes/widgets/testUtils.ts b/src/renderer/extensions/vueNodes/widgets/testUtils.ts
new file mode 100644
index 000000000..c8d112528
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/testUtils.ts
@@ -0,0 +1,33 @@
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+/**
+ * Creates a mock SimplifiedWidget for testing Vue Node widgets.
+ * This utility function is shared across widget component tests to ensure consistency.
+ */
+export function createMockWidget<T extends WidgetValue>(
+  value: T = null as T,
+  options: Record<string, any> = {},
+  callback?: (value: T) => void,
+  overrides: Partial<SimplifiedWidget<T>> = {}
+): SimplifiedWidget<T> {
+  return {
+    name: 'test_widget',
+    type: 'default',
+    value,
+    options,
+    callback,
+    ...overrides
+  }
+}
+
+/**
+ * Creates a mock file for testing file upload widgets.
+ */
+export function createMockFile(name: string, type: string, size = 1024): File {
+  const file = new File(['mock content'], name, { type })
+  Object.defineProperty(file, 'size', {
+    value: size,
+    writable: false
+  })
+  return file
+}
diff --git a/src/router.ts b/src/router.ts
index 69f1a249a..f28b46030 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/apiSchema.ts b/src/schemas/apiSchema.ts
index 3def57252..007b3e58d 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -1,8 +1,11 @@
 import { z } from 'zod'
 
 import { LinkMarkerShape } from '@/lib/litegraph/src/litegraph'
+import {
+  zComfyWorkflow,
+  zNodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 import { colorPalettesSchema } from '@/schemas/colorPaletteSchema'
-import { zComfyWorkflow, zNodeId } from '@/schemas/comfyWorkflowSchema'
 import { zKeybinding } from '@/schemas/keyBindingSchema'
 import { NodeBadgeMode } from '@/types/nodeSource'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
@@ -466,6 +469,8 @@ const zSettings = z.object({
   'Comfy.Minimap.RenderBypassState': z.boolean(),
   'Comfy.Minimap.RenderErrorState': z.boolean(),
   'Comfy.Canvas.NavigationMode': z.string(),
+  'Comfy.Canvas.LeftMouseClickBehavior': z.string(),
+  'Comfy.Canvas.MouseWheelScroll': z.string(),
   'Comfy.VueNodes.Enabled': z.boolean(),
   'Comfy.Assets.UseAssetAPI': z.boolean(),
   'Comfy-Desktop.AutoUpdate': z.boolean(),
diff --git a/src/schemas/assetSchema.ts b/src/schemas/assetSchema.ts
deleted file mode 100644
index 277efcbb0..000000000
--- a/src/schemas/assetSchema.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { z } from 'zod'
-
-// Zod schemas for asset API validation
-const zAsset = z.object({
-  id: z.string(),
-  name: z.string(),
-  tags: z.array(z.string()),
-  size: z.number(),
-  created_at: z.string().optional()
-})
-
-const zAssetResponse = z.object({
-  assets: z.array(zAsset).optional(),
-  total: z.number().optional(),
-  has_more: z.boolean().optional()
-})
-
-const zModelFolder = z.object({
-  name: z.string(),
-  folders: z.array(z.string())
-})
-
-// Export schemas following repository patterns
-export const assetResponseSchema = zAssetResponse
-
-// Export types derived from Zod schemas
-export type AssetResponse = z.infer<typeof zAssetResponse>
-export type ModelFolder = z.infer<typeof zModelFolder>
-
-// Common interfaces for API responses
-export interface ModelFile {
-  name: string
-  pathIndex: number
-}
-
-export interface ModelFolderInfo {
-  name: string
-  folders: string[]
-}
diff --git a/src/schemas/nodeDef/migration.ts b/src/schemas/nodeDef/migration.ts
index e5aa6d484..22d91c16e 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 9480face6..40b4ce04d 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -1,7 +1,18 @@
 import axios from 'axios'
 import { get } from 'es-toolkit/compat'
 
-import defaultClientFeatureFlags from '@/config/clientFeatureFlags.json'
+import defaultClientFeatureFlags from '@/config/clientFeatureFlags.json' with { type: 'json' }
+import type {
+  ModelFile,
+  ModelFolderInfo
+} from '@/platform/assets/schemas/assetSchema'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { type WorkflowTemplates } from '@/platform/workflow/templates/types/template'
+import type {
+  ComfyApiWorkflow,
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 import type {
   DisplayComponentWsMessage,
   EmbeddingsResponse,
@@ -30,16 +41,8 @@ import type {
   User,
   UserDataFullInfo
 } from '@/schemas/apiSchema'
-import type { ModelFile, ModelFolderInfo } from '@/schemas/assetSchema'
-import type {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON,
-  NodeId
-} from '@/schemas/comfyWorkflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
-import { useToastStore } from '@/stores/toastStore'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
 interface QueuePromptRequestBody {
   client_id: string
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 3c9b6bf7e..a5869be20 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -3,7 +3,6 @@ import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
-import { useWorkflowValidation } from '@/composables/useWorkflowValidation'
 import { st, t } from '@/i18n'
 import {
   LGraph,
@@ -14,18 +13,23 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { Vector2 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowValidation } from '@/platform/workflow/validation/composables/useWorkflowValidation'
+import {
+  type ComfyApiWorkflow,
+  type ComfyWorkflowJSON,
+  type ModelFile,
+  type NodeId,
+  isSubgraphDefinition
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
   ResultItem
 } from '@/schemas/apiSchema'
-import {
-  ComfyApiWorkflow,
-  type ComfyWorkflowJSON,
-  type ModelFile,
-  type NodeId,
-  isSubgraphDefinition
-} from '@/schemas/comfyWorkflowSchema'
 import {
   type ComfyNodeDef as ComfyNodeDefV1,
   isComboInputSpecV1,
@@ -43,7 +47,6 @@ import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
@@ -54,17 +57,14 @@ import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useModelStore } from '@/stores/modelStore'
 import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { ComfyWorkflow } from '@/stores/workflowStore'
 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 {
@@ -597,7 +597,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()
@@ -652,7 +655,7 @@ export class ComfyApp {
       if (opacity) adjustments.opacity = opacity
 
       if (useColorPaletteStore().completedActivePalette.light_theme) {
-        adjustments.lightness = 0.5
+        if (old_bgcolor) adjustments.lightness = 0.5
 
         // Lighten title bar of colored nodes on light theme
         if (old_color) {
@@ -839,24 +842,27 @@ export class ComfyApp {
     this.canvas.canvas.addEventListener<'litegraph:set-graph'>(
       'litegraph:set-graph',
       (e) => {
-        // Assertion: Not yet defined in litegraph.
         const { newGraph } = e.detail
 
-        const widgetIds: Record<string, BaseDOMWidget<object | string>> = {}
         const widgetStore = useDomWidgetStore()
 
-        for (const node of newGraph.nodes)
-          for (const w of node.widgets ?? [])
-            if (w instanceof DOMWidgetImpl && w.id) widgetIds[w.id] = w
+        const activeWidgets: Record<
+          string,
+          BaseDOMWidget<object | string>
+        > = Object.fromEntries(
+          newGraph.nodes
+            .flatMap((node) => node.widgets ?? [])
+            .filter((w) => w instanceof DOMWidgetImpl)
+            .map((w) => [w.id, w])
+        )
 
-        // Assertions: UnwrapRef
-        for (const widgetId of widgetStore.widgetStates.keys()) {
-          const widgetState = widgetStore.widgetStates.get(widgetId)
-          //Unreachable, but required for type safety
-          if (!widgetState) continue
-          if (widgetId in widgetIds) {
+        for (const [
+          widgetId,
+          widgetState
+        ] of widgetStore.widgetStates.entries()) {
+          if (widgetId in activeWidgets) {
             widgetState.active = true
-            widgetState.widget = widgetIds[widgetId]
+            widgetState.widget = activeWidgets[widgetId]
           } else {
             widgetState.active = false
           }
@@ -1120,6 +1126,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'
@@ -1767,9 +1780,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 125e93fe3..f2b2afc30 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -3,11 +3,15 @@ import * as jsondiffpatch from 'jsondiffpatch'
 import log from 'loglevel'
 
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  ComfyWorkflow,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
-import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
 import { api } from './api'
 import type { ComfyApp } from './app'
@@ -83,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/defaultGraph.ts b/src/scripts/defaultGraph.ts
index 8b853c45a..bfec5f8c7 100644
--- a/src/scripts/defaultGraph.ts
+++ b/src/scripts/defaultGraph.ts
@@ -1,4 +1,4 @@
-import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 export const defaultGraph: ComfyWorkflowJSON = {
   last_node_id: 9,
diff --git a/src/scripts/metadata/avif.ts b/src/scripts/metadata/avif.ts
index 70e5dcf62..c0d747d9e 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 edbee9753..835c2502d 100644
--- a/src/scripts/metadata/ebml.ts
+++ b/src/scripts/metadata/ebml.ts
@@ -1,14 +1,14 @@
 import {
   type ComfyApiWorkflow,
   type ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+} 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 37e65cb00..83a5c3c3e 100644
--- a/src/scripts/metadata/gltf.ts
+++ b/src/scripts/metadata/gltf.ts
@@ -1,14 +1,14 @@
 import {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+  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 21734b6bd..a9a7f8826 100644
--- a/src/scripts/metadata/isobmff.ts
+++ b/src/scripts/metadata/isobmff.ts
@@ -1,12 +1,12 @@
 import {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+  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 90dc95b10..e947956d3 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/proxyWidget.ts b/src/scripts/proxyWidget.ts
index 8e803ffde..bcc2179b7 100644
--- a/src/scripts/proxyWidget.ts
+++ b/src/scripts/proxyWidget.ts
@@ -7,10 +7,10 @@ import type {
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
 import { disconnectedWidget } from '@/lib/litegraph/src/widgets/DisconnectedWidget'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { parseProxyWidgets } from '@/schemas/proxyWidget'
 import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
 
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 8ab6814c8..860e45caf 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -1,9 +1,9 @@
-import { WORKFLOW_ACCEPT_STRING } from '@/constants/supportedWorkflowFormats'
-import { type StatusWsMessageStatus, TaskItem } from '@/schemas/apiSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
+import { type StatusWsMessageStatus, type TaskItem } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import { api } from './api'
diff --git a/src/scripts/ui/components/button.ts b/src/scripts/ui/components/button.ts
index d4601c868..7a4aae6b6 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 fbea5f2ca..04bb38149 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/scripts/ui/settings.ts b/src/scripts/ui/settings.ts
index 1a4ae12e0..8f1bfca16 100644
--- a/src/scripts/ui/settings.ts
+++ b/src/scripts/ui/settings.ts
@@ -1,9 +1,9 @@
 import { t } from '@/i18n'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { SettingParams } from '@/platform/settings/types'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { Settings } from '@/schemas/apiSchema'
 import type { ComfyApp } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
-import type { SettingParams } from '@/types/settingTypes'
 
 import { ComfyDialog } from './dialog'
 
diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts
index 357dc2bf1..3366b8489 100644
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -5,6 +5,7 @@ import type {
   IComboWidget,
   IStringWidget
 } from '@/lib/litegraph/src/types/widgets'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget'
 import { useChartWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChartWidget'
 import { useColorWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useColorWidget'
@@ -24,7 +25,6 @@ import { useTreeSelectWidget } from '@/renderer/extensions/vueNodes/widgets/comp
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
 import type { InputSpec as InputSpecV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
-import { useSettingStore } from '@/stores/settingStore'
 
 import type { ComfyApp } from './app'
 import './domWidget'
diff --git a/src/services/audioService.ts b/src/services/audioService.ts
index 7621e3037..f2b03cd67 100644
--- a/src/services/audioService.ts
+++ b/src/services/audioService.ts
@@ -1,8 +1,8 @@
 import { register } from 'extendable-media-recorder'
 import { connect } from 'extendable-media-recorder-wav-encoder'
 
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
-import { useToastStore } from '@/stores/toastStore'
 
 export interface AudioRecordingError {
   type: 'permission' | 'not_supported' | 'encoder' | 'recording' | 'unknown'
diff --git a/src/services/colorPaletteService.ts b/src/services/colorPaletteService.ts
index 549b99bde..cf32ee3b9 100644
--- a/src/services/colorPaletteService.ts
+++ b/src/services/colorPaletteService.ts
@@ -4,15 +4,12 @@ import { fromZodError } from 'zod-validation-error'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import {
-  Colors,
-  type Palette,
-  paletteSchema
-} from '@/schemas/colorPaletteSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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'
-import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 export const useColorPaletteService = () => {
diff --git a/src/services/comfyRegistryService.ts b/src/services/comfyRegistryService.ts
index 0221bd00c..753d9f23f 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 a951bacf7..32eb9d6df 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 f5e720ce3..fb844b448 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -1,36 +1,36 @@
 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 SettingDialogContent from '@/components/dialog/content/SettingDialogContent.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'
 import { t } from '@/i18n'
+import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import {
   type DialogComponentProps,
   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/extensionService.ts b/src/services/extensionService.ts
index 1fd92b256..26b67fba7 100644
--- a/src/services/extensionService.ts
+++ b/src/services/extensionService.ts
@@ -1,11 +1,12 @@
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { KeybindingImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import type { ComfyExtension } from '@/types/comfy'
@@ -72,6 +73,13 @@ export const useExtensionService = () => {
         }
       })()
     }
+
+    if (extension.onAuthUserResolved) {
+      const { onUserResolved } = useCurrentUser()
+      onUserResolved((user) => {
+        void extension.onAuthUserResolved?.(user, app)
+      })
+    }
   }
 
   /**
diff --git a/src/services/keybindingService.ts b/src/services/keybindingService.ts
index 7503bdb5a..ed5049246 100644
--- a/src/services/keybindingService.ts
+++ b/src/services/keybindingService.ts
@@ -1,4 +1,6 @@
 import { CORE_KEYBINDINGS } from '@/constants/coreKeybindings'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import {
@@ -6,7 +8,6 @@ import {
   KeybindingImpl,
   useKeybindingStore
 } from '@/stores/keybindingStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 export const useKeybindingService = () => {
   const keybindingStore = useKeybindingStore()
@@ -14,6 +15,19 @@ export const useKeybindingService = () => {
   const settingStore = useSettingStore()
   const dialogStore = useDialogStore()
 
+  // Helper function to determine if an event should be forwarded to canvas
+  const shouldForwardToCanvas = (event: KeyboardEvent): boolean => {
+    // Don't forward if modifier keys are pressed (except shift)
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return false
+    }
+
+    // Keys that LiteGraph handles but aren't in core keybindings
+    const canvasKeys = ['Delete', 'Backspace']
+
+    return canvasKeys.includes(event.key)
+  }
+
   const keybindHandler = async function (event: KeyboardEvent) {
     const keyCombo = KeyComboImpl.fromEvent(event)
     if (keyCombo.isModifier) {
@@ -26,6 +40,7 @@ export const useKeybindingService = () => {
       keyCombo.isReservedByTextInput &&
       (target.tagName === 'TEXTAREA' ||
         target.tagName === 'INPUT' ||
+        target.contentEditable === 'true' ||
         (target.tagName === 'SPAN' &&
           target.classList.contains('property_value')))
     ) {
@@ -53,6 +68,20 @@ export const useKeybindingService = () => {
       return
     }
 
+    // Forward unhandled canvas-targeted events to LiteGraph
+    if (!keybinding && shouldForwardToCanvas(event)) {
+      const canvas = app.canvas
+      if (
+        canvas &&
+        canvas.processKey &&
+        typeof canvas.processKey === 'function'
+      ) {
+        // Let LiteGraph handle the event
+        canvas.processKey(event)
+        return
+      }
+    }
+
     // Only clear dialogs if not using modifiers
     if (event.ctrlKey || event.altKey || event.metaKey) {
       return
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 8658b472b..0aa25889f 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -13,10 +13,10 @@ import {
   LGraphEventMode,
   LGraphNode,
   LiteGraph,
+  type Point,
   RenderShape,
   type Subgraph,
   SubgraphNode,
-  type Vector2,
   createBounds
 } from '@/lib/litegraph/src/litegraph'
 import type {
@@ -25,7 +25,11 @@ import type {
   ISerialisableNodeOutput,
   ISerialisedNode
 } from '@/lib/litegraph/src/types/serialisation'
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import type {
   ComfyNodeDef as ComfyNodeDefV2,
@@ -38,14 +42,10 @@ import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
 import { $el } from '@/scripts/ui'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
-import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   isImageNode,
@@ -1002,7 +1002,7 @@ export const useLitegraphService = () => {
     return node
   }
 
-  function getCanvasCenter(): Vector2 {
+  function getCanvasCenter(): Point {
     const dpi = Math.max(window.devicePixelRatio ?? 1, 1)
     const [x, y, w, h] = app.canvas.ds.visible_area
     return [x + w / dpi / 2, y + h / dpi / 2]
diff --git a/src/services/load3dService.ts b/src/services/load3dService.ts
index 3ea5cf8a7..770d3991e 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 '@/schemas/comfyWorkflowSchema'
+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 65f87a43c..b2e24c29e 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/newUserService.ts b/src/services/newUserService.ts
index ff4a76f03..fff9eb72c 100644
--- a/src/services/newUserService.ts
+++ b/src/services/newUserService.ts
@@ -1,4 +1,4 @@
-import type { useSettingStore } from '@/stores/settingStore'
+import type { useSettingStore } from '@/platform/settings/settingStore'
 
 let pendingCallbacks: Array<() => Promise<void>> = []
 let isNewUserDetermined = false
diff --git a/src/services/nodeOrganizationService.ts b/src/services/nodeOrganizationService.ts
index e96c61e5f..be641610d 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 39bb23e57..d2388fc7b 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 ee22ceb48..7edf98580 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 865016e4d..b16bf9ca9 100644
--- a/src/services/subgraphService.ts
+++ b/src/services/subgraphService.ts
@@ -1,9 +1,9 @@
-import {
-  type ExportedSubgraph,
-  type ExportedSubgraphInstance,
-  type Subgraph
+import type {
+  ExportedSubgraph,
+  ExportedSubgraphInstance,
+  Subgraph
 } from '@/lib/litegraph/src/litegraph'
-import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
diff --git a/src/stores/aboutPanelStore.ts b/src/stores/aboutPanelStore.ts
index cdb626095..de17df566 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 493884dd0..77da8c41b 100644
--- a/src/stores/apiKeyAuthStore.ts
+++ b/src/stores/apiKeyAuthStore.ts
@@ -4,10 +4,10 @@ import { computed, ref, watch } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { useToastStore } from '@/stores/toastStore'
-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/domWidgetStore.ts b/src/stores/domWidgetStore.ts
index d561b5bc5..6ad25d6c0 100644
--- a/src/stores/domWidgetStore.ts
+++ b/src/stores/domWidgetStore.ts
@@ -57,6 +57,13 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
     if (state) state.active = false
   }
 
+  const setWidget = (widget: BaseDOMWidget) => {
+    const state = widgetStates.value.get(widget.id)
+    if (!state) return
+    state.active = true
+    state.widget = widget
+  }
+
   const clear = () => {
     widgetStates.value.clear()
   }
@@ -69,6 +76,7 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
     unregisterWidget,
     activateWidget,
     deactivateWidget,
+    setWidget,
     clear
   }
 })
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index 44bb13d2d..8791ab4e1 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -5,6 +5,14 @@ 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 type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type {
+  ComfyNode,
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type {
   DisplayComponentWsMessage,
   ExecutedWsMessage,
@@ -17,20 +25,12 @@ import type {
   ProgressTextWsMessage,
   ProgressWsMessage
 } from '@/schemas/apiSchema'
-import type {
-  ComfyNode,
-  ComfyWorkflowJSON,
-  NodeId
-} from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { createNodeLocatorId } from '@/types/nodeIdentification'
 
-import { useCanvasStore } from './graphStore'
-import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
-
 interface QueuedPrompt {
   /**
    * The nodes that are queued to be executed. The key is the node id and the
@@ -43,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()
@@ -55,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
@@ -132,16 +160,20 @@ export const useExecutionStore = defineStore('execution', () => {
 
   // Easily access all currently executing node IDs
   const executingNodeIds = computed<NodeId[]>(() => {
-    return Object.entries(nodeProgressStates)
+    return Object.entries(nodeProgressStates.value)
       .filter(([_, state]) => state.state === 'running')
       .map(([nodeId, _]) => nodeId)
   })
 
   // @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
@@ -159,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(() =>
@@ -220,6 +222,19 @@ export const useExecutionStore = defineStore('execution', () => {
     return total > 0 ? done / total : 0
   })
 
+  const lastExecutionErrorNodeLocatorId = computed(() => {
+    const err = lastExecutionError.value
+    if (!err) return null
+    return executionIdToNodeLocatorId(String(err.node_id))
+  })
+
+  const lastExecutionErrorNodeId = computed(() => {
+    const locator = lastExecutionErrorNodeLocatorId.value
+    if (!locator) return null
+    const localId = workflowStore.nodeLocatorIdToNodeId(locator)
+    return localId != null ? String(localId) : null
+  })
+
   function bindExecutionEvents() {
     api.addEventListener('execution_start', handleExecutionStart)
     api.addEventListener('execution_cached', handleExecutionCached)
@@ -410,62 +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,
-    /**
-     * The id of the node that is currently being executed (backward compatibility)
-     */
+    lastExecutionErrorNodeId,
     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 8f2af6439..698efff3e 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 6747f08f5..848eb0ae7 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -1,7 +1,10 @@
+import { useTimeoutFn } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-import { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
-import {
+import type { LGraphNode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type {
   ExecutedWsMessage,
   ResultItem,
   ResultItemType
@@ -9,11 +12,12 @@ import {
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import type { NodeLocatorId } from '@/types/nodeIdentification'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
 
+const PREVIEW_REVOKE_DELAY_MS = 400
+
 const createOutputs = (
   filenames: string[],
   type: ResultItemType,
@@ -35,6 +39,25 @@ interface SetOutputOptions {
 export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const { nodeIdToNodeLocatorId, nodeToNodeLocatorId } = useWorkflowStore()
   const { executionIdToNodeLocatorId } = useExecutionStore()
+  const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
+
+  function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
+    scheduledRevoke[locator]?.stop()
+
+    const { stop } = useTimeoutFn(() => {
+      delete scheduledRevoke[locator]
+      cb()
+    }, PREVIEW_REVOKE_DELAY_MS)
+
+    scheduledRevoke[locator] = { stop }
+  }
+
+  const nodeOutputs = ref<Record<string, ExecutedWsMessage['output']>>({})
+
+  // Reactive state for node preview images - mirrors app.nodePreviewImages
+  const nodePreviewImages = ref<Record<string, string[]>>(
+    app.nodePreviewImages || {}
+  )
 
   function getNodeOutputs(
     node: LGraphNode
@@ -124,6 +147,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
 
     app.nodeOutputs[nodeLocatorId] = outputs
+    nodeOutputs.value[nodeLocatorId] = outputs
   }
 
   function setNodeOutputs(
@@ -185,8 +209,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   ) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -201,7 +229,12 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     previewImages: string[]
   ) {
     const nodeLocatorId = nodeIdToNodeLocatorId(nodeId)
+    if (scheduledRevoke[nodeLocatorId]) {
+      scheduledRevoke[nodeLocatorId].stop()
+      delete scheduledRevoke[nodeLocatorId]
+    }
     app.nodePreviewImages[nodeLocatorId] = previewImages
+    nodePreviewImages.value[nodeLocatorId] = previewImages
   }
 
   /**
@@ -213,8 +246,9 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   function revokePreviewsByExecutionId(executionId: string) {
     const nodeLocatorId = executionIdToNodeLocatorId(executionId)
     if (!nodeLocatorId) return
-
-    revokePreviewsByLocatorId(nodeLocatorId)
+    scheduleRevoke(nodeLocatorId, () =>
+      revokePreviewsByLocatorId(nodeLocatorId)
+    )
   }
 
   /**
@@ -232,6 +266,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
 
     delete app.nodePreviewImages[nodeLocatorId]
+    delete nodePreviewImages.value[nodeLocatorId]
   }
 
   /**
@@ -248,6 +283,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
       }
     }
     app.nodePreviewImages = {}
+    nodePreviewImages.value = {}
   }
 
   /**
@@ -264,17 +300,66 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     }
   }
 
+  /**
+   * Remove node outputs for a specific node
+   * Clears both outputs and preview images
+   */
+  function removeNodeOutputs(nodeId: number | string) {
+    const nodeLocatorId = nodeIdToNodeLocatorId(Number(nodeId))
+    if (!nodeLocatorId) return false
+
+    // Clear from app.nodeOutputs
+    const hadOutputs = !!app.nodeOutputs[nodeLocatorId]
+    delete app.nodeOutputs[nodeLocatorId]
+
+    // Clear from reactive state
+    delete nodeOutputs.value[nodeLocatorId]
+
+    // Clear preview images
+    if (app.nodePreviewImages[nodeLocatorId]) {
+      delete app.nodePreviewImages[nodeLocatorId]
+      delete nodePreviewImages.value[nodeLocatorId]
+    }
+
+    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,
     getNodeImageUrls,
     getNodePreviews,
+    getPreviewParam,
+
+    // Setters
     setNodeOutputs,
     setNodeOutputsByExecutionId,
     setNodePreviewsByExecutionId,
     setNodePreviewsByNodeId,
+
+    // Cleanup
     revokePreviewsByExecutionId,
     revokeAllPreviews,
     revokeSubgraphPreviews,
-    getPreviewParam
+    removeNodeOutputs,
+    restoreOutputs,
+    resetAllOutputsAndPreviews,
+
+    // State
+    nodeOutputs,
+    nodePreviewImages
   }
 })
diff --git a/src/stores/keybindingStore.ts b/src/stores/keybindingStore.ts
index d9c64af84..76a21120c 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 39066ac28..0a24769a1 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/modelStore.ts b/src/stores/modelStore.ts
index 34856c155..16015a9d2 100644
--- a/src/stores/modelStore.ts
+++ b/src/stores/modelStore.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import type { ModelFile } from '@/schemas/assetSchema'
+import type { ModelFile } from '@/platform/assets/schemas/assetSchema'
+import { assetService } from '@/platform/assets/services/assetService'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
-import { assetService } from '@/services/assetService'
-import { useSettingStore } from '@/stores/settingStore'
 
 /** (Internal helper) finds a value in a metadata object from any of a list of keys. */
 function _findInMetadata(metadata: any, ...keys: string[]): string | null {
diff --git a/src/stores/modelToNodeStore.ts b/src/stores/modelToNodeStore.ts
index fc78dc1e5..4f7925294 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 e3eb22d86..55ffebf23 100644
--- a/src/stores/nodeBookmarkStore.ts
+++ b/src/stores/nodeBookmarkStore.ts
@@ -2,13 +2,14 @@ import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 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'
-import { useSettingStore } from './settingStore'
 
 const BOOKMARK_SETTING_ID = 'Comfy.NodeLibrary.Bookmarks.V2'
 
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index f13d921e2..4f65647a7 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -292,9 +292,9 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
   const showDeprecated = ref(false)
   const showExperimental = ref(false)
   const nodeDefFilters = ref<NodeDefFilter[]>([])
-  const subgraphStore = useSubgraphStore()
 
   const nodeDefs = computed(() => {
+    const subgraphStore = useSubgraphStore()
     return [
       ...Object.values(nodeDefsByName.value),
       ...subgraphStore.subgraphBlueprints
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 4369f2782..5cb754ca6 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -2,6 +2,10 @@ import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { computed, ref, toRaw } from 'vue'
 
+import type {
+  ComfyWorkflowJSON,
+  NodeId
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 import type {
   ResultItem,
   StatusWsMessageStatus,
@@ -11,7 +15,6 @@ import type {
   TaskStatus,
   TaskType
 } from '@/schemas/apiSchema'
-import type { ComfyWorkflowJSON, NodeId } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
 import type { ComfyApp } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
diff --git a/src/stores/serverConfigStore.ts b/src/stores/serverConfigStore.ts
index 3781d0ab5..acbd61dd8 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/subgraphNavigationStore.ts b/src/stores/subgraphNavigationStore.ts
index 0ff72f205..b98629951 100644
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -4,13 +4,12 @@ import { computed, ref, shallowRef, watch } from 'vue'
 
 import type { DragAndScaleState } from '@/lib/litegraph/src/DragAndScale'
 import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
 import { isNonNullish } from '@/utils/typeGuardUtil'
 
-import { useCanvasStore } from './graphStore'
-import { useWorkflowStore } from './workflowStore'
-
 /**
  * Stores the current subgraph navigation state; a stack representing subgraph
  * navigation history from the root graph to the subgraph that is currently
diff --git a/src/stores/subgraphStore.ts b/src/stores/subgraphStore.ts
index d9679c9cb..cf6962e33 100644
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -3,30 +3,30 @@ import { computed, ref } from 'vue'
 
 import { t } from '@/i18n'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
-import type { NodeError } from '@/schemas/apiSchema'
+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,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import type {
   ComfyNode,
   ComfyWorkflowJSON,
   NodeId
-} from '@/schemas/comfyWorkflowSchema'
+} from '@/platform/workflow/validation/schemas/workflowSchema'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import type { NodeError } from '@/schemas/apiSchema'
 import type {
   ComfyNodeDef as ComfyNodeDefV1,
   InputSpec
 } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
-import { useWorkflowService } from '@/services/workflowService'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
-import { UserFile } from '@/stores/userFileStore'
-import {
-  ComfyWorkflow,
-  LoadedComfyWorkflow,
-  useWorkflowStore
-} from '@/stores/workflowStore'
+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 383bab6b0..f2742f3e3 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 b22ac17b7..be4f3efc8 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 1fd95babe..017c2e0b2 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/searchBoxStore.ts b/src/stores/workspace/searchBoxStore.ts
index 92e9cd998..f5acff936 100644
--- a/src/stores/workspace/searchBoxStore.ts
+++ b/src/stores/workspace/searchBoxStore.ts
@@ -4,7 +4,7 @@ import { computed, ref, shallowRef } from 'vue'
 
 import type NodeSearchBoxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 export const useSearchBoxStore = defineStore('searchBox', () => {
   const settingStore = useSettingStore()
diff --git a/src/stores/workspace/sidebarTabStore.ts b/src/stores/workspace/sidebarTabStore.ts
index f5d5bde8c..ad4cc7d8c 100644
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -5,11 +5,11 @@ import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLib
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { useQueueSidebarTab } from '@/composables/sidebarTabs/useQueueSidebarTab'
 import { useSubgraphNodeTab } from '@/composables/sidebarTabs/useSubgraphNodeTab'
-import { useWorkflowsSidebarTab } from '@/composables/sidebarTabs/useWorkflowsSidebarTab'
 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/stores/workspaceStore.ts b/src/stores/workspaceStore.ts
index 3568aae8c..4b5b03df6 100644
--- a/src/stores/workspaceStore.ts
+++ b/src/stores/workspaceStore.ts
@@ -1,6 +1,9 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { Settings } from '@/schemas/apiSchema'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useDialogService } from '@/services/dialogService'
@@ -10,9 +13,6 @@ import { useApiKeyAuthStore } from './apiKeyAuthStore'
 import { useCommandStore } from './commandStore'
 import { useFirebaseAuthStore } from './firebaseAuthStore'
 import { useQueueSettingsStore } from './queueStore'
-import { useSettingStore } from './settingStore'
-import { useToastStore } from './toastStore'
-import { useWorkflowStore } from './workflowStore'
 import { useBottomPanelStore } from './workspace/bottomPanelStore'
 import { useSidebarTabStore } from './workspace/sidebarTabStore'
 
diff --git a/src/types/algoliasearch-lite.d.ts b/src/types/algoliasearch-lite.d.ts
index 1514d272a..6a2be58ae 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/authTypes.ts b/src/types/authTypes.ts
index 07bb43dd6..5f3891bd5 100644
--- a/src/types/authTypes.ts
+++ b/src/types/authTypes.ts
@@ -7,3 +7,7 @@ export type ApiKeyAuthHeader = {
 }
 
 export type AuthHeader = LoggedInAuthHeader | ApiKeyAuthHeader
+
+export interface AuthUserInfo {
+  id: string
+}
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 491380f85..0ce8d89dc 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -1,13 +1,14 @@
-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 { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { SettingParams } from '@/platform/settings/types'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { ComfyApp } from '@/scripts/app'
 import type { ComfyWidgetConstructor } from '@/scripts/widgets'
 import type { ComfyCommand } from '@/stores/commandStore'
+import type { AuthUserInfo } from '@/types/authTypes'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
-import type { SettingParams } from '@/types/settingTypes'
 
 type Widgets = Record<string, ComfyWidgetConstructor>
 
@@ -166,5 +167,12 @@ export interface ComfyExtension {
     missingNodeTypes: MissingNodeType[]
   ): Promise<void> | void
 
+  /**
+   * Fired whenever authentication resolves, providing the anonymized user id..
+   * Extensions can register at any time and will receive the latest value immediately.
+   * This is an experimental API and may be changed or removed in the future.
+   */
+  onAuthUserResolved?(user: AuthUserInfo, app: ComfyApp): Promise<void> | void
+
   [key: string]: any
 }
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index 0ba93043b..bc2b920ba 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 8b6242087..6947f433f 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 1c6ea7652..0f5dee17d 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -5,12 +5,11 @@ import type {
   ExecutionId
 } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import type { DOMWidget, DOMWidgetOptions } from '@/scripts/domWidget'
 
-import type { NodeId } from '../schemas/comfyWorkflowSchema'
-
 /** ComfyUI extensions of litegraph */
 declare module '@/lib/litegraph/src/types/widgets' {
   interface IWidgetOptions {
@@ -83,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/metadataTypes.ts b/src/types/metadataTypes.ts
index f4989c3c1..943e39ae7 100644
--- a/src/types/metadataTypes.ts
+++ b/src/types/metadataTypes.ts
@@ -1,7 +1,7 @@
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 
 /**
  * Tag names used in ComfyUI metadata
diff --git a/src/types/nodeIdentification.ts b/src/types/nodeIdentification.ts
index 038f28449..d9a299c39 100644
--- a/src/types/nodeIdentification.ts
+++ b/src/types/nodeIdentification.ts
@@ -1,4 +1,4 @@
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 /**
  * A globally unique identifier for nodes that maintains consistency across
diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
index 27be67f11..7dbc5f270 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 28d4bb15b..06ef1e3e0 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/colorUtil.ts b/src/utils/colorUtil.ts
index e6df94953..020b83fbb 100644
--- a/src/utils/colorUtil.ts
+++ b/src/utils/colorUtil.ts
@@ -1,9 +1,20 @@
 import { memoize } from 'es-toolkit/compat'
 
 type RGB = { r: number; g: number; b: number }
+export interface HSB {
+  h: number
+  s: number
+  b: number
+}
 type HSL = { h: number; s: number; l: number }
 type HSLA = { h: number; s: number; l: number; a: number }
-type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'
+type ColorFormatInternal = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'
+export type ColorFormat = 'hex' | 'rgb' | 'hsb'
+interface HSV {
+  h: number
+  s: number
+  v: number
+}
 
 export interface ColorAdjustOptions {
   lightness?: number
@@ -59,6 +70,65 @@ export function hexToRgb(hex: string): RGB {
   return { r, g, b }
 }
 
+export function rgbToHex({ r, g, b }: RGB): string {
+  const toHex = (n: number) =>
+    Math.max(0, Math.min(255, Math.round(n)))
+      .toString(16)
+      .padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+export function hsbToRgb({ h, s, b }: HSB): RGB {
+  // Normalize
+  const hh = ((h % 360) + 360) % 360
+  const ss = Math.max(0, Math.min(100, s)) / 100
+  const vv = Math.max(0, Math.min(100, b)) / 100
+
+  const c = vv * ss
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1))
+  const m = vv - c
+
+  let rp = 0,
+    gp = 0,
+    bp = 0
+
+  if (hh < 60) {
+    rp = c
+    gp = x
+    bp = 0
+  } else if (hh < 120) {
+    rp = x
+    gp = c
+    bp = 0
+  } else if (hh < 180) {
+    rp = 0
+    gp = c
+    bp = x
+  } else if (hh < 240) {
+    rp = 0
+    gp = x
+    bp = c
+  } else if (hh < 300) {
+    rp = x
+    gp = 0
+    bp = c
+  } else {
+    rp = c
+    gp = 0
+    bp = x
+  }
+
+  return {
+    r: Math.floor((rp + m) * 255),
+    g: Math.floor((gp + m) * 255),
+    b: Math.floor((bp + m) * 255)
+  }
+}
+
+/**
+ * Normalize various color inputs (hex, rgb/rgba, hsl/hsla, hsb string/object)
+ * into lowercase #rrggbb. Falls back to #000000 on invalid inputs.
+ */
 export function parseToRgb(color: string): RGB {
   const format = identifyColorFormat(color)
   if (!format) return { r: 0, g: 0, b: 0 }
@@ -112,7 +182,7 @@ export function parseToRgb(color: string): RGB {
   }
 }
 
-const identifyColorFormat = (color: string): ColorFormat | null => {
+const identifyColorFormat = (color: string): ColorFormatInternal | null => {
   if (!color) return null
   if (color.startsWith('#') && (color.length === 4 || color.length === 7))
     return 'hex'
@@ -133,7 +203,73 @@ const isHSLA = (color: unknown): color is HSLA => {
   )
 }
 
-function parseToHSLA(color: string, format: ColorFormat): HSLA | null {
+export function isColorFormat(v: unknown): v is ColorFormat {
+  return v === 'hex' || v === 'rgb' || v === 'hsb'
+}
+
+function isHSBObject(v: unknown): v is HSB {
+  if (!v || typeof v !== 'object') return false
+  const rec = v as Record<string, unknown>
+  return (
+    typeof rec.h === 'number' &&
+    Number.isFinite(rec.h) &&
+    typeof rec.s === 'number' &&
+    Number.isFinite(rec.s) &&
+    typeof (rec as Record<string, unknown>).b === 'number' &&
+    Number.isFinite((rec as Record<string, number>).b!)
+  )
+}
+
+function isHSVObject(v: unknown): v is HSV {
+  if (!v || typeof v !== 'object') return false
+  const rec = v as Record<string, unknown>
+  return (
+    typeof rec.h === 'number' &&
+    Number.isFinite(rec.h) &&
+    typeof rec.s === 'number' &&
+    Number.isFinite(rec.s) &&
+    typeof (rec as Record<string, unknown>).v === 'number' &&
+    Number.isFinite((rec as Record<string, number>).v!)
+  )
+}
+
+export function toHexFromFormat(val: unknown, format: ColorFormat): string {
+  if (format === 'hex' && typeof val === 'string') {
+    const raw = val.trim().toLowerCase()
+    if (!raw) return '#000000'
+    if (/^[0-9a-f]{3}$/.test(raw)) return `#${raw}`
+    if (/^#[0-9a-f]{3}$/.test(raw)) return raw
+    if (/^[0-9a-f]{6}$/.test(raw)) return `#${raw}`
+    if (/^#[0-9a-f]{6}$/.test(raw)) return raw
+    return '#000000'
+  }
+
+  if (format === 'rgb' && typeof val === 'string') {
+    const rgb = parseToRgb(val)
+    return rgbToHex(rgb).toLowerCase()
+  }
+
+  if (format === 'hsb') {
+    if (isHSBObject(val)) {
+      return rgbToHex(hsbToRgb(val)).toLowerCase()
+    }
+    if (isHSVObject(val)) {
+      const { h, s, v } = val
+      return rgbToHex(hsbToRgb({ h, s, b: v })).toLowerCase()
+    }
+    if (typeof val === 'string') {
+      const nums = val.match(/\d+(?:\.\d+)?/g)?.map(Number) || []
+      if (nums.length >= 3) {
+        return rgbToHex(
+          hsbToRgb({ h: nums[0], s: nums[1], b: nums[2] })
+        ).toLowerCase()
+      }
+    }
+  }
+  return '#000000'
+}
+
+function parseToHSLA(color: string, format: ColorFormatInternal): HSLA | null {
   let match: RegExpMatchArray | null
 
   switch (format) {
diff --git a/src/utils/envUtil.ts b/src/utils/envUtil.ts
index 9d28fac43..d31efdec7 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/errorReportUtil.ts b/src/utils/errorReportUtil.ts
index 65f5aa830..33fd3d236 100644
--- a/src/utils/errorReportUtil.ts
+++ b/src/utils/errorReportUtil.ts
@@ -1,6 +1,6 @@
 import type { ISerialisedGraph } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { SystemStats } from '@/schemas/apiSchema'
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 
 export interface ErrorReportData {
   exceptionType: string
diff --git a/src/utils/executionUtil.ts b/src/utils/executionUtil.ts
index 9ef076a4a..3f7f982c4 100644
--- a/src/utils/executionUtil.ts
+++ b/src/utils/executionUtil.ts
@@ -10,7 +10,7 @@ import {
 import type {
   ComfyApiWorkflow,
   ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import { ExecutableGroupNodeDTO, isGroupNode } from './executableGroupNodeDto'
 import { compressWidgetInputSlots } from './litegraphUtil'
diff --git a/src/utils/formatUtil.ts b/src/utils/formatUtil.ts
index b89b28456..9d4f0c270 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 313382d0e..8967ccd2a 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 72f6f3733..4a573ed24 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 24503c286..1c6796905 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 82d27fac4..4c9b3ce40 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/migration/migrateReroute.ts b/src/utils/migration/migrateReroute.ts
index c563cbcee..07ba18dc3 100644
--- a/src/utils/migration/migrateReroute.ts
+++ b/src/utils/migration/migrateReroute.ts
@@ -6,7 +6,7 @@ import type {
   NodeId,
   Reroute,
   WorkflowJSON04
-} from '@/schemas/comfyWorkflowSchema'
+} from '@/platform/workflow/validation/schemas/workflowSchema'
 
 type RerouteNode = ComfyNode & {
   type: 'Reroute'
diff --git a/src/utils/modelMetadataUtil.ts b/src/utils/modelMetadataUtil.ts
index 662704159..e5137d6f1 100644
--- a/src/utils/modelMetadataUtil.ts
+++ b/src/utils/modelMetadataUtil.ts
@@ -1,4 +1,4 @@
-import type { ModelFile } from '@/schemas/comfyWorkflowSchema'
+import type { ModelFile } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 /**
  * Gets models from the node's `properties.models` field, excluding those
diff --git a/src/utils/nodeDefOrderingUtil.ts b/src/utils/nodeDefOrderingUtil.ts
index 6e5102b5f..2a39fa70c 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 78e3a3d1a..dc275c6b1 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 decf35554..40e3a4183 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 a0b55ffe7..b4f231785 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 61337b2aa..000000000
--- 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 000000000..b250d1559
--- /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 9c66cad56..93215d2a4 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 98302639a..bbfca6ea0 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'
@@ -42,11 +43,13 @@ import TopMenubar from '@/components/topbar/TopMenubar.vue'
 import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useFrontendVersionMismatchWarning } from '@/composables/useFrontendVersionMismatchWarning'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n } from '@/i18n'
-import { StatusWsMessageStatus } from '@/schemas/apiSchema'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
+import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
+import type { StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'
@@ -61,8 +64,6 @@ import {
   useQueueStore
 } from '@/stores/queueStore'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
-import { useSettingStore } from '@/stores/settingStore'
-import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -253,33 +254,30 @@ void nextTick(() => {
 })
 
 const onGraphReady = () => {
-  requestIdleCallback(
-    () => {
-      // Setting values now available after comfyApp.setup.
-      // Load keybindings.
-      wrapWithErrorHandling(useKeybindingService().registerUserKeybindings)()
+  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 server config
+    wrapWithErrorHandling(useServerConfigStore().loadServerConfig)(
+      SERVER_CONFIG_ITEMS,
+      settingStore.get('Comfy.Server.ServerConfigValues')
+    )
 
-      // Load model folders
-      void wrapWithErrorHandlingAsync(useModelStore().loadModelFolders)()
+    // Load model folders
+    void wrapWithErrorHandlingAsync(useModelStore().loadModelFolders)()
 
-      // Non-blocking load of node frequencies
-      void wrapWithErrorHandlingAsync(
-        useNodeFrequencyStore().loadNodeFrequencies
-      )()
+    // 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 }
-  )
+    // 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 000000000..9a5c65e79
--- /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 0c0dbfd44..6b170937c 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:installPath="installPath"
-            v-model:pathError="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:sourcePath="migrationSourcePath"
-            v-model:migrationItemIds="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:autoUpdate="autoUpdate"
-            v-model:allowMetrics="allowMetrics"
-          />
-          <MirrorsConfiguration
-            v-model:pythonMirror="pythonMirror"
-            v-model:pypiMirror="pypiMirror"
-            v-model:torchMirror="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 ea258c820..facc08dfb 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 ac2fe022f..dd6409991 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>
+      </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>
-        <Button
-          v-if="!terminalVisible"
-          icon="pi pi-search"
-          severity="secondary"
-          :label="t('serverStart.showTerminal')"
-          @click="terminalVisible = true"
-        />
       </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,16 +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>
-:deep(.xterm-helper-textarea) {
-  /* Hide this as it moves all over when uv is running */
-  display: none;
+@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 e1f98c013..46e9ca75c 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 597bc5a6b..ad653e6a8 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 95%
rename from src/components/dialog/content/ManagerProgressDialogContent.test.ts
rename to src/workbench/extensions/manager/components/ManagerProgressDialogContent.test.ts
index dc7ac8910..5b31975a3 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'
@@ -7,7 +8,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import ManagerProgressDialogContent from './ManagerProgressDialogContent.vue'
 
@@ -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 6aad68a91..613d1e2a7 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 90%
rename from src/components/dialog/footer/ManagerProgressFooter.vue
rename to src/workbench/extensions/manager/components/ManagerProgressFooter.vue
index 5fb225f8b..cd51c0ceb 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 { useWorkflowService } from '@/services/workflowService'
+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'
-import { useSettingStore } from '@/stores/settingStore'
+} 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 90%
rename from src/components/dialog/header/ManagerProgressHeader.vue
rename to src/workbench/extensions/manager/components/ManagerProgressHeader.vue
index 79ea6bb0b..841119cd0 100644
--- a/src/components/dialog/header/ManagerProgressHeader.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressHeader.vue
@@ -4,7 +4,7 @@
     class="px-4 py-2 flex items-center"
   >
     <TabMenu
-      v-model:activeIndex="activeTabIndex"
+      v-model:active-index="activeTabIndex"
       :model="tabs"
       class="w-full border-none"
       :pt="{
@@ -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 89%
rename from src/components/dialog/content/manager/ManagerDialogContent.vue
rename to src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
index fe3441457..61047c8b4 100644
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
@@ -16,7 +16,7 @@
     <div class="flex flex-1 relative overflow-hidden">
       <ManagerNavSidebar
         v-if="isSideNavOpen"
-        v-model:selectedTab="selectedTab"
+        v-model:selected-tab="selectedTab"
         :tabs="tabs"
       />
       <div
@@ -57,9 +57,9 @@
             </IconButton>
           </div>
           <RegistrySearchBar
-            v-model:searchQuery="searchQuery"
-            v-model:searchMode="searchMode"
-            v-model:sortField="sortField"
+            v-model:search-query="searchQuery"
+            v-model:search-mode="searchMode"
+            v-model:sort-field="sortField"
             :search-results="searchResults"
             :suggestions="suggestions"
             :is-missing-tab="isMissingTab"
@@ -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 000000000..11449f199
--- /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 000000000..054f1fbf4
--- /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 c84734a30..0e643b445 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 ec00b42c5..5b6c15582 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 ab2b38a45..6f7a1ec3a 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 93%
rename from src/components/dialog/content/manager/PackVersionBadge.test.ts
rename to src/workbench/extensions/manager/components/manager/PackVersionBadge.test.ts
index 1246de66b..d57b25f1f 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'
@@ -6,7 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import PackVersionBadge from './PackVersionBadge.vue'
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
@@ -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 e0fc111ca..551468861 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 83b4d320e..4dfab9bc9 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'
@@ -10,7 +11,7 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 // SelectedVersion is now using direct strings instead of enum
 
@@ -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 8f7ed9b8d..e5d1876e9 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 93%
rename from src/components/dialog/content/manager/button/PackEnableToggle.test.ts
rename to src/workbench/extensions/manager/components/manager/button/PackEnableToggle.test.ts
index 44b319553..6df2e7142 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'
@@ -6,8 +7,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+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 be449afc6..f95af0c0b 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 2395e23b1..7164544df 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 4924572f9..1f8bce0ee 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 50222d105..f62efd7a3 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 2dc64ba42..8696e837d 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 9aca47277..fda685a50 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 f02a435be..8e5b15d78 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 42851ad28..d07f5e267 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 b7a2a6c1e..ce78dabb7 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 83%
rename from src/components/dialog/content/manager/infoPanel/MetadataRow.vue
rename to src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
index 68daa0d29..56436b9f0 100644
--- a/src/components/dialog/content/manager/infoPanel/MetadataRow.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MetadataRow.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-const { value = 'N/A', label = 'N/A' } = defineProps<{
+const { value = 'N/A', label } = defineProps<{
   label: string
   value?: string | number
 }>()
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 97%
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 fac684a52..93e6d0ee8 100644
--- a/src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.test.ts
@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
-import { components } from '@/types/comfyRegistryTypes'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+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 d966325dc..915ddcf37 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 51ad06b93..e832f1126 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 30d196913..a6fbc2c33 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 a7e81e8a9..e5b5ea60c 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 b28fbe9d8..da2f67338 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 6e8d0d058..57e6ccb2c 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 ae6d188c2..e0dfc6497 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 475d5b9f6..be9a7297c 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 79%
rename from src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
rename to src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
index ead99e062..0c6602169 100644
--- a/src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/RegistrySearchBar.vue
@@ -41,12 +41,12 @@
     <div class="flex mt-3 text-sm">
       <div class="flex gap-6 ml-1">
         <SearchFilterDropdown
-          v-model:modelValue="searchMode"
+          v-model:model-value="searchMode"
           :options="filterOptions"
           :label="$t('g.filter')"
         />
         <SearchFilterDropdown
-          v-model:modelValue="sortField"
+          v-model:model-value="sortField"
           :options="availableSortOptions"
           :label="$t('g.sort')"
         />
@@ -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 e9ded729f..e076e0caf 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 f26e7f57a..54e12bd0e 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 92%
rename from src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
rename to src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
index 4948e79fd..1df7162d9 100644
--- a/src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardGridSkeleton.test.ts
@@ -1,11 +1,12 @@
-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'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import enMessages from '@/locales/en/main.json'
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
 import GridSkeleton from './GridSkeleton.vue'
 import PackCardSkeleton from './PackCardSkeleton.vue'
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 2503bf281..74f9546ac 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 f6635078c..3585d05c8 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 e4fab9d69..2a8852ca2 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 f8344cd2b..5aec2700d 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 7bfbaa4c3..a5d382767 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 16101f243..bd1bff3da 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 593c867d5..c18fcdf61 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 73ee14dca..b7ff5b38d 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 '@/schemas/comfyWorkflowSchema'
+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 788c9ccd5..0abec73e4 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 000000000..af8e35e12
--- /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 b6cd8c791..9b1fd9b0e 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 86fb8d947..3886b40bf 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 93%
rename from src/composables/useManagerState.ts
rename to src/workbench/extensions/manager/composables/useManagerState.ts
index ae9eb1cde..f8b7e095b 100644
--- a/src/composables/useManagerState.ts
+++ b/src/workbench/extensions/manager/composables/useManagerState.ts
@@ -2,12 +2,12 @@ import { storeToRefs } from 'pinia'
 import { computed, readonly } from 'vue'
 
 import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { useToastStore } from '@/stores/toastStore'
-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 1f2aad120..babb60d28 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 0a42e7b9a..c6dc9e90e 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 615ddda86..6e8f91ecd 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 9f2663a11..f3391d1bb 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 598d17896..95908ac08 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 000000000..10e56ad24
--- /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 a176e0ea0..ab7efe08a 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 2fa913371..c175760b5 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 000000000..1a24ba387
--- /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 000000000..cdd1c3103
--- /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 000000000..a45096304
--- /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 4602b69a9..98c7c4ea0 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,4 @@
-import lucide from '@iconify-json/lucide/icons.json'
+import lucide from '@iconify-json/lucide/icons.json' with { type: 'json' }
 import { addDynamicIconSelectors } from '@iconify/tailwind'
 
 import { iconCollection } from './build/customIconCollection'
@@ -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 8685b6964..10e5d660b 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 000000000..003f6e4a2
--- /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 000000000..8e659d24f
--- /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 000000000..ab219d833
--- /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 000000000..102aa7a18
--- /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 000000000..af1d1c9fb
--- /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/store-testing.md b/tests-ui/store-testing.md
index 5fedcc68a..f9cac42e8 100644
--- a/tests-ui/store-testing.md
+++ b/tests-ui/store-testing.md
@@ -21,7 +21,7 @@ Basic setup for testing Pinia stores:
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/domains/workflow/ui/stores/workflowStore'
 
 describe('useWorkflowStore', () => {
   let store: ReturnType<typeof useWorkflowStore>
diff --git a/tests-ui/tests/audioService.test.ts b/tests-ui/tests/audioService.test.ts
index 68f37680b..81fc46d9b 100644
--- a/tests-ui/tests/audioService.test.ts
+++ b/tests-ui/tests/audioService.test.ts
@@ -28,7 +28,7 @@ vi.mock('@/scripts/api', () => ({
   api: mockApi
 }))
 
-vi.mock('@/stores/toastStore', () => ({
+vi.mock('@/platform/updates/common/toastStore', () => ({
   useToastStore: vi.fn(() => mockToastStore)
 }))
 
diff --git a/tests-ui/tests/base/common/downloadUtil.test.ts b/tests-ui/tests/base/common/downloadUtil.test.ts
new file mode 100644
index 000000000..7231b3620
--- /dev/null
+++ b/tests-ui/tests/base/common/downloadUtil.test.ts
@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+
+describe('downloadUtil', () => {
+  let mockLink: HTMLAnchorElement
+
+  beforeEach(() => {
+    // Create a mock anchor element
+    mockLink = {
+      href: '',
+      download: '',
+      click: vi.fn()
+    } as unknown as HTMLAnchorElement
+
+    // Spy on DOM methods
+    vi.spyOn(document, 'createElement').mockReturnValue(mockLink)
+    vi.spyOn(document.body, 'appendChild').mockImplementation(() => mockLink)
+    vi.spyOn(document.body, 'removeChild').mockImplementation(() => mockLink)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('downloadFile', () => {
+    it('should create and trigger download with basic URL', () => {
+      const testUrl = 'https://example.com/image.png'
+
+      downloadFile(testUrl)
+
+      expect(document.createElement).toHaveBeenCalledWith('a')
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('download.png') // Default filename
+      expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
+      expect(mockLink.click).toHaveBeenCalled()
+      expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+    })
+
+    it('should use custom filename when provided', () => {
+      const testUrl = 'https://example.com/image.png'
+      const customFilename = 'my-custom-image.png'
+
+      downloadFile(testUrl, customFilename)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe(customFilename)
+    })
+
+    it('should extract filename from URL query parameters', () => {
+      const testUrl =
+        'https://example.com/api/file?filename=extracted-image.jpg&other=param'
+
+      downloadFile(testUrl)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('extracted-image.jpg')
+    })
+
+    it('should use default filename when URL has no filename parameter', () => {
+      const testUrl = 'https://example.com/api/file?other=param'
+
+      downloadFile(testUrl)
+
+      expect(mockLink.href).toBe(testUrl)
+      expect(mockLink.download).toBe('download.png')
+    })
+
+    it('should handle invalid URLs gracefully', () => {
+      const invalidUrl = 'not-a-valid-url'
+
+      downloadFile(invalidUrl)
+
+      expect(mockLink.href).toBe(invalidUrl)
+      expect(mockLink.download).toBe('download.png')
+      expect(mockLink.click).toHaveBeenCalled()
+    })
+
+    it('should prefer custom filename over extracted filename', () => {
+      const testUrl =
+        'https://example.com/api/file?filename=extracted-image.jpg'
+      const customFilename = 'custom-override.png'
+
+      downloadFile(testUrl, customFilename)
+
+      expect(mockLink.download).toBe(customFilename)
+    })
+
+    it('should handle URLs with empty filename parameter', () => {
+      const testUrl = 'https://example.com/api/file?filename='
+
+      downloadFile(testUrl)
+
+      expect(mockLink.download).toBe('download.png')
+    })
+
+    it('should handle relative URLs by using window.location.origin', () => {
+      const relativeUrl = '/api/file?filename=relative-image.png'
+
+      downloadFile(relativeUrl)
+
+      expect(mockLink.href).toBe(relativeUrl)
+      expect(mockLink.download).toBe('relative-image.png')
+    })
+
+    it('should clean up DOM elements after download', () => {
+      const testUrl = 'https://example.com/image.png'
+
+      downloadFile(testUrl)
+
+      // Verify the element was added and then removed
+      expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
+      expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
+    })
+  })
+})
diff --git a/tests-ui/tests/colorUtil.test.ts b/tests-ui/tests/colorUtil.test.ts
index daebacbb6..0f21d5d15 100644
--- a/tests-ui/tests/colorUtil.test.ts
+++ b/tests-ui/tests/colorUtil.test.ts
@@ -1,6 +1,12 @@
 import { describe, expect, it, vi } from 'vitest'
 
-import { adjustColor } from '@/utils/colorUtil'
+import {
+  adjustColor,
+  hexToRgb,
+  hsbToRgb,
+  parseToRgb,
+  rgbToHex
+} from '@/utils/colorUtil'
 
 interface ColorTestCase {
   hex: string
@@ -55,6 +61,74 @@ const colors: Record<string, ColorTestCase> = {
 
 const formats: ColorFormat[] = ['hex', 'rgb', 'rgba', 'hsl', 'hsla']
 
+describe('colorUtil conversions', () => {
+  describe('hexToRgb / rgbToHex', () => {
+    it('converts 6-digit hex to RGB', () => {
+      expect(hexToRgb('#ff0000')).toEqual({ r: 255, g: 0, b: 0 })
+      expect(hexToRgb('#00ff00')).toEqual({ r: 0, g: 255, b: 0 })
+      expect(hexToRgb('#0000ff')).toEqual({ r: 0, g: 0, b: 255 })
+    })
+
+    it('converts 3-digit hex to RGB', () => {
+      expect(hexToRgb('#f00')).toEqual({ r: 255, g: 0, b: 0 })
+      expect(hexToRgb('#0f0')).toEqual({ r: 0, g: 255, b: 0 })
+      expect(hexToRgb('#00f')).toEqual({ r: 0, g: 0, b: 255 })
+    })
+
+    it('converts RGB to lowercase #hex and clamps values', () => {
+      expect(rgbToHex({ r: 255, g: 0, b: 0 })).toBe('#ff0000')
+      expect(rgbToHex({ r: 0, g: 255, b: 0 })).toBe('#00ff00')
+      expect(rgbToHex({ r: 0, g: 0, b: 255 })).toBe('#0000ff')
+      // out-of-range should clamp
+      expect(rgbToHex({ r: -10, g: 300, b: 16 })).toBe('#00ff10')
+    })
+
+    it('round-trips #hex -> rgb -> #hex', () => {
+      const hex = '#123abc'
+      expect(rgbToHex(hexToRgb(hex))).toBe('#123abc')
+    })
+  })
+
+  describe('parseToRgb', () => {
+    it('parses #hex', () => {
+      expect(parseToRgb('#ff0000')).toEqual({ r: 255, g: 0, b: 0 })
+    })
+
+    it('parses rgb()/rgba()', () => {
+      expect(parseToRgb('rgb(255, 0, 0)')).toEqual({ r: 255, g: 0, b: 0 })
+      expect(parseToRgb('rgba(255,0,0,0.5)')).toEqual({ r: 255, g: 0, b: 0 })
+    })
+
+    it('parses hsl()/hsla()', () => {
+      expect(parseToRgb('hsl(0, 100%, 50%)')).toEqual({ r: 255, g: 0, b: 0 })
+      const green = parseToRgb('hsla(120, 100%, 50%, 0.7)')
+      expect(green.r).toBe(0)
+      expect(green.g).toBe(255)
+      expect(green.b).toBe(0)
+    })
+  })
+
+  describe('hsbToRgb', () => {
+    it('converts HSB to primary RGB colors', () => {
+      expect(hsbToRgb({ h: 0, s: 100, b: 100 })).toEqual({ r: 255, g: 0, b: 0 })
+      expect(hsbToRgb({ h: 120, s: 100, b: 100 })).toEqual({
+        r: 0,
+        g: 255,
+        b: 0
+      })
+      expect(hsbToRgb({ h: 240, s: 100, b: 100 })).toEqual({
+        r: 0,
+        g: 0,
+        b: 255
+      })
+    })
+
+    it('handles non-100 brightness and clamps/normalizes input', () => {
+      const rgb = hsbToRgb({ h: 360, s: 150, b: 50 })
+      expect(rgbToHex(rgb)).toBe('#7f0000')
+    })
+  })
+})
 describe('colorUtil - adjustColor', () => {
   const runAdjustColorTests = (
     color: ColorTestCase,
diff --git a/tests-ui/tests/comfyWorkflow.test.ts b/tests-ui/tests/comfyWorkflow.test.ts
index 4d2d3862b..cc1018696 100644
--- a/tests-ui/tests/comfyWorkflow.test.ts
+++ b/tests-ui/tests/comfyWorkflow.test.ts
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import { describe, expect, it } from 'vitest'
 
-import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
+import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
 
 const WORKFLOW_DIR = 'tests-ui/workflows'
diff --git a/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts b/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
new file mode 100644
index 000000000..faa20f654
--- /dev/null
+++ b/tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts
@@ -0,0 +1,219 @@
+import { createTestingPinia } from '@pinia/testing'
+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'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+
+// Mock xterm and related modules
+vi.mock('@xterm/xterm', () => ({
+  Terminal: vi.fn().mockImplementation(() => ({
+    open: vi.fn(),
+    dispose: vi.fn(),
+    onSelectionChange: vi.fn(() => {
+      // Return a disposable
+      return {
+        dispose: vi.fn()
+      }
+    }),
+    hasSelection: vi.fn(() => false),
+    getSelection: vi.fn(() => ''),
+    selectAll: vi.fn(),
+    clearSelection: vi.fn(),
+    loadAddon: vi.fn()
+  })),
+  IDisposable: vi.fn()
+}))
+
+vi.mock('@xterm/addon-fit', () => ({
+  FitAddon: vi.fn().mockImplementation(() => ({
+    fit: vi.fn(),
+    proposeDimensions: vi.fn(() => ({ rows: 24, cols: 80 }))
+  }))
+}))
+
+const mockTerminal = {
+  open: vi.fn(),
+  dispose: vi.fn(),
+  onSelectionChange: vi.fn(() => ({
+    dispose: vi.fn()
+  })),
+  hasSelection: vi.fn(() => false),
+  getSelection: vi.fn(() => ''),
+  selectAll: vi.fn(),
+  clearSelection: vi.fn()
+}
+
+vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
+  useTerminal: vi.fn(() => ({
+    terminal: mockTerminal,
+    useAutoSize: vi.fn(() => ({ resize: vi.fn() }))
+  }))
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => false),
+  electronAPI: vi.fn(() => null)
+}))
+
+// Mock clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: vi.fn().mockResolvedValue(undefined)
+  },
+  configurable: true
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      serverStart: {
+        copySelectionTooltip: 'Copy selection',
+        copyAllTooltip: 'Copy all'
+      }
+    }
+  }
+})
+
+const mountBaseTerminal = () => {
+  return mount(BaseTerminal, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn
+        }),
+        i18n
+      ],
+      stubs: {
+        Button: {
+          template: '<button v-bind="$attrs"><slot /></button>',
+          props: ['icon', 'severity', 'size']
+        }
+      }
+    }
+  })
+}
+
+describe('BaseTerminal', () => {
+  let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  it('emits created event on mount', () => {
+    wrapper = mountBaseTerminal()
+
+    expect(wrapper.emitted('created')).toBeTruthy()
+    expect(wrapper.emitted('created')![0]).toHaveLength(2)
+  })
+
+  it('emits unmounted event on unmount', () => {
+    wrapper = mountBaseTerminal()
+    wrapper.unmount()
+
+    expect(wrapper.emitted('unmounted')).toBeTruthy()
+  })
+
+  it('button exists and has correct initial state', async () => {
+    wrapper = mountBaseTerminal()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.exists()).toBe(true)
+
+    expect(button.classes()).toContain('opacity-0')
+    expect(button.classes()).toContain('pointer-events-none')
+  })
+
+  it('shows correct tooltip when no selection', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy all')
+  })
+
+  it('shows correct tooltip when selection exists', async () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    wrapper = mountBaseTerminal()
+
+    // Trigger the selection change callback that was registered during mount
+    expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
+    // Access the mock calls - TypeScript can't infer the mock structure dynamically
+    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
+      .calls[0][0]
+    selectionCallback()
+    await nextTick()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy selection')
+  })
+
+  it('copies selected text when selection exists', async () => {
+    const selectedText = 'selected text'
+    mockTerminal.hasSelection.mockReturnValue(true)
+    mockTerminal.getSelection.mockReturnValue(selectedText)
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).not.toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(selectedText)
+    expect(mockTerminal.clearSelection).not.toHaveBeenCalled()
+  })
+
+  it('copies all text when no selection exists', async () => {
+    const allText = 'all terminal content'
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection
+      .mockReturnValueOnce('') // First call returns empty (no selection)
+      .mockReturnValueOnce(allText) // Second call after selectAll returns all text
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(allText)
+    expect(mockTerminal.clearSelection).toHaveBeenCalled()
+  })
+
+  it('does not copy when no text available', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection.mockReturnValue('')
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+  })
+})
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 65c3a2fe9..bcb4d4954 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 42e717c1d..be8e10b5d 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 b63562e81..30253fda7 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 { useComfyManagerService } from '@/services/comfyManagerService'
+import { useSettingStore } from '@/platform/settings/settingStore'
+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 { useSettingStore } from '@/stores/settingStore'
-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('@/stores/settingStore')
+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
@@ -44,7 +47,7 @@ vi.mock('@vueuse/core', async () => {
     )
   }
 })
-vi.mock('@/services/workflowService', () => ({
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({
     reloadCurrentWorkflow: vi.fn().mockResolvedValue(undefined)
   }))
diff --git a/tests-ui/tests/components/graph/ZoomControlsModal.spec.ts b/tests-ui/tests/components/graph/ZoomControlsModal.spec.ts
index 910b70741..5345b0669 100644
--- a/tests-ui/tests/components/graph/ZoomControlsModal.spec.ts
+++ b/tests-ui/tests/components/graph/ZoomControlsModal.spec.ts
@@ -28,14 +28,14 @@ vi.mock('@/stores/commandStore', () => ({
   })
 }))
 
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({
     appScalePercentage: 100,
     setAppZoomFromPercentage: mockSetAppZoom
   })
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     get: mockSettingGet
   })
diff --git a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
index 1026228d2..c39a07e70 100644
--- a/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
+++ b/tests-ui/tests/components/helpcenter/WhatsNewPopup.test.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
+import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type ReleaseNote = components['schemas']['ReleaseNote']
@@ -19,7 +19,7 @@ vi.mock('marked', () => ({
   marked: vi.fn((content) => `<p>${content}</p>`)
 }))
 
-vi.mock('@/stores/releaseStore', () => ({
+vi.mock('@/platform/updates/common/releaseStore', () => ({
   useReleaseStore: vi.fn()
 }))
 
@@ -58,7 +58,9 @@ describe('WhatsNewPopup', () => {
     mockReleaseStore.releases = []
 
     // Mock release store
-    const { useReleaseStore } = await import('@/stores/releaseStore')
+    const { useReleaseStore } = await import(
+      '@/platform/updates/common/releaseStore'
+    )
     vi.mocked(useReleaseStore).mockReturnValue(mockReleaseStore as any)
   })
 
diff --git a/tests-ui/tests/composables/BrowserTabTitle.spec.ts b/tests-ui/tests/composables/BrowserTabTitle.spec.ts
index dd88fb1cd..7b55ffc25 100644
--- a/tests-ui/tests/composables/BrowserTabTitle.spec.ts
+++ b/tests-ui/tests/composables/BrowserTabTitle.spec.ts
@@ -26,7 +26,7 @@ vi.mock('@/stores/executionStore', () => ({
 const settingStore = reactive({
   get: vi.fn(() => 'Enabled')
 })
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => settingStore
 }))
 
@@ -34,7 +34,7 @@ vi.mock('@/stores/settingStore', () => ({
 const workflowStore = reactive({
   activeWorkflow: null as any
 })
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: () => workflowStore
 }))
 
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 09eb10bca..000000000
--- 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('@/stores/graphStore', () => ({
-  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 11673efc8..303dddc08 100644
--- a/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts
+++ b/tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts
@@ -2,14 +2,14 @@ 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'
 import { app } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
 
 // Mock the app module
 vi.mock('@/scripts/app', () => ({
diff --git a/tests-ui/tests/composables/element/useTransformState.test.ts b/tests-ui/tests/composables/element/useTransformState.test.ts
index e22f34242..457b2fdd2 100644
--- a/tests-ui/tests/composables/element/useTransformState.test.ts
+++ b/tests-ui/tests/composables/element/useTransformState.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/renderer/core/layout/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
 // Create a mock canvas context for transform testing
 function createMockCanvasContext() {
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 79503bb5f..000000000
--- 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 '@/composables/graph/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/graph/useSelectionState.test.ts b/tests-ui/tests/composables/graph/useSelectionState.test.ts
new file mode 100644
index 000000000..ccab3054f
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useSelectionState.test.ts
@@ -0,0 +1,270 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { type Ref, ref } from 'vue'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
+import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+
+// Test interfaces
+interface TestNodeConfig {
+  type?: string
+  mode?: LGraphEventMode
+  flags?: { collapsed?: boolean }
+  pinned?: boolean
+  removable?: boolean
+}
+
+interface TestNode {
+  type: string
+  mode: LGraphEventMode
+  flags?: { collapsed?: boolean }
+  pinned?: boolean
+  removable?: boolean
+  isSubgraphNode: () => boolean
+}
+
+type MockedItem = TestNode | { type: string; isNode: boolean }
+
+// Mock all stores
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: vi.fn()
+}))
+
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: vi.fn()
+}))
+
+vi.mock('@/stores/workspace/nodeHelpStore', () => ({
+  useNodeHelpStore: vi.fn()
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+  useNodeLibrarySidebarTab: vi.fn()
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(),
+  isImageNode: vi.fn()
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  filterOutputNodes: vi.fn()
+}))
+
+const createTestNode = (config: TestNodeConfig = {}): TestNode => {
+  return {
+    type: config.type || 'TestNode',
+    mode: config.mode || LGraphEventMode.ALWAYS,
+    flags: config.flags,
+    pinned: config.pinned,
+    removable: config.removable,
+    isSubgraphNode: () => false
+  }
+}
+
+// Mock comment/connection objects
+const mockComment = { type: 'comment', isNode: false }
+const mockConnection = { type: 'connection', isNode: false }
+
+describe('useSelectionState', () => {
+  // Mock store instances
+  let mockSelectedItems: Ref<MockedItem[]>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    // Setup mock canvas store with proper ref
+    mockSelectedItems = ref([])
+    vi.mocked(useCanvasStore).mockReturnValue({
+      selectedItems: mockSelectedItems,
+      // Add minimal required properties for the store
+      $id: 'canvas',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock node def store
+    vi.mocked(useNodeDefStore).mockReturnValue({
+      fromLGraphNode: vi.fn((node: TestNode) => {
+        if (node?.type === 'TestNode') {
+          return { nodePath: 'test.TestNode', name: 'TestNode' }
+        }
+        return null
+      }),
+      // Add minimal required properties for the store
+      $id: 'nodeDef',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock sidebar tab store
+    const mockToggleSidebarTab = vi.fn()
+    vi.mocked(useSidebarTabStore).mockReturnValue({
+      activeSidebarTabId: null,
+      toggleSidebarTab: mockToggleSidebarTab,
+      // Add minimal required properties for the store
+      $id: 'sidebarTab',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock node help store
+    const mockOpenHelp = vi.fn()
+    const mockCloseHelp = vi.fn()
+    const mockNodeHelpStore = {
+      isHelpOpen: false,
+      currentHelpNode: null,
+      openHelp: mockOpenHelp,
+      closeHelp: mockCloseHelp,
+      // Add minimal required properties for the store
+      $id: 'nodeHelp',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    }
+    vi.mocked(useNodeHelpStore).mockReturnValue(mockNodeHelpStore as any)
+
+    // Setup mock composables
+    vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
+      id: 'node-library-tab',
+      title: 'Node Library',
+      type: 'custom',
+      render: () => null
+    } as any)
+
+    // Setup mock utility functions
+    vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
+      const typedItem = item as { isNode?: boolean }
+      return typedItem?.isNode !== false
+    })
+    vi.mocked(isImageNode).mockImplementation((node: unknown) => {
+      const typedNode = node as { type?: string }
+      return typedNode?.type === 'ImageNode'
+    })
+    vi.mocked(filterOutputNodes).mockImplementation(
+      (nodes: TestNode[]) => nodes.filter((n) => n.type === 'OutputNode') as any
+    )
+  })
+
+  describe('Selection Detection', () => {
+    test('should return false when nothing selected', () => {
+      const { hasAnySelection } = useSelectionState()
+      expect(hasAnySelection.value).toBe(false)
+    })
+
+    test('should return true when items selected', () => {
+      // Update the mock data before creating the composable
+      const node1 = createTestNode()
+      const node2 = createTestNode()
+      mockSelectedItems.value = [node1, node2]
+
+      const { hasAnySelection } = useSelectionState()
+      expect(hasAnySelection.value).toBe(true)
+    })
+  })
+
+  describe('Node Type Filtering', () => {
+    test('should pick only LGraphNodes from mixed selections', () => {
+      // Update the mock data before creating the composable
+      const graphNode = createTestNode()
+      mockSelectedItems.value = [graphNode, mockComment, mockConnection]
+
+      const { selectedNodes } = useSelectionState()
+      expect(selectedNodes.value).toHaveLength(1)
+      expect(selectedNodes.value[0]).toEqual(graphNode)
+    })
+  })
+
+  describe('Node State Computation', () => {
+    test('should detect bypassed nodes', () => {
+      // Update the mock data before creating the composable
+      const bypassedNode = createTestNode({ mode: LGraphEventMode.BYPASS })
+      mockSelectedItems.value = [bypassedNode]
+
+      const { selectedNodes } = useSelectionState()
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+      expect(isBypassed).toBe(true)
+    })
+
+    test('should detect pinned/collapsed states', () => {
+      // Update the mock data before creating the composable
+      const pinnedNode = createTestNode({ pinned: true })
+      const collapsedNode = createTestNode({ flags: { collapsed: true } })
+      mockSelectedItems.value = [pinnedNode, collapsedNode]
+
+      const { selectedNodes } = useSelectionState()
+      const isPinned = selectedNodes.value.some((n) => n.pinned === true)
+      const isCollapsed = selectedNodes.value.some(
+        (n) => n.flags?.collapsed === true
+      )
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+      expect(isPinned).toBe(true)
+      expect(isCollapsed).toBe(true)
+      expect(isBypassed).toBe(false)
+    })
+
+    test('should provide non-reactive state computation', () => {
+      // Update the mock data before creating the composable
+      const node = createTestNode({ pinned: true })
+      mockSelectedItems.value = [node]
+
+      const { selectedNodes } = useSelectionState()
+      const isPinned = selectedNodes.value.some((n) => n.pinned === true)
+      const isCollapsed = selectedNodes.value.some(
+        (n) => n.flags?.collapsed === true
+      )
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+
+      expect(isPinned).toBe(true)
+      expect(isCollapsed).toBe(false)
+      expect(isBypassed).toBe(false)
+
+      // Test with empty selection using new composable instance
+      mockSelectedItems.value = []
+      const { selectedNodes: newSelectedNodes } = useSelectionState()
+      const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
+      expect(newIsPinned).toBe(false)
+    })
+  })
+})
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
index 2bc6342c8..6b2d106d5 100644
--- a/tests-ui/tests/composables/graph/useTransformSettling.test.ts
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 
 describe('useTransformSettling', () => {
   let element: HTMLDivElement
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index 6cd76cb75..32b18ed68 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 9605bd673..01a635a88 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 e56ad46bf..2fbabb3fb 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 20827985c..419052bab 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 52935f65b..d3079219e 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('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: vi.fn(() => ({
+    isNewManagerUI: { value: true }
   }))
 }))
 
-vi.mock('@/stores/conflictDetectionStore', () => ({
-  useConflictDetectionStore: vi.fn(() => ({
-    conflictResults: { value: [] },
-    updateConflictResults: vi.fn(),
-    clearConflicts: vi.fn(),
-    setConflictResults: vi.fn()
-  }))
-}))
-
-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()
-  }
+    getBulkNodeVersions: vi.fn(),
+    isLoading: ref(false),
+    error: ref<string | null>(null)
+  } as unknown as ReturnType<typeof useComfyRegistryService>
 
-  const mockAcknowledgment = {
-    checkComfyUIVersionChange: vi.fn(),
-    shouldShowConflictModal: { value: true },
-    shouldShowRedDot: { value: true },
-    acknowledgedPackageIds: { value: [] },
-    dismissConflictModal: vi.fn(),
-    dismissRedDotNotification: vi.fn(),
-    acknowledgeConflict: vi.fn()
-  }
+  // 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
+    // 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 functions
-    mockSystemStatsStore.refetchSystemStats.mockResolvedValue(undefined)
-    mockComfyManagerService.listInstalledPacks.mockReset()
-    mockComfyManagerService.getImportFailInfo.mockReset()
-    mockRegistryService.getPackByVersion.mockReset()
-
-    // Mock useComfyManagerService
-    const { useComfyManagerService } = await import(
-      '@/services/comfyManagerService'
+    // Reset mock implementations
+    vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+      undefined
     )
-    vi.mocked(useComfyManagerService).mockReturnValue(
-      mockComfyManagerService as any
+    vi.mocked(mockManagerStore.isPackEnabled).mockReturnValue(true)
+    vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+      node_versions: []
+    })
+    vi.mocked(mockComfyManagerService.getImportFailInfoBulk).mockResolvedValue(
+      {}
     )
 
-    // Mock useComfyRegistryService
-    const { useComfyRegistryService } = await import(
-      '@/services/comfyRegistryService'
-    )
-    vi.mocked(useComfyRegistryService).mockReturnValue(
-      mockRegistryService as any
-    )
-
-    // 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()
+  describe('system environment collection', () => {
+    it('should collect system environment correctly', async () => {
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
 
-      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')
+      expect(environment).toEqual({
+        comfyui_version: '0.3.41',
+        frontend_version: '1.24.0',
+        os: 'darwin',
+        accelerator: 'mps'
+      })
     })
 
-    it('should return fallback environment information when systemStatsStore fails', async () => {
-      // Mock systemStatsStore failure
-      mockSystemStatsStore.refetchSystemStats.mockRejectedValue(
-        new Error('Store failure')
-      )
-      mockSystemStatsStore.systemStats = null
+    it('should handle missing system stats gracefully', async () => {
+      mockSystemStatsStore.systemStats = null as never
 
-      const { detectSystemEnvironment } = useConflictDetection()
-      const environment = await detectSystemEnvironment()
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
 
-      expect(environment.comfyui_version).toBe('unknown')
-      expect(environment.frontend_version).toBe('1.24.0-1')
-      expect(environment.available_accelerators).toEqual(['CPU'])
+      // When systemStats is null, empty strings are used as fallback
+      expect(environment).toEqual({
+        comfyui_version: '',
+        frontend_version: '1.24.0',
+        os: '',
+        accelerator: ''
+      })
     })
   })
 
-  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'][] = [
+  describe('conflict detection', () => {
+    it('should detect version conflicts', async () => {
+      // Setup installed packages
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacks.installedPacks.value = [
         {
-          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'
+          id: 'test-pack',
+          name: 'Test Pack',
+          latest_version: { version: '1.0.0' }
         } as components['schemas']['Node']
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
+      mockInstalledPacksWithVersions.value = [
+        {
+          id: 'test-pack',
+          version: '1.0.0'
+        }
+      ]
 
-      // 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
-            })
+      // 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']
           }
-          return Promise.resolve(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.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)
-
-      // 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(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 return empty array when local package information cannot be retrieved', async () => {
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(null)
-
-      const { performConflictDetection } = useConflictDetection()
-      const result = await performConflictDetection()
-
-      expect(result.success).toBe(true)
-      expect(result.summary.total_packages).toBe(0)
-      expect(result.results).toHaveLength(0)
-    })
-  })
-
-  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'][] = [
+    it('should detect banned packages', async () => {
+      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: 'banned-pack',
+          name: 'Banned Pack'
         } 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']
+          id: 'banned-pack',
+          version: '1.0.0'
+        }
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockWindowsOnlyRegistryPacks.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 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']
-      ]
-
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockBannedRegistryPacks.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 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)
-    })
-
-    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'][] = [
-        {
-          id: 'DisabledNode',
-          name: 'Disabled 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 = 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'][] = [
-        {
-          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
-        }
-      }
-
-      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()
-
-      await performConflictDetection()
-      await nextTick()
-
-      expect(conflictedPackages.value.length).toBeGreaterThan(0)
-      expect(
-        conflictedPackages.value.every((result) => result.has_conflict === true)
-      ).toBe(true)
-    })
-
-    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'],
-        {
-          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
-        }
-      }
-
-      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(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']
+          }
+        ]
       })
 
-      mockRegistryService.getPackByVersion.mockResolvedValue({
-        id: 'TestNode',
-        supported_os: ['Windows'],
-        supported_accelerators: ['CUDA'],
-        supported_comfyui_version: '>=0.3.0',
-        status: 'NodeVersionStatusActive'
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
+
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'banned',
+        current_value: 'installed',
+        required_value: 'not_banned'
       })
-
-      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()
-
-      // With no conflicts initially, should return false
-      const result = await shouldShowConflictModalAfterUpdate()
-      expect(result).toBe(false) // No conflicts initially
-    })
-
-    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'][] = [
+    it('should detect import failures', async () => {
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacksWithVersions.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']
+          id: 'fail-pack',
+          version: '1.0.0'
+        }
       ]
 
-      mockComfyManagerService.listInstalledPacks.mockResolvedValue(
-        mockInstalledPacks
-      )
-      mockRegistryService.getPackByVersion.mockImplementation(
-        (packageName: string) => {
-          const packageData = mockConflictedRegistryPacks.find(
-            (p: any) => p.id === packageName
-          )
-          return Promise.resolve(packageData || null)
-        }
-      )
+      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
+      })
 
-      const { shouldShowConflictModalAfterUpdate, performConflictDetection } =
-        useConflictDetection()
+      // Mock registry response for the package
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: []
+      })
 
-      // First run conflict detection to populate conflicts
-      await performConflictDetection()
-      await nextTick()
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
 
-      // 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
+      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 detect system environment correctly', async () => {
-      // Mock system environment
-      mockSystemStatsStore.systemStats = {
-        system: {
-          comfyui_version: '0.3.41',
-          os: 'Darwin'
-        },
-        devices: []
-      }
+  describe('computed properties', () => {
+    it('should expose conflict status from store', () => {
+      mockConflictedPackages.value = [
+        {
+          package_id: 'test',
+          package_name: 'Test',
+          has_conflict: true,
+          is_compatible: false,
+          conflicts: []
+        }
+      ]
 
-      const { detectSystemEnvironment } = useConflictDetection()
+      useConflictDetection()
 
-      // Detect system environment
-      const environment = await detectSystemEnvironment()
-
-      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 = []
+
+      // Ensure startFetchInstalled resolves
+      vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+        undefined
+      )
 
       const { initializeConflictDetection } = useConflictDetection()
 
-      await expect(initializeConflictDetection()).resolves.not.toThrow()
-    })
-
-    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/useCoreCommands.test.ts b/tests-ui/tests/composables/useCoreCommands.test.ts
index f1e796c26..f0b0bc8f7 100644
--- a/tests-ui/tests/composables/useCoreCommands.test.ts
+++ b/tests-ui/tests/composables/useCoreCommands.test.ts
@@ -2,9 +2,9 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useCoreCommands } from '@/composables/useCoreCommands'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
 
 vi.mock('@/scripts/app', () => {
   const mockGraphClear = vi.fn()
@@ -33,7 +33,7 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-vi.mock('@/stores/settingStore')
+vi.mock('@/platform/settings/settingStore')
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({}))
@@ -49,7 +49,7 @@ vi.mock('firebase/auth', () => ({
   onAuthStateChanged: vi.fn()
 }))
 
-vi.mock('@/services/workflowService', () => ({
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({}))
 }))
 
@@ -69,7 +69,7 @@ vi.mock('@/stores/toastStore', () => ({
   useToastStore: vi.fn(() => ({}))
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({}))
 }))
 
diff --git a/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts b/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts
index b8b4fceac..8c175ab05 100644
--- a/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts
+++ b/tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts
@@ -3,9 +3,9 @@ import { vi } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 
-import { useFrontendVersionMismatchWarning } from '@/composables/useFrontendVersionMismatchWarning'
-import { useToastStore } from '@/stores/toastStore'
-import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
+import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
 
 // Mock globals
 //@ts-expect-error Define global for the test
diff --git a/tests-ui/tests/composables/useImportFailedDetection.test.ts b/tests-ui/tests/composables/useImportFailedDetection.test.ts
index d8d4ff362..5a6614ca0 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/useLoad3dViewer.test.ts b/tests-ui/tests/composables/useLoad3dViewer.test.ts
index baf64055b..a607186e5 100644
--- a/tests-ui/tests/composables/useLoad3dViewer.test.ts
+++ b/tests-ui/tests/composables/useLoad3dViewer.test.ts
@@ -4,14 +4,14 @@ import { nextTick } from 'vue'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useLoad3dService } from '@/services/load3dService'
-import { useToastStore } from '@/stores/toastStore'
 
 vi.mock('@/services/load3dService', () => ({
   useLoad3dService: vi.fn()
 }))
 
-vi.mock('@/stores/toastStore', () => ({
+vi.mock('@/platform/updates/common/toastStore', () => ({
   useToastStore: vi.fn()
 }))
 
diff --git a/tests-ui/tests/composables/useManagerQueue.test.ts b/tests-ui/tests/composables/useManagerQueue.test.ts
index 0d9313446..502867b8b 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 dafb48a6f..c2f0f83c8 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/useMinimap.test.ts b/tests-ui/tests/composables/useMinimap.test.ts
index f172178ad..fdfb8a611 100644
--- a/tests-ui/tests/composables/useMinimap.test.ts
+++ b/tests-ui/tests/composables/useMinimap.test.ts
@@ -115,11 +115,11 @@ const defaultSettingStore = {
   set: vi.fn().mockResolvedValue(undefined)
 }
 
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn(() => defaultCanvasStore)
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => defaultSettingStore)
 }))
 
@@ -147,7 +147,7 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({
     activeSubgraph: null
   }))
diff --git a/tests-ui/tests/composables/useMissingNodes.test.ts b/tests-ui/tests/composables/useMissingNodes.test.ts
index e83bc7ff0..a04bb6041 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 0b47fabb6..4389b8c80 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 3af4f0faa..c056b6f3a 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/useSettingSearch.test.ts b/tests-ui/tests/composables/useSettingSearch.test.ts
index 91d09142a..ba63256e8 100644
--- a/tests-ui/tests/composables/useSettingSearch.test.ts
+++ b/tests-ui/tests/composables/useSettingSearch.test.ts
@@ -2,16 +2,19 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { st } from '@/i18n'
-import { getSettingInfo, useSettingStore } from '@/stores/settingStore'
+import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
+import {
+  getSettingInfo,
+  useSettingStore
+} from '@/platform/settings/settingStore'
 
 // Mock dependencies
 vi.mock('@/i18n', () => ({
   st: vi.fn((_: string, fallback: string) => fallback)
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(),
   getSettingInfo: vi.fn()
 }))
diff --git a/tests-ui/tests/composables/useTemplateWorkflows.test.ts b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
index b7c507faf..1909f1fa2 100644
--- a/tests-ui/tests/composables/useTemplateWorkflows.test.ts
+++ b/tests-ui/tests/composables/useTemplateWorkflows.test.ts
@@ -1,13 +1,16 @@
 import { flushPromises } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 
 // Mock the store
-vi.mock('@/stores/workflowTemplatesStore', () => ({
-  useWorkflowTemplatesStore: vi.fn()
-}))
+vi.mock(
+  '@/platform/workflow/templates/repositories/workflowTemplatesStore',
+  () => ({
+    useWorkflowTemplatesStore: vi.fn()
+  })
+)
 
 // Mock the API
 vi.mock('@/scripts/api', () => ({
diff --git a/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts b/tests-ui/tests/composables/useUpdateAvailableNodes.test.ts
index 3e88963d6..c15b96ef6 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/composables/useWorkflowAutoSave.test.ts b/tests-ui/tests/composables/useWorkflowAutoSave.test.ts
index c69d733bc..f5dc7ae96 100644
--- a/tests-ui/tests/composables/useWorkflowAutoSave.test.ts
+++ b/tests-ui/tests/composables/useWorkflowAutoSave.test.ts
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { api } from '@/scripts/api'
-import { useWorkflowService } from '@/services/workflowService'
 
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -12,13 +12,13 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-vi.mock('@/services/workflowService', () => ({
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({
     saveWorkflow: vi.fn()
   }))
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: vi.fn((key) => {
       if (key === 'Comfy.Workflow.AutoSave') return mockAutoSaveSetting
@@ -28,7 +28,7 @@ vi.mock('@/stores/settingStore', () => ({
   }))
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({
     activeWorkflow: mockActiveWorkflow
   }))
diff --git a/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts b/tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts
index f0470890e..957076526 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 c88c6cfb2..6599d6562 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 c829a8ba7..da99d9135 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 e06a44bc5..15215cbf0 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/core/__snapshots__/litegraph.test.ts.snap b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
index d45626827..5302edcbc 100644
--- a/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
+++ b/tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap
@@ -155,9 +155,11 @@ LiteGraphGlobal {
   "do_add_triggers_slots": false,
   "highlight_selected_group": true,
   "isInsideRectangle": [Function],
+  "leftMouseClickBehavior": "panning",
   "macGesturesRequireMac": true,
   "macTrackpadGestures": false,
   "middle_click_slot_add_default_node": false,
+  "mouseWheelScroll": "panning",
   "node_box_coloured_by_mode": false,
   "node_box_coloured_when_on": false,
   "node_images_path": "",
diff --git a/tests-ui/tests/litegraph/core/fixtures/testExtensions.ts b/tests-ui/tests/litegraph/core/fixtures/testExtensions.ts
index 8c4869da2..300b23814 100644
--- a/tests-ui/tests/litegraph/core/fixtures/testExtensions.ts
+++ b/tests-ui/tests/litegraph/core/fixtures/testExtensions.ts
@@ -7,10 +7,10 @@ import type {
   SerialisableGraph
 } from '@/lib/litegraph/src/types/serialisation'
 
-import floatingBranch from './assets/floatingBranch.json'
-import floatingLink from './assets/floatingLink.json'
-import linkedNodes from './assets/linkedNodes.json'
-import reroutesComplex from './assets/reroutesComplex.json'
+import floatingBranch from './assets/floatingBranch.json' with { type: 'json' }
+import floatingLink from './assets/floatingLink.json' with { type: 'json' }
+import linkedNodes from './assets/linkedNodes.json' with { type: 'json' }
+import reroutesComplex from './assets/reroutesComplex.json' with { type: 'json' }
 import {
   basicSerialisableGraph,
   minimalSerialisableGraph,
diff --git a/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts b/tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts
index 824c06e57..01a6ceb50 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 514a52c40..9bc64802c 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 a82fddc0e..0c10b782a 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 75c20c0ba..36793829d 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 b90a781e2..02134868c 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 000000000..eff6ba771
--- /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 7f6c1f377..75e409501 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 41d8c12c6..1f2fb83f7 100644
--- a/tests-ui/tests/performance/transformPerformance.test.ts
+++ b/tests-ui/tests/performance/transformPerformance.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { useTransformState } from '@/renderer/core/layout/useTransformState'
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 
 // Mock canvas context for testing
 const createMockCanvasContext = () => ({
@@ -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 000000000..54551f595
--- /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 91%
rename from tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
rename to tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts
index b2c670f3e..b1287a2e7 100644
--- a/tests-ui/tests/composables/graph/useCanvasInteractions.test.ts
+++ b/tests-ui/tests/renderer/core/canvas/useCanvasInteractions.test.ts
@@ -1,16 +1,22 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 
 // Mock stores
-vi.mock('@/stores/graphStore', () => {
+vi.mock('@/renderer/core/canvas/canvasStore', () => {
   const getCanvas = vi.fn()
-  return { useCanvasStore: vi.fn(() => ({ getCanvas })) }
+  const setCursorStyle = vi.fn()
+  return {
+    useCanvasStore: vi.fn(() => ({
+      getCanvas,
+      setCursorStyle
+    }))
+  }
 })
-vi.mock('@/stores/settingStore', () => {
+vi.mock('@/platform/settings/settingStore', () => {
   const getFn = vi.fn()
   return { useSettingStore: vi.fn(() => ({ get: getFn })) }
 })
diff --git a/tests-ui/tests/renderer/core/layout/utils/layoutMath.test.ts b/tests-ui/tests/renderer/core/layout/utils/layoutMath.test.ts
new file mode 100644
index 000000000..3d768740e
--- /dev/null
+++ b/tests-ui/tests/renderer/core/layout/utils/layoutMath.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  REROUTE_RADIUS,
+  boundsIntersect,
+  pointInBounds
+} from '@/renderer/core/layout/utils/layoutMath'
+
+describe('layoutMath utils', () => {
+  describe('pointInBounds', () => {
+    it('detects inclusion correctly', () => {
+      const bounds = { x: 10, y: 10, width: 100, height: 50 }
+      expect(pointInBounds({ x: 10, y: 10 }, bounds)).toBe(true)
+      expect(pointInBounds({ x: 110, y: 60 }, bounds)).toBe(true)
+      expect(pointInBounds({ x: 9, y: 10 }, bounds)).toBe(false)
+      expect(pointInBounds({ x: 111, y: 10 }, bounds)).toBe(false)
+      expect(pointInBounds({ x: 10, y: 61 }, bounds)).toBe(false)
+    })
+
+    it('works with zero-size bounds', () => {
+      const zero = { x: 10, y: 20, width: 0, height: 0 }
+      expect(pointInBounds({ x: 10, y: 20 }, zero)).toBe(true)
+      expect(pointInBounds({ x: 10, y: 21 }, zero)).toBe(false)
+      expect(pointInBounds({ x: 9, y: 20 }, zero)).toBe(false)
+    })
+  })
+
+  describe('boundsIntersect', () => {
+    it('detects intersection correctly', () => {
+      const a = { x: 0, y: 0, width: 10, height: 10 }
+      const b = { x: 5, y: 5, width: 10, height: 10 }
+      const c = { x: 11, y: 0, width: 5, height: 5 }
+      expect(boundsIntersect(a, b)).toBe(true)
+      expect(boundsIntersect(a, c)).toBe(false)
+    })
+
+    it('treats touching edges as intersecting', () => {
+      const a = { x: 0, y: 0, width: 10, height: 10 }
+      const d = { x: 10, y: 0, width: 5, height: 5 } // touches at right edge
+      expect(boundsIntersect(a, d)).toBe(true)
+    })
+  })
+
+  describe('REROUTE_RADIUS', () => {
+    it('exports a sensible reroute radius', () => {
+      expect(REROUTE_RADIUS).toBeGreaterThan(0)
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/core/layout/utils/layoutUtils.test.ts b/tests-ui/tests/renderer/core/layout/utils/layoutUtils.test.ts
new file mode 100644
index 000000000..4c2dd87be
--- /dev/null
+++ b/tests-ui/tests/renderer/core/layout/utils/layoutUtils.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { makeLinkSegmentKey } from '@/renderer/core/layout/utils/layoutUtils'
+
+describe('layoutUtils', () => {
+  describe('makeLinkSegmentKey', () => {
+    it('creates stable keys for null reroute', () => {
+      expect(makeLinkSegmentKey(10, null)).toBe('10:final')
+      expect(makeLinkSegmentKey(42, null)).toBe('42:final')
+    })
+
+    it('creates stable keys for numeric reroute ids', () => {
+      expect(makeLinkSegmentKey(10, 3)).toBe('10:3')
+      expect(makeLinkSegmentKey(42, 0)).toBe('42:0')
+      expect(makeLinkSegmentKey(42, 7)).toBe('42:7')
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/core/layout/utils/mappers.test.ts b/tests-ui/tests/renderer/core/layout/utils/mappers.test.ts
new file mode 100644
index 000000000..a4ab0cd6b
--- /dev/null
+++ b/tests-ui/tests/renderer/core/layout/utils/mappers.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import * as Y from 'yjs'
+
+import {
+  NODE_LAYOUT_DEFAULTS,
+  type NodeLayoutMap,
+  yNodeToLayout
+} from '@/renderer/core/layout/utils/mappers'
+
+describe('mappers', () => {
+  it('yNodeToLayout reads from Yjs-attached map', () => {
+    const layout = {
+      id: 'node-1',
+      position: { x: 12, y: 34 },
+      size: { width: 111, height: 222 },
+      zIndex: 5,
+      visible: true,
+      bounds: { x: 12, y: 34, width: 111, height: 222 }
+    }
+
+    const doc = new Y.Doc()
+    const ynode = doc.getMap('node') as NodeLayoutMap
+    ynode.set('id', layout.id)
+    ynode.set('position', layout.position)
+    ynode.set('size', layout.size)
+    ynode.set('zIndex', layout.zIndex)
+    ynode.set('visible', layout.visible)
+    ynode.set('bounds', layout.bounds)
+
+    const back = yNodeToLayout(ynode)
+    expect(back).toEqual(layout)
+  })
+
+  it('yNodeToLayout applies defaults for missing fields', () => {
+    const doc = new Y.Doc()
+    const ynode = doc.getMap('node') as NodeLayoutMap
+    // Don't set any fields - they should all use defaults
+
+    const back = yNodeToLayout(ynode)
+    expect(back.id).toBe(NODE_LAYOUT_DEFAULTS.id)
+    expect(back.position).toEqual(NODE_LAYOUT_DEFAULTS.position)
+    expect(back.size).toEqual(NODE_LAYOUT_DEFAULTS.size)
+    expect(back.zIndex).toEqual(NODE_LAYOUT_DEFAULTS.zIndex)
+    expect(back.visible).toEqual(NODE_LAYOUT_DEFAULTS.visible)
+    expect(back.bounds).toEqual(NODE_LAYOUT_DEFAULTS.bounds)
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
index d4b004180..b845218d1 100644
--- a/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
+++ b/tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts
@@ -1,11 +1,11 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useMinimapSettings } from '@/renderer/extensions/minimap/composables/useMinimapSettings'
-import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
-vi.mock('@/stores/settingStore')
+vi.mock('@/platform/settings/settingStore')
 vi.mock('@/stores/workspace/colorPaletteStore')
 
 describe('useMinimapSettings', () => {
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 dafc5eaaa..d4f7c420a 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/ImagePreview.spec.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
new file mode 100644
index 000000000..ccf61ebcf
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.spec.ts
@@ -0,0 +1,277 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import ImagePreview from '@/renderer/extensions/vueNodes/components/ImagePreview.vue'
+
+// Mock downloadFile to avoid DOM errors
+vi.mock('@/base/common/downloadUtil', () => ({
+  downloadFile: vi.fn()
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        editOrMaskImage: 'Edit or mask image',
+        downloadImage: 'Download image',
+        removeImage: 'Remove image',
+        viewImageOfTotal: 'View image {index} of {total}',
+        imagePreview:
+          'Image preview - Use arrow keys to navigate between images',
+        errorLoadingImage: 'Error loading image',
+        failedToDownloadImage: 'Failed to download image',
+        calculatingDimensions: 'Calculating dimensions',
+        imageFailedToLoad: 'Image failed to load',
+        loading: 'Loading'
+      }
+    }
+  }
+})
+
+describe('ImagePreview', () => {
+  const defaultProps = {
+    imageUrls: [
+      '/api/view?filename=test1.png&type=output',
+      '/api/view?filename=test2.png&type=output'
+    ]
+  }
+
+  const mountImagePreview = (props = {}) => {
+    return mount(ImagePreview, {
+      props: { ...defaultProps, ...props },
+      global: {
+        plugins: [
+          createTestingPinia({
+            createSpy: vi.fn
+          }),
+          i18n
+        ],
+        stubs: {
+          'i-lucide:venetian-mask': true,
+          'i-lucide:download': true,
+          'i-lucide:x': true,
+          'i-lucide:image-off': true,
+          Skeleton: true
+        }
+      }
+    })
+  }
+
+  it('renders image preview when imageUrls provided', () => {
+    const wrapper = mountImagePreview()
+
+    expect(wrapper.find('.image-preview').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toBe(
+      defaultProps.imageUrls[0]
+    )
+  })
+
+  it('does not render when no imageUrls provided', () => {
+    const wrapper = mountImagePreview({ imageUrls: [] })
+
+    expect(wrapper.find('.image-preview').exists()).toBe(false)
+  })
+
+  it('displays calculating dimensions text initially', () => {
+    const wrapper = mountImagePreview()
+
+    expect(wrapper.text()).toContain('Calculating dimensions')
+  })
+
+  it('shows navigation dots for multiple images', () => {
+    const wrapper = mountImagePreview()
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    expect(navigationDots).toHaveLength(2)
+  })
+
+  it('does not show navigation dots for single image', () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    expect(navigationDots).toHaveLength(0)
+  })
+
+  it('shows action buttons on hover', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially buttons should not be visible
+    expect(wrapper.find('.actions').exists()).toBe(false)
+
+    // Trigger hover
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Action buttons should now be visible
+    expect(wrapper.find('.actions').exists()).toBe(true)
+    expect(wrapper.findAll('.action-btn')).toHaveLength(2) // download, remove (no mask for multiple images)
+  })
+
+  it('hides action buttons when not hovering', async () => {
+    const wrapper = mountImagePreview()
+
+    // Trigger hover
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(true)
+
+    // Trigger mouse leave
+    await wrapper.trigger('mouseleave')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(false)
+  })
+
+  it('shows mask/edit button only for single images', async () => {
+    // Multiple images - should not show mask button
+    const multipleImagesWrapper = mountImagePreview()
+    await multipleImagesWrapper.trigger('mouseenter')
+    await nextTick()
+
+    const maskButtonMultiple = multipleImagesWrapper.find(
+      '[aria-label="Edit or mask image"]'
+    )
+    expect(maskButtonMultiple.exists()).toBe(false)
+
+    // Single image - should show mask button
+    const singleImageWrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+    await singleImageWrapper.trigger('mouseenter')
+    await nextTick()
+
+    const maskButtonSingle = singleImageWrapper.find(
+      '[aria-label="Edit or mask image"]'
+    )
+    expect(maskButtonSingle.exists()).toBe(true)
+  })
+
+  it('handles action button clicks', async () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Test Edit/Mask button - just verify it can be clicked without errors
+    const editButton = wrapper.find('[aria-label="Edit or mask image"]')
+    expect(editButton.exists()).toBe(true)
+    await editButton.trigger('click')
+
+    // Test Remove button - just verify it can be clicked without errors
+    const removeButton = wrapper.find('[aria-label="Remove image"]')
+    expect(removeButton.exists()).toBe(true)
+    await removeButton.trigger('click')
+  })
+
+  it('handles download button click', async () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Test Download button
+    const downloadButton = wrapper.find('[aria-label="Download image"]')
+    expect(downloadButton.exists()).toBe(true)
+    await downloadButton.trigger('click')
+
+    // Verify the mocked downloadFile was called
+    expect(downloadFile).toHaveBeenCalledWith(defaultProps.imageUrls[0])
+  })
+
+  it('switches images when navigation dots are clicked', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially shows first image
+    expect(wrapper.find('img').attributes('src')).toBe(
+      defaultProps.imageUrls[0]
+    )
+
+    // Click second navigation dot
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // After clicking, component shows loading state (Skeleton), not img
+    expect(wrapper.find('skeleton-stub').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+
+    // Simulate image load event to clear loading state
+    const component = wrapper.vm as any
+    component.isLoading = false
+    await nextTick()
+
+    // Now should show second image
+    const imgElement = wrapper.find('img')
+    expect(imgElement.exists()).toBe(true)
+    expect(imgElement.attributes('src')).toBe(defaultProps.imageUrls[1])
+  })
+
+  it('applies correct classes to navigation dots based on current image', async () => {
+    const wrapper = mountImagePreview()
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+
+    // First dot should be active (has bg-white class)
+    expect(navigationDots[0].classes()).toContain('bg-white')
+    expect(navigationDots[1].classes()).toContain('bg-white/50')
+
+    // Switch to second image
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // Second dot should now be active
+    expect(navigationDots[0].classes()).toContain('bg-white/50')
+    expect(navigationDots[1].classes()).toContain('bg-white')
+  })
+
+  it('loads image without errors', async () => {
+    const wrapper = mountImagePreview()
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+
+    // Just verify the image element is properly set up
+    expect(img.attributes('src')).toBe(defaultProps.imageUrls[0])
+  })
+
+  it('has proper accessibility attributes', () => {
+    const wrapper = mountImagePreview()
+
+    const img = wrapper.find('img')
+    expect(img.attributes('alt')).toBe('Node output 1')
+  })
+
+  it('updates alt text when switching images', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially first image
+    expect(wrapper.find('img').attributes('alt')).toBe('Node output 1')
+
+    // Switch to second image
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // Simulate image load event to clear loading state
+    const component = wrapper.vm as any
+    component.isLoading = false
+    await nextTick()
+
+    // Alt text should update
+    const imgElement = wrapper.find('img')
+    expect(imgElement.exists()).toBe(true)
+    expect(imgElement.attributes('alt')).toBe('Node output 2')
+  })
+})
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 7acebce00..4800658f8 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts
@@ -1,12 +1,39 @@
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { 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'
 
+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',
   () => ({
@@ -23,56 +50,92 @@ 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(() => mockData.mockExecuting),
+      progress: computed(() => undefined),
+      progressPercentage: computed(() => undefined),
+      progressState: computed(() => undefined as any),
+      executionState: computed(() => 'idle' as const)
+    }))
+  })
+)
+
+vi.mock('@/renderer/extensions/vueNodes/preview/useNodePreviewState', () => ({
+  useNodePreviewState: vi.fn(() => ({
+    latestPreviewUrl: computed(() => ''),
+    shouldShowPreviewImg: computed(() => false)
+  }))
 }))
 
-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 i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      'Node Render Error': 'Node Render Error'
+    }
   }
-
-  const mountLGraphNode = (props: any, selectedNodeIds = new Set()) => {
-    return mount(LGraphNode, {
-      props,
-      global: {
-        provide: {
-          [SelectedNodeIdsKey as symbol]: ref(selectedNodeIds)
-        }
+})
+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()
+    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', () => {
@@ -82,34 +145,55 @@ describe('LGraphNode', () => {
   })
 
   it('should render node title', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+    // Don't stub NodeHeader for this test so we can see the title
+    const wrapper = mount(LGraphNode, {
+      props: { nodeData: mockNodeData },
+      global: {
+        plugins: [
+          createTestingPinia({
+            createSpy: vi.fn
+          }),
+          i18n
+        ],
+        stubs: {
+          NodeSlots: true,
+          NodeWidgets: true,
+          NodeContent: true,
+          SlotConnectionDot: true
+        }
+      }
+    })
 
     expect(wrapper.text()).toContain('Test Node')
   })
 
   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', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData, executing: true })
+    mockData.mockExecuting = true
+
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
     expect(wrapper.classes()).toContain('animate-pulse')
   })
 
-  it('should emit node-click event on pointer down', async () => {
+  it('should emit node-click event on pointer up', async () => {
+    const { handleNodeSelect } = useNodeEventHandlers()
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
-    await wrapper.trigger('pointerdown')
+    await wrapper.trigger('pointerup')
 
-    expect(wrapper.emitted('node-click')).toHaveLength(1)
-    expect(wrapper.emitted('node-click')?.[0]).toHaveLength(2)
-    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 000000000..cca01bce8
--- /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 51a0ae235..dd08457eb 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 { computed, shallowRef } 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 {
+  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'
-import { useCanvasStore } from '@/stores/graphStore'
 
-vi.mock('@/stores/graphStore', () => ({
-  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()
   }
-}
-
-function createMockNode(): Pick<LGraphNode, 'id' | 'selected' | 'flags'> {
+  const updateSelectedItems = vi.fn()
   return {
+    useCanvasStore: vi.fn(() => ({
+      canvas: canvas as LGraphCanvas,
+      updateSelectedItems,
+      selectedItems: []
+    }))
+  }
+})
+
+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'
-> {
+vi.mock('@/composables/graph/useVueNodeLifecycle', () => {
+  const nodeManager = useGraphNodeManager(undefined as unknown as LGraph)
   return {
-    canvas: canvas as LGraphCanvas,
-    selectedItems: [],
-    updateSelectedItems: vi.fn()
+    useVueNodeLifecycle: vi.fn(() => ({
+      nodeManager
+    }))
   }
-}
-
-function createMockLayoutMutations(): Pick<
-  ReturnType<typeof useLayoutMutations>,
-  'setSource' | 'bringNodeToFront'
-> {
-  return {
-    setSource: vi.fn(),
-    bringNodeToFront: vi.fn()
-  }
-}
+})
 
 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,
@@ -110,19 +102,19 @@ describe('useNodeEventHandlers', () => {
         metaKey: false
       })
 
-      handleNodeSelect(event, testNodeData)
+      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,
@@ -130,18 +122,18 @@ describe('useNodeEventHandlers', () => {
         metaKey: false
       })
 
-      handleNodeSelect(ctrlClickEvent, testNodeData)
+      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,
@@ -149,17 +141,17 @@ describe('useNodeEventHandlers', () => {
         metaKey: false
       })
 
-      handleNodeSelect(ctrlClickEvent, testNodeData)
+      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,
@@ -167,20 +159,19 @@ describe('useNodeEventHandlers', () => {
         metaKey: true
       })
 
-      handleNodeSelect(metaClickEvent, testNodeData)
+      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)
+      handleNodeSelect(event, testNodeData, false)
 
       expect(mockLayoutMutations.bringNodeToFront).toHaveBeenCalledWith(
         'node-1'
@@ -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)
+      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)
-      }).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)
-      }).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 68850c18a..77d035a67 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'
+
+const mockSettingStore = reactive({
+  get: vi.fn(() => 8)
+})
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => mockSettingStore
+}))
 
 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)
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
 
-      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)
-    })
+    mockSettingStore.get.mockReturnValue(8)
   })
 
-  describe('rendering decisions', () => {
-    it('should disable all rendering for MINIMAL LOD', () => {
-      const zoomRef = ref(0.2)
-      const {
-        shouldRenderWidgets,
-        shouldRenderSlots,
-        shouldRenderContent,
-        shouldRenderSlotLabels,
-        shouldRenderWidgetLabels
-      } = useLOD(zoomRef)
+  it('should calculate isLOD value based on zoom threshold correctly', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
 
-      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)
-    })
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-    it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
-      const zoomRef = ref(0.6)
-      const {
-        shouldRenderWidgets,
-        shouldRenderSlots,
-        shouldRenderContent,
-        shouldRenderSlotLabels,
-        shouldRenderWidgetLabels
-      } = useLOD(zoomRef)
+    await nextTick()
+    expect(isLOD.value).toBe(false)
 
-      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)
-    })
+    camera.z = 0.55
+    await nextTick()
+    expect(isLOD.value).toBe(true)
 
-    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)
-    })
+    camera.z = 0.87
+    await nextTick()
+    expect(isLOD.value).toBe(false)
   })
 
-  describe('CSS classes', () => {
-    it('should return correct CSS class for each LOD level', () => {
-      const zoomRef = ref(0.2)
-      const { lodCssClass } = useLOD(zoomRef)
+  it('should handle a different devicePixelRatio value', async () => {
+    vi.stubGlobal('devicePixelRatio', 3) //Threshold with 8px minFontsize = 0.19
 
-      expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-      zoomRef.value = 0.6
-      expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+    await nextTick()
+    expect(isLOD.value).toBe(false)
 
-      zoomRef.value = 1.0
-      expect(lodCssClass.value).toBe('lg-node--lod-full')
-    })
+    camera.z = 0.18
+    await nextTick()
+    expect(isLOD.value).toBe(true)
   })
 
-  describe('essential widgets filtering', () => {
-    it('should return all widgets for FULL LOD', () => {
-      const zoomRef = ref(1.0)
-      const { getEssentialWidgets } = useLOD(zoomRef)
+  it('should respond to different minFontSize settings', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
 
-      const widgets = [
-        { type: 'combo' },
-        { type: 'text' },
-        { type: 'button' },
-        { type: 'slider' }
-      ]
+    mockSettingStore.get.mockReturnValue(16) //Now threshold is 1.14
 
-      expect(getEssentialWidgets(widgets)).toEqual(widgets)
-    })
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
 
-    it('should return empty array for MINIMAL LOD', () => {
-      const zoomRef = ref(0.2)
-      const { getEssentialWidgets } = useLOD(zoomRef)
+    await nextTick()
+    expect(isLOD.value).toBe(true)
 
-      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' }
-      ]
-
-      const essential = getEssentialWidgets(widgets)
-      expect(essential).toHaveLength(4)
-      expect(essential.map((w: any) => w.type)).toEqual([
-        'combo',
-        'slider',
-        'toggle',
-        'number'
-      ])
-    })
-
-    it('should handle case-insensitive widget types', () => {
-      const zoomRef = ref(0.6)
-      const { getEssentialWidgets } = useLOD(zoomRef)
-
-      const widgets = [
-        { type: 'COMBO' },
-        { type: 'Select' },
-        { type: 'TOGGLE' }
-      ]
-
-      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'])
-    })
-  })
-
-  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)
-
-      expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
-      expect(lodMetrics.value.widgetCount).toBe('none')
-      expect(lodMetrics.value.slotCount).toBe('none')
-
-      zoomRef.value = 1.0
-      expect(lodMetrics.value.level).toBe(LODLevel.FULL)
-      expect(lodMetrics.value.widgetCount).toBe('full')
-      expect(lodMetrics.value.slotCount).toBe('full')
-    })
-  })
-})
-
-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)
-  })
-})
-
-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)
-
-    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)
-  })
-
-  it('should handle threshold boundary values correctly', () => {
-    expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
-    expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
-
-    expect(supportsFeatureAtZoom(0.81, 'renderContent')).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 ce3acffc5..d439d98ca 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,16 +2,17 @@ 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'
-import { assetService } from '@/services/assetService'
 
 vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
 }))
 
 const mockSettingStoreGet = vi.fn(() => false)
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: mockSettingStoreGet
   }))
@@ -23,19 +24,31 @@ vi.mock('@/i18n', () => ({
   )
 }))
 
-vi.mock('@/services/assetService', () => ({
+vi.mock('@/platform/assets/services/assetService', () => ({
   assetService: {
     isAssetBrowserEligible: vi.fn(() => false)
   }
 }))
 
+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', () => {
@@ -88,8 +110,8 @@ describe('useComboWidget', () => {
   })
 
   it('should create normal combo widget when asset API is disabled', () => {
-    mockSettingStoreGet.mockReturnValue(false)
-    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+    mockSettingStoreGet.mockReturnValue(false) // Asset API disabled
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true) // Widget is eligible
 
     const constructor = useComboWidget()
     const mockWidget = createMockWidget()
@@ -101,6 +123,7 @@ describe('useComboWidget', () => {
     })
 
     const widget = constructor(mockNode, inputSpec)
+    expect(widget).toBe(mockWidget)
 
     expect(mockNode.addWidget).toHaveBeenCalledWith(
       'combo',
@@ -142,15 +165,15 @@ describe('useComboWidget', () => {
     expect(widget).toBe(mockWidget)
   })
 
-  it('should create asset browser button widget when API enabled and widget eligible', () => {
+  it('should create asset browser widget when API enabled and widget eligible', () => {
     mockSettingStoreGet.mockReturnValue(true)
     vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
 
     const constructor = useComboWidget()
     const mockWidget = createMockWidget({
-      type: 'button',
+      type: 'asset',
       name: 'ckpt_name',
-      value: 'Select model'
+      value: 'model1.safetensors'
     })
     const mockNode = createMockNode('CheckpointLoaderSimple')
     vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
@@ -162,9 +185,9 @@ describe('useComboWidget', () => {
     const widget = constructor(mockNode, inputSpec)
 
     expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'button',
+      'asset',
       'ckpt_name',
-      'Select model',
+      'model1.safetensors',
       expect.any(Function)
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
@@ -175,15 +198,48 @@ describe('useComboWidget', () => {
     expect(widget).toBe(mockWidget)
   })
 
-  it('should use asset browser button even when inputSpec has a default value but no options', () => {
+  it('should create asset browser widget with options when API enabled and widget eligible', () => {
     mockSettingStoreGet.mockReturnValue(true)
     vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
 
     const constructor = useComboWidget()
     const mockWidget = createMockWidget({
-      type: 'button',
+      type: 'asset',
       name: 'ckpt_name',
-      value: 'Select model'
+      value: 'model1.safetensors'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'model1.safetensors',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should use asset browser widget even when inputSpec has a default value but no options', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'fallback.safetensors'
     })
     const mockNode = createMockNode('CheckpointLoaderSimple')
     vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
@@ -196,9 +252,42 @@ describe('useComboWidget', () => {
     const widget = constructor(mockNode, inputSpec)
 
     expect(mockNode.addWidget).toHaveBeenCalledWith(
-      'button',
+      'asset',
       'ckpt_name',
-      'Select model',
+      'fallback.safetensors',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should show Select model when asset widget has undefined current value', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'Select model'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name'
+      // Note: no default, no options, not remote - getDefaultValue returns undefined
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'Select model', // Should fallback to this instead of undefined
       expect.any(Function)
     )
     expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
index 6dde265a6..a2274104c 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts
@@ -6,7 +6,7 @@ vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     settings: {}
   })
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
index edf4efab9..8f1284026 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts
@@ -6,7 +6,7 @@ vi.mock('@/scripts/widgets', () => ({
   addValueControlWidgets: vi.fn()
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     settings: {}
   })
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 9b301cce0..e5c957085 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 {
@@ -20,7 +20,7 @@ vi.mock('@/i18n', () => ({
   }
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     settings: {}
   })
diff --git a/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts b/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
index 868fb05fa..338ce0fcc 100644
--- a/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
+++ b/tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts
@@ -1,9 +1,10 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
-vi.mock('@/renderer/thumbnail/graphThumbnailRenderer', () => ({
+vi.mock('@/renderer/core/thumbnail/graphThumbnailRenderer', () => ({
   createGraphThumbnail: vi.fn()
 }))
 
@@ -19,10 +20,10 @@ vi.mock('@/scripts/api', () => ({
 }))
 
 const { useWorkflowThumbnail } = await import(
-  '@/renderer/thumbnail/composables/useWorkflowThumbnail'
+  '@/renderer/core/thumbnail/useWorkflowThumbnail'
 )
 const { createGraphThumbnail } = await import(
-  '@/renderer/thumbnail/graphThumbnailRenderer'
+  '@/renderer/core/thumbnail/graphThumbnailRenderer'
 )
 const { api } = await import('@/scripts/api')
 
diff --git a/tests-ui/tests/services/algoliaSearchProvider.test.ts b/tests-ui/tests/services/algoliaSearchProvider.test.ts
index 583f30071..7d4dbf2b3 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 6a3981acb..7a719c4e4 100644
--- a/tests-ui/tests/services/assetService.test.ts
+++ b/tests-ui/tests/services/assetService.test.ts
@@ -1,7 +1,10 @@
 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'
-import { assetService } from '@/services/assetService'
+
+const mockGetCategoryForNodeType = vi.fn()
 
 vi.mock('@/stores/modelToNodeStore', () => ({
   useModelToNodeStore: 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/services/keybindingService.escape.test.ts b/tests-ui/tests/services/keybindingService.escape.test.ts
index d777617c6..20b608e8d 100644
--- a/tests-ui/tests/services/keybindingService.escape.test.ts
+++ b/tests-ui/tests/services/keybindingService.escape.test.ts
@@ -12,7 +12,7 @@ import {
 } from '@/stores/keybindingStore'
 
 // Mock stores
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: vi.fn(() => [])
   }))
diff --git a/tests-ui/tests/services/keybindingService.forwarding.test.ts b/tests-ui/tests/services/keybindingService.forwarding.test.ts
new file mode 100644
index 000000000..1c62222dd
--- /dev/null
+++ b/tests-ui/tests/services/keybindingService.forwarding.test.ts
@@ -0,0 +1,176 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { app } from '@/scripts/app'
+import { useKeybindingService } from '@/services/keybindingService'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+
+// Mock the app and canvas using factory functions
+vi.mock('@/scripts/app', () => {
+  return {
+    app: {
+      canvas: {
+        processKey: vi.fn()
+      }
+    }
+  }
+})
+
+// Mock stores
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => [])
+  }))
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: vi.fn(() => ({
+    dialogStack: []
+  }))
+}))
+
+// Test utility for creating keyboard events with mocked methods
+function createTestKeyboardEvent(
+  key: string,
+  options: {
+    target?: Element
+    ctrlKey?: boolean
+    altKey?: boolean
+    metaKey?: boolean
+  } = {}
+): KeyboardEvent {
+  const {
+    target = document.body,
+    ctrlKey = false,
+    altKey = false,
+    metaKey = false
+  } = options
+
+  const event = new KeyboardEvent('keydown', {
+    key,
+    ctrlKey,
+    altKey,
+    metaKey,
+    bubbles: true,
+    cancelable: true
+  })
+
+  // Mock event methods
+  event.preventDefault = vi.fn()
+  event.composedPath = vi.fn(() => [target])
+
+  return event
+}
+
+describe('keybindingService - Event Forwarding', () => {
+  let keybindingService: ReturnType<typeof useKeybindingService>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    // Mock command store execute
+    const commandStore = useCommandStore()
+    commandStore.execute = vi.fn()
+
+    // Reset dialog store mock to empty
+    vi.mocked(useDialogStore).mockReturnValue({
+      dialogStack: []
+    } as any)
+
+    keybindingService = useKeybindingService()
+    keybindingService.registerCoreKeybindings()
+  })
+
+  it('should forward Delete key to canvas when no keybinding exists', async () => {
+    const event = createTestKeyboardEvent('Delete')
+
+    await keybindingService.keybindHandler(event)
+
+    // Should forward to canvas processKey
+    expect(vi.mocked(app.canvas.processKey)).toHaveBeenCalledWith(event)
+    // Should not execute any command
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+
+  it('should forward Backspace key to canvas when no keybinding exists', async () => {
+    const event = createTestKeyboardEvent('Backspace')
+
+    await keybindingService.keybindHandler(event)
+
+    expect(vi.mocked(app.canvas.processKey)).toHaveBeenCalledWith(event)
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+
+  it('should not forward Delete key when typing in input field', async () => {
+    const inputElement = document.createElement('input')
+    const event = createTestKeyboardEvent('Delete', { target: inputElement })
+
+    await keybindingService.keybindHandler(event)
+
+    // Should not forward to canvas when in input field
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+
+  it('should not forward Delete key when typing in textarea', async () => {
+    const textareaElement = document.createElement('textarea')
+    const event = createTestKeyboardEvent('Delete', { target: textareaElement })
+
+    await keybindingService.keybindHandler(event)
+
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+
+  it('should not forward Delete key when canvas processKey is not available', async () => {
+    // Temporarily replace processKey with undefined
+    const originalProcessKey = vi.mocked(app.canvas).processKey
+    vi.mocked(app.canvas).processKey = undefined as any
+
+    const event = createTestKeyboardEvent('Delete')
+
+    await keybindingService.keybindHandler(event)
+
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+
+    // Restore processKey for other tests
+    vi.mocked(app.canvas).processKey = originalProcessKey
+  })
+
+  it('should not forward Delete key when canvas is not available', async () => {
+    // Temporarily set canvas to null
+    const originalCanvas = vi.mocked(app).canvas
+    vi.mocked(app).canvas = null as any
+
+    const event = createTestKeyboardEvent('Delete')
+
+    await keybindingService.keybindHandler(event)
+
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+
+    // Restore canvas for other tests
+    vi.mocked(app).canvas = originalCanvas
+  })
+
+  it('should not forward non-canvas keys', async () => {
+    const event = createTestKeyboardEvent('Enter')
+
+    await keybindingService.keybindHandler(event)
+
+    // Should not forward Enter key
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+
+  it('should not forward when modifier keys are pressed', async () => {
+    const event = createTestKeyboardEvent('Delete', { ctrlKey: true })
+
+    await keybindingService.keybindHandler(event)
+
+    // Should not forward when modifiers are pressed
+    expect(vi.mocked(app.canvas.processKey)).not.toHaveBeenCalled()
+    expect(vi.mocked(useCommandStore().execute)).not.toHaveBeenCalled()
+  })
+})
diff --git a/tests-ui/tests/services/releaseService.test.ts b/tests-ui/tests/services/releaseService.test.ts
index 57913a5d5..8dd2d7a94 100644
--- a/tests-ui/tests/services/releaseService.test.ts
+++ b/tests-ui/tests/services/releaseService.test.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useReleaseService } from '@/services/releaseService'
+import { useReleaseService } from '@/platform/updates/common/releaseService'
 
 // Hoist the mock to avoid hoisting issues
 const mockAxiosInstance = vi.hoisted(() => ({
diff --git a/tests-ui/tests/store/comfyManagerStore.test.ts b/tests-ui/tests/store/comfyManagerStore.test.ts
index a1d748111..b2db9713d 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/executionStore.test.ts b/tests-ui/tests/store/executionStore.test.ts
index d34bf4867..498148e57 100644
--- a/tests-ui/tests/store/executionStore.test.ts
+++ b/tests-ui/tests/store/executionStore.test.ts
@@ -1,12 +1,12 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
 // Mock the workflowStore
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({
     nodeExecutionIdToNodeLocatorId: vi.fn(),
     nodeIdToNodeLocatorId: vi.fn(),
diff --git a/tests-ui/tests/store/firebaseAuthStore.test.ts b/tests-ui/tests/store/firebaseAuthStore.test.ts
index ffe7a8d99..d37c3857a 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 d0df957dc..d2bb8d639 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/modelStore.test.ts b/tests-ui/tests/store/modelStore.test.ts
index e77e9be0d..c9ed82e55 100644
--- a/tests-ui/tests/store/modelStore.test.ts
+++ b/tests-ui/tests/store/modelStore.test.ts
@@ -1,22 +1,25 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { assetService } from '@/platform/assets/services/assetService'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
-import { assetService } from '@/services/assetService'
 import { useModelStore } from '@/stores/modelStore'
-import { useSettingStore } from '@/stores/settingStore'
 
 // Mock the api
 vi.mock('@/scripts/api', () => ({
   api: {
     getModels: vi.fn(),
     getModelFolders: vi.fn(),
-    viewMetadata: vi.fn()
+    viewMetadata: vi.fn(),
+    apiURL: vi.fn((path: string) => `http://localhost:8188${path}`),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
   }
 }))
 
 // Mock the assetService
-vi.mock('@/services/assetService', () => ({
+vi.mock('@/platform/assets/services/assetService', () => ({
   assetService: {
     getAssetModelFolders: vi.fn(),
     getAssetModels: vi.fn()
@@ -24,7 +27,7 @@ vi.mock('@/services/assetService', () => ({
 }))
 
 // Mock the settingStore
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn()
 }))
 
diff --git a/tests-ui/tests/store/modelToNodeStore.test.ts b/tests-ui/tests/store/modelToNodeStore.test.ts
index 179c76b9e..b07c34a41 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 93a9d9dc6..467ea9f18 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 '@/stores/releaseStore'
+import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 
 // Mock the dependencies
-vi.mock('@/utils/formatUtil')
+vi.mock('semver')
 vi.mock('@/utils/envUtil')
-vi.mock('@/services/releaseService')
-vi.mock('@/stores/settingStore')
+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', () => {
@@ -59,8 +61,10 @@ describe('useReleaseStore', () => {
     }
 
     // Setup mock implementations
-    const { useReleaseService } = await import('@/services/releaseService')
-    const { useSettingStore } = await import('@/stores/settingStore')
+    const { useReleaseService } = await import(
+      '@/platform/updates/common/releaseService'
+    )
+    const { useSettingStore } = await import('@/platform/settings/settingStore')
     const { useSystemStatsStore } = await import('@/stores/systemStatsStore')
     const { isElectron } = await import('@/utils/envUtil')
 
@@ -111,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)
@@ -129,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 = {
@@ -156,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)
       })
@@ -179,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)
       })
@@ -238,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])
     })
@@ -252,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'
       })
     })
 
@@ -422,7 +423,7 @@ describe('useReleaseStore', () => {
   })
 
   describe('action handlers', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       store.releases = [mockRelease]
     })
 
@@ -479,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
@@ -487,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 = [
@@ -500,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
@@ -513,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]
 
@@ -563,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) => {
@@ -578,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 = {
@@ -593,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)
       })
@@ -615,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 = {
@@ -630,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 = {
@@ -657,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/searchBoxStore.test.ts b/tests-ui/tests/store/searchBoxStore.test.ts
index 3e8bd49c0..10a3ab7d4 100644
--- a/tests-ui/tests/store/searchBoxStore.test.ts
+++ b/tests-ui/tests/store/searchBoxStore.test.ts
@@ -2,7 +2,7 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type NodeSearchBoxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
-import type { useSettingStore } from '@/stores/settingStore'
+import type { useSettingStore } from '@/platform/settings/settingStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 
 // Mock dependencies
@@ -14,7 +14,7 @@ vi.mock('@vueuse/core', () => ({
 }))
 
 const mockSettingStore = createMockSettingStore()
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => mockSettingStore)
 }))
 
diff --git a/tests-ui/tests/store/serverConfigStore.test.ts b/tests-ui/tests/store/serverConfigStore.test.ts
index 880cddb02..dd25c5b64 100644
--- a/tests-ui/tests/store/serverConfigStore.test.ts
+++ b/tests-ui/tests/store/serverConfigStore.test.ts
@@ -1,9 +1,9 @@
 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'
-import type { FormItem } from '@/types/settingTypes'
 
 const dummyFormItem: FormItem = {
   name: '',
diff --git a/tests-ui/tests/store/settingStore.test.ts b/tests-ui/tests/store/settingStore.test.ts
index 9192e67c8..60d7acd1c 100644
--- a/tests-ui/tests/store/settingStore.test.ts
+++ b/tests-ui/tests/store/settingStore.test.ts
@@ -1,10 +1,13 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import {
+  getSettingInfo,
+  useSettingStore
+} from '@/platform/settings/settingStore'
+import type { SettingParams } from '@/platform/settings/types'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { getSettingInfo, useSettingStore } from '@/stores/settingStore'
-import type { SettingParams } from '@/types/settingTypes'
 
 // Mock the api
 vi.mock('@/scripts/api', () => ({
diff --git a/tests-ui/tests/store/subgraphNavigationStore.test.ts b/tests-ui/tests/store/subgraphNavigationStore.test.ts
index b9d5537cd..d7753bb0c 100644
--- a/tests-ui/tests/store/subgraphNavigationStore.test.ts
+++ b/tests-ui/tests/store/subgraphNavigationStore.test.ts
@@ -2,10 +2,10 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
-import type { ComfyWorkflow } from '@/stores/workflowStore'
 
 vi.mock('@/scripts/app', () => {
   const mockCanvas = {
@@ -34,7 +34,7 @@ vi.mock('@/scripts/app', () => {
   }
 })
 
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({
     getCanvas: () => (app as any).canvas
   })
diff --git a/tests-ui/tests/store/subgraphNavigationStore.viewport.test.ts b/tests-ui/tests/store/subgraphNavigationStore.viewport.test.ts
index db40609e0..6dbf85a6b 100644
--- a/tests-ui/tests/store/subgraphNavigationStore.viewport.test.ts
+++ b/tests-ui/tests/store/subgraphNavigationStore.viewport.test.ts
@@ -2,10 +2,10 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
-import type { ComfyWorkflow } from '@/stores/workflowStore'
 
 vi.mock('@/scripts/app', () => {
   const mockCanvas = {
@@ -35,7 +35,7 @@ vi.mock('@/scripts/app', () => {
 })
 
 // Mock canvasStore
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({
     getCanvas: () => (app as any).canvas
   })
diff --git a/tests-ui/tests/store/subgraphStore.test.ts b/tests-ui/tests/store/subgraphStore.test.ts
index e8f844c59..d54d596d7 100644
--- a/tests-ui/tests/store/subgraphStore.test.ts
+++ b/tests-ui/tests/store/subgraphStore.test.ts
@@ -28,7 +28,7 @@ vi.mock('@/services/dialogService', () => ({
     confirm: () => true
   }))
 }))
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn(() => ({
     getCanvas: () => comfyApp.canvas
   }))
diff --git a/tests-ui/tests/store/versionCompatibilityStore.test.ts b/tests-ui/tests/store/versionCompatibilityStore.test.ts
index b5ff99ab4..f77baf328 100644
--- a/tests-ui/tests/store/versionCompatibilityStore.test.ts
+++ b/tests-ui/tests/store/versionCompatibilityStore.test.ts
@@ -2,8 +2,8 @@ import { createPinia, setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
+import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
 
 vi.mock('@/config', () => ({
   default: {
diff --git a/tests-ui/tests/store/workflowStore.test.ts b/tests-ui/tests/store/workflowStore.test.ts
index d2cdc2f1f..648d00fa8 100644
--- a/tests-ui/tests/store/workflowStore.test.ts
+++ b/tests-ui/tests/store/workflowStore.test.ts
@@ -3,15 +3,15 @@ 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 {
+  type LoadedComfyWorkflow,
+  useWorkflowBookmarkStore,
+  useWorkflowStore
+} from '@/platform/workflow/management/stores/workflowStore'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { defaultGraph, defaultGraphJSON } from '@/scripts/defaultGraph'
-import {
-  ComfyWorkflow,
-  LoadedComfyWorkflow,
-  useWorkflowBookmarkStore,
-  useWorkflowStore
-} from '@/stores/workflowStore'
 import { isSubgraph } from '@/utils/typeGuardUtil'
 
 // Add mock for api at the top of the file
diff --git a/tests-ui/tests/stores/conflictDetectionStore.test.ts b/tests-ui/tests/stores/conflictDetectionStore.test.ts
index 875079227..7c74ea6c1 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/types/nodeIdentification.test.ts b/tests-ui/tests/types/nodeIdentification.test.ts
index 0d9aa647b..5b2a94325 100644
--- a/tests-ui/tests/types/nodeIdentification.test.ts
+++ b/tests-ui/tests/types/nodeIdentification.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import {
   type NodeLocatorId,
   createNodeExecutionId,
diff --git a/tests-ui/tests/utils/conflictUtils.test.ts b/tests-ui/tests/utils/conflictUtils.test.ts
new file mode 100644
index 000000000..876684378
--- /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 b4301941f..36a6692ee 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/migration/migrateReroute.test.ts b/tests-ui/tests/utils/migration/migrateReroute.test.ts
index 9301d404e..ce7b62a2e 100644
--- a/tests-ui/tests/utils/migration/migrateReroute.test.ts
+++ b/tests-ui/tests/utils/migration/migrateReroute.test.ts
@@ -2,7 +2,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { describe, expect, it } from 'vitest'
 
-import type { WorkflowJSON04 } from '@/schemas/comfyWorkflowSchema'
+import type { WorkflowJSON04 } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { migrateLegacyRerouteNodes } from '@/utils/migration/migrateReroute'
 
 describe('migrateReroute', () => {
@@ -19,7 +19,7 @@ describe('migrateReroute', () => {
       'single_connected.json',
       'floating.json',
       'floating_branch.json'
-    ])('should correctly migrate %s', (fileName) => {
+    ])('should correctly migrate %s', async (fileName) => {
       // Load the legacy workflow
       const legacyWorkflow = loadWorkflow(
         `workflows/reroute/legacy/${fileName}`
@@ -29,9 +29,9 @@ describe('migrateReroute', () => {
       const migratedWorkflow = migrateLegacyRerouteNodes(legacyWorkflow)
 
       // Compare with snapshot
-      expect(JSON.stringify(migratedWorkflow, null, 2)).toMatchFileSnapshot(
-        `workflows/reroute/native/${fileName}`
-      )
+      await expect(
+        JSON.stringify(migratedWorkflow, null, 2)
+      ).toMatchFileSnapshot(`workflows/reroute/native/${fileName}`)
     })
   })
 })
diff --git a/tests-ui/tests/utils/systemCompatibility.test.ts b/tests-ui/tests/utils/systemCompatibility.test.ts
new file mode 100644
index 000000000..0e34cc7eb
--- /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 9c367a30d..ebd1ffbd5 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 000000000..87e343496
--- /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/tests-ui/tests/widgets/proxyWidget.test.ts b/tests-ui/tests/widgets/proxyWidget.test.ts
index f76ea09f8..fc0ab5f2f 100644
--- a/tests-ui/tests/widgets/proxyWidget.test.ts
+++ b/tests-ui/tests/widgets/proxyWidget.test.ts
@@ -1,16 +1,16 @@
 import { describe, expect, test, vi } from 'vitest'
 
+import '@/core/graph/subgraph/proxyWidget'
 //import { ComponentWidgetImpl, DOMWidgetImpl } from '@/scripts/domWidget'
 
 import { LGraphNode, type SubgraphNode } from '@/lib/litegraph/src/litegraph'
-import '@/scripts/proxyWidget'
 
 import {
   createTestSubgraph,
   createTestSubgraphNode
 } from '../litegraph/subgraph/fixtures/subgraphHelpers'
 
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({})
 }))
 vi.mock('@/stores/domWidgetStore', () => ({
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 9b1635700..f600c4a7f 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/tests-ui/unit-testing.md b/tests-ui/unit-testing.md
index e51fc68e7..5117b860f 100644
--- a/tests-ui/unit-testing.md
+++ b/tests-ui/unit-testing.md
@@ -93,7 +93,7 @@ Testing with ComfyUI workflow files:
 ```typescript
 // Example from: tests-ui/tests/comfyWorkflow.test.ts
 import { describe, expect, it } from 'vitest'
-import { validateComfyWorkflow } from '@/schemas/comfyWorkflowSchema'
+import { validateComfyWorkflow } from '@/domains/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
 
 describe('workflow validation', () => {
diff --git a/tools/devtools/README.md b/tools/devtools/README.md
new file mode 100644
index 000000000..d0d316ce8
--- /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 000000000..3ac47cb18
--- /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 000000000..15311d74b
--- /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 000000000..825ba255d
--- /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 e183ed3f2..75926b943 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,6 +19,7 @@
     "downlevelIteration": true,
     "noImplicitOverride": true,
     "allowJs": true,
+    "verbatimModuleSyntax": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
@@ -28,12 +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",
-    "vite.config.mts",
-    ".storybook/**/*"
   ]
 }
diff --git a/vite.config.mts b/vite.config.mts
index 292f45f3c..25cd730aa 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -28,7 +28,12 @@ export default defineConfig({
   server: {
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     watch: {
-      ignored: ['**/coverage/**', '**/playwright-report/**']
+      ignored: [
+        '**/coverage/**',
+        '**/playwright-report/**',
+        '**/*.{test,spec}.ts',
+        '*.config.{ts,mts}'
+      ]
     },
     proxy: {
       '/internal': {
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
index 88413e38f..8ec68a64f 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 36fdb1a00..02565497e 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: {