diff --git a/.github/workflows/ci-shell-validation.yaml b/.github/workflows/ci-shell-validation.yaml
new file mode 100644
index 0000000000..783d1b03cc
--- /dev/null
+++ b/.github/workflows/ci-shell-validation.yaml
@@ -0,0 +1,26 @@
+# Description: Runs shellcheck on tracked shell scripts when they change
+name: "CI: Shell Validation"
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '**/*.sh'
+  pull_request:
+    paths:
+      - '**/*.sh'
+
+jobs:
+  shell-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Install shellcheck
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y shellcheck
+
+      - name: Run shellcheck
+        run: bash ./scripts/cicd/check-shell.sh
diff --git a/.github/workflows/pr-backport.yaml b/.github/workflows/pr-backport.yaml
index 69607d6fb1..13fab6cdb4 100644
--- a/.github/workflows/pr-backport.yaml
+++ b/.github/workflows/pr-backport.yaml
@@ -16,6 +16,10 @@ on:
         type: boolean
         default: false
 
+concurrency:
+  group: backport-${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
+  cancel-in-progress: false
+
 jobs:
   backport:
     if: >
diff --git a/.github/workflows/pr-update-playwright-expectations.yaml b/.github/workflows/pr-update-playwright-expectations.yaml
index 9f6fa56a56..d78ad96bf0 100644
--- a/.github/workflows/pr-update-playwright-expectations.yaml
+++ b/.github/workflows/pr-update-playwright-expectations.yaml
@@ -124,12 +124,16 @@ jobs:
       - name: Stage changed snapshot files
         id: changed-snapshots
         run: |
+          set -euo pipefail
           echo "=========================================="
           echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
           echo "=========================================="
 
-          # Get list of changed snapshot files
-          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
+          # Get list of changed snapshot files (including untracked/new files)
+          changed_files=$( (
+            git diff --name-only browser_tests/ 2>/dev/null || true
+            git ls-files --others --exclude-standard browser_tests/ 2>/dev/null || true
+          ) | sort -u | grep -E '\-snapshots/' || true )
 
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
@@ -151,6 +155,11 @@ jobs:
           # Strip 'browser_tests/' prefix to avoid double nesting
           echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
+            # Skip paths that no longer exist (e.g. deletions)
+            if [ ! -f "$file" ]; then
+              echo "  → (skipped; not a file) $file"
+              continue
+            fi
             # Remove 'browser_tests/' prefix
             file_without_prefix="${file#browser_tests/}"
             # Create parent directories
@@ -261,11 +270,19 @@ jobs:
           echo "CHANGES SUMMARY"
           echo "=========================================="
           echo ""
-          echo "Changed files in browser_tests:"
-          git diff --name-only browser_tests/ | head -20 || echo "No changes"
-          echo ""
-          echo "Total changes:"
-          git diff --name-only browser_tests/ | wc -l || echo "0"
+          echo "Changed files in browser_tests (including untracked):"
+          CHANGES=$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)
+          if [ -z "$CHANGES" ]; then
+            echo "No changes"
+            echo ""
+            echo "Total changes:"
+            echo "0"
+          else
+            echo "$CHANGES" | head -50
+            echo ""
+            echo "Total changes:"
+            echo "$CHANGES" | wc -l
+          fi
 
       - name: Commit updated expectations
         id: commit
@@ -273,7 +290,7 @@ jobs:
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
 
-          if git diff --quiet browser_tests/; then
+          if [ -z "$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)" ]; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0
diff --git a/.github/workflows/release-version-bump.yaml b/.github/workflows/release-version-bump.yaml
index 766f5d4067..ca08e25bdd 100644
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -20,6 +20,13 @@ on:
         required: true
         default: 'main'
         type: string
+  schedule:
+    # 00:00 UTC ≈ 4:00 PM PST / 5:00 PM PDT on the previous calendar day
+    - cron: '0 0 * * *'
+
+concurrency:
+  group: release-version-bump
+  cancel-in-progress: true
 
 jobs:
   bump-version:
@@ -29,15 +36,99 @@ jobs:
       pull-requests: write
 
     steps:
+      - name: Prepare inputs
+        id: prepared-inputs
+        shell: bash
+        env:
+          RAW_VERSION_TYPE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version_type || '' }}
+          RAW_PRE_RELEASE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.pre_release || '' }}
+          RAW_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || '' }}
+        run: |
+          set -euo pipefail
+          VERSION_TYPE="$RAW_VERSION_TYPE"
+          PRE_RELEASE="$RAW_PRE_RELEASE"
+          TARGET_BRANCH="$RAW_BRANCH"
+
+          if [[ -z "$VERSION_TYPE" ]]; then
+            VERSION_TYPE='patch'
+          fi
+
+          if [[ -z "$TARGET_BRANCH" ]]; then
+            TARGET_BRANCH='main'
+          fi
+
+          {
+            echo "version_type=$VERSION_TYPE"
+            echo "pre_release=$PRE_RELEASE"
+            echo "branch=$TARGET_BRANCH"
+          } >> "$GITHUB_OUTPUT"
+
+      - name: Close stale nightly version bump PRs
+        if: github.event_name == 'schedule'
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ github.token }}
+          script: |
+            const prefix = 'version-bump-'
+            const closed = []
+            const prs = await github.paginate(github.rest.pulls.list, {
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              per_page: 100
+            })
+
+            for (const pr of prs) {
+              if (!pr.head?.ref?.startsWith(prefix)) {
+                continue
+              }
+
+              if (pr.user?.login !== 'github-actions[bot]') {
+                continue
+              }
+
+              // Only clean up stale nightly PRs targeting main.
+              // Adjust here if other target branches should be cleaned.
+              if (pr.base?.ref !== 'main') {
+                continue
+              }
+
+              await github.rest.pulls.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                pull_number: pr.number,
+                state: 'closed'
+              })
+
+              try {
+                await github.rest.git.deleteRef({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  ref: `heads/${pr.head.ref}`
+                })
+              } catch (error) {
+                if (![404, 422].includes(error.status)) {
+                  throw error
+                }
+              }
+
+              closed.push(pr.number)
+            }
+
+            core.info(`Closed ${closed.length} stale PR(s).`)
+
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
-          ref: ${{ github.event.inputs.branch }}
+          ref: ${{ steps.prepared-inputs.outputs.branch }}
           fetch-depth: 0
+          persist-credentials: false
 
       - name: Validate branch exists
+        env:
+          TARGET_BRANCH: ${{ steps.prepared-inputs.outputs.branch }}
         run: |
-          BRANCH="${{ github.event.inputs.branch }}"
+          BRANCH="$TARGET_BRANCH"
           if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
             echo "❌ Branch '$BRANCH' does not exist"
             echo ""
@@ -51,7 +142,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
         with:
           version: 10
 
@@ -62,16 +153,31 @@ jobs:
 
       - name: Bump version
         id: bump-version
+        env:
+          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
+          PRE_RELEASE: ${{ steps.prepared-inputs.outputs.pre_release }}
         run: |
-          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
+          set -euo pipefail
+          if [[ -n "$PRE_RELEASE" && ! "$VERSION_TYPE" =~ ^pre(major|minor|patch)$ && "$VERSION_TYPE" != "prerelease" ]]; then
+            echo "❌ pre_release was provided but version_type='$VERSION_TYPE' does not support --preid"
+            exit 1
+          fi
+          if [[ -n "$PRE_RELEASE" ]]; then
+            pnpm version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
+          else
+            pnpm version "$VERSION_TYPE" --no-git-tag-version
+          fi
+
           NEW_VERSION=$(node -p "require('./package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
 
       - name: Format PR string
         id: capitalised
+        env:
+          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
         run: |
-          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
-          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
+          CAPITALISED_TYPE="$VERSION_TYPE"
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
@@ -82,8 +188,8 @@ jobs:
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
 
-            **Base branch:** `${{ github.event.inputs.branch }}`
+            **Base branch:** `${{ steps.prepared-inputs.outputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ github.event.inputs.branch }}
+          base: ${{ steps.prepared-inputs.outputs.branch }}
           labels: |
             Release
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 4160601d9e..276ef5461d 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -2,16 +2,20 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    "components.d.ts",
-    "lint-staged.config.js",
-    "vitest.setup.ts",
+    ".nx/*",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
+    "components.d.ts",
+    "coverage/*",
+    "dist/*",
     "packages/registry-types/src/comfyRegistryTypes.ts",
+    "playwright-report/*",
     "src/extensions/core/*",
     "src/scripts/*",
     "src/types/generatedManagerTypes.ts",
-    "src/types/vue-shim.d.ts"
+    "src/types/vue-shim.d.ts",
+    "test-results/*",
+    "vitest.setup.ts"
   ],
   "plugins": [
     "eslint",
@@ -24,9 +28,55 @@
   ],
   "rules": {
     "no-async-promise-executor": "off",
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
     "no-control-regex": "off",
     "no-eval": "off",
     "no-redeclare": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "primevue/calendar",
+            "message": "Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from 'primevue/datepicker'"
+          },
+          {
+            "name": "primevue/dropdown",
+            "message": "Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from 'primevue/select'"
+          },
+          {
+            "name": "primevue/inputswitch",
+            "message": "InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from 'primevue/toggleswitch'"
+          },
+          {
+            "name": "primevue/overlaypanel",
+            "message": "OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from 'primevue/popover'"
+          },
+          {
+            "name": "primevue/sidebar",
+            "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
+          },
+          {
+            "name": "@/i18n--to-enable",
+            "importNames": [
+              "st",
+              "t",
+              "te",
+              "d"
+            ],
+            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
+          }
+        ]
+      }
+    ],
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
@@ -64,5 +114,16 @@
     "typescript/no-floating-promises": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/*.{stories,test,spec}.ts",
+        "**/*.stories.vue"
+      ],
+      "rules": {
+        "no-console": "allow"
+      }
+    }
+  ]
 }
\ No newline at end of file
diff --git a/apps/desktop-ui/src/components/install/InstallFooter.vue b/apps/desktop-ui/src/components/install/InstallFooter.vue
index 4c93020227..5cd71356e9 100644
--- a/apps/desktop-ui/src/components/install/InstallFooter.vue
+++ b/apps/desktop-ui/src/components/install/InstallFooter.vue
@@ -51,8 +51,6 @@ defineProps<{
   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
 }>()
diff --git a/browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json b/browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json
new file mode 100644
index 0000000000..471011d380
--- /dev/null
+++ b/browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json
@@ -0,0 +1,150 @@
+{
+  "id": "e0cb1d7e-5437-4911-b574-c9603dfbeaee",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "8bfe4227-f272-49e1-a892-0a972a86867c",
+      "pos": [
+        -317,
+        -336
+      ],
+      "size": [
+        210,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          [
+            "-1",
+            "batch_size"
+          ]
+        ]
+      },
+      "widgets_values": [
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "8bfe4227-f272-49e1-a892-0a972a86867c",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 1,
+          "lastLinkId": 1,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [
+            -562,
+            -358,
+            120,
+            60
+          ]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [
+            -52,
+            -358,
+            120,
+            40
+          ]
+        },
+        "inputs": [
+          {
+            "id": "b4a8bc2a-8e9f-41aa-938d-c567a11d2c00",
+            "name": "batch_size",
+            "type": "INT",
+            "linkIds": [
+              1
+            ],
+            "pos": [
+              -462,
+              -338
+            ]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "EmptyLatentImage",
+            "pos": [
+              -382,
+              -376
+            ],
+            "size": [
+              270,
+              106
+            ],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "batch_size",
+                "name": "batch_size",
+                "type": "INT",
+                "widget": {
+                  "name": "batch_size"
+                },
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "LATENT",
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": null
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [
+              512,
+              512,
+              1
+            ]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "INT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.35.1"
+  },
+  "version": 0.4
+}
\ No newline at end of file
diff --git a/browser_tests/assets/workflowInMedia/workflow_prompt_parameters.png b/browser_tests/assets/workflowInMedia/workflow_prompt_parameters.png
new file mode 100644
index 0000000000..71b5035067
Binary files /dev/null and b/browser_tests/assets/workflowInMedia/workflow_prompt_parameters.png differ
diff --git a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png
deleted file mode 100644
index 4dc0b3f43d..0000000000
Binary files a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-hidden-links-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png b/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png
deleted file mode 100644
index 2676f31eb3..0000000000
Binary files a/browser_tests/browser_tests/tests/graphCanvasMenu.spec.ts-snapshots/canvas-with-visible-links-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
deleted file mode 100644
index cea542a4f0..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
deleted file mode 100644
index 1b4771e319..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
deleted file mode 100644
index ed2e63d047..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
deleted file mode 100644
index 391dd76372..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
deleted file mode 100644
index 4ed230307b..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
deleted file mode 100644
index 077e34405e..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
deleted file mode 100644
index d0235f54bb..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
deleted file mode 100644
index e4155c01ff..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
deleted file mode 100644
index c5d0151f1c..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
deleted file mode 100644
index 7b1d91b3d2..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
deleted file mode 100644
index 26eb49e5ce..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
deleted file mode 100644
index 94d12be43b..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
deleted file mode 100644
index e91d3a5fd9..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
deleted file mode 100644
index 088ec907c6..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
deleted file mode 100644
index 6dabeb42ec..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
deleted file mode 100644
index e04cb92a72..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
deleted file mode 100644
index 6f5e35a1cc..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
deleted file mode 100644
index 9adde1602a..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
deleted file mode 100644
index 4cc3ebe2c6..0000000000
Binary files a/browser_tests/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and /dev/null differ
diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts
index e29f6ea5bc..782af9921a 100644
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -585,9 +585,15 @@ export class ComfyPage {
       fileName?: string
       url?: string
       dropPosition?: Position
+      waitForUpload?: boolean
     } = {}
   ) {
-    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
+    const {
+      dropPosition = { x: 100, y: 100 },
+      fileName,
+      url,
+      waitForUpload = false
+    } = options
 
     if (!fileName && !url)
       throw new Error('Must provide either fileName or url')
@@ -624,6 +630,14 @@ export class ComfyPage {
     // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
     if (url) evaluateParams.url = url
 
+    // Set up response waiter for file uploads before triggering the drop
+    const uploadResponsePromise = waitForUpload
+      ? this.page.waitForResponse(
+          (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+          { timeout: 10000 }
+        )
+      : null
+
     // Execute the drag and drop in the browser
     await this.page.evaluate(async (params) => {
       const dataTransfer = new DataTransfer()
@@ -690,12 +704,17 @@ export class ComfyPage {
       }
     }, evaluateParams)
 
+    // Wait for file upload to complete
+    if (uploadResponsePromise) {
+      await uploadResponsePromise
+    }
+
     await this.nextFrame()
   }
 
   async dragAndDropFile(
     fileName: string,
-    options: { dropPosition?: Position } = {}
+    options: { dropPosition?: Position; waitForUpload?: boolean } = {}
   ) {
     return this.dragAndDropExternalResource({ fileName, ...options })
   }
diff --git a/browser_tests/fixtures/VueNodeHelpers.ts b/browser_tests/fixtures/VueNodeHelpers.ts
index e6121b3c34..e08b39bd74 100644
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -160,7 +160,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').last()
+      decrementButton: widget.locator('button').nth(1)
     }
   }
 }
diff --git a/browser_tests/helpers/templates.ts b/browser_tests/helpers/templates.ts
index c690b8702a..829837bd1c 100644
--- a/browser_tests/helpers/templates.ts
+++ b/browser_tests/helpers/templates.ts
@@ -1,4 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 import path from 'path'
 
 import type {
@@ -8,9 +9,20 @@ import type {
 
 export class ComfyTemplates {
   readonly content: Locator
+  readonly allTemplateCards: Locator
 
   constructor(readonly page: Page) {
     this.content = page.getByTestId('template-workflows-content')
+    this.allTemplateCards = page.locator('[data-testid^="template-workflow-"]')
+  }
+
+  async waitForMinimumCardCount(count: number) {
+    return await expect(async () => {
+      const cardCount = await this.allTemplateCards.count()
+      expect(cardCount).toBeGreaterThanOrEqual(count)
+    }).toPass({
+      timeout: 1_000
+    })
   }
 
   async loadTemplate(id: string) {
diff --git a/browser_tests/tests/backgroundImageUpload.spec.ts b/browser_tests/tests/backgroundImageUpload.spec.ts
index 44ae2d6aea..b620f5441e 100644
--- a/browser_tests/tests/backgroundImageUpload.spec.ts
+++ b/browser_tests/tests/backgroundImageUpload.spec.ts
@@ -77,8 +77,7 @@ test.describe('Background Image Upload', () => {
 
     // Verify the URL input now has an API URL
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
-    const inputValue = await urlInput.inputValue()
-    expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
+    await expect(urlInput).toHaveValue(/^\/api\/view\?.*subfolder=backgrounds/)
 
     // Verify clear button is now enabled
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
diff --git a/browser_tests/tests/execution.spec.ts b/browser_tests/tests/execution.spec.ts
index ed77b79497..ba22b38e96 100644
--- a/browser_tests/tests/execution.spec.ts
+++ b/browser_tests/tests/execution.spec.ts
@@ -36,9 +36,10 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
-
-    expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-    expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
-    expect(await (await output2.getWidget(0)).getValue()).toBe('')
+    await expect(async () => {
+      expect(await (await input.getWidget(0)).getValue()).toBe('foo')
+      expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
+      expect(await (await output2.getWidget(0)).getValue()).toBe('')
+    }).toPass({ timeout: 2_000 })
   })
 })
diff --git a/browser_tests/tests/interaction.spec.ts b/browser_tests/tests/interaction.spec.ts
index 37442bf4e0..451cbffa3d 100644
--- a/browser_tests/tests/interaction.spec.ts
+++ b/browser_tests/tests/interaction.spec.ts
@@ -306,14 +306,16 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: numberWidgetPos
     })
-    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
+    const legacyPrompt = comfyPage.page.locator('.graphdialog')
+    await expect(legacyPrompt).toBeVisible()
+    await comfyPage.delay(300)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
+    await expect(legacyPrompt).toBeHidden()
   })
 
   test('Can close prompt dialog with canvas click (text widget)', async ({
@@ -327,18 +329,16 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: textWidgetPos
     })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'prompt-dialog-opened-text.png'
-    )
+    const legacyPrompt = comfyPage.page.locator('.graphdialog')
+    await expect(legacyPrompt).toBeVisible()
+    await comfyPage.delay(300)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'prompt-dialog-closed-text.png'
-    )
+    await expect(legacyPrompt).toBeHidden()
   })
 
   test('Can double click node title to edit', async ({ comfyPage }) => {
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png
index 6c0bdcc603..0c57f7db1d 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-chromium-linux.png differ
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png
index 5d89bf47f8..8f87009b72 100644
Binary files a/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png and b/browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-text-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts b/browser_tests/tests/loadWorkflowInMedia.spec.ts
index f091058d24..3a7f7a71a6 100644
--- a/browser_tests/tests/loadWorkflowInMedia.spec.ts
+++ b/browser_tests/tests/loadWorkflowInMedia.spec.ts
@@ -12,6 +12,7 @@ test.describe('Load Workflow in Media', () => {
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
+    'workflow_prompt_parameters.png',
     'workflow.webm',
     // Skipped due to 3d widget unstable visual result.
     // 3d widget shows grid after fully loaded.
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png
index 427051e172..0c57f7db1d 100644
Binary files a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/dropped-workflow-url-hidream-dev-example-png-chromium-linux.png differ
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-prompt-parameters-png-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-prompt-parameters-png-chromium-linux.png
new file mode 100644
index 0000000000..5688c3547f
Binary files /dev/null and b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-prompt-parameters-png-chromium-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts b/browser_tests/tests/mobileBaseline.spec.ts
new file mode 100644
index 0000000000..21be3ca949
--- /dev/null
+++ b/browser_tests/tests/mobileBaseline.spec.ts
@@ -0,0 +1,29 @@
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { expect } from '@playwright/test'
+
+test.describe('Mobile Baseline Snapshots', () => {
+  test('@mobile empty canvas', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.ConfirmClear', false)
+    await comfyPage.executeCommand('Comfy.ClearWorkflow')
+    await expect(async () => {
+      expect(await comfyPage.getGraphNodesCount()).toBe(0)
+    }).toPass({ timeout: 256 })
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
+  })
+
+  test('@mobile default workflow', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('default')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'mobile-default-workflow.png'
+    )
+  })
+
+  test('@mobile settings dialog', async ({ comfyPage }) => {
+    await comfyPage.settingDialog.open()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.settingDialog.root).toHaveScreenshot(
+      'mobile-settings-dialog.png'
+    )
+  })
+})
diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png
new file mode 100644
index 0000000000..afbc492aaa
Binary files /dev/null and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png
new file mode 100644
index 0000000000..e02471466a
Binary files /dev/null and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png
new file mode 100644
index 0000000000..23c6a0c8d4
Binary files /dev/null and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/nodeSearchBox.spec.ts b/browser_tests/tests/nodeSearchBox.spec.ts
index ce8875defc..2eea223290 100644
--- a/browser_tests/tests/nodeSearchBox.spec.ts
+++ b/browser_tests/tests/nodeSearchBox.spec.ts
@@ -260,6 +260,12 @@ test.describe('Release context menu', () => {
 
   test('Can trigger on link release', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
+    const contextMenu = comfyPage.page.locator('.litecontextmenu')
+    // Wait for context menu with correct title (slot name | slot type)
+    // The title shows the output slot name and type from the disconnected link
+    await expect(contextMenu.locator('.litemenu-title')).toContainText(
+      'CLIP | CLIP'
+    )
     await comfyPage.page.mouse.move(10, 10)
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
diff --git a/browser_tests/tests/remoteWidgets.spec.ts b/browser_tests/tests/remoteWidgets.spec.ts
index b717f62824..18cc77f445 100644
--- a/browser_tests/tests/remoteWidgets.spec.ts
+++ b/browser_tests/tests/remoteWidgets.spec.ts
@@ -212,8 +212,12 @@ test.describe('Remote COMBO Widget', () => {
       // Click on the canvas to trigger widget refresh
       await comfyPage.page.mouse.click(400, 300)
 
-      const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
-      expect(refreshedOptions).not.toEqual(initialOptions)
+      await expect(async () => {
+        const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
+        expect(refreshedOptions).not.toEqual(initialOptions)
+      }).toPass({
+        timeout: 2_000
+      })
     })
 
     test('does not refresh when TTL is not set', async ({ comfyPage }) => {
@@ -321,8 +325,12 @@ test.describe('Remote COMBO Widget', () => {
       await clickRefreshButton(comfyPage, nodeName)
 
       // Verify the selected value of the widget is the first option in the refreshed list
-      const refreshedValue = await getWidgetValue(comfyPage, nodeName)
-      expect(refreshedValue).toEqual('new first option')
+      await expect(async () => {
+        const refreshedValue = await getWidgetValue(comfyPage, nodeName)
+        expect(refreshedValue).toEqual('new first option')
+      }).toPass({
+        timeout: 2_000
+      })
     })
   })
 
diff --git a/browser_tests/tests/sidebar/nodeLibrary.spec.ts b/browser_tests/tests/sidebar/nodeLibrary.spec.ts
index 58f2ae4484..ac7a2efa9c 100644
--- a/browser_tests/tests/sidebar/nodeLibrary.spec.ts
+++ b/browser_tests/tests/sidebar/nodeLibrary.spec.ts
@@ -290,16 +290,20 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page.keyboard.insertText('bar')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.nextFrame()
-    expect(
-      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
-    ).toEqual(['bar/'])
-    expect(
-      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
-    ).toEqual({
-      'bar/': {
-        icon: 'pi-folder',
-        color: '#007bff'
-      }
+    await expect(async () => {
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['bar/'])
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+      ).toEqual({
+        'bar/': {
+          icon: 'pi-folder',
+          color: '#007bff'
+        }
+      })
+    }).toPass({
+      timeout: 2_000
     })
   })
 
diff --git a/browser_tests/tests/subgraph.spec.ts b/browser_tests/tests/subgraph.spec.ts
index 06a09210c5..6359156211 100644
--- a/browser_tests/tests/subgraph.spec.ts
+++ b/browser_tests/tests/subgraph.spec.ts
@@ -329,6 +329,15 @@ test.describe('Subgraph Operations', () => {
       expect(newInputName).toBe(labelClickRenamedName)
       expect(newInputName).not.toBe(initialInputLabel)
     })
+    test('Can create widget from link with compressed target_slot', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('subgraphs/subgraph-compressed-target-slot')
+      const step = await comfyPage.page.evaluate(() => {
+        return window['app'].graph.nodes[0].widgets[0].options.step
+      })
+      expect(step).toBe(10)
+    })
   })
 
   test.describe('Subgraph Creation and Deletion', () => {
diff --git a/browser_tests/tests/templates.spec.ts b/browser_tests/tests/templates.spec.ts
index 1e0d24dd68..0e28379064 100644
--- a/browser_tests/tests/templates.spec.ts
+++ b/browser_tests/tests/templates.spec.ts
@@ -188,22 +188,19 @@ test.describe('Templates', () => {
       .locator('header')
       .filter({ hasText: 'Templates' })
 
-    const cardCount = await comfyPage.page
-      .locator('[data-testid^="template-workflow-"]')
-      .count()
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).toBeVisible() // Nav should be visible at desktop size
 
     const mobileSize = { width: 640, height: 800 }
     await comfyPage.page.setViewportSize(mobileSize)
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)
-    expect(cardCount).toBeGreaterThan(0)
+    await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
index ba3b6c4f41..09c358eec0 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
index d0d736214e..e7c4c55a59 100644
Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
index d58403f385..f8b6fb2efb 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
index 96d02e0233..1350b32bcb 100644
Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
index 3d2b3332a1..616b7956af 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
index 40e2799b5d..0eced54c2a 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
index 247ce51638..b715e828ad 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
index bf438bb70b..395538bdf9 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
index 4bd65d8b3e..912ac481a5 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
index c3bb492d7d..3cac8048c6 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
index 3f43b78db6..f9a5c9c9f5 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
index d343f6f933..a5a6329a95 100644
Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
new file mode 100644
index 0000000000..6e20f9e367
--- /dev/null
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts
@@ -0,0 +1,144 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+import { fitToViewInstant } from '../../../../helpers/fitToView'
+
+test.describe('Vue Node Bring to Front', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.loadWorkflow('vueNodes/simple-triple')
+    await comfyPage.vueNodes.waitForNodes()
+    await fitToViewInstant(comfyPage)
+  })
+
+  /**
+   * Helper to get the z-index of a node by its title
+   */
+  async function getNodeZIndex(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<number> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const style = await node.getAttribute('style')
+    if (!style) {
+      throw new Error(
+        `Node "${title}" has no style attribute (observed: ${style})`
+      )
+    }
+    const match = style.match(/z-index:\s*(\d+)/)
+    if (!match) {
+      throw new Error(
+        `Node "${title}" has no z-index in style (observed: "${style}")`
+      )
+    }
+    return parseInt(match[1], 10)
+  }
+
+  /**
+   * Helper to get the bounding box center of a node
+   */
+  async function getNodeCenter(
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<{ x: number; y: number }> {
+    const node = comfyPage.vueNodes.getNodeByTitle(title)
+    const box = await node.boundingBox()
+    if (!box) throw new Error(`Node "${title}" not found`)
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+  }
+
+  test('should bring overlapped node to front when clicking on it', async ({
+    comfyPage
+  }) => {
+    // Get initial positions
+    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+    const ksamplerHeader = await comfyPage.page
+      .getByText('KSampler')
+      .boundingBox()
+    if (!ksamplerHeader) throw new Error('KSampler header not found')
+
+    // Drag KSampler on top of CLIP Text Encode
+    await comfyPage.dragAndDrop(
+      { x: ksamplerHeader.x + 50, y: ksamplerHeader.y + 10 },
+      clipCenter
+    )
+    await comfyPage.nextFrame()
+
+    // Screenshot showing KSampler on top of CLIP
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-before.png'
+    )
+
+    // KSampler should be on top (higher z-index) after being dragged
+    const ksamplerZIndexBefore = await getNodeZIndex(comfyPage, 'KSampler')
+    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    expect(ksamplerZIndexBefore).toBeGreaterThan(clipZIndexBefore)
+
+    // Click on CLIP Text Encode (underneath) - need to click on a visible part
+    // Since KSampler is on top, we click on the edge of CLIP that should still be visible
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+
+    // Click on a visible edge of CLIP
+    await comfyPage.page.mouse.click(clipBox.x + 30, clipBox.y + 10)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    const ksamplerZIndexAfter = await getNodeZIndex(comfyPage, 'KSampler')
+    expect(clipZIndexAfter).toBeGreaterThan(ksamplerZIndexAfter)
+
+    // Screenshot showing CLIP now on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-overlapped-after.png'
+    )
+  })
+
+  test('should bring overlapped node to front when clicking on its widget', async ({
+    comfyPage
+  }) => {
+    // Get CLIP Text Encode position (it has a text widget)
+    const clipCenter = await getNodeCenter(comfyPage, 'CLIP Text Encode')
+
+    // Get VAE Decode position and drag it on top of CLIP
+    const vaeHeader = await comfyPage.page.getByText('VAE Decode').boundingBox()
+    if (!vaeHeader) throw new Error('VAE Decode header not found')
+
+    await comfyPage.dragAndDrop(
+      { x: vaeHeader.x + 50, y: vaeHeader.y + 10 },
+      { x: clipCenter.x - 50, y: clipCenter.y }
+    )
+    await comfyPage.nextFrame()
+
+    // VAE should be on top after drag
+    const vaeZIndexBefore = await getNodeZIndex(comfyPage, 'VAE Decode')
+    const clipZIndexBefore = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    expect(vaeZIndexBefore).toBeGreaterThan(clipZIndexBefore)
+
+    // Screenshot showing VAE on top
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-before.png'
+    )
+
+    // Click on the text widget of CLIP Text Encode
+    const clipNode = comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode')
+    const clipBox = await clipNode.boundingBox()
+    if (!clipBox) throw new Error('CLIP node not found')
+    await comfyPage.page.mouse.click(clipBox.x + 170, clipBox.y + 80)
+    await comfyPage.nextFrame()
+
+    // CLIP should now be on top - compare post-action z-indices
+    const clipZIndexAfter = await getNodeZIndex(comfyPage, 'CLIP Text Encode')
+    const vaeZIndexAfter = await getNodeZIndex(comfyPage, 'VAE Decode')
+    expect(clipZIndexAfter).toBeGreaterThan(vaeZIndexAfter)
+
+    // Screenshot showing CLIP now on top after widget click
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'bring-to-front-widget-overlapped-after.png'
+    )
+  })
+})
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png
new file mode 100644
index 0000000000..543528904f
Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png
new file mode 100644
index 0000000000..3b17ade02b
Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png
new file mode 100644
index 0000000000..db1cba04c2
Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png
new file mode 100644
index 0000000000..6db7f4ea3b
Binary files /dev/null and b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
index 0a8792fc0a..15c83ee404 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png
index d66194cf20..87dd6f2da8 100644
Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
index 640e59fdd8..0b7cf999ea 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
index 99186b1ef4..60ddfe142f 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
index 30a3db231f..f3de99e7fd 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
index 39c5ecacd5..357c3fac23 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
index b2aeeef56e..ea0e5dcd52 100644
Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ
diff --git a/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts b/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
index bb956e3395..ee6b6bbfb2 100644
--- a/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts
@@ -15,7 +15,9 @@ test.describe('Vue Integer Widget', () => {
     await comfyPage.loadWorkflow('vueNodes/linked-int-widget')
     await comfyPage.vueNodes.waitForNodes()
 
-    const seedWidget = comfyPage.vueNodes.getWidgetByName('KSampler', 'seed')
+    const seedWidget = comfyPage.vueNodes
+      .getWidgetByName('KSampler', 'seed')
+      .first()
     const controls = comfyPage.vueNodes.getInputNumberControls(seedWidget)
     const initialValue = Number(await controls.input.inputValue())
 
diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
index 24491eb95c..dd25a81213 100644
Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ
diff --git a/browser_tests/tests/widget.spec.ts b/browser_tests/tests/widget.spec.ts
index 7afa823e35..002ad29242 100644
--- a/browser_tests/tests/widget.spec.ts
+++ b/browser_tests/tests/widget.spec.ts
@@ -252,7 +252,8 @@ test.describe('Animated image widget', () => {
 
     // Drag and drop image file onto the load animated webp node
     await comfyPage.dragAndDropFile('animated_webp.webp', {
-      dropPosition: { x, y }
+      dropPosition: { x, y },
+      waitForUpload: true
     })
 
     // Expect the filename combo value to be updated
diff --git a/eslint.config.ts b/eslint.config.ts
index 394df066d3..69efe4bef6 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -62,16 +62,20 @@ export default defineConfig([
   {
     ignores: [
       '.i18nrc.cjs',
-      'components.d.ts',
-      'lint-staged.config.js',
-      'vitest.setup.ts',
+      '.nx/*',
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*',
+      'components.d.ts',
+      'coverage/*',
+      'dist/*',
       'packages/registry-types/src/comfyRegistryTypes.ts',
+      'playwright-report/*',
       'src/extensions/core/*',
       'src/scripts/*',
       'src/types/generatedManagerTypes.ts',
-      'src/types/vue-shim.d.ts'
+      'src/types/vue-shim.d.ts',
+      'test-results/*',
+      'vitest.setup.ts'
     ]
   },
   {
@@ -103,24 +107,17 @@ export default defineConfig([
 
   tseslintConfigs.recommended,
   // Difference in typecheck on CI vs Local
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Bad types in the plugin
   pluginVue.configs['flat/recommended'],
   eslintPluginPrettierRecommended,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
   storybook.configs['flat/recommended'],
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
+  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.recommended,
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
+  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.typescript,
   {
     plugins: {
       'unused-imports': unusedImports,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore Type incompatibility in i18n plugin
+      // @ts-expect-error Type incompatibility in i18n plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
@@ -138,7 +135,6 @@ export default defineConfig([
       'import-x/no-useless-path-segments': 'error',
       'import-x/no-relative-packages': 'error',
       'unused-imports/no-unused-imports': 'error',
-      'no-console': ['error', { allow: ['warn', 'error'] }],
       'vue/no-v-html': 'off',
       // Prohibit dark-theme: and dark: prefixes
       'vue/no-restricted-class': ['error', '/^dark(-theme)?:/'],
@@ -153,39 +149,7 @@ export default defineConfig([
       'vue/no-use-v-else-with-v-for': 'error',
       'vue/one-component-per-file': 'error',
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
-      // Restrict deprecated PrimeVue components
-      'no-restricted-imports': [
-        'error',
-        {
-          paths: [
-            {
-              name: 'primevue/calendar',
-              message:
-                'Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from "primevue/datepicker"'
-            },
-            {
-              name: 'primevue/dropdown',
-              message:
-                'Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from "primevue/select"'
-            },
-            {
-              name: 'primevue/inputswitch',
-              message:
-                'InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from "primevue/toggleswitch"'
-            },
-            {
-              name: 'primevue/overlaypanel',
-              message:
-                'OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from "primevue/popover"'
-            },
-            {
-              name: 'primevue/sidebar',
-              message:
-                'Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from "primevue/drawer"'
-            }
-          ]
-        }
-      ],
+
       // i18n rules
       '@intlify/vue-i18n/no-raw-text': [
         'error',
@@ -273,12 +237,6 @@ export default defineConfig([
       ]
     }
   },
-  {
-    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
-    rules: {
-      'no-console': 'off'
-    }
-  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {
diff --git a/lint-staged.config.js b/lint-staged.config.js
deleted file mode 100644
index 5283d261ed..0000000000
--- a/lint-staged.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  './**/*.js': (stagedFiles) => formatAndEslint(stagedFiles),
-
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
-}
-
-function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => f.replace(process.cwd() + '/', ''))
-  return [
-    `pnpm exec eslint --cache --fix ${relativePaths.join(' ')}`,
-    `pnpm exec prettier --cache --write ${relativePaths.join(' ')}`
-  ]
-}
diff --git a/lint-staged.config.ts b/lint-staged.config.ts
new file mode 100644
index 0000000000..89deaa4b0e
--- /dev/null
+++ b/lint-staged.config.ts
@@ -0,0 +1,21 @@
+import path from 'node:path'
+
+export default {
+  './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
+
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
+    ...formatAndEslint(stagedFiles),
+    'pnpm typecheck'
+  ]
+}
+
+function formatAndEslint(fileNames: string[]) {
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
+  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
+  return [
+    `pnpm exec prettier --cache --write ${joinedPaths}`,
+    `pnpm exec oxlint --fix ${joinedPaths}`,
+    `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
+  ]
+}
diff --git a/package.json b/package.json
index 746ae4efa2..eb7190b288 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.35.1",
+  "version": "1.35.6",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index f23f9a4084..1153d4543a 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -98,7 +98,6 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
-  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
   --color-interface-panel-job-progress-primary: var(--color-azure-300);
   --color-interface-panel-job-progress-secondary: var(--color-alpha-azure-600-30);
@@ -438,7 +437,11 @@
   --color-interface-button-hover-surface: var(
     --interface-button-hover-surface
   );
+  --color-comfy-input: var(--comfy-input-bg);
+  --color-comfy-input-foreground: var(--input-text);
   --color-comfy-menu-bg: var(--comfy-menu-bg);
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);
@@ -1325,6 +1328,15 @@ audio.comfy-audio.empty-audio-widget {
     font-size 0.1s ease;
 }
 
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {
diff --git a/packages/registry-types/src/comfyRegistryTypes.ts b/packages/registry-types/src/comfyRegistryTypes.ts
index f7df7081ae..f358588e04 100644
--- a/packages/registry-types/src/comfyRegistryTypes.ts
+++ b/packages/registry-types/src/comfyRegistryTypes.ts
@@ -1945,6 +1945,40 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/proxy/kling/v1/images/omni-image": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** KlingAI Create Omni-Image Task */
+        post: operations["klingCreateOmniImage"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/proxy/kling/v1/images/omni-image/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** KlingAI Query Single Omni-Image Task */
+        get: operations["klingOmniImageQuerySingleTask"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/proxy/kling/v1/images/kolors-virtual-try-on": {
         parameters: {
             query?: never;
@@ -3876,7 +3910,7 @@ export interface components {
          * @description The subscription tier level
          * @enum {string}
          */
-        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO";
+        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
         FeaturesResponse: {
             /**
              * @description The conversion rate for partner nodes
@@ -5096,6 +5130,71 @@ export interface components {
                 };
             };
         };
+        KlingOmniImageRequest: {
+            /**
+             * @description Model Name
+             * @default kling-image-o1
+             * @enum {string}
+             */
+            model_name: "kling-image-o1";
+            /** @description Text prompt words, which can include positive and negative descriptions. Must not exceed 2,500 characters. The Omni model can achieve various capabilities through Prompt with elements and images. Specify an image in the format of <<<>>>, such as <<<image_1>>>. */
+            prompt: string;
+            /** @description Reference Image List. Supports inputting image Base64 encoding or image URL (ensure accessibility). Supported formats include .jpg/.jpeg/.png. File size cannot exceed 10MB. Width and height dimensions shall not be less than 300px, aspect ratio between 1:2.5 ~ 2.5:1. Maximum 10 images. */
+            image_list?: {
+                /** @description Image Base64 encoding or image URL (ensure accessibility) */
+                image?: string;
+            }[];
+            /**
+             * @description Image generation resolution. 1k is 1K standard, 2k is 2K high-res, 4k is 4K high-res.
+             * @default 1k
+             * @enum {string}
+             */
+            resolution: "1k" | "2k" | "4k";
+            /**
+             * @description Number of generated images. Value range [1,9].
+             * @default 1
+             */
+            n: number;
+            /**
+             * @description Aspect ratio of the generated images (width:height). auto is to intelligently generate images based on incoming content.
+             * @default auto
+             * @enum {string}
+             */
+            aspect_ratio: "16:9" | "9:16" | "1:1" | "4:3" | "3:4" | "3:2" | "2:3" | "21:9" | "auto";
+            /**
+             * Format: uri
+             * @description The callback notification address for the result of this task. If configured, the server will actively notify when the task status changes.
+             */
+            callback_url?: string;
+            /** @description Customized Task ID. Must be unique within a single user account. */
+            external_task_id?: string;
+        };
+        KlingOmniImageResponse: {
+            /** @description Error code */
+            code?: number;
+            /** @description Error message */
+            message?: string;
+            /** @description Request ID */
+            request_id?: string;
+            data?: {
+                /** @description Task ID */
+                task_id?: string;
+                task_status?: components["schemas"]["KlingTaskStatus"];
+                /** @description Task status information, displaying the failure reason when the task fails (such as triggering the content risk control of the platform, etc.) */
+                task_status_msg?: string;
+                task_info?: {
+                    /** @description Customer-defined task ID */
+                    external_task_id?: string;
+                };
+                /** @description Task creation time, Unix timestamp in milliseconds */
+                created_at?: number;
+                /** @description Task update time, Unix timestamp in milliseconds */
+                updated_at?: number;
+                task_result?: {
+                    images?: components["schemas"]["KlingImageResult"][];
+                };
+            };
+        };
         KlingLipSyncInputObject: {
             /** @description The ID of the video generated by Kling AI. Only supports 5-second and 10-second videos generated within the last 30 days. */
             video_id?: string;
@@ -10065,7 +10164,7 @@ export interface components {
         };
         BytePlusImageGenerationRequest: {
             /** @enum {string} */
-            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828";
+            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828" | "seedream-4-5-251128";
             /** @description Text description for image generation or transformation */
             prompt: string;
             /**
@@ -10170,10 +10269,10 @@ export interface components {
         };
         BytePlusVideoGenerationRequest: {
             /**
-             * @description The ID of the model to call. Available models include seedance-1-0-pro-250528, seedance-1-0-lite-t2v-250428, seedance-1-0-lite-i2v-250428
+             * @description The ID of the model to call. Available models include seedance-1-0-pro-250528, seedance-1-0-pro-fast-251015, seedance-1-0-lite-t2v-250428, seedance-1-0-lite-i2v-250428
              * @enum {string}
              */
-            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428";
+            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428" | "seedance-1-0-pro-fast-251015";
             /** @description The input content for the model to generate a video */
             content: components["schemas"]["BytePlusVideoGenerationContent"][];
             /**
@@ -13947,6 +14046,15 @@ export interface operations {
                     "application/json": components["schemas"]["Node"];
                 };
             };
+            /** @description Redirect to node with normalized name match */
+            302: {
+                headers: {
+                    /** @description URL of the node with the correct ID */
+                    Location?: string;
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
             /** @description Forbidden */
             403: {
                 headers: {
@@ -18345,6 +18453,198 @@ export interface operations {
             };
         };
     };
+    klingCreateOmniImage: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** @description Create task for generating omni-image */
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["KlingOmniImageRequest"];
+            };
+        };
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingOmniImageResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
+    klingOmniImageQuerySingleTask: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Task ID or External Task ID. Can query by either task_id (generated by system) or external_task_id (customized task ID) */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful response (Request successful) */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingOmniImageResponse"];
+                };
+            };
+            /** @description Invalid request parameters */
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Authentication failed */
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Unauthorized access to requested resource */
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Resource not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Account exception or Rate limit exceeded */
+            429: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Internal server error */
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Service temporarily unavailable */
+            503: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+            /** @description Server timeout */
+            504: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["KlingErrorResponse"];
+                };
+            };
+        };
+    };
     klingVirtualTryOnQueryTaskList: {
         parameters: {
             query?: {
diff --git a/scripts/cicd/check-shell.sh b/scripts/cicd/check-shell.sh
new file mode 100755
index 0000000000..a95bcde28f
--- /dev/null
+++ b/scripts/cicd/check-shell.sh
@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+ROOT_DIR="$(git rev-parse --show-toplevel)"
+cd "$ROOT_DIR"
+
+if ! command -v shellcheck >/dev/null 2>&1; then
+  echo "Error: shellcheck is required but not installed" >&2
+  exit 127
+fi
+
+mapfile -t shell_files < <(git ls-files -- '*.sh')
+
+if [[ ${#shell_files[@]} -eq 0 ]]; then
+  echo 'No shell scripts found.'
+  exit 0
+fi
+
+shellcheck --format=gcc "${shell_files[@]}"
diff --git a/scripts/cicd/pr-playwright-deploy-and-comment.sh b/scripts/cicd/pr-playwright-deploy-and-comment.sh
index aeab37c8e3..840203f44a 100755
--- a/scripts/cicd/pr-playwright-deploy-and-comment.sh
+++ b/scripts/cicd/pr-playwright-deploy-and-comment.sh
@@ -74,7 +74,7 @@ deploy_report() {
     
     
     # Project name with dots converted to dashes for Cloudflare
-    sanitized_browser=$(echo "$browser" | sed 's/\./-/g')
+    sanitized_browser="${browser//./-}"
     project="comfyui-playwright-${sanitized_browser}"
     
     echo "Deploying $browser to project $project on branch $branch..." >&2
@@ -208,7 +208,7 @@ else
     
     # Wait for all deployments to complete
     for pid in $pids; do
-        wait $pid
+        wait "$pid"
     done
     
     # Collect URLs and counts in order
@@ -254,9 +254,9 @@ else
     total_tests=0
     
     # Parse counts and calculate totals
-    IFS='|'
-    set -- $all_counts
-    for counts_json; do
+    IFS='|' read -r -a counts_array <<< "$all_counts"
+    for counts_json in "${counts_array[@]}"; do
+        [ -z "$counts_json" ] && continue
         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
@@ -324,13 +324,12 @@ $status_icon **$status_text**
     
     # Add browser results with individual counts
     i=0
-    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)))
+    IFS=' ' read -r -a browser_array <<< "$BROWSERS"
+    IFS=' ' read -r -a url_array <<< "$urls"
+    for counts_json in "${counts_array[@]}"; do
+        [ -z "$counts_json" ] && { i=$((i + 1)); continue; }
+        browser="${browser_array[$i]:-}"
+        url="${url_array[$i]:-}"
         
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
             # Parse individual browser counts
@@ -374,4 +373,4 @@ $status_icon **$status_text**
 🎉 Click on the links above to view detailed test results for each browser configuration."
     
     post_comment "$comment"
-fi
\ No newline at end of file
+fi
diff --git a/scripts/cicd/resolve-comfyui-release.ts b/scripts/cicd/resolve-comfyui-release.ts
index 0d5462bd45..56f6b06a77 100755
--- a/scripts/cicd/resolve-comfyui-release.ts
+++ b/scripts/cicd/resolve-comfyui-release.ts
@@ -264,7 +264,7 @@ if (!releaseInfo) {
 }
 
 // Output as JSON for GitHub Actions
-// eslint-disable-next-line no-console
+
 console.log(JSON.stringify(releaseInfo, null, 2))
 
 export { resolveRelease }
diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 1d831db21b..fa2096aee0 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -15,14 +15,7 @@
       :style="style"
       class="flex flex-col items-stretch"
     >
-      <Panel
-        ref="panelRef"
-        :class="panelRootClass"
-        :pt="{
-          header: { class: 'hidden' },
-          content: { class: docked ? 'p-0' : 'p-1' }
-        }"
-      >
+      <div ref="panelRef" :class="cn(panelRootClass, docked ? 'p-0' : 'p-1')">
         <div class="flex flex-col">
           <div class="flex items-center select-none">
             <span
@@ -35,7 +28,9 @@
               "
             />
 
-            <ComfyRunButton />
+            <Suspense @resolve="comfyRunButtonResolved">
+              <ComfyRunButton />
+            </Suspense>
             <IconButton
               v-tooltip.bottom="cancelJobTooltipConfig"
               type="transparent"
@@ -74,7 +69,7 @@
             </IconTextButton>
           </div>
         </div>
-      </Panel>
+      </div>
 
       <div v-if="isFloating" class="flex justify-end pt-1 pr-1">
         <QueueInlineProgressSummary
@@ -103,9 +98,7 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
-import Panel from 'primevue/panel'
-import type { ComponentPublicInstance } from 'vue'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
@@ -143,7 +136,7 @@ const visible = computed(() => position.value !== 'Disabled')
 
 const tabContainer = document.querySelector('.workflow-tabs-container')
 const actionbarWrapperRef = ref<HTMLElement | null>(null)
-const panelRef = ref<HTMLElement | ComponentPublicInstance | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
 const docked = computed({
   get: () => props.docked ?? false,
@@ -244,7 +237,14 @@ const setInitialPosition = () => {
     }
   }
 }
-onMounted(setInitialPosition)
+
+//The ComfyRunButton is a dynamic import. Which means it will not be loaded onMount in this component.
+//So we must use suspense resolve to ensure that is has loaded and updated the DOM before calling setInitialPosition()
+async function comfyRunButtonResolved() {
+  await nextTick()
+  setInitialPosition()
+}
+
 watch(visible, async (newVisible) => {
   if (newVisible) {
     await nextTick(setInitialPosition)
diff --git a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index c9e8495549..036d575bf5 100644
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -58,7 +58,7 @@ const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index c743f0d988..8ffbd1e792 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()
diff --git a/src/components/input/SearchBox.stories.ts b/src/components/common/SearchBox.stories.ts
similarity index 75%
rename from src/components/input/SearchBox.stories.ts
rename to src/components/common/SearchBox.stories.ts
index f339fa1e7a..cc054d4caa 100644
--- a/src/components/input/SearchBox.stories.ts
+++ b/src/components/common/SearchBox.stories.ts
@@ -1,13 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import SearchBox from './SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+interface GenericMeta<C> extends Omit<Meta<C>, 'component'> {
+  component: Omit<ComponentExposed<C>, 'focus'>
+}
 
-const meta: Meta<typeof SearchBox> = {
+const meta: GenericMeta<typeof SearchBox> = {
   title: 'Components/Input/SearchBox',
   component: SearchBox,
   tags: ['autodocs'],
   argTypes: {
+    modelValue: {
+      control: 'text'
+    },
     placeholder: {
       control: 'text'
     },
@@ -19,9 +26,12 @@ const meta: Meta<typeof SearchBox> = {
       control: 'select',
       options: ['md', 'lg'],
       description: 'Size variant of the search box'
-    }
+    },
+    'onUpdate:modelValue': { action: 'update:modelValue' },
+    onSearch: { action: 'search' }
   },
   args: {
+    modelValue: '',
     placeholder: 'Search...',
     showBorder: false,
     size: 'md'
diff --git a/src/components/input/SearchBox.test.ts b/src/components/common/SearchBox.test.ts
similarity index 85%
rename from src/components/input/SearchBox.test.ts
rename to src/components/common/SearchBox.test.ts
index 575cbb0f55..5fe9294d86 100644
--- a/src/components/input/SearchBox.test.ts
+++ b/src/components/common/SearchBox.test.ts
@@ -3,7 +3,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import SearchBox from './SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 
 const i18n = createI18n({
   legacy: false,
@@ -50,15 +50,15 @@ describe('SearchBox', () => {
       await input.setValue('test')
 
       // Model should not update immediately
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+      expect(wrapper.emitted('search')).toBeFalsy()
 
       // Advance timers by 299ms (just before debounce delay)
-      vi.advanceTimersByTime(299)
+      await vi.advanceTimersByTimeAsync(299)
       await nextTick()
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+      expect(wrapper.emitted('search')).toBeFalsy()
 
       // Advance timers by 1ms more (reaching 300ms)
-      vi.advanceTimersByTime(1)
+      await vi.advanceTimersByTimeAsync(1)
       await nextTick()
 
       // Model should now be updated
@@ -82,19 +82,19 @@ describe('SearchBox', () => {
 
       // Type third character (should reset timer again)
       await input.setValue('tes')
-      vi.advanceTimersByTime(200)
+      await vi.advanceTimersByTimeAsync(200)
       await nextTick()
 
       // Should not have emitted yet (only 200ms passed since last keystroke)
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+      expect(wrapper.emitted('search')).toBeFalsy()
 
       // Advance final 100ms to reach 300ms
-      vi.advanceTimersByTime(100)
+      await vi.advanceTimersByTimeAsync(100)
       await nextTick()
 
       // Should now emit with final value
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['tes'])
+      expect(wrapper.emitted('search')).toBeTruthy()
+      expect(wrapper.emitted('search')?.[0]).toEqual(['tes', []])
     })
 
     it('should only emit final value after rapid typing', async () => {
@@ -105,19 +105,20 @@ describe('SearchBox', () => {
       const searchTerms = ['s', 'se', 'sea', 'sear', 'searc', 'search']
       for (const term of searchTerms) {
         await input.setValue(term)
-        vi.advanceTimersByTime(50) // Less than debounce delay
+        await vi.advanceTimersByTimeAsync(50) // Less than debounce delay
       }
+      await nextTick()
 
       // Should not have emitted yet
-      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+      expect(wrapper.emitted('search')).toBeFalsy()
 
       // Complete the debounce delay
-      vi.advanceTimersByTime(300)
+      await vi.advanceTimersByTimeAsync(350)
       await nextTick()
 
       // Should emit only once with final value
-      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
-      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['search'])
+      expect(wrapper.emitted('search')).toHaveLength(1)
+      expect(wrapper.emitted('search')?.[0]).toEqual(['search', []])
     })
 
     describe('bidirectional model sync', () => {
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 00b705ce17..d7db4d5341 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -1,84 +1,93 @@
 <template>
-  <div>
-    <IconField>
-      <Button
-        v-if="filterIcon"
-        class="p-inputicon filter-button"
-        :icon="filterIcon"
-        text
-        severity="contrast"
-        @click="$emit('showFilter', $event)"
-      />
-      <InputText
-        ref="inputRef"
-        class="search-box-input w-full"
-        :model-value="modelValue"
-        :placeholder="placeholder"
-        :autofocus="autofocus"
-        @input="handleInput"
-      />
-      <InputIcon v-if="!modelValue" :class="icon" />
-      <Button
-        v-if="modelValue"
-        class="p-inputicon clear-button"
-        icon="pi pi-times"
-        text
-        severity="contrast"
-        @click="clearSearch"
-      />
-    </IconField>
-    <div
-      v-if="filters?.length"
-      class="search-filters flex flex-wrap gap-2 pt-2"
-    >
-      <SearchFilterChip
-        v-for="filter in filters"
-        :key="filter.id"
-        :text="filter.text"
-        :badge="filter.badge"
-        :badge-class="filter.badgeClass"
-        @remove="$emit('removeFilter', filter)"
-      />
-    </div>
+  <div
+    :class="
+      cn(
+        'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
+        customClass,
+        wrapperStyle
+      )
+    "
+  >
+    <InputText
+      ref="inputRef"
+      v-model="modelValue"
+      :placeholder
+      :autofocus
+      unstyled
+      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm"
+      :aria-label="placeholder"
+    />
+    <IconButton
+      v-if="filterIcon"
+      class="p-inputicon filter-button absolute right-0 inset-y-0 h-full m-0 p-0"
+      :icon="filterIcon"
+      severity="contrast"
+      @click="$emit('showFilter', $event)"
+    />
+    <InputIcon v-if="!modelValue" :class="icon" />
+    <Button
+      v-if="modelValue"
+      class="p-inputicon clear-button"
+      icon="pi pi-times"
+      text
+      severity="contrast"
+      @click="modelValue = ''"
+    />
+  </div>
+  <div v-if="filters?.length" class="search-filters flex flex-wrap gap-2 pt-2">
+    <SearchFilterChip
+      v-for="filter in filters"
+      :key="filter.id"
+      :text="filter.text"
+      :badge="filter.badge"
+      :badge-class="filter.badgeClass"
+      @remove="$emit('removeFilter', filter)"
+    />
   </div>
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import { debounce } from 'es-toolkit/compat'
+import { cn } from '@comfyorg/tailwind-utils'
+import { watchDebounced } from '@vueuse/core'
 import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import IconButton from '../button/IconButton.vue'
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
 
 const {
-  modelValue,
   placeholder = 'Search...',
   icon = 'pi pi-search',
   debounceTime = 300,
   filterIcon,
   filters = [],
-  autofocus = false
+  autofocus = false,
+  showBorder = false,
+  size = 'md',
+  class: customClass
 } = defineProps<{
-  modelValue: string
   placeholder?: string
   icon?: string
   debounceTime?: number
   filterIcon?: string
   filters?: TFilter[]
   autofocus?: boolean
+  showBorder?: boolean
+  size?: 'md' | 'lg'
+  class?: string
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
   (e: 'search', value: string, filters: TFilter[]): void
   (e: 'showFilter', event: Event): void
   (e: 'removeFilter', filter: TFilter): void
 }>()
 
+const modelValue = defineModel<string>({ required: true })
+
 const inputRef = ref()
 
 defineExpose({
@@ -87,20 +96,27 @@ defineExpose({
   }
 })
 
-const emitSearch = debounce((value: string) => {
-  emit('search', value, filters)
-}, debounceTime)
+watchDebounced(
+  modelValue,
+  (value: string) => {
+    emit('search', value, filters)
+  },
+  { debounce: debounceTime }
+)
 
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-  emitSearch(target.value)
-}
+const wrapperStyle = computed(() => {
+  if (showBorder) {
+    return cn('rounded p-2 border border-solid border-border-default')
+  }
 
-const clearSearch = () => {
-  emit('update:modelValue', '')
-  emitSearch('')
-}
+  // Size-specific classes matching button sizes for consistency
+  const sizeClasses = {
+    md: 'h-8 px-2 py-1.5', // Matches button sm size
+    lg: 'h-10 px-4 py-2' // Matches button md size
+  }[size]
+
+  return cn('rounded-lg', sizeClasses)
+})
 </script>
 
 <style scoped>
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index 04424baf0a..396df48198 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -64,7 +64,8 @@ const formattedCreditsOnly = computed(() => {
   const cents = authStore.balance?.amount_micros ?? 0
   const amount = formatCreditsFromCents({
     cents,
-    locale: locale.value
+    locale: locale.value,
+    numberOptions: { minimumFractionDigits: 0, maximumFractionDigits: 0 }
   })
   return amount
 })
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index a1174aa100..194e088cae 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -388,8 +388,8 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index d51f1bb94f..93de7cbf90 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -128,7 +128,7 @@ onMounted(async () => {
     reportContent.value = generateErrorReport({
       systemStats: systemStatsStore.systemStats!,
       serverLogs: logs,
-      workflow: app.graph.serialize(),
+      workflow: app.rootGraph.serialize(),
       exceptionType: error.exceptionType,
       exceptionMessage: error.exceptionMessage,
       traceback: error.traceback,
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index 3ce3484f72..abbd9c4def 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -3,7 +3,7 @@
   <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-white m-0">
+      <h1 class="text-2xl font-semibold text-base-foreground m-0">
         {{
           isInsufficientCredits
             ? $t('credits.topUp.addMoreCreditsToRun')
@@ -62,7 +62,7 @@
       severity="primary"
       :label="$t('credits.topUp.buy')"
       :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
-      :pt="{ label: { class: 'text-white' } }"
+      :pt="{ label: { class: 'text-primary-foreground' } }"
       @click="handleBuy"
     />
   </div>
@@ -122,11 +122,7 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import {
-  creditsToUsd,
-  formatCredits,
-  formatUsd
-} from '@/base/credits/comfyCredits'
+import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
@@ -156,7 +152,7 @@ const { formattedRenewalDate } = useSubscription()
 // Use feature flag to determine design - defaults to true (new design)
 const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
 const telemetry = useTelemetry()
 const toast = useToast()
@@ -191,19 +187,6 @@ const handleBuy = async () => {
     const usdAmount = creditsToUsd(selectedCredits.value)
     telemetry?.trackApiCreditTopupButtonPurchaseClicked(usdAmount)
     await authActions.purchaseCredits(usdAmount)
-
-    toast.add({
-      severity: 'success',
-      summary: t('credits.topUp.purchaseSuccess'),
-      detail: t('credits.topUp.purchaseSuccessDetail', {
-        credits: formatCredits({
-          value: selectedCredits.value,
-          locale: locale.value
-        }),
-        amount: `$${formatUsd({ value: usdAmount, locale: locale.value })}`
-      }),
-      life: 3000
-    })
   } catch (error) {
     console.error('Purchase failed:', error)
 
diff --git a/src/components/dialog/content/credit/CreditTopUpOption.vue b/src/components/dialog/content/credit/CreditTopUpOption.vue
index a1bc147ef6..c67c273a27 100644
--- a/src/components/dialog/content/credit/CreditTopUpOption.vue
+++ b/src/components/dialog/content/credit/CreditTopUpOption.vue
@@ -8,10 +8,10 @@
     ]"
     @click="$emit('select')"
   >
-    <span class="text-base font-bold text-white">
+    <span class="text-base font-bold text-base-foreground">
       {{ formattedCredits }}
     </span>
-    <span class="text-sm font-normal text-white">
+    <span class="text-sm font-normal text-muted-foreground">
       {{ description }}
     </span>
   </div>
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index 1560911e09..23922878c4 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -60,12 +60,13 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
     <Button
       v-else
       type="submit"
       :label="t('auth.login.loginButton')"
       class="mt-4 h-10 font-medium"
+      :disabled="!$form.valid"
     />
   </Form>
 </template>
@@ -74,6 +75,7 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
+import { useThrottleFn } from '@vueuse/core'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
@@ -100,11 +102,11 @@ const emit = defineEmits<{
 
 const emailInputId = 'comfy-org-sign-in-email'
 
-const onSubmit = (event: FormSubmitEvent) => {
+const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
   if (event.valid) {
     emit('submit', event.values as SignInData)
   }
-}
+}, 1_500)
 
 const handleForgotPassword = async (
   email: string,
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index 90a5263636..1f174d4cdc 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -1,5 +1,6 @@
 <template>
   <Form
+    v-slot="$form"
     class="flex flex-col gap-6"
     :resolver="zodResolver(signUpSchema)"
     @submit="onSubmit"
@@ -28,10 +29,13 @@
     <PasswordFields />
 
     <!-- Submit Button -->
+    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
     <Button
+      v-else
       type="submit"
       :label="t('auth.signup.signUpButton')"
       class="mt-4 h-10 font-medium"
+      :disabled="!$form.valid"
     />
   </Form>
 </template>
@@ -40,24 +44,30 @@
 import type { FormSubmitEvent } from '@primevue/forms'
 import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
+import { useThrottleFn } from '@vueuse/core'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 import PasswordFields from './PasswordFields.vue'
 
 const { t } = useI18n()
+const authStore = useFirebaseAuthStore()
+const loading = computed(() => authStore.loading)
 
 const emit = defineEmits<{
   submit: [values: SignUpData]
 }>()
 
-const onSubmit = (event: FormSubmitEvent) => {
+const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
   if (event.valid) {
     emit('submit', event.values as SignUpData)
   }
-}
+}, 1_500)
 </script>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index f1effb4578..67d3ed3919 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -4,7 +4,6 @@
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
     <template v-if="showUI" #workflow-tabs>
-      <TryVueNodeBanner />
       <div
         v-if="workflowTabsPosition === 'Topbar'"
         class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
@@ -160,8 +159,8 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
+import { forEachNode } from '@/utils/graphTraversalUtil'
 
-import TryVueNodeBanner from '../topbar/TryVueNodeBanner.vue'
 import SelectionRectangle from './SelectionRectangle.vue'
 
 const emit = defineEmits<{
@@ -271,20 +270,18 @@ watch(
   () => {
     if (!canvasStore.canvas) return
 
-    for (const n of comfyApp.graph.nodes) {
-      if (!n.widgets) continue
+    forEachNode(comfyApp.rootGraph, (n) => {
+      if (!n.widgets) return
       for (const w of n.widgets) {
-        if (w[IS_CONTROL_WIDGET]) {
-          updateControlWidgetLabel(w)
-          if (w.linkedWidgets) {
-            for (const l of w.linkedWidgets) {
-              updateControlWidgetLabel(l)
-            }
-          }
+        if (!w[IS_CONTROL_WIDGET]) continue
+        updateControlWidgetLabel(w)
+        if (!w.linkedWidgets) continue
+        for (const l of w.linkedWidgets) {
+          updateControlWidgetLabel(l)
         }
       }
-    }
-    comfyApp.graph.setDirtyCanvas(true)
+    })
+    canvasStore.canvas.setDirty(true)
   }
 )
 
@@ -334,7 +331,7 @@ watch(
     }
 
     // Force canvas redraw to ensure progress updates are visible
-    canvas.graph.setDirtyCanvas(true, false)
+    canvas.setDirty(true, false)
   },
   { deep: true }
 )
@@ -346,7 +343,7 @@ watch(
   (lastNodeErrors) => {
     if (!comfyApp.graph) return
 
-    for (const node of comfyApp.graph.nodes) {
+    forEachNode(comfyApp.rootGraph, (node) => {
       // Clear existing errors
       for (const slot of node.inputs) {
         delete slot.hasErrors
@@ -356,7 +353,7 @@ watch(
       }
 
       const nodeErrors = lastNodeErrors?.[node.id]
-      if (!nodeErrors) continue
+      if (!nodeErrors) return
 
       const validErrors = nodeErrors.errors.filter(
         (error) => error.extra_info?.input_name !== undefined
@@ -369,9 +366,9 @@ watch(
           node.inputs[inputIndex].hasErrors = true
         }
       })
-    }
+    })
 
-    comfyApp.canvas.draw(true, true)
+    comfyApp.canvas.setDirty(true, true)
   }
 )
 
diff --git a/src/components/graph/TitleEditor.vue b/src/components/graph/TitleEditor.vue
index cf95c0ab5b..bcfef87578 100644
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -58,7 +58,7 @@ const onEdit = (newValue: string) => {
       target.subgraph.name = trimmedTitle
     }
 
-    app.graph.setDirtyCanvas(true, true)
+    app.canvas.setDirty(true, true)
   }
   showInput.value = false
   titleEditorStore.titleEditorTarget = null
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index d4b2c2172d..2c2271c31b 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -178,7 +178,7 @@ import MultiSelect from 'primevue/multiselect'
 import { computed, useAttrs } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchBox from '@/components/input/SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
diff --git a/src/components/input/SearchBox.vue b/src/components/input/SearchBox.vue
deleted file mode 100644
index 1565bfcb31..0000000000
--- a/src/components/input/SearchBox.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted-foreground" />
-    <InputText
-      ref="input"
-      v-model="internalSearchQuery"
-      :aria-label="
-        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
-      "
-      :placeholder="
-        placeholder || t('templateWidgets.sort.searchPlaceholder', 'Search...')
-      "
-      type="text"
-      unstyled
-      class="absolute inset-0 size-full pl-11 border-none outline-none bg-transparent text-sm text-base-foreground"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDebounceFn } from '@vueuse/core'
-import InputText from 'primevue/inputtext'
-import { computed, onMounted, ref, watch } from 'vue'
-
-import { t } from '@/i18n'
-import { cn } from '@/utils/tailwindUtil'
-
-const SEARCH_DEBOUNCE_DELAY_MS = 300
-
-const {
-  autofocus = false,
-  placeholder,
-  showBorder = false,
-  size = 'md'
-} = defineProps<{
-  autofocus?: boolean
-  placeholder?: string
-  showBorder?: boolean
-  size?: 'md' | 'lg'
-}>()
-
-// defineModel without arguments uses 'modelValue' as the prop name
-const searchQuery = defineModel<string>()
-
-// Internal search query state for immediate UI updates
-const internalSearchQuery = ref<string>(searchQuery.value ?? '')
-
-// Create debounced function to update the parent model
-const updateSearchQuery = useDebounceFn((value: string) => {
-  searchQuery.value = value
-}, SEARCH_DEBOUNCE_DELAY_MS)
-
-// Watch internal query changes and trigger debounced update
-watch(internalSearchQuery, (newValue) => {
-  void updateSearchQuery(newValue)
-})
-
-// Sync external changes back to internal state
-watch(searchQuery, (newValue) => {
-  if (newValue !== internalSearchQuery.value) {
-    internalSearchQuery.value = newValue || ''
-  }
-})
-
-const input = ref<{ $el: HTMLElement } | null>()
-const focusInput = () => {
-  if (input.value && input.value.$el) {
-    input.value.$el.focus()
-  }
-}
-
-onMounted(() => autofocus && focusInput())
-
-const wrapperStyle = computed(() => {
-  const baseClasses =
-    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
-
-  if (showBorder) {
-    return cn(
-      baseClasses,
-      'rounded p-2 border border-solid border-border-default'
-    )
-  }
-
-  // Size-specific classes matching button sizes for consistency
-  const sizeClasses = {
-    md: 'h-8 px-2 py-1.5', // Matches button sm size
-    lg: 'h-10 px-4 py-2' // Matches button md size
-  }[size]
-
-  return cn(baseClasses, 'rounded-lg', sizeClasses)
-})
-</script>
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 57afb4dd42..80c2ff6f4f 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -23,6 +23,17 @@
         </div>
       </div>
     </template>
+    <template #tool-buttons>
+      <!-- Normal Tab View -->
+      <TabList v-if="!isInFolderView" v-model="activeTab">
+        <Tab class="font-inter" value="output">{{
+          $t('sideToolbar.labels.generated')
+        }}</Tab>
+        <Tab class="font-inter" value="input">{{
+          $t('sideToolbar.labels.imported')
+        }}</Tab>
+      </TabList>
+    </template>
     <template #header>
       <!-- Job Detail View Header -->
       <div v-if="isInFolderView" class="px-2 2xl:px-4">
@@ -36,15 +47,7 @@
           </template>
         </IconTextButton>
       </div>
-      <!-- Normal Tab View -->
-      <TabList v-else v-model="activeTab" class="font-inter px-2 2xl:px-4">
-        <Tab class="font-inter" value="output">{{
-          $t('sideToolbar.labels.generated')
-        }}</Tab>
-        <Tab class="font-inter" value="input">{{
-          $t('sideToolbar.labels.imported')
-        }}</Tab>
-      </TabList>
+
       <!-- Filter Bar -->
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
@@ -55,12 +58,11 @@
       />
     </template>
     <template #body>
-      <!-- Loading state -->
-      <div v-if="loading">
+      <Divider type="dashed" class="m-2" />
+      <div v-if="loading && !displayAssets.length">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <!-- Empty state -->
-      <div v-else-if="!displayAssets.length">
+      <div v-else-if="!loading && !displayAssets.length">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -73,7 +75,6 @@
           :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
-      <!-- Content -->
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <VirtualGrid
           :items="mediaAssetsWithKey"
@@ -174,6 +175,7 @@
 
 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
+import { Divider } from 'primevue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
diff --git a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
index 01b312f001..cf7f4af8a7 100644
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -17,17 +17,19 @@
       />
     </template>
     <template #header>
-      <SearchBox
-        ref="searchBoxRef"
-        v-model:model-value="searchQuery"
-        class="model-lib-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchModels') + '...'"
-        @search="handleSearch"
-      />
+      <div class="px-2 2xl:px-4">
+        <SearchBox
+          ref="searchBoxRef"
+          v-model:model-value="searchQuery"
+          :placeholder="$t('g.searchModels') + '...'"
+          @search="handleSearch"
+        />
+      </div>
     </template>
     <template #body>
       <ElectronDownloadItems v-if="isElectron()" />
 
+      <Divider type="dashed" class="m-2" />
       <TreeExplorer
         v-model:expanded-keys="expandedKeys"
         class="model-lib-tree-explorer"
@@ -43,6 +45,7 @@
 </template>
 
 <script setup lang="ts">
+import { Divider } from 'primevue'
 import Button from 'primevue/button'
 import { computed, nextTick, onMounted, ref, toRef, watch } from 'vue'
 
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
index 248abc8bed..4a7c1a03ff 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -75,11 +75,11 @@
         </Popover>
       </template>
       <template #header>
-        <div>
+        <div class="px-2 2xl:px-4">
           <SearchBox
             ref="searchBoxRef"
             v-model:model-value="searchQuery"
-            class="node-lib-search-box p-2 2xl:p-4"
+            class="node-lib-search-box"
             :placeholder="$t('g.searchNodes') + '...'"
             filter-icon="pi pi-filter"
             :filters
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 593c74ae4b..29b8c3d624 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -5,7 +5,7 @@
   >
     <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
-        class="min-h-15.5 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+        class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
       >
         <template #start>
           <span class="truncate font-bold" :title="props.title">
diff --git a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
index 819b93bccc..3b37f54f84 100644
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -13,13 +13,15 @@
       />
     </template>
     <template #header>
-      <SearchBox
-        ref="searchBoxRef"
-        v-model:model-value="searchQuery"
-        class="workflows-search-box p-2 2xl:p-4"
-        :placeholder="$t('g.searchWorkflows') + '...'"
-        @search="handleSearch"
-      />
+      <div class="px-2 2xl:px-4">
+        <SearchBox
+          ref="searchBoxRef"
+          v-model:model-value="searchQuery"
+          class="workflows-search-box"
+          :placeholder="$t('g.searchWorkflows') + '...'"
+          @search="handleSearch"
+        />
+      </div>
     </template>
     <template #body>
       <div v-if="!isSearching" class="comfyui-workflows-panel">
diff --git a/src/components/toast/RerouteMigrationToast.vue b/src/components/toast/RerouteMigrationToast.vue
index c084926d15..8c6fd4edb0 100644
--- a/src/components/toast/RerouteMigrationToast.vue
+++ b/src/components/toast/RerouteMigrationToast.vue
@@ -33,7 +33,7 @@ const toast = useToast()
 
 const workflowStore = useWorkflowStore()
 const migrateToLitegraphReroute = async () => {
-  const workflowJSON = app.graph.serialize() as unknown as WorkflowJSON04
+  const workflowJSON = app.rootGraph.serialize() as unknown as WorkflowJSON04
   const migratedWorkflowJSON = migrateLegacyRerouteNodes(workflowJSON)
   await app.loadGraphData(
     migratedWorkflowJSON,
diff --git a/src/components/toast/VueNodesMigrationToast.vue b/src/components/toast/VueNodesMigrationToast.vue
deleted file mode 100644
index 6f7274ef06..0000000000
--- a/src/components/toast/VueNodesMigrationToast.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <Toast
-    group="vue-nodes-migration"
-    position="bottom-center"
-    class="w-auto"
-    @close="handleClose"
-  >
-    <template #message>
-      <div class="flex flex-auto items-center justify-between gap-4">
-        <span class="whitespace-nowrap">{{
-          t('vueNodesMigration.message')
-        }}</span>
-        <Button
-          class="whitespace-nowrap"
-          size="small"
-          :label="t('vueNodesMigration.button')"
-          text
-          @click="switchBack"
-        />
-      </div>
-    </template>
-  </Toast>
-  <Toast
-    group="vue-nodes-check-main-menu"
-    position="bottom-center"
-    class="w-auto"
-  >
-    <template #message>
-      <div class="flex flex-auto items-center justify-between gap-4">
-        <span class="whitespace-nowrap">{{
-          t('vueNodesMigrationMainMenu.message')
-        }}</span>
-      </div>
-    </template>
-  </Toast>
-</template>
-
-<script setup lang="ts">
-import { useToast } from 'primevue'
-import Button from 'primevue/button'
-import Toast from 'primevue/toast'
-import { useI18n } from 'vue-i18n'
-
-import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-
-const { t } = useI18n()
-const toast = useToast()
-const isDismissed = useVueNodesMigrationDismissed()
-
-const switchBack = async () => {
-  await disableVueNodes()
-  toast.removeGroup('vue-nodes-migration')
-  isDismissed.value = true
-  showMainMenuToast()
-}
-
-const handleClose = () => {
-  isDismissed.value = true
-  showMainMenuToast()
-}
-
-const disableVueNodes = async () => {
-  await useSettingStore().set('Comfy.VueNodes.Enabled', false)
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: `vue_nodes_migration_toast_switch_back_clicked`
-  })
-}
-
-const showMainMenuToast = () => {
-  useToastStore().add({
-    group: 'vue-nodes-check-main-menu',
-    severity: 'info',
-    life: 5000
-  })
-}
-</script>
diff --git a/src/components/topbar/CurrentUserPopover.test.ts b/src/components/topbar/CurrentUserPopover.test.ts
index 48477b934a..4b1cb114cb 100644
--- a/src/components/topbar/CurrentUserPopover.test.ts
+++ b/src/components/topbar/CurrentUserPopover.test.ts
@@ -248,7 +248,7 @@ describe('CurrentUserPopover', () => {
 
     // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
-      'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+      'https://docs.comfy.org/tutorials/partner-nodes/pricing',
       '_blank'
     )
 
diff --git a/src/components/topbar/CurrentUserPopover.vue b/src/components/topbar/CurrentUserPopover.vue
index 144d3731f9..adad38de4b 100644
--- a/src/components/topbar/CurrentUserPopover.vue
+++ b/src/components/topbar/CurrentUserPopover.vue
@@ -21,12 +21,21 @@
       <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
         {{ userEmail }}
       </p>
+      <p v-if="subscriptionTierName" class="my-0 truncate text-sm text-muted">
+        {{ subscriptionTierName }}
+      </p>
     </div>
 
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
       <i class="icon-[lucide--component] text-amber-400 text-sm" />
-      <span class="text-base font-normal text-base-foreground flex-1">{{
+      <Skeleton
+        v-if="authStore.isFetchingBalance"
+        width="4rem"
+        height="1.25rem"
+        class="flex-1"
+      />
+      <span v-else class="text-base font-normal text-base-foreground flex-1">{{
         formattedBalance
       }}</span>
       <Button
@@ -39,14 +48,15 @@
       />
     </div>
 
-    <SubscribeButton
-      v-else
-      class="mx-4"
-      :label="$t('subscription.subscribeToComfyCloud')"
-      size="small"
-      variant="gradient"
-      @subscribed="handleSubscribed"
-    />
+    <div v-else class="flex justify-center px-4">
+      <SubscribeButton
+        :fluid="false"
+        :label="$t('subscription.subscribeToComfyCloud')"
+        size="small"
+        variant="gradient"
+        @subscribed="handleSubscribed"
+      />
+    </div>
 
     <!-- Credits info row -->
     <div
@@ -121,6 +131,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
+import Skeleton from 'primevue/skeleton'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -152,7 +163,8 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
 const authActions = useFirebaseAuthActions()
 const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
-const { isActiveSubscription, fetchStatus } = useSubscription()
+const { isActiveSubscription, subscriptionTierName, fetchStatus } =
+  useSubscription()
 const { flags } = useFeatureFlags()
 const { locale } = useI18n()
 
@@ -193,7 +205,7 @@ const handleTopUp = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+    buildDocsUrl('/tutorials/partner-nodes/pricing', {
       includeLocale: true
     }),
     '_blank'
diff --git a/src/components/topbar/TryVueNodeBanner.vue b/src/components/topbar/TryVueNodeBanner.vue
deleted file mode 100644
index 17e22ba93e..0000000000
--- a/src/components/topbar/TryVueNodeBanner.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div
-    v-if="showVueNodesBanner"
-    class="pointer-events-auto relative w-full h-10 bg-gradient-to-r from-blue-600 to-blue-700 flex items-center justify-center px-4"
-  >
-    <div class="flex items-center text-sm text-white">
-      <i class="icon-[lucide--rocket]"></i>
-      <span class="pl-2">{{ $t('vueNodesBanner.title') }}</span>
-      <span class="pl-1.5 hidden md:inline">{{
-        $t('vueNodesBanner.desc')
-      }}</span>
-      <Button
-        class="cursor-pointer bg-transparent rounded h-7 px-3 border border-white text-white ml-4 text-xs"
-        @click="handleTryItOut"
-      >
-        {{ $t('vueNodesBanner.tryItOut') }}
-      </Button>
-    </div>
-    <Button
-      class="cursor-pointer bg-transparent border-0 outline-0 grid place-items-center absolute right-4 text-white"
-      unstyled
-      @click="handleDismiss"
-    >
-      <i class="w-5 h-5 icon-[lucide--x]"></i>
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useLocalStorage } from '@vueuse/core'
-import Button from 'primevue/button'
-import { computed } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-
-const STORAGE_KEY = 'vueNodesBannerDismissed'
-
-const settingStore = useSettingStore()
-const bannerDismissed = useLocalStorage(STORAGE_KEY, false)
-
-const vueNodesEnabled = computed(() => {
-  try {
-    return settingStore.get('Comfy.VueNodes.Enabled') ?? false
-  } catch {
-    return false
-  }
-})
-
-const showVueNodesBanner = computed(() => {
-  if (vueNodesEnabled.value) {
-    return false
-  }
-
-  if (bannerDismissed.value) {
-    return false
-  }
-
-  return true
-})
-
-const handleDismiss = (): void => {
-  bannerDismissed.value = true
-}
-
-const handleTryItOut = async (): Promise<void> => {
-  try {
-    await settingStore.set('Comfy.VueNodes.Enabled', true)
-  } catch (error) {
-    console.error('Failed to enable Nodes 2.0:', error)
-  } finally {
-    handleDismiss()
-  }
-}
-</script>
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index 7f0147a3b8..4132bd3caa 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -140,8 +140,8 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
diff --git a/src/components/widget/layout/BaseModalLayout.stories.ts b/src/components/widget/layout/BaseModalLayout.stories.ts
index 26479aaba3..ed4ea45a98 100644
--- a/src/components/widget/layout/BaseModalLayout.stories.ts
+++ b/src/components/widget/layout/BaseModalLayout.stories.ts
@@ -9,7 +9,7 @@ import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import SquareChip from '@/components/chip/SquareChip.vue'
 import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index c3ab830c99..a1e3b94471 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -20,7 +20,8 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue } from '@/types/simplifiedWidget'
+import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
+import { normalizeControlOption } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -47,6 +48,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
+  controlWidget?: SafeControlWidget
   borderStyle?: string
 }
 
@@ -84,6 +86,17 @@ export interface GraphNodeManager {
   cleanup(): void
 }
 
+function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
+  const cagWidget = widget.linkedWidgets?.find(
+    (w) => w.name == 'control_after_generate'
+  )
+  if (!cagWidget) return
+  return {
+    value: normalizeControlOption(cagWidget.value),
+    update: (value) => (cagWidget.value = normalizeControlOption(value))
+  }
+}
+
 export function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
@@ -122,7 +135,8 @@ export function safeWidgetMapper(
         label: widget.label,
         options: widget.options,
         spec,
-        slotMetadata: slotInfo
+        slotMetadata: slotInfo,
+        controlWidget: getControlWidget(widget)
       }
     } catch (error) {
       return {
diff --git a/src/composables/graph/useSubgraphOperations.ts b/src/composables/graph/useSubgraphOperations.ts
index b42cc2ec4c..45a665d4b4 100644
--- a/src/composables/graph/useSubgraphOperations.ts
+++ b/src/composables/graph/useSubgraphOperations.ts
@@ -37,6 +37,21 @@ export function useSubgraphOperations() {
     workflowStore.activeWorkflow?.changeTracker?.checkState()
   }
 
+  const doUnpack = (
+    subgraphNodes: SubgraphNode[],
+    skipMissingNodes: boolean
+  ) => {
+    const canvas = canvasStore.getCanvas()
+    const graph = canvas.subgraph ?? canvas.graph
+    if (!graph) return
+
+    for (const subgraphNode of subgraphNodes) {
+      nodeOutputStore.revokeSubgraphPreviews(subgraphNode)
+      graph.unpackSubgraph(subgraphNode, { skipMissingNodes })
+    }
+    workflowStore.activeWorkflow?.changeTracker?.checkState()
+  }
+
   const unpackSubgraph = () => {
     const canvas = canvasStore.getCanvas()
     const graph = canvas.subgraph ?? canvas.graph
@@ -53,17 +68,7 @@ export function useSubgraphOperations() {
     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()
+    doUnpack(subgraphNodes, true)
   }
 
   const addSubgraphToLibrary = async () => {
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index dfc2ac06aa..648427a513 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -4,7 +4,6 @@ import { shallowRef, watch } from 'vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
@@ -13,7 +12,6 @@ import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
 import { app as comfyApp } from '@/scripts/app'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 
 function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
@@ -22,10 +20,6 @@ function useVueNodeLifecycleIndividual() {
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
   const { startSync } = useLayoutSync()
 
-  const isVueNodeToastDismissed = useVueNodesMigrationDismissed()
-
-  let hasShownMigrationToast = false
-
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph
@@ -83,24 +77,12 @@ function useVueNodeLifecycleIndividual() {
   // Watch for Vue nodes enabled state changes
   watch(
     () => shouldRenderVueNodes.value && Boolean(comfyApp.canvas?.graph),
-    (enabled, wasEnabled) => {
+    (enabled) => {
       if (enabled) {
         initializeNodeManager()
         ensureCorrectLayoutScale(
           comfyApp.canvas?.graph?.extra.workflowRendererVersion
         )
-        if (
-          wasEnabled === false &&
-          !isVueNodeToastDismissed.value &&
-          !hasShownMigrationToast
-        ) {
-          hasShownMigrationToast = true
-          useToastStore().add({
-            group: 'vue-nodes-migration',
-            severity: 'info',
-            life: 0
-          })
-        }
       }
     },
     { immediate: true }
diff --git a/src/composables/maskeditor/useMaskEditorSaver.ts b/src/composables/maskeditor/useMaskEditorSaver.ts
index 4af771399e..8aa6bb0da8 100644
--- a/src/composables/maskeditor/useMaskEditorSaver.ts
+++ b/src/composables/maskeditor/useMaskEditorSaver.ts
@@ -51,7 +51,7 @@ export function useMaskEditorSaver() {
 
       updateNodeWithServerReferences(sourceNode, outputData)
 
-      app.graph.setDirtyCanvas(true)
+      app.canvas.setDirty(true)
     } catch (error) {
       console.error('[MaskEditorSaver] Save failed:', error)
       throw error
@@ -308,7 +308,7 @@ export function useMaskEditorSaver() {
     const mainImg = await loadImageFromUrl(dataUrl)
     node.imgs = [mainImg]
 
-    app.graph.setDirtyCanvas(true)
+    app.canvas.setDirty(true)
   }
 
   function updateNodeWithServerReferences(
diff --git a/src/composables/maskeditor/useToolManager.ts b/src/composables/maskeditor/useToolManager.ts
index f51ce7b15a..9b18476991 100644
--- a/src/composables/maskeditor/useToolManager.ts
+++ b/src/composables/maskeditor/useToolManager.ts
@@ -22,10 +22,10 @@ export function useToolManager(
   const coordinateTransform = useCoordinateTransform()
 
   const brushDrawing = useBrushDrawing({
-    useDominantAxis: app.extensionManager.setting.get(
+    useDominantAxis: app.extensionManager.setting.get<boolean>(
       'Comfy.MaskEditor.UseDominantAxis'
     ),
-    brushAdjustmentSpeed: app.extensionManager.setting.get(
+    brushAdjustmentSpeed: app.extensionManager.setting.get<number>(
       'Comfy.MaskEditor.BrushAdjustmentSpeed'
     )
   })
diff --git a/src/composables/node/useNodeBadge.ts b/src/composables/node/useNodeBadge.ts
index 30c4487a38..2f31ad0ac5 100644
--- a/src/composables/node/useNodeBadge.ts
+++ b/src/composables/node/useNodeBadge.ts
@@ -55,7 +55,7 @@ export const useNodeBadge = () => {
       showApiPricingBadge
     ],
     () => {
-      app.graph?.setDirtyCanvas(true, true)
+      app.canvas?.setDirty(true, true)
     }
   )
 
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 7a3a900561..041617c2d1 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -40,12 +40,12 @@ const calculateRunwayDurationPrice = (node: LGraphNode): string => {
     (w) => w.name === 'duration'
   ) as IComboWidget
 
-  if (!durationWidget) return '$0.05/second'
+  if (!durationWidget) return '$0.0715/second'
 
   const duration = Number(durationWidget.value)
   // If duration is 0 or NaN, don't fall back to 5 seconds - just use 0
   const validDuration = isNaN(duration) ? 5 : duration
-  const cost = (0.05 * validDuration).toFixed(2)
+  const cost = (0.0715 * validDuration).toFixed(2)
   return `$${cost}/Run`
 }
 
@@ -231,6 +231,36 @@ const ltxvPricingCalculator = (node: LGraphNode): string => {
   return `$${cost}/Run`
 }
 
+const klingVideoWithAudioPricingCalculator: PricingFunction = (
+  node: LGraphNode
+): string => {
+  const durationWidget = node.widgets?.find(
+    (w) => w.name === 'duration'
+  ) as IComboWidget
+  const generateAudioWidget = node.widgets?.find(
+    (w) => w.name === 'generate_audio'
+  ) as IComboWidget
+
+  if (!durationWidget || !generateAudioWidget) {
+    return '$0.35-1.40/Run (varies with duration & audio)'
+  }
+
+  const duration = String(durationWidget.value)
+  const generateAudio =
+    String(generateAudioWidget.value).toLowerCase() === 'true'
+
+  if (duration === '5') {
+    return generateAudio ? '$0.70/Run' : '$0.35/Run'
+  }
+
+  if (duration === '10') {
+    return generateAudio ? '$1.40/Run' : '$0.70/Run'
+  }
+
+  // Fallback for unexpected duration values
+  return '$0.35-1.40/Run (varies with duration & audio)'
+}
+
 // ---- constants ----
 const SORA_SIZES = {
   BASIC: new Set(['720x1280', '1280x720']),
@@ -377,11 +407,11 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
           (w) => w.name === 'turbo'
         ) as IComboWidget
 
-        if (!numImagesWidget) return '$0.02-0.06 x num_images/Run'
+        if (!numImagesWidget) return '$0.03-0.09 x num_images/Run'
 
         const numImages = Number(numImagesWidget.value) || 1
         const turbo = String(turboWidget?.value).toLowerCase() === 'true'
-        const basePrice = turbo ? 0.02 : 0.06
+        const basePrice = turbo ? 0.0286 : 0.0858
         const cost = (basePrice * numImages).toFixed(2)
         return `$${cost}/Run`
       }
@@ -395,11 +425,11 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
           (w) => w.name === 'turbo'
         ) as IComboWidget
 
-        if (!numImagesWidget) return '$0.05-0.08 x num_images/Run'
+        if (!numImagesWidget) return '$0.07-0.11 x num_images/Run'
 
         const numImages = Number(numImagesWidget.value) || 1
         const turbo = String(turboWidget?.value).toLowerCase() === 'true'
-        const basePrice = turbo ? 0.05 : 0.08
+        const basePrice = turbo ? 0.0715 : 0.1144
         const cost = (basePrice * numImages).toFixed(2)
         return `$${cost}/Run`
       }
@@ -420,29 +450,29 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
           characterInput.link != null
 
         if (!renderingSpeedWidget)
-          return '$0.03-0.08 x num_images/Run (varies with rendering speed & num_images)'
+          return '$0.04-0.11 x num_images/Run (varies with rendering speed & num_images)'
 
         const numImages = Number(numImagesWidget?.value) || 1
-        let basePrice = 0.06 // default balanced price
+        let basePrice = 0.0858 // default balanced price
 
         const renderingSpeed = String(renderingSpeedWidget.value)
         if (renderingSpeed.toLowerCase().includes('quality')) {
           if (hasCharacter) {
-            basePrice = 0.2
+            basePrice = 0.286
           } else {
-            basePrice = 0.09
+            basePrice = 0.1287
           }
         } else if (renderingSpeed.toLowerCase().includes('default')) {
           if (hasCharacter) {
-            basePrice = 0.15
+            basePrice = 0.2145
           } else {
-            basePrice = 0.06
+            basePrice = 0.0858
           }
         } else if (renderingSpeed.toLowerCase().includes('turbo')) {
           if (hasCharacter) {
-            basePrice = 0.1
+            basePrice = 0.143
           } else {
-            basePrice = 0.03
+            basePrice = 0.0429
           }
         }
 
@@ -741,6 +771,15 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     KlingOmniProEditVideoNode: {
       displayPrice: '$0.168/second'
     },
+    KlingOmniProImageNode: {
+      displayPrice: '$0.028/Run'
+    },
+    KlingTextToVideoWithAudio: {
+      displayPrice: klingVideoWithAudioPricingCalculator
+    },
+    KlingImageToVideoWithAudio: {
+      displayPrice: klingVideoWithAudioPricingCalculator
+    },
     LumaImageToVideoNode: {
       displayPrice: (node: LGraphNode): string => {
         // Same pricing as LumaVideoNode per CSV
@@ -755,7 +794,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         ) as IComboWidget
 
         if (!modelWidget || !resolutionWidget || !durationWidget) {
-          return '$0.14-11.47/Run (varies with model, resolution & duration)'
+          return '$0.20-16.40/Run (varies with model, resolution & duration)'
         }
 
         const model = String(modelWidget.value)
@@ -764,33 +803,33 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
 
         if (model.includes('ray-flash-2')) {
           if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return '$2.19/Run'
-            if (resolution.includes('1080p')) return '$0.55/Run'
-            if (resolution.includes('720p')) return '$0.24/Run'
-            if (resolution.includes('540p')) return '$0.14/Run'
+            if (resolution.includes('4k')) return '$3.13/Run'
+            if (resolution.includes('1080p')) return '$0.79/Run'
+            if (resolution.includes('720p')) return '$0.34/Run'
+            if (resolution.includes('540p')) return '$0.20/Run'
           } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return '$3.95/Run'
-            if (resolution.includes('1080p')) return '$0.99/Run'
-            if (resolution.includes('720p')) return '$0.43/Run'
-            if (resolution.includes('540p')) return '$0.252/Run'
+            if (resolution.includes('4k')) return '$5.65/Run'
+            if (resolution.includes('1080p')) return '$1.42/Run'
+            if (resolution.includes('720p')) return '$0.61/Run'
+            if (resolution.includes('540p')) return '$0.36/Run'
           }
         } else if (model.includes('ray-2')) {
           if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return '$6.37/Run'
-            if (resolution.includes('1080p')) return '$1.59/Run'
-            if (resolution.includes('720p')) return '$0.71/Run'
-            if (resolution.includes('540p')) return '$0.40/Run'
+            if (resolution.includes('4k')) return '$9.11/Run'
+            if (resolution.includes('1080p')) return '$2.27/Run'
+            if (resolution.includes('720p')) return '$1.02/Run'
+            if (resolution.includes('540p')) return '$0.57/Run'
           } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return '$11.47/Run'
-            if (resolution.includes('1080p')) return '$2.87/Run'
-            if (resolution.includes('720p')) return '$1.28/Run'
-            if (resolution.includes('540p')) return '$0.72/Run'
+            if (resolution.includes('4k')) return '$16.40/Run'
+            if (resolution.includes('1080p')) return '$4.10/Run'
+            if (resolution.includes('720p')) return '$1.83/Run'
+            if (resolution.includes('540p')) return '$1.03/Run'
           }
-        } else if (model.includes('ray-1.6')) {
-          return '$0.35/Run'
+        } else if (model.includes('ray-1-6')) {
+          return '$0.50/Run'
         }
 
-        return '$0.55/Run'
+        return '$0.79/Run'
       }
     },
     LumaVideoNode: {
@@ -806,7 +845,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         ) as IComboWidget
 
         if (!modelWidget || !resolutionWidget || !durationWidget) {
-          return '$0.14-11.47/Run (varies with model, resolution & duration)'
+          return '$0.20-16.40/Run (varies with model, resolution & duration)'
         }
 
         const model = String(modelWidget.value)
@@ -815,33 +854,33 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
 
         if (model.includes('ray-flash-2')) {
           if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return '$2.19/Run'
-            if (resolution.includes('1080p')) return '$0.55/Run'
-            if (resolution.includes('720p')) return '$0.24/Run'
-            if (resolution.includes('540p')) return '$0.14/Run'
+            if (resolution.includes('4k')) return '$3.13/Run'
+            if (resolution.includes('1080p')) return '$0.79/Run'
+            if (resolution.includes('720p')) return '$0.34/Run'
+            if (resolution.includes('540p')) return '$0.20/Run'
           } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return '$3.95/Run'
-            if (resolution.includes('1080p')) return '$0.99/Run'
-            if (resolution.includes('720p')) return '$0.43/Run'
-            if (resolution.includes('540p')) return '$0.252/Run'
+            if (resolution.includes('4k')) return '$5.65/Run'
+            if (resolution.includes('1080p')) return '$1.42/Run'
+            if (resolution.includes('720p')) return '$0.61/Run'
+            if (resolution.includes('540p')) return '$0.36/Run'
           }
         } else if (model.includes('ray-2')) {
           if (duration.includes('5s')) {
-            if (resolution.includes('4k')) return '$6.37/Run'
-            if (resolution.includes('1080p')) return '$1.59/Run'
-            if (resolution.includes('720p')) return '$0.71/Run'
-            if (resolution.includes('540p')) return '$0.40/Run'
+            if (resolution.includes('4k')) return '$9.11/Run'
+            if (resolution.includes('1080p')) return '$2.27/Run'
+            if (resolution.includes('720p')) return '$1.02/Run'
+            if (resolution.includes('540p')) return '$0.57/Run'
           } else if (duration.includes('9s')) {
-            if (resolution.includes('4k')) return '$11.47/Run'
-            if (resolution.includes('1080p')) return '$2.87/Run'
-            if (resolution.includes('720p')) return '$1.28/Run'
-            if (resolution.includes('540p')) return '$0.72/Run'
+            if (resolution.includes('4k')) return '$16.40/Run'
+            if (resolution.includes('1080p')) return '$4.10/Run'
+            if (resolution.includes('720p')) return '$1.83/Run'
+            if (resolution.includes('540p')) return '$1.03/Run'
           }
         } else if (model.includes('ray-1-6')) {
-          return '$0.35/Run'
+          return '$0.50/Run'
         }
 
-        return '$0.55/Run'
+        return '$0.79/Run'
       }
     },
     MinimaxImageToVideoNode: {
@@ -1323,18 +1362,18 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         ) as IComboWidget
 
         if (!modelWidget || !aspectRatioWidget) {
-          return '$0.0045-0.0182/Run (varies with model & aspect ratio)'
+          return '$0.0064-0.026/Run (varies with model & aspect ratio)'
         }
 
         const model = String(modelWidget.value)
 
         if (model.includes('photon-flash-1')) {
-          return '$0.0019/Run'
+          return '$0.0027/Run'
         } else if (model.includes('photon-1')) {
-          return '$0.0073/Run'
+          return '$0.0104/Run'
         }
 
-        return '$0.0172/Run'
+        return '$0.0246/Run'
       }
     },
     LumaImageModifyNode: {
@@ -1344,18 +1383,18 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         ) as IComboWidget
 
         if (!modelWidget) {
-          return '$0.0019-0.0073/Run (varies with model)'
+          return '$0.0027-0.0104/Run (varies with model)'
         }
 
         const model = String(modelWidget.value)
 
         if (model.includes('photon-flash-1')) {
-          return '$0.0019/Run'
+          return '$0.0027/Run'
         } else if (model.includes('photon-1')) {
-          return '$0.0073/Run'
+          return '$0.0104/Run'
         }
 
-        return '$0.0172/Run'
+        return '$0.0246/Run'
       }
     },
     MoonvalleyTxt2VideoNode: {
@@ -1417,7 +1456,7 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     // Runway nodes - using actual node names from ComfyUI
     RunwayTextToImageNode: {
-      displayPrice: '$0.08/Run'
+      displayPrice: '$0.11/Run'
     },
     RunwayImageToVideoNodeGen3a: {
       displayPrice: calculateRunwayDurationPrice
@@ -1928,6 +1967,8 @@ export const useNodePricing = () => {
       KlingDualCharacterVideoEffectNode: ['mode', 'model_name', 'duration'],
       KlingSingleImageVideoEffectNode: ['effect_scene'],
       KlingStartEndFrameNode: ['mode', 'model_name', 'duration'],
+      KlingTextToVideoWithAudio: ['duration', 'generate_audio'],
+      KlingImageToVideoWithAudio: ['duration', 'generate_audio'],
       KlingOmniProTextToVideoNode: ['duration'],
       KlingOmniProFirstLastFrameNode: ['duration'],
       KlingOmniProImageToVideoNode: ['duration'],
diff --git a/src/composables/useCanvasDrop.ts b/src/composables/useCanvasDrop.ts
index d3870b04b7..51379e98b4 100644
--- a/src/composables/useCanvasDrop.ts
+++ b/src/composables/useCanvasDrop.ts
@@ -41,7 +41,7 @@ export const useCanvasDrop = (canvasRef: Ref<HTMLCanvasElement | null>) => {
         } else if (node.data instanceof ComfyModelDef) {
           const model = node.data
           const pos = basePos
-          const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
+          const nodeAtPos = comfyApp.canvas.graph?.getNodeOnPos(pos[0], pos[1])
           let targetProvider: ModelNodeProvider | null = null
           let targetGraphNode: LGraphNode | null = null
           if (nodeAtPos) {
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 1cbfec9091..843e9faade 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -1,6 +1,7 @@
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
@@ -13,8 +14,7 @@ import {
   LGraphEventMode,
   LGraphGroup,
   LGraphNode,
-  LiteGraph,
-  SubgraphNode
+  LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
@@ -32,8 +32,6 @@ import {
   useCanvasStore,
   useTitleEditorStore
 } from '@/renderer/core/canvas/canvasStore'
-import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
-import { selectionBounds } from '@/renderer/core/layout/utils/layoutMath'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -41,7 +39,6 @@ import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
-import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
@@ -107,7 +104,7 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'New',
       category: 'essentials' as const,
       function: async () => {
-        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        const previousWorkflowHadNodes = app.rootGraph._nodes.length > 0
         await workflowService.loadBlankWorkflow()
         telemetry?.trackWorkflowCreated({
           workflow_type: 'blank',
@@ -130,7 +127,7 @@ export function useCoreCommands(): ComfyCommand[] {
       icon: 'pi pi-code',
       label: 'Load Default Workflow',
       function: async () => {
-        const previousWorkflowHadNodes = app.graph._nodes.length > 0
+        const previousWorkflowHadNodes = app.rootGraph._nodes.length > 0
         await workflowService.loadDefaultWorkflow()
         telemetry?.trackWorkflowCreated({
           workflow_type: 'default',
@@ -344,53 +341,15 @@ export function useCoreCommands(): ComfyCommand[] {
       menubarLabel: 'Zoom to fit',
       category: 'view-controls' as const,
       function: () => {
-        const vueNodesEnabled = useSettingStore().get('Comfy.VueNodes.Enabled')
-
-        if (vueNodesEnabled) {
-          // Get nodes from Vue stores
-          const canvasStore = useCanvasStore()
-          const selectedNodeIds = canvasStore.selectedNodeIds
-          const allNodes = layoutStore.getAllNodes().value
-
-          // Get nodes to fit - selected if any, otherwise all
-          const nodesToFit =
-            selectedNodeIds.size > 0
-              ? Array.from(selectedNodeIds)
-                  .map((id) => allNodes.get(id))
-                  .filter((node) => node != null)
-              : Array.from(allNodes.values())
-
-          // Use Vue nodes bounds calculation
-          const bounds = selectionBounds(nodesToFit)
-          if (!bounds) {
-            toastStore.add({
-              severity: 'error',
-              summary: t('toastMessages.emptyCanvas'),
-              life: 3000
-            })
-            return
-          }
-
-          // Convert to LiteGraph format and animate
-          const lgBounds = [
-            bounds.x,
-            bounds.y,
-            bounds.width,
-            bounds.height
-          ] as const
-          const setDirty = () => app.canvas.setDirty(true, true)
-          app.canvas.ds.animateToBounds(lgBounds, setDirty)
-        } else {
-          if (app.canvas.empty) {
-            toastStore.add({
-              severity: 'error',
-              summary: t('toastMessages.emptyCanvas'),
-              life: 3000
-            })
-            return
-          }
-          app.canvas.fitViewToSelectionAnimated()
+        if (app.canvas.empty) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.emptyCanvas'),
+            life: 3000
+          })
+          return
         }
+        app.canvas.fitViewToSelectionAnimated()
       }
     },
     {
@@ -746,7 +705,7 @@ export function useCoreCommands(): ComfyCommand[] {
               'Comfy.GroupSelectedNodes.Padding'
             )
             group.resizeTo(group.children, padding)
-            app.graph.change()
+            app.canvas.setDirty(false, true)
           }
         }
       }
@@ -1010,14 +969,8 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Unpack the selected Subgraph',
       versionAdded: '1.26.3',
       function: () => {
-        const canvas = canvasStore.getCanvas()
-        const graph = canvas.subgraph ?? canvas.graph
-        if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
-
-        const subgraphNode = app.canvas.selectedItems.values().next().value
-        if (!(subgraphNode instanceof SubgraphNode)) return
-        useNodeOutputStore().revokeSubgraphPreviews(subgraphNode)
-        graph.unpackSubgraph(subgraphNode)
+        const { unpackSubgraph } = useSubgraphOperations()
+        unpackSubgraph()
       }
     },
     {
diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index bb493385dd..07b82ff40c 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -13,7 +13,8 @@ export enum ServerFeatureFlag {
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
   ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
-  SUBSCRIPTION_TIERS_ENABLED = 'subscription_tiers_enabled'
+  SUBSCRIPTION_TIERS_ENABLED = 'subscription_tiers_enabled',
+  ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled'
 }
 
 /**
@@ -66,6 +67,12 @@ export function useFeatureFlags() {
           true // Default to true (new design)
         )
       )
+    },
+    get onboardingSurveyEnabled() {
+      return (
+        remoteConfig.value.onboarding_survey_enabled ??
+        api.getServerFeature(ServerFeatureFlag.ONBOARDING_SURVEY_ENABLED, true)
+      )
     }
   })
 
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index c181e2f917..f447f230b1 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -41,11 +41,11 @@ export function useTemplateFiltering(
     keys: [
       { name: 'name', weight: 0.3 },
       { name: 'title', weight: 0.3 },
-      { name: 'description', weight: 0.2 },
-      { name: 'tags', weight: 0.1 },
-      { name: 'models', weight: 0.1 }
+      { name: 'description', weight: 0.1 },
+      { name: 'tags', weight: 0.2 },
+      { name: 'models', weight: 0.3 }
     ],
-    threshold: 0.4,
+    threshold: 0.33,
     includeScore: true,
     includeMatches: true
   }
diff --git a/src/composables/useVueNodesMigrationDismissed.ts b/src/composables/useVueNodesMigrationDismissed.ts
deleted file mode 100644
index 1d72760fc8..0000000000
--- a/src/composables/useVueNodesMigrationDismissed.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createSharedComposable, useLocalStorage } from '@vueuse/core'
-
-// Browser storage events don't fire in the same tab, so separate
-// useLocalStorage() calls create isolated reactive refs. Use shared
-// composable to ensure all components use the same ref instance.
-export const useVueNodesMigrationDismissed = createSharedComposable(() =>
-  useLocalStorage('comfy.vueNodesMigration.dismissed', false)
-)
diff --git a/src/config/stripePricingTableConfig.ts b/src/config/stripePricingTableConfig.ts
deleted file mode 100644
index 6c1f0e0cf1..0000000000
--- a/src/config/stripePricingTableConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
-
-export const STRIPE_PRICING_TABLE_SCRIPT_SRC =
-  'https://js.stripe.com/v3/pricing-table.js'
-
-interface StripePricingTableConfig {
-  publishableKey: string
-  pricingTableId: string
-}
-
-function getEnvValue(
-  key: 'VITE_STRIPE_PUBLISHABLE_KEY' | 'VITE_STRIPE_PRICING_TABLE_ID'
-) {
-  return import.meta.env[key]
-}
-
-export function getStripePricingTableConfig(): StripePricingTableConfig {
-  const publishableKey =
-    remoteConfig.value.stripe_publishable_key ||
-    window.__CONFIG__?.stripe_publishable_key ||
-    getEnvValue('VITE_STRIPE_PUBLISHABLE_KEY') ||
-    ''
-
-  const pricingTableId =
-    remoteConfig.value.stripe_pricing_table_id ||
-    window.__CONFIG__?.stripe_pricing_table_id ||
-    getEnvValue('VITE_STRIPE_PRICING_TABLE_ID') ||
-    ''
-
-  return {
-    publishableKey,
-    pricingTableId
-  }
-}
diff --git a/src/extensions/core/customCombo.ts b/src/extensions/core/customCombo.ts
new file mode 100644
index 0000000000..ed7356a40f
--- /dev/null
+++ b/src/extensions/core/customCombo.ts
@@ -0,0 +1,113 @@
+import { shallowReactive } from 'vue'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { LLink } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+
+function applyToGraph(this: LGraphNode, extraLinks: LLink[] = []) {
+  if (!this.outputs[0].links?.length || !this.graph) return
+
+  const links = [
+    ...this.outputs[0].links.map((l) => this.graph!.links[l]),
+    ...extraLinks
+  ]
+  let v = this.widgets?.[0].value
+  // For each output link copy our value over the original widget value
+  for (const linkInfo of links) {
+    const node = this.graph?.getNodeById(linkInfo.target_id)
+    const input = node?.inputs[linkInfo.target_slot]
+    if (!input) {
+      console.warn('Unable to resolve node or input for link', linkInfo)
+      continue
+    }
+
+    const widgetName = input.widget?.name
+    if (!widgetName) {
+      console.warn('Invalid widget or widget name', input.widget)
+      continue
+    }
+
+    const widget = node.widgets?.find((w) => w.name === widgetName)
+    if (!widget) {
+      console.warn(`Unable to find widget "${widgetName}" on node [${node.id}]`)
+      continue
+    }
+
+    widget.value = v
+    widget.callback?.(
+      widget.value,
+      app.canvas,
+      node,
+      app.canvas.graph_mouse,
+      {} as CanvasPointerEvent
+    )
+  }
+}
+
+function onNodeCreated(this: LGraphNode) {
+  this.applyToGraph = useChainCallback(this.applyToGraph, applyToGraph)
+
+  const comboWidget = this.widgets![0]
+  const values = shallowReactive<string[]>([])
+  comboWidget.options.values = values
+
+  const updateCombo = () => {
+    values.splice(
+      0,
+      values.length,
+      ...this.widgets!.filter(
+        (w) => w.name.startsWith('option') && w.value
+      ).map((w) => `${w.value}`)
+    )
+    if (app.configuringGraph) return
+    if (values.includes(`${comboWidget.value}`)) return
+    comboWidget.value = values[0] ?? ''
+    comboWidget.callback?.(comboWidget.value)
+  }
+  comboWidget.callback = useChainCallback(comboWidget.callback, () =>
+    this.applyToGraph!()
+  )
+
+  function addOption(node: LGraphNode) {
+    if (!node.widgets) return
+    const newCount = node.widgets.length - 1
+    node.addWidget('string', `option${newCount}`, '', () => {})
+    const widget = node.widgets.at(-1)
+    if (!widget) return
+
+    let value = ''
+    Object.defineProperty(widget, 'value', {
+      get() {
+        return value
+      },
+      set(v) {
+        value = v
+        updateCombo()
+        if (!node.widgets) return
+        const lastWidget = node.widgets.at(-1)
+        if (lastWidget === this) {
+          if (v) addOption(node)
+          return
+        }
+        if (v || node.widgets.at(-2) !== this || lastWidget?.value) return
+        node.widgets.pop()
+        node.computeSize(node.size)
+        this.callback(v)
+      }
+    })
+  }
+  addOption(this)
+}
+
+app.registerExtension({
+  name: 'Comfy.CustomCombo',
+  beforeRegisterNodeDef(nodeType, nodeData) {
+    if (nodeData?.name !== 'CustomCombo') return
+    nodeType.prototype.onNodeCreated = useChainCallback(
+      nodeType.prototype.onNodeCreated,
+      onNodeCreated
+    )
+  }
+})
diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts
index 5b4146c2d8..cbc8d25654 100644
--- a/src/extensions/core/groupNode.ts
+++ b/src/extensions/core/groupNode.ts
@@ -47,8 +47,8 @@ const Workflow = {
     const id = `${PREFIX}${SEPARATOR}${name}`
     // Check if lready registered/in use in this workflow
     // @ts-expect-error fixme ts strict error
-    if (app.graph.extra?.groupNodes?.[name]) {
-      if (app.graph.nodes.find((n) => n.type === id)) {
+    if (app.rootGraph.extra?.groupNodes?.[name]) {
+      if (app.rootGraph.nodes.find((n) => n.type === id)) {
         return Workflow.InUse.InWorkflow
       } else {
         return Workflow.InUse.Registered
@@ -57,8 +57,8 @@ const Workflow = {
     return Workflow.InUse.Free
   },
   storeGroupNode(name: string, data: GroupNodeWorkflowData) {
-    let extra = app.graph.extra
-    if (!extra) app.graph.extra = extra = {}
+    let extra = app.rootGraph.extra
+    if (!extra) app.rootGraph.extra = extra = {}
     let groupNodes = extra.groupNodes
     if (!groupNodes) extra.groupNodes = groupNodes = {}
     // @ts-expect-error fixme ts strict error
@@ -118,7 +118,7 @@ class GroupNodeBuilder {
 
   sortNodes() {
     // Gets the builders nodes in graph execution order
-    const nodesInOrder = app.graph.computeExecutionOrder(false)
+    const nodesInOrder = app.rootGraph.computeExecutionOrder(false)
     this.nodes = this.nodes
       .map((node) => ({ index: nodesInOrder.indexOf(node), node }))
       // @ts-expect-error id might be string
@@ -131,7 +131,7 @@ class GroupNodeBuilder {
     const storeLinkTypes = (config) => {
       // Store link types for dynamically typed nodes e.g. reroutes
       for (const link of config.links) {
-        const origin = app.graph.getNodeById(link[4])
+        const origin = app.rootGraph.getNodeById(link[4])
         // @ts-expect-error fixme ts strict error
         const type = origin.outputs[link[1]].type
         link.push(type)
@@ -151,7 +151,7 @@ class GroupNodeBuilder {
           let type = output.type
           if (!output.links?.length) continue
           for (const l of output.links) {
-            const link = app.graph.links[l]
+            const link = app.rootGraph.links[l]
             if (!link) continue
             if (type === '*') type = link.type
 
@@ -853,7 +853,7 @@ export class GroupNodeHandler {
             // The inner node is connected via the group node inputs
             const linkId = this.node.inputs[externalSlot].link
             // @ts-expect-error fixme ts strict error
-            let link = app.graph.links[linkId]
+            let link = app.rootGraph.links[linkId]
 
             // Use the outer link, but update the target to the inner node
             link = {
@@ -980,7 +980,7 @@ export class GroupNodeHandler {
       // @ts-expect-error fixme ts strict error
       groupNode[GROUP].populateWidgets()
       // @ts-expect-error fixme ts strict error
-      app.graph.add(groupNode)
+      app.rootGraph.add(groupNode)
       // @ts-expect-error fixme ts strict error
       groupNode.setSize([
         // @ts-expect-error fixme ts strict error
@@ -1032,7 +1032,7 @@ export class GroupNodeHandler {
         const newNodes = []
         for (let i = 0; i < selectedIds.length; i++) {
           const id = selectedIds[i]
-          const newNode = app.graph.getNodeById(id)
+          const newNode = app.rootGraph.getNodeById(id)
           const innerNode = innerNodes[i]
           newNodes.push(newNode)
 
@@ -1111,17 +1111,17 @@ export class GroupNodeHandler {
       const reconnectInputs = (selectedIds) => {
         for (const innerNodeIndex in this.groupData.oldToNewInputMap) {
           const id = selectedIds[innerNodeIndex]
-          const newNode = app.graph.getNodeById(id)
+          const newNode = app.rootGraph.getNodeById(id)
           const map = this.groupData.oldToNewInputMap[innerNodeIndex]
           for (const innerInputId in map) {
             const groupSlotId = map[innerInputId]
             if (groupSlotId == null) continue
             const slot = node.inputs[groupSlotId]
             if (slot.link == null) continue
-            const link = app.graph.links[slot.link]
+            const link = app.rootGraph.links[slot.link]
             if (!link) continue
             //  connect this node output to the input of another node
-            const originNode = app.graph.getNodeById(link.origin_id)
+            const originNode = app.rootGraph.getNodeById(link.origin_id)
             // @ts-expect-error fixme ts strict error
             originNode.connect(link.origin_slot, newNode, +innerInputId)
           }
@@ -1140,9 +1140,11 @@ export class GroupNodeHandler {
           const links = [...output.links]
           for (const l of links) {
             const slot = this.groupData.newToOldOutputMap[groupOutputId]
-            const link = app.graph.links[l]
-            const targetNode = app.graph.getNodeById(link.target_id)
-            const newNode = app.graph.getNodeById(selectedIds[slot.node.index])
+            const link = app.rootGraph.links[l]
+            const targetNode = app.rootGraph.getNodeById(link.target_id)
+            const newNode = app.rootGraph.getNodeById(
+              selectedIds[slot.node.index]
+            )
             // @ts-expect-error fixme ts strict error
             newNode.connect(slot.slot, targetNode, link.target_slot)
           }
@@ -1155,7 +1157,7 @@ export class GroupNodeHandler {
         const { newNodes, selectedIds } = addInnerNodes()
         reconnectInputs(selectedIds)
         reconnectOutputs(selectedIds)
-        app.graph.remove(this.node)
+        app.rootGraph.remove(this.node)
 
         return newNodes
       } finally {
@@ -1291,7 +1293,7 @@ export class GroupNodeHandler {
       const handler = ({ detail }) => {
         const id = getId(detail)
         if (!id) return
-        const node = app.graph.getNodeById(id)
+        const node = app.rootGraph.getNodeById(id)
         if (node) return
 
         // @ts-expect-error fixme ts strict error
@@ -1546,7 +1548,7 @@ export class GroupNodeHandler {
       }
 
       this.linkOutputs(node, i)
-      app.graph.remove(node)
+      app.rootGraph.remove(node)
 
       // Set internal ID to what is expected after workflow is reloaded
       node.id = `${this.node.id}:${i}`
@@ -1565,10 +1567,10 @@ export class GroupNodeHandler {
       // Clone the links as they'll be changed if we reconnect
       const links = [...output.links]
       for (const l of links) {
-        const link = app.graph.links[l]
+        const link = app.rootGraph.links[l]
         if (!link) continue
 
-        const targetNode = app.graph.getNodeById(link.target_id)
+        const targetNode = app.rootGraph.getNodeById(link.target_id)
         const newSlot =
           this.groupData.oldToNewOutputMap[nodeId]?.[link.origin_slot]
         if (newSlot != null) {
@@ -1582,7 +1584,7 @@ export class GroupNodeHandler {
   linkInputs() {
     for (const link of this.groupData.nodeData.links ?? []) {
       const [, originSlot, targetId, targetSlot, actualOriginId] = link
-      const originNode = app.graph.getNodeById(actualOriginId)
+      const originNode = app.rootGraph.getNodeById(actualOriginId)
       if (!originNode) continue // this node is in the group
       originNode.connect(
         originSlot,
@@ -1621,7 +1623,7 @@ export class GroupNodeHandler {
     // @ts-expect-error fixme ts strict error
     groupNode[GROUP].populateWidgets()
     // @ts-expect-error fixme ts strict error
-    app.graph.add(groupNode)
+    app.rootGraph.add(groupNode)
 
     // Remove all converted nodes and relink them
     // @ts-expect-error fixme ts strict error
@@ -1802,7 +1804,7 @@ const ext: ComfyExtension = {
     // Re-register group nodes so new ones are created with the correct options
     // @ts-expect-error fixme ts strict error
     Object.assign(globalDefs, defs)
-    const nodes = app.graph.extra?.groupNodes
+    const nodes = app.rootGraph.extra?.groupNodes
     if (nodes) {
       await GroupNodeConfig.registerFromWorkflow(nodes, {})
     }
diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts
index 8e52ffccc3..7ea480614b 100644
--- a/src/extensions/core/groupNodeManage.ts
+++ b/src/extensions/core/groupNodeManage.ts
@@ -270,7 +270,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
       this.groupData.oldToNewWidgetMap[this.selectedNodeInnerIndex]
     const items = Object.keys(widgets ?? {})
     // @ts-expect-error fixme ts strict error
-    const type = app.graph.extra.groupNodes[this.selectedGroup]
+    const type = app.rootGraph.extra.groupNodes[this.selectedGroup]
     const config = type.config?.[this.selectedNodeInnerIndex]?.input
     this.widgetsPage.replaceChildren(
       ...items.map((oldName) => {
@@ -290,7 +290,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
     const inputs = this.groupData.nodeInputs[this.selectedNodeInnerIndex]
     const items = Object.keys(inputs ?? {})
     // @ts-expect-error fixme ts strict error
-    const type = app.graph.extra.groupNodes[this.selectedGroup]
+    const type = app.rootGraph.extra.groupNodes[this.selectedGroup]
     const config = type.config?.[this.selectedNodeInnerIndex]?.input
     this.inputsPage.replaceChildren(
       // @ts-expect-error fixme ts strict error
@@ -324,7 +324,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
       this.groupData.oldToNewOutputMap[this.selectedNodeInnerIndex]
 
     // @ts-expect-error fixme ts strict error
-    const type = app.graph.extra.groupNodes[this.selectedGroup]
+    const type = app.rootGraph.extra.groupNodes[this.selectedGroup]
     const config = type.config?.[this.selectedNodeInnerIndex]?.output
     const node = this.groupData.nodeData.nodes[this.selectedNodeInnerIndex]
     const checkable = node.type !== 'PrimitiveNode'
@@ -355,7 +355,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
 
   // @ts-expect-error fixme ts strict error
   show(type?) {
-    const groupNodes = Object.keys(app.graph.extra?.groupNodes ?? {}).sort(
+    const groupNodes = Object.keys(app.rootGraph.extra?.groupNodes ?? {}).sort(
       (a, b) => a.localeCompare(b)
     )
 
@@ -425,7 +425,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
           'button.comfy-btn',
           {
             onclick: () => {
-              const node = app.graph.nodes.find(
+              const node = app.rootGraph.nodes.find(
                 (n) => n.type === `${PREFIX}${SEPARATOR}` + this.selectedGroup
               )
               if (node) {
@@ -440,7 +440,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
                 )
               ) {
                 // @ts-expect-error fixme ts strict error
-                delete app.graph.extra.groupNodes[this.selectedGroup]
+                delete app.rootGraph.extra.groupNodes[this.selectedGroup]
                 LiteGraph.unregisterNodeType(
                   `${PREFIX}${SEPARATOR}` + this.selectedGroup
                 )
@@ -459,7 +459,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
               const types = {}
               for (const g in this.modifications) {
                 // @ts-expect-error fixme ts strict error
-                const type = app.graph.extra.groupNodes[g]
+                const type = app.rootGraph.extra.groupNodes[g]
                 let config = (type.config ??= {})
 
                 let nodeMods = this.modifications[g]?.nodes
@@ -515,7 +515,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
                 types[g] = type
 
                 if (!nodesByType) {
-                  nodesByType = app.graph.nodes.reduce((p, n) => {
+                  nodesByType = app.rootGraph.nodes.reduce((p, n) => {
                     // @ts-expect-error fixme ts strict error
                     p[n.type] ??= []
                     // @ts-expect-error fixme ts strict error
@@ -536,7 +536,7 @@ export class ManageGroupDialog extends ComfyDialog<HTMLDialogElement> {
               }
 
               this.modifications = {}
-              this.app.graph.setDirtyCanvas(true, true)
+              this.app.canvas.setDirty(true, true)
               this.changeGroup(this.selectedGroup, false)
             }
           },
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 95802ff4ee..a007a365de 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -2,6 +2,7 @@ import { isCloud } from '@/platform/distribution/types'
 
 import './clipspace'
 import './contextMenuFilter'
+import './customCombo'
 import './dynamicPrompts'
 import './editAttention'
 import './electronAdapter'
diff --git a/src/extensions/core/maskeditor.ts b/src/extensions/core/maskeditor.ts
index 5d8dadea9e..6986533597 100644
--- a/src/extensions/core/maskeditor.ts
+++ b/src/extensions/core/maskeditor.ts
@@ -1,13 +1,26 @@
 import _ from 'es-toolkit/compat'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
+import { t } from '@/i18n'
+import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { ComfyApp } from '@/scripts/app'
-import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { MaskEditorDialogOld } from './maskEditorOld'
+import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { ClipspaceDialog } from './clipspace'
-import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
+import { MaskEditorDialogOld } from './maskEditorOld'
+
+const warnLegacyMaskEditorDeprecation = () => {
+  const warningMessage = t('toastMessages.legacyMaskEditorDeprecated')
+  console.warn(`[Comfy.MaskEditor] ${warningMessage}`)
+  useToastStore().add({
+    severity: 'warn',
+    summary: 'Alert',
+    detail: warningMessage,
+    life: 4096
+  })
+}
 
 function openMaskEditor(node: LGraphNode): void {
   if (!node) {
@@ -27,6 +40,7 @@ function openMaskEditor(node: LGraphNode): void {
   if (useNewEditor) {
     useMaskEditor().openMaskEditor(node)
   } else {
+    warnLegacyMaskEditorDeprecation()
     // Use old editor
     ComfyApp.copyToClipspace(node)
     // @ts-expect-error clipspace_return_node is an extension property added at runtime
@@ -122,6 +136,7 @@ app.registerExtension({
         'Comfy.MaskEditor.UseNewEditor'
       )
       if (!useNewEditor) {
+        warnLegacyMaskEditorDeprecation()
         const dlg = MaskEditorDialogOld.getInstance() as any
         if (dlg?.isOpened && !dlg.isOpened()) {
           dlg.show()
diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts
index c16ebed72d..457f54c482 100644
--- a/src/extensions/core/nodeTemplates.ts
+++ b/src/extensions/core/nodeTemplates.ts
@@ -367,7 +367,7 @@ const ext: ComfyExtension = {
           data = JSON.parse(data || '{}')
           const nodeIds = Object.keys(app.canvas.selected_nodes)
           for (let i = 0; i < nodeIds.length; i++) {
-            const node = app.graph.getNodeById(nodeIds[i])
+            const node = app.canvas.graph?.getNodeById(nodeIds[i])
             const nodeData = node?.constructor.nodeData
 
             let groupData = GroupNodeHandler.getGroupData(node)
diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts
index fd8dd96f7d..89fcf3cd8a 100644
--- a/src/extensions/core/previewAny.ts
+++ b/src/extensions/core/previewAny.ts
@@ -74,7 +74,8 @@ useExtensionService().registerExtension({
           this.widgets?.filter((w) => w.name === 'preview') ?? []
 
         for (const previewWidget of previewWidgets) {
-          previewWidget.value = message.text[0]
+          const text = message.text ?? ''
+          previewWidget.value = Array.isArray(text) ? (text[0] ?? '') : text
         }
       }
     }
diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts
index dfefc88a0f..71c2295d10 100644
--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -142,7 +142,7 @@ app.registerExtension({
   onNodeOutputsUpdated(nodeOutputs: Record<NodeLocatorId, any>) {
     for (const [nodeLocatorId, output] of Object.entries(nodeOutputs)) {
       if ('audio' in output) {
-        const node = getNodeByLocatorId(app.graph, nodeLocatorId)
+        const node = getNodeByLocatorId(app.rootGraph, nodeLocatorId)
         if (!node) continue
 
         // @ts-expect-error fixme ts strict error
diff --git a/src/extensions/core/webcamCapture.ts b/src/extensions/core/webcamCapture.ts
index f429ddda49..6c02229c5f 100644
--- a/src/extensions/core/webcamCapture.ts
+++ b/src/extensions/core/webcamCapture.ts
@@ -97,7 +97,7 @@ app.registerExtension({
       const img = new Image()
       img.onload = () => {
         node.imgs = [img]
-        app.graph.setDirtyCanvas(true)
+        app.canvas.setDirty(true)
       }
       img.src = data
     }
diff --git a/src/i18n.ts b/src/i18n.ts
index 3ef845ed16..46841c16cf 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -197,6 +197,7 @@ export const i18n = createI18n({
 })
 
 /** Convenience shorthand: i18n.global */
+/** @deprecated use useI18n */
 export const { t, te, d } = i18n.global
 
 /**
@@ -206,5 +207,6 @@ export const { t, te, d } = i18n.global
  * @param fallbackMessage - The fallback message to use if the key is not found.
  */
 export function st(key: string, fallbackMessage: string) {
+  // The normal defaultMsg overload fails in some cases for custom nodes
   return te(key) ? t(key) : fallbackMessage
 }
diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts
index d5d6c18206..478a2a7847 100644
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -1726,9 +1726,15 @@ export class LGraph
     return { subgraph, node: subgraphNode as SubgraphNode }
   }
 
-  unpackSubgraph(subgraphNode: SubgraphNode) {
+  unpackSubgraph(
+    subgraphNode: SubgraphNode,
+    options?: { skipMissingNodes?: boolean }
+  ) {
     if (!(subgraphNode instanceof SubgraphNode))
       throw new Error('Can only unpack Subgraph Nodes')
+
+    const skipMissingNodes = options?.skipMissingNodes ?? false
+
     this.beforeChange()
     //NOTE: Create bounds can not be called on positionables directly as the subgraph is not being displayed and boundingRect is not initialized.
     //NOTE: NODE_TITLE_HEIGHT is explicitly excluded here
@@ -1750,9 +1756,21 @@ export class LGraph
     const movedNodes = multiClone(subgraphNode.subgraph.nodes)
     const nodeIdMap = new Map<NodeId, NodeId>()
     for (const n_info of movedNodes) {
-      const node = LiteGraph.createNode(String(n_info.type), n_info.title)
+      let node = LiteGraph.createNode(String(n_info.type), n_info.title)
       if (!node) {
-        throw new Error('Node not found')
+        if (skipMissingNodes) {
+          console.warn(
+            `Cannot unpack node of type "${n_info.type}" - node type not found. Creating placeholder node.`
+          )
+          node = new LGraphNode(n_info.title || n_info.type || 'Missing Node')
+          node.last_serialization = n_info
+          node.has_errors = true
+          node.type = String(n_info.type)
+        } else {
+          throw new Error(
+            `Cannot unpack: node type "${n_info.type}" is not registered`
+          )
+        }
       }
 
       nodeIdMap.set(n_info.id, ++this.last_node_id)
diff --git a/src/lib/litegraph/src/subgraph/SubgraphNode.ts b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
index 92b61460f6..43f59b5166 100644
--- a/src/lib/litegraph/src/subgraph/SubgraphNode.ts
+++ b/src/lib/litegraph/src/subgraph/SubgraphNode.ts
@@ -300,17 +300,24 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
           continue
         }
 
-        const resolved = link.resolve(this.subgraph)
-        if (!resolved.input || !resolved.inputNode) {
-          console.warn('Invalid resolved link', resolved, this)
+        const { inputNode } = link.resolve(this.subgraph)
+        if (!inputNode) {
+          console.warn('Failed to resolve inputNode', link, this)
+          continue
+        }
+
+        //Manually find input since target_slot can't be trusted
+        const targetInput = inputNode.inputs.find((inp) => inp.link === linkId)
+        if (!targetInput) {
+          console.warn('Failed to find corresponding input', link, inputNode)
           continue
         }
 
         // No widget - ignore this link
-        const widget = resolved.inputNode.getWidgetFromSlot(resolved.input)
+        const widget = inputNode.getWidgetFromSlot(targetInput)
         if (!widget) continue
 
-        this.#setWidget(subgraphInput, input, widget, resolved.input.widget)
+        this.#setWidget(subgraphInput, input, widget, targetInput.widget)
         break
       }
     }
diff --git a/src/lib/litegraph/src/subgraph/subgraphUtils.ts b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
index 70ffc7a5d2..38f74efaad 100644
--- a/src/lib/litegraph/src/subgraph/subgraphUtils.ts
+++ b/src/lib/litegraph/src/subgraph/subgraphUtils.ts
@@ -221,11 +221,13 @@ export function multiClone(nodes: Iterable<LGraphNode>): ISerialisedNode[] {
     const newNode = LiteGraph.createNode(node.type)
     if (!newNode) {
       console.warn('Failed to create node', node.type)
+      const serializedData = structuredClone(node.serialize())
+      clonedNodes.push(serializedData)
       continue
     }
 
     // Must be cloned; litegraph "serialize" is mostly shallow clone
-    const data = LiteGraph.cloneObject(node.serialize())
+    const data = structuredClone(node.serialize())
     newNode.configure(data)
 
     clonedNodes.push(newNode.serialize())
diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json
index 69b49a7df8..644cb67be5 100644
--- a/src/locales/ar/nodeDefs.json
+++ b/src/locales/ar/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "عقدة تحويل الصورة إلى فيديو في كليغ",
     "display_name": "كليغ صورة إلى فيديو",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/ar/settings.json b/src/locales/ar/settings.json
index 8a4338f9f2..5f6dcafdc1 100644
--- a/src/locales/ar/settings.json
+++ b/src/locales/ar/settings.json
@@ -29,12 +29,26 @@
     "name": "صورة خلفية اللوحة",
     "tooltip": "رابط صورة لخلفية اللوحة. يمكنك النقر بزر الفأرة الأيمن على صورة في لوحة النتائج واختيار \"تعيين كخلفية\" لاستخدامها، أو رفع صورتك الخاصة باستخدام زر الرفع."
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "سلوك النقر بزر الفأرة الأيسر",
+    "options": {
+      "Panning": "التنقل",
+      "Select": "تحديد"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "تمرير عجلة الفأرة",
+    "options": {
+      "Panning": "التنقل",
+      "Zoom in/out": "تكبير/تصغير"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "وضع تنقل اللوحة",
     "options": {
+      "Custom": "مخصص",
       "Drag Navigation": "سحب للتنقل",
-      "Standard (New)": "قياسي (جديد)",
-      "Custom": "مخصص"
+      "Standard (New)": "قياسي (جديد)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "صغير"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "نمط الشريط الجانبي",
+    "options": {
+      "connected": "متصل",
+      "floating": "عائم"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "عرض موحد للشريط الجانبي"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "التحقق من صحة سير العمل"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "تخطيط مقياس تلقائي (عقد Vue)",
+    "tooltip": "قياس مواضع العقد تلقائيًا عند التبديل إلى عرض Vue لمنع التداخل"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "تصميم العقد الحديث (عقد Vue)",
+    "tooltip": "الحديث: عرض قائم على DOM مع تفاعلية محسّنة وميزات متصفح أصلية وتصميم مرئي محدث. الكلاسيكي: عرض لوحة تقليدي."
+  },
   "Comfy_WidgetControlMode": {
     "name": "وضع التحكم في الودجت",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "ترتيب معرفات العقد عند حفظ سير العمل"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "طلب تأكيد لاستبدال مخطط الرسم البياني الفرعي الموجود"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "موضع تبويبات سير العمل المفتوحة",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "الالتصاق بالشبكة دائمًا"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "سلوك النقر بزر الفأرة الأيسر",
-    "options": {
-      "Panning": "التنقل",
-      "Select": "تحديد"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "تمرير عجلة الفأرة",
-    "options": {
-      "Panning": "التنقل",
-      "Zoom in/out": "تكبير/تصغير"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "نمط الشريط الجانبي",
-    "options": {
-      "floating": "عائم",
-      "connected": "متصل"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "تخطيط مقياس تلقائي (عقد Vue)",
-    "tooltip": "قياس مواضع العقد تلقائيًا عند التبديل إلى عرض Vue لمنع التداخل"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "تصميم العقد الحديث (عقد Vue)",
-    "tooltip": "الحديث: عرض قائم على DOM مع تفاعلية محسّنة وميزات متصفح أصلية وتصميم مرئي محدث. الكلاسيكي: عرض لوحة تقليدي."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "طلب تأكيد لاستبدال مخطط الرسم البياني الفرعي الموجود"
   }
 }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 5680385e61..18fb58facd 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -662,7 +662,7 @@
       "filter3D": "3D"
     },
     "backToAssets": "Back to all assets",
-    "searchAssets": "Search assets...",
+    "searchAssets": "Search Assets",
     "labels": {
       "queue": "Queue",
       "nodes": "Nodes",
@@ -1229,7 +1229,8 @@
     "PlanCredits": "Plan & Credits",
     "Vue Nodes": "Nodes 2.0",
     "VueNodes": "Nodes 2.0",
-    "Nodes 2_0": "Nodes 2.0"
+    "Nodes 2_0": "Nodes 2.0",
+    "Execution": "Execution"
   },
   "serverConfigItems": {
     "listen": {
@@ -1407,8 +1408,8 @@
     "sigmas": "sigmas",
     "BFL": "BFL",
     "Gemini": "Gemini",
-    "gligen": "gligen",
     "video_models": "video_models",
+    "gligen": "gligen",
     "sd": "sd",
     "Ideogram": "Ideogram",
     "postprocessing": "postprocessing",
@@ -1509,6 +1510,7 @@
     "STYLE_MODEL": "STYLE_MODEL",
     "SVG": "SVG",
     "TIMESTEPS_RANGE": "TIMESTEPS_RANGE",
+    "TRACKS": "TRACKS",
     "UPSCALE_MODEL": "UPSCALE_MODEL",
     "VAE": "VAE",
     "VIDEO": "VIDEO",
@@ -1678,6 +1680,7 @@
     "noTemplatesToExport": "No templates to export",
     "failedToFetchLogs": "Failed to fetch server logs",
     "migrateToLitegraphReroute": "Reroute nodes will be removed in future versions. Click to migrate to litegraph-native reroute.",
+    "legacyMaskEditorDeprecated": "The legacy mask editor is deprecated and will be removed soon.",
     "userNotAuthenticated": "User not authenticated",
     "failedToFetchBalance": "Failed to fetch balance: {error}",
     "failedToCreateCustomer": "Failed to create customer: {error}",
@@ -1871,8 +1874,6 @@
       "videosEstimate": "~{count} videos*",
       "templateNote": "*Generated with Wan Fun Control template",
       "buy": "Buy",
-      "purchaseSuccess": "Purchase Successful",
-      "purchaseSuccessDetail": "Successfully purchased {credits} credits for {amount}",
       "purchaseError": "Purchase Failed",
       "purchaseErrorDetail": "Failed to purchase credits: {error}",
       "unknownError": "An unknown error occurred"
@@ -1898,8 +1899,8 @@
     "comfyCloudLogo": "Comfy Cloud Logo",
     "beta": "BETA",
     "perMonth": "/ month",
+    "usdPerMonth": "USD / month",
     "renewsDate": "Renews {date}",
-    "refreshesOn": "Refreshes to ${monthlyCreditBonusUsd} on {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
     "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
@@ -1912,7 +1913,7 @@
     "monthlyBonusDescription": "Monthly credit bonus",
     "prepaidDescription": "Pre-paid credits",
     "prepaidCreditsInfo": "Pre-paid credits expire after 1 year from purchase date.",
-    "creditsRemainingThisMonth": "Credits remaining for this month",
+    "creditsRemainingThisMonth": "Credits remaining this month",
     "creditsYouveAdded": "Credits you've added",
     "monthlyCreditsInfo": "These credits refresh monthly and don't roll over",
     "viewMoreDetailsPlans": "View more details about plans & pricing",
@@ -1928,25 +1929,30 @@
     },
     "tiers": {
       "founder": {
-        "name": "Founder's Edition Standard",
+        "name": "Founder's Edition",
         "price": "20.00",
         "benefits": {
-          "monthlyCredits": "5,460 monthly credits",
-          "maxDuration": "30 min max duration of each workflow run",
-          "rtx6000": "RTX 6000 Pro (96GB VRAM)",
-          "addCredits": "Add more credits whenever"
+          "monthlyCredits": "5,460",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "30 min",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs"
         }
       },
       "standard": {
         "name": "Standard",
         "price": "20.00",
         "benefits": {
-          "monthlyCredits": "4,200 monthly credits",
-          "maxDuration": "30 min max duration of each workflow run",
-          "rtx6000": "RTX 6000 Pro (96GB VRAM)",
-          "addCredits": "Add more credits whenever",
-          "customLoRAs": "Import your own LoRAs",
-          "videoEstimate": "164"
+          "monthlyCredits": "4,200",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "30 min",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "120"
         }
       },
       "creator": {
@@ -1959,19 +1965,22 @@
           "maxDurationLabel": "max duration of each workflow run",
           "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
           "addCreditsLabel": "Add more credits whenever",
-          "customLoRAsLabel": "Import your own LoRAs"
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "288"
         }
       },
       "pro": {
         "name": "Pro",
         "price": "100.00",
         "benefits": {
-          "monthlyCredits": "21,100 monthly credits",
-          "maxDuration": "1 hr max duration of each workflow run",
-          "rtx6000": "RTX 6000 Pro (96GB VRAM)",
-          "addCredits": "Add more credits whenever",
-          "customLoRAs": "Import your own LoRAs",
-          "videoEstimate": "821"
+          "monthlyCredits": "21,100",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "1 hr",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "815"
         }
       }
     },
@@ -1994,7 +2003,32 @@
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
     "viewEnterprise": "view enterprise",
-    "partnerNodesCredits": "Partner nodes pricing"
+    "partnerNodesCredits": "Partner nodes pricing",
+    "mostPopular": "Most popular",
+    "currentPlan": "Current Plan",
+    "subscribeTo": "Subscribe to {plan}",
+    "monthlyCreditsLabel": "Monthly credits",
+    "maxDurationLabel": "Max duration of each workflow run",
+    "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+    "addCreditsLabel": "Add more credits whenever",
+    "customLoRAsLabel": "Import your own LoRAs",
+    "videoEstimateLabel": "Approx. number of 5s videos generated with Wan Fun Control template",
+    "videoEstimateHelp": "What is this?",
+    "videoEstimateExplanation": "These estimates are based on the Wan Fun Control template for 5-second videos.",
+    "videoEstimateTryTemplate": "Try the Wan Fun Control template →",
+    "upgradePlan": "Upgrade Plan",
+    "upgradeTo": "Upgrade to {plan}",
+    "changeTo": "Change to {plan}",
+    "credits": {
+      "standard": "4,200",
+      "creator": "7,400",
+      "pro": "21,100"
+    },
+    "maxDuration": {
+      "standard": "30 min",
+      "creator": "30 min",
+      "pro": "1 hr"
+    }
   },
   "userSettings": {
     "title": "My Account Settings",
@@ -2022,6 +2056,24 @@
       "placeholderVideo": "Select video...",
       "placeholderModel": "Select model...",
       "placeholderUnknown": "Select media..."
+    },
+    "numberControl": {
+      "header": {
+        "prefix": "Automatically update the value",
+        "after": "AFTER",
+        "before": "BEFORE",
+        "postfix": "running the workflow:"
+      },
+      "linkToGlobal": "Link to",
+      "linkToGlobalSeed": "Global Value",
+      "linkToGlobalDesc": "Unique value linked to the Global Value's control setting",
+      "randomize": "Randomize Value",
+      "randomizeDesc": "Shuffles the value randomly after each generation",
+      "increment": "Increment Value",
+      "incrementDesc": "Adds 1 to the value number",
+      "decrement": "Decrement Value",
+      "decrementDesc": "Subtracts 1 from the value number",
+      "editSettings": "Edit control settings"
     }
   },
   "widgetFileUpload": {
@@ -2201,7 +2253,7 @@
     "baseModels": "Base models",
     "browseAssets": "Browse Assets",
     "checkpoints": "Checkpoints",
-    "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor</a>",
+    "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295</a>",
     "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
     "civitaiLinkPlaceholder": "Paste link here",
     "confirmModelDetails": "Confirm Model Details",
@@ -2227,7 +2279,7 @@
     "modelNamePlaceholder": "Enter a name for this model",
     "modelTypeSelectorLabel": "What type of model is this?",
     "modelTypeSelectorPlaceholder": "Select model type",
-    "modelUploaded": "Model imported! 🎉",
+    "modelUploaded": "Model successfully imported.",
     "noAssetsFound": "No assets found",
     "noModelsInFolder": "No {type} available in this folder",
     "notSureLeaveAsIs": "Not sure? Just leave this as is",
@@ -2257,7 +2309,7 @@
     "uploadingModel": "Importing model...",
     "uploadModel": "Import",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
-    "uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment",
+    "uploadModelDescription2": "Only links from <a href=\"https://civitai.com/models\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/models</a> are supported at the moment",
     "uploadModelDescription3": "Max file size: <strong>1 GB</strong>",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "uploadModelFromCivitai": "Import a model from Civitai",
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index f1bcfbbc81..eaf615ccf3 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -3049,6 +3049,72 @@
       }
     }
   },
+  "GenerateTracks": {
+    "display_name": "GenerateTracks",
+    "inputs": {
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "start_x": {
+        "name": "start_x",
+        "tooltip": "Normalized X coordinate (0-1) for start position."
+      },
+      "start_y": {
+        "name": "start_y",
+        "tooltip": "Normalized Y coordinate (0-1) for start position."
+      },
+      "end_x": {
+        "name": "end_x",
+        "tooltip": "Normalized X coordinate (0-1) for end position."
+      },
+      "end_y": {
+        "name": "end_y",
+        "tooltip": "Normalized Y coordinate (0-1) for end position."
+      },
+      "num_frames": {
+        "name": "num_frames"
+      },
+      "num_tracks": {
+        "name": "num_tracks"
+      },
+      "track_spread": {
+        "name": "track_spread",
+        "tooltip": "Normalized distance between tracks. Tracks are spread perpendicular to the motion direction."
+      },
+      "bezier": {
+        "name": "bezier",
+        "tooltip": "Enable Bezier curve path using the mid point as control point."
+      },
+      "mid_x": {
+        "name": "mid_x",
+        "tooltip": "Normalized X control point for Bezier curve. Only used when 'bezier' is enabled."
+      },
+      "mid_y": {
+        "name": "mid_y",
+        "tooltip": "Normalized Y control point for Bezier curve. Only used when 'bezier' is enabled."
+      },
+      "interpolation": {
+        "name": "interpolation",
+        "tooltip": "Controls the timing/speed of movement along the path."
+      },
+      "track_mask": {
+        "name": "track_mask",
+        "tooltip": "Optional mask to indicate visible frames."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "track_length",
+        "tooltip": null
+      }
+    }
+  },
   "GetImageSize": {
     "display_name": "Get Image Size",
     "description": "Returns width and height of the image, and passes it through unchanged.",
@@ -4383,8 +4449,7 @@
     }
   },
   "KlingImage2VideoNode": {
-    "display_name": "Kling Image to Video",
-    "description": "Kling Image to Video Node",
+    "display_name": "Kling Image(First Frame) to Video",
     "inputs": {
       "start_frame": {
         "name": "start_frame",
@@ -4471,6 +4536,35 @@
       }
     }
   },
+  "KlingImageToVideoWithAudio": {
+    "display_name": "Kling Image(First Frame) to Video with Audio",
+    "inputs": {
+      "model_name": {
+        "name": "model_name"
+      },
+      "start_frame": {
+        "name": "start_frame"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Positive text prompt."
+      },
+      "mode": {
+        "name": "mode"
+      },
+      "duration": {
+        "name": "duration"
+      },
+      "generate_audio": {
+        "name": "generate_audio"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "KlingLipSyncAudioToVideoNode": {
     "display_name": "Kling Lip Sync Video with Audio",
     "description": "Kling Lip Sync Audio to Video Node. Syncs mouth movements in a video file to the audio content of an audio file. When using, ensure that the audio contains clearly distinguishable vocals and that the video contains a distinct face. The audio file should not be larger than 5MB. The video file should not be larger than 100MB, should have height/width between 720px and 1920px, and should be between 2s and 10s in length.",
@@ -4593,6 +4687,34 @@
       }
     }
   },
+  "KlingOmniProImageNode": {
+    "display_name": "Kling Omni Image (Pro)",
+    "description": "Create or edit images with the latest model from Kling.",
+    "inputs": {
+      "model_name": {
+        "name": "model_name"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "A text prompt describing the image content. This can include both positive and negative descriptions."
+      },
+      "resolution": {
+        "name": "resolution"
+      },
+      "aspect_ratio": {
+        "name": "aspect_ratio"
+      },
+      "reference_images": {
+        "name": "reference_images",
+        "tooltip": "Up to 10 additional reference images."
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "KlingOmniProImageToVideoNode": {
     "display_name": "Kling Omni Image to Video (Pro)",
     "description": "Use up to 7 reference images to generate a video with the latest Kling model.",
@@ -4794,6 +4916,35 @@
       }
     }
   },
+  "KlingTextToVideoWithAudio": {
+    "display_name": "Kling Text to Video with Audio",
+    "inputs": {
+      "model_name": {
+        "name": "model_name"
+      },
+      "prompt": {
+        "name": "prompt",
+        "tooltip": "Positive text prompt."
+      },
+      "mode": {
+        "name": "mode"
+      },
+      "aspect_ratio": {
+        "name": "aspect_ratio"
+      },
+      "duration": {
+        "name": "duration"
+      },
+      "generate_audio": {
+        "name": "generate_audio"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "KlingVideoExtendNode": {
     "display_name": "Kling Video Extend",
     "description": "Kling Video Extend Node. Extend videos made by other Kling nodes. The video_id is created by using other Kling Nodes.",
@@ -14745,6 +14896,123 @@
       }
     }
   },
+  "WanMoveConcatTrack": {
+    "display_name": "WanMoveConcatTrack",
+    "inputs": {
+      "tracks_1": {
+        "name": "tracks_1"
+      },
+      "tracks_2": {
+        "name": "tracks_2"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
+  "WanMoveTracksFromCoords": {
+    "display_name": "WanMoveTracksFromCoords",
+    "inputs": {
+      "track_coords": {
+        "name": "track_coords"
+      },
+      "track_mask": {
+        "name": "track_mask"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      },
+      "1": {
+        "name": "track_length",
+        "tooltip": null
+      }
+    }
+  },
+  "WanMoveTrackToVideo": {
+    "display_name": "WanMoveTrackToVideo",
+    "inputs": {
+      "positive": {
+        "name": "positive"
+      },
+      "negative": {
+        "name": "negative"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "strength": {
+        "name": "strength",
+        "tooltip": "Strength of the track conditioning."
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "length": {
+        "name": "length"
+      },
+      "batch_size": {
+        "name": "batch_size"
+      },
+      "start_image": {
+        "name": "start_image"
+      },
+      "tracks": {
+        "name": "tracks"
+      },
+      "clip_vision_output": {
+        "name": "clip_vision_output"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": null
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": null
+      },
+      "2": {
+        "name": "latent",
+        "tooltip": null
+      }
+    }
+  },
+  "WanMoveVisualizeTracks": {
+    "display_name": "WanMoveVisualizeTracks",
+    "inputs": {
+      "images": {
+        "name": "images"
+      },
+      "line_resolution": {
+        "name": "line_resolution"
+      },
+      "circle_size": {
+        "name": "circle_size"
+      },
+      "opacity": {
+        "name": "opacity"
+      },
+      "line_width": {
+        "name": "line_width"
+      },
+      "tracks": {
+        "name": "tracks"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanPhantomSubjectToVideo": {
     "display_name": "WanPhantomSubjectToVideo",
     "inputs": {
diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json
index 08dd1aae99..2dd306892c 100644
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -79,6 +79,17 @@
   "Comfy_EnableWorkflowViewRestore": {
     "name": "Save and restore canvas position and zoom level in workflows"
   },
+  "Comfy_Execution_PreviewMethod": {
+    "name": "Live preview method",
+    "tooltip": "Live preview method during image generation. \"default\" uses the server CLI setting.",
+    "options": {
+      "default": "default",
+      "none": "none",
+      "auto": "auto",
+      "latent2rgb": "latent2rgb",
+      "taesd": "taesd"
+    }
+  },
   "Comfy_FloatRoundingPrecision": {
     "name": "Float widget rounding decimal places [0 = auto].",
     "tooltip": "(requires page reload)"
@@ -351,7 +362,7 @@
   },
   "Comfy_UseNewMenu": {
     "name": "Use new menu",
-    "tooltip": "Menu bar position. On mobile devices, the menu is always shown at the top.",
+    "tooltip": "Enable the redesigned top menu bar.",
     "options": {
       "Disabled": "Disabled",
       "Top": "Top"
diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json
index e565185301..61467e7299 100644
--- a/src/locales/es/nodeDefs.json
+++ b/src/locales/es/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Nodo Kling Imagen a Video",
     "display_name": "Kling Imagen a Video",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json
index 3dfe1f8474..1628e9c94d 100644
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -29,12 +29,26 @@
     "name": "Imagen de fondo del lienzo",
     "tooltip": "URL de la imagen para el fondo del lienzo. Puedes hacer clic derecho en una imagen del panel de resultados y seleccionar \"Establecer como fondo\" para usarla."
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "Comportamiento del clic izquierdo del ratón",
+    "options": {
+      "Panning": "Desplazamiento",
+      "Select": "Seleccionar"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "Desplazamiento de la rueda del ratón",
+    "options": {
+      "Panning": "Desplazamiento",
+      "Zoom in/out": "Acercar/alejar"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "Modo de navegación del lienzo",
     "options": {
+      "Custom": "Personalizado",
       "Drag Navigation": "Navegación por arrastre",
-      "Standard (New)": "Estándar (Nuevo)",
-      "Custom": "Personalizado"
+      "Standard (New)": "Estándar (Nuevo)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "pequeña"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "Estilo de la barra lateral",
+    "options": {
+      "connected": "conectada",
+      "floating": "flotante"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "Ancho unificado de la barra lateral"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Validar flujos de trabajo"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "Escalado automático del diseño (nodos Vue)",
+    "tooltip": "Escala automáticamente las posiciones de los nodos al cambiar a renderizado Vue para evitar superposiciones"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Diseño moderno de nodos (nodos Vue)",
+    "tooltip": "Moderno: Renderizado basado en DOM con interactividad mejorada, funciones nativas del navegador y diseño visual actualizado. Clásico: Renderizado tradicional en lienzo."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Modo de control del widget",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "Ordenar IDs de nodos al guardar el flujo de trabajo"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "Requerir confirmación para sobrescribir un plano de subgrafo existente"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "Posición de los flujos de trabajo abiertos",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "Siempre ajustar a la cuadrícula"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "Comportamiento del clic izquierdo del ratón",
-    "options": {
-      "Panning": "Desplazamiento",
-      "Select": "Seleccionar"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "Desplazamiento de la rueda del ratón",
-    "options": {
-      "Panning": "Desplazamiento",
-      "Zoom in/out": "Acercar/alejar"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "Estilo de la barra lateral",
-    "options": {
-      "floating": "flotante",
-      "connected": "conectada"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Escalado automático del diseño (nodos Vue)",
-    "tooltip": "Escala automáticamente las posiciones de los nodos al cambiar a renderizado Vue para evitar superposiciones"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "Diseño moderno de nodos (nodos Vue)",
-    "tooltip": "Moderno: Renderizado basado en DOM con interactividad mejorada, funciones nativas del navegador y diseño visual actualizado. Clásico: Renderizado tradicional en lienzo."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "Requerir confirmación para sobrescribir un plano de subgrafo existente"
   }
 }
diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json
index f7d42539e3..cae3ed34a8 100644
--- a/src/locales/fr/nodeDefs.json
+++ b/src/locales/fr/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Nœud Kling Image to Video",
     "display_name": "Kling Image to Video",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json
index ec17fde2ba..ba9006adab 100644
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -29,12 +29,26 @@
     "name": "Image de fond du canevas",
     "tooltip": "URL de l'image pour le fond du canevas. Vous pouvez faire un clic droit sur une image dans le panneau de sortie et sélectionner « Définir comme fond » pour l'utiliser."
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "Comportement du clic gauche de la souris",
+    "options": {
+      "Panning": "Défilement",
+      "Select": "Sélectionner"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "Défilement de la molette de la souris",
+    "options": {
+      "Panning": "Défilement",
+      "Zoom in/out": "Zoom avant/arrière"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "Mode de navigation sur le canvas",
     "options": {
+      "Custom": "Personnalisé",
       "Drag Navigation": "Navigation par glisser-déposer",
-      "Standard (New)": "Standard (Nouveau)",
-      "Custom": "Personnalisé"
+      "Standard (New)": "Standard (Nouveau)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "petit"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "Style de la barre latérale",
+    "options": {
+      "connected": "Connectée",
+      "floating": "Flottante"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "Largeur unifiée de la barre latérale"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Valider les flux de travail"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "Mise à l'échelle automatique de la mise en page (nœuds Vue)",
+    "tooltip": "Redimensionne automatiquement les positions des nœuds lors du passage au rendu Vue pour éviter les chevauchements"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Design moderne des nœuds (nœuds Vue)",
+    "tooltip": "Moderne : rendu basé sur DOM avec interactivité améliorée, fonctionnalités natives du navigateur et design visuel actualisé. Classique : rendu traditionnel sur toile."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Mode de contrôle du widget",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "Trier les ID de nœuds lors de l'enregistrement du flux de travail"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "Exiger une confirmation pour écraser un plan de sous-graphe existant"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "Position des flux de travail ouverts",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "Toujours aligner sur la grille"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "Comportement du clic gauche de la souris",
-    "options": {
-      "Panning": "Défilement",
-      "Select": "Sélectionner"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "Défilement de la molette de la souris",
-    "options": {
-      "Panning": "Défilement",
-      "Zoom in/out": "Zoom avant/arrière"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "Style de la barre latérale",
-    "options": {
-      "floating": "Flottante",
-      "connected": "Connectée"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Mise à l'échelle automatique de la mise en page (nœuds Vue)",
-    "tooltip": "Redimensionne automatiquement les positions des nœuds lors du passage au rendu Vue pour éviter les chevauchements"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "Design moderne des nœuds (nœuds Vue)",
-    "tooltip": "Moderne : rendu basé sur DOM avec interactivité améliorée, fonctionnalités natives du navigateur et design visuel actualisé. Classique : rendu traditionnel sur toile."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "Exiger une confirmation pour écraser un plan de sous-graphe existant"
   }
 }
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index d8805f45ac..07be6c8349 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Kling 画像から動画ノード",
     "display_name": "Kling 画像から動画へ",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json
index d0c473512d..92cf77971e 100644
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -29,12 +29,26 @@
     "name": "キャンバス背景画像",
     "tooltip": "キャンバスの背景画像のURLです。出力パネルで画像を右クリックし、「背景として設定」を選択すると使用できます。"
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "左クリックの動作",
+    "options": {
+      "Panning": "パン（移動）",
+      "Select": "選択"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "マウスホイールスクロール",
+    "options": {
+      "Panning": "パン（移動）",
+      "Zoom in/out": "ズームイン/アウト"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "キャンバスナビゲーションモード",
     "options": {
+      "Custom": "カスタム",
       "Drag Navigation": "ドラッグナビゲーション",
-      "Standard (New)": "標準（新）",
-      "Custom": "カスタム"
+      "Standard (New)": "標準（新）"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "小"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "サイドバーのスタイル",
+    "options": {
+      "connected": "接続",
+      "floating": "フローティング"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "サイドバーの幅を統一"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "ワークフローを検証"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "自動スケールレイアウト（Vueノード）",
+    "tooltip": "Vueレンダリングに切り替えた際にノードの重なりを防ぐため、自動的にノード位置をスケーリングします"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "モダンノードデザイン（Vueノード）",
+    "tooltip": "モダン：DOMベースのレンダリングで、操作性の向上、ネイティブブラウザ機能、最新のビジュアルデザインを実現。クラシック：従来のキャンバスレンダリング。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "ウィジェット制御モード",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "ワークフローを保存する際にノードIDをソート"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "既存のサブグラフブループリントを上書きする際に確認を要求"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "開いているワークフローの位置",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "常にグリッドにスナップ"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "左クリックの動作",
-    "options": {
-      "Panning": "パン（移動）",
-      "Select": "選択"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "マウスホイールスクロール",
-    "options": {
-      "Panning": "パン（移動）",
-      "Zoom in/out": "ズームイン/アウト"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "サイドバーのスタイル",
-    "options": {
-      "floating": "フローティング",
-      "connected": "接続"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "自動スケールレイアウト（Vueノード）",
-    "tooltip": "Vueレンダリングに切り替えた際にノードの重なりを防ぐため、自動的にノード位置をスケーリングします"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "モダンノードデザイン（Vueノード）",
-    "tooltip": "モダン：DOMベースのレンダリングで、操作性の向上、ネイティブブラウザ機能、最新のビジュアルデザインを実現。クラシック：従来のキャンバスレンダリング。"
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "既存のサブグラフブループリントを上書きする際に確認を要求"
   }
 }
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 2379ed100d..c4dd0627e1 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Kling 이미지에서 비디오로 노드",
     "display_name": "Kling 비디오 생성 (이미지 → 비디오)",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json
index 130f47ffd4..6cbdd17bbd 100644
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -29,12 +29,26 @@
     "name": "캔버스 배경 이미지",
     "tooltip": "캔버스 배경에 사용할 이미지 URL입니다. 출력 패널에서 이미지를 마우스 오른쪽 버튼으로 클릭한 후 \"배경으로 설정\"을 선택해 사용할 수 있습니다."
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "왼쪽 마우스 클릭 동작",
+    "options": {
+      "Panning": "패닝",
+      "Select": "선택"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "마우스 휠 스크롤",
+    "options": {
+      "Panning": "패닝",
+      "Zoom in/out": "확대/축소"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "캔버스 내비게이션 모드",
     "options": {
+      "Custom": "사용자 지정",
       "Drag Navigation": "드래그 내비게이션",
-      "Standard (New)": "표준(신규)",
-      "Custom": "사용자 지정"
+      "Standard (New)": "표준(신규)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "작음"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "사이드바 스타일",
+    "options": {
+      "connected": "연결됨",
+      "floating": "플로팅"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "통합 사이드바 너비"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "워크플로 유효성 검사"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "자동 스케일 레이아웃 (Vue 노드)",
+    "tooltip": "Vue 렌더링으로 전환 시 노드 위치를 자동으로 조정하여 겹침 방지"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "모던 노드 디자인 (Vue 노드)",
+    "tooltip": "모던: 향상된 상호작용, 기본 브라우저 기능, 업데이트된 시각적 디자인을 갖춘 DOM 기반 렌더링. 클래식: 전통적인 캔버스 렌더링."
+  },
   "Comfy_WidgetControlMode": {
     "name": "위젯 제어 모드",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "워크플로 저장 시 노드 ID 정렬"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "기존 서브그래프 블루프린트 덮어쓰기 전 확인 요청"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "열린 워크플로 위치",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "항상 그리드에 스냅"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "왼쪽 마우스 클릭 동작",
-    "options": {
-      "Panning": "패닝",
-      "Select": "선택"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "마우스 휠 스크롤",
-    "options": {
-      "Panning": "패닝",
-      "Zoom in/out": "확대/축소"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "사이드바 스타일",
-    "options": {
-      "floating": "플로팅",
-      "connected": "연결됨"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "자동 스케일 레이아웃 (Vue 노드)",
-    "tooltip": "Vue 렌더링으로 전환 시 노드 위치를 자동으로 조정하여 겹침 방지"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "모던 노드 디자인 (Vue 노드)",
-    "tooltip": "모던: 향상된 상호작용, 기본 브라우저 기능, 업데이트된 시각적 디자인을 갖춘 DOM 기반 렌더링. 클래식: 전통적인 캔버스 렌더링."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "기존 서브그래프 블루프린트 덮어쓰기 전 확인 요청"
   }
 }
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index 2e1c5ffed7..6f722e1c64 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Узел Kling Image to Video",
     "display_name": "Kling Image to Video",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json
index 675dfd7c32..5ce93a9845 100644
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -29,12 +29,26 @@
     "name": "Фоновое изображение холста",
     "tooltip": "URL изображения для фона холста. Вы можете кликнуть правой кнопкой мыши на изображении в панели результатов и выбрать «Установить как фон», чтобы использовать его."
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "Поведение при клике левой кнопкой мыши",
+    "options": {
+      "Panning": "Перемещение",
+      "Select": "Выбрать"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "Прокрутка колесиком мыши",
+    "options": {
+      "Panning": "Перемещение",
+      "Zoom in/out": "Приближение/отдаление"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "Режим навигации по холсту",
     "options": {
+      "Custom": "Пользовательское",
       "Drag Navigation": "Перетаскивание",
-      "Standard (New)": "Стандартный (новый)",
-      "Custom": "Пользовательское"
+      "Standard (New)": "Стандартный (новый)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "маленький"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "Стиль боковой панели",
+    "options": {
+      "connected": "прикреплённая",
+      "floating": "плавающая"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "Унифицированная ширина боковой панели"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "Проверка рабочих процессов"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "Автомасштабирование макета (Vue узлы)",
+    "tooltip": "Автоматически масштабировать позиции узлов при переключении на Vue рендеринг для предотвращения наложения"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Современный дизайн узлов (Vue узлы)",
+    "tooltip": "Современный: DOM-рендеринг с улучшенной интерактивностью, нативными функциями браузера и обновлённым визуальным дизайном. Классический: Традиционный рендеринг на холсте."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Режим управления виджетом",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "Сортировать ID нод при сохранении рабочего процесса"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "Требовать подтверждение для перезаписи существующего шаблона подграфа"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "Положение открытых рабочих процессов",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "Всегда привязываться к сетке"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "Поведение при клике левой кнопкой мыши",
-    "options": {
-      "Panning": "Перемещение",
-      "Select": "Выбрать"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "Прокрутка колесиком мыши",
-    "options": {
-      "Panning": "Перемещение",
-      "Zoom in/out": "Приближение/отдаление"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "Стиль боковой панели",
-    "options": {
-      "floating": "плавающая",
-      "connected": "прикреплённая"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Автомасштабирование макета (Vue узлы)",
-    "tooltip": "Автоматически масштабировать позиции узлов при переключении на Vue рендеринг для предотвращения наложения"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "Современный дизайн узлов (Vue узлы)",
-    "tooltip": "Современный: DOM-рендеринг с улучшенной интерактивностью, нативными функциями браузера и обновлённым визуальным дизайном. Классический: Традиционный рендеринг на холсте."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "Требовать подтверждение для перезаписи существующего шаблона подграфа"
   }
 }
diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json
index f89c0977d2..f7f6cdbc31 100644
--- a/src/locales/tr/nodeDefs.json
+++ b/src/locales/tr/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Kling Görüntüden Videoya Düğümü",
     "display_name": "Kling Görüntüden Videoya",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/tr/settings.json b/src/locales/tr/settings.json
index b76a87ef29..07c191b4cd 100644
--- a/src/locales/tr/settings.json
+++ b/src/locales/tr/settings.json
@@ -29,12 +29,26 @@
     "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_LeftMouseClickBehavior": {
+    "name": "Sol Fare Tıklama Davranışı",
+    "options": {
+      "Panning": "Kaydırma",
+      "Select": "Seç"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "Fare Tekerleği Kaydırma",
+    "options": {
+      "Panning": "Kaydırma",
+      "Zoom in/out": "Yakınlaştır/Uzaklaştır"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "Tuval Gezinme Modu",
     "options": {
+      "Custom": "Özel",
       "Drag Navigation": "Sürükleyerek Gezinme",
-      "Standard (New)": "Standart (Yeni)",
-      "Custom": "Özel"
+      "Standard (New)": "Standart (Yeni)"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "küçük"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "Kenar Çubuğu Stili",
+    "options": {
+      "connected": "Bağlı",
+      "floating": "Yüzer"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "Birleşik kenar çubuğu genişliği"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "İş akışlarını doğrula"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "Otomatik ölçeklendirme düzeni (Vue düğümleri)",
+    "tooltip": "Vue işlemeye geçerken düğüm konumlarını örtüşmeyi önlemek için otomatik olarak ölçeklendir"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "Modern Düğüm Tasarımı (Vue Düğümleri)",
+    "tooltip": "Modern: Gelişmiş etkileşim, yerel tarayıcı özellikleri ve güncellenmiş görsel tasarıma sahip DOM tabanlı işleme. Klasik: Geleneksel tuval işleme."
+  },
   "Comfy_WidgetControlMode": {
     "name": "Widget kontrol modu",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "İş akışını kaydederken düğüm kimliklerini sırala"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "Mevcut bir alt grafik şablonunun üzerine yazmak için onay iste"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "Açılan iş akışları konumu",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "Her zaman ızgaraya yapıştır"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "Sol Fare Tıklama Davranışı",
-    "options": {
-      "Panning": "Kaydırma",
-      "Select": "Seç"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "Fare Tekerleği Kaydırma",
-    "options": {
-      "Panning": "Kaydırma",
-      "Zoom in/out": "Yakınlaştır/Uzaklaştır"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "Kenar Çubuğu Stili",
-    "options": {
-      "floating": "Yüzer",
-      "connected": "Bağlı"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "Otomatik ölçeklendirme düzeni (Vue düğümleri)",
-    "tooltip": "Vue işlemeye geçerken düğüm konumlarını örtüşmeyi önlemek için otomatik olarak ölçeklendir"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "Modern Düğüm Tasarımı (Vue Düğümleri)",
-    "tooltip": "Modern: Gelişmiş etkileşim, yerel tarayıcı özellikleri ve güncellenmiş görsel tasarıma sahip DOM tabanlı işleme. Klasik: Geleneksel tuval işleme."
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "Mevcut bir alt grafik şablonunun üzerine yazmak için onay iste"
   }
 }
diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json
index 405a04c65d..e2fcc8eb87 100644
--- a/src/locales/zh-TW/nodeDefs.json
+++ b/src/locales/zh-TW/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Kling 圖像轉影片節點",
     "display_name": "Kling 圖像轉影片",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json
index 291596e4c6..ca5ac2aa3c 100644
--- a/src/locales/zh-TW/settings.json
+++ b/src/locales/zh-TW/settings.json
@@ -29,12 +29,26 @@
     "name": "畫布背景圖片",
     "tooltip": "畫布背景的圖片網址。你可以在輸出面板中右鍵點擊圖片並選擇「設為背景」來使用，或是使用上傳按鈕上傳你自己的圖片。"
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "左鍵點擊行為",
+    "options": {
+      "Panning": "平移",
+      "Select": "選取"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "滑鼠滾輪捲動",
+    "options": {
+      "Panning": "平移",
+      "Zoom in/out": "縮放"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "畫布導航模式",
     "options": {
+      "Custom": "自訂",
       "Drag Navigation": "拖曳導覽",
-      "Standard (New)": "標準（新）",
-      "Custom": "自訂"
+      "Standard (New)": "標準（新）"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "小"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "側邊欄樣式",
+    "options": {
+      "connected": "連接式",
+      "floating": "浮動式"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "統一側邊欄寬度"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "驗證工作流程"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "自動縮放佈局 (Vue 節點)",
+    "tooltip": "切換至 Vue 渲染時自動縮放節點位置以防止重疊"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "現代節點設計 (Vue 節點)",
+    "tooltip": "現代：基於 DOM 的渲染，具備增強的互動性、原生瀏覽器功能和更新的視覺設計。經典：傳統畫布渲染。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "元件控制模式",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "儲存工作流程時排序節點 ID"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "覆蓋現有子圖藍圖前需要確認"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "已開啟工作流程的位置",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "總是對齊格線"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "左鍵點擊行為",
-    "options": {
-      "Panning": "平移",
-      "Select": "選取"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "滑鼠滾輪捲動",
-    "options": {
-      "Panning": "平移",
-      "Zoom in/out": "縮放"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "側邊欄樣式",
-    "options": {
-      "floating": "浮動式",
-      "connected": "連接式"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "自動縮放佈局 (Vue 節點)",
-    "tooltip": "切換至 Vue 渲染時自動縮放節點位置以防止重疊"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "現代節點設計 (Vue 節點)",
-    "tooltip": "現代：基於 DOM 的渲染，具備增強的互動性、原生瀏覽器功能和更新的視覺設計。經典：傳統畫布渲染。"
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "覆蓋現有子圖藍圖前需要確認"
   }
 }
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index 8606adb1de..b364da9de3 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -3863,7 +3863,6 @@
     }
   },
   "KlingImage2VideoNode": {
-    "description": "Kling 图像转视频节点",
     "display_name": "Kling 图像转视频",
     "inputs": {
       "aspect_ratio": {
diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json
index 5c9b51ee13..c6c1855d09 100644
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -29,12 +29,26 @@
     "name": "画布背景图像",
     "tooltip": "画布背景的图像 URL。你可以在输出面板中右键点击一张图片，并选择“设为背景”来使用它。"
   },
+  "Comfy_Canvas_LeftMouseClickBehavior": {
+    "name": "左键点击行为",
+    "options": {
+      "Panning": "平移",
+      "Select": "选择"
+    }
+  },
+  "Comfy_Canvas_MouseWheelScroll": {
+    "name": "鼠标滚轮滚动",
+    "options": {
+      "Panning": "平移",
+      "Zoom in/out": "放大/缩小"
+    }
+  },
   "Comfy_Canvas_NavigationMode": {
     "name": "画布导航模式",
     "options": {
+      "Custom": "自定义",
       "Drag Navigation": "拖动画布",
-      "Standard (New)": "标准（新）",
-      "Custom": "自定义"
+      "Standard (New)": "标准（新）"
     }
   },
   "Comfy_Canvas_SelectionToolbox": {
@@ -312,6 +326,13 @@
       "small": "小"
     }
   },
+  "Comfy_Sidebar_Style": {
+    "name": "侧边栏样式",
+    "options": {
+      "connected": "连接式",
+      "floating": "浮动式"
+    }
+  },
   "Comfy_Sidebar_UnifiedWidth": {
     "name": "统一侧边栏宽度"
   },
@@ -339,6 +360,14 @@
   "Comfy_Validation_Workflows": {
     "name": "校验工作流"
   },
+  "Comfy_VueNodes_AutoScaleLayout": {
+    "name": "自动缩放布局（Vue节点）",
+    "tooltip": "切换到Vue渲染时自动缩放节点位置以防止重叠"
+  },
+  "Comfy_VueNodes_Enabled": {
+    "name": "现代节点设计（Vue节点）",
+    "tooltip": "现代：基于DOM的渲染，具有增强的交互性、原生浏览器功能和更新的视觉设计。经典：传统的画布渲染。"
+  },
   "Comfy_WidgetControlMode": {
     "name": "组件控制模式",
     "options": {
@@ -376,6 +405,9 @@
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "保存节点ID到工作流"
   },
+  "Comfy_Workflow_WarnBlueprintOverwrite": {
+    "name": "覆盖现有子图蓝图时需要确认"
+  },
   "Comfy_Workflow_WorkflowTabsPosition": {
     "name": "已打开工作流的位置",
     "options": {
@@ -407,37 +439,5 @@
   },
   "pysssss_SnapToGrid": {
     "name": "始终吸附到网格"
-  },
-  "Comfy_Canvas_LeftMouseClickBehavior": {
-    "name": "左键点击行为",
-    "options": {
-      "Panning": "平移",
-      "Select": "选择"
-    }
-  },
-  "Comfy_Canvas_MouseWheelScroll": {
-    "name": "鼠标滚轮滚动",
-    "options": {
-      "Panning": "平移",
-      "Zoom in/out": "放大/缩小"
-    }
-  },
-  "Comfy_Sidebar_Style": {
-    "name": "侧边栏样式",
-    "options": {
-      "floating": "浮动式",
-      "connected": "连接式"
-    }
-  },
-  "Comfy_VueNodes_AutoScaleLayout": {
-    "name": "自动缩放布局（Vue节点）",
-    "tooltip": "切换到Vue渲染时自动缩放节点位置以防止重叠"
-  },
-  "Comfy_VueNodes_Enabled": {
-    "name": "现代节点设计（Vue节点）",
-    "tooltip": "现代：基于DOM的渲染，具有增强的交互性、原生浏览器功能和更新的视觉设计。经典：传统的画布渲染。"
-  },
-  "Comfy_Workflow_WarnBlueprintOverwrite": {
-    "name": "覆盖现有子图蓝图时需要确认"
   }
 }
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 5fe55b3c12..4f5a0562db 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -69,7 +69,7 @@ import { computed, provide, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
+import SearchBox from '@/components/common/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'
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 61ac1976b0..411d2d65b0 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -2,8 +2,7 @@
   <div class="flex gap-3">
     <SearchBox
       :model-value="searchQuery"
-      :placeholder="$t('sideToolbar.searchAssets')"
-      size="lg"
+      :placeholder="$t('sideToolbar.searchAssets') + '...'"
       @update:model-value="handleSearchChange"
     />
     <MediaAssetFilterButton
@@ -37,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import SearchBox from '@/components/input/SearchBox.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'
 
 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'
diff --git a/src/platform/cloud/onboarding/CloudSurveyView.vue b/src/platform/cloud/onboarding/CloudSurveyView.vue
index 3de6c5a8d1..7d8a983ac3 100644
--- a/src/platform/cloud/onboarding/CloudSurveyView.vue
+++ b/src/platform/cloud/onboarding/CloudSurveyView.vue
@@ -225,6 +225,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import {
   getSurveyCompletedStatus,
   submitSurvey
@@ -234,14 +235,20 @@ import { useTelemetry } from '@/platform/telemetry'
 
 const { t } = useI18n()
 const router = useRouter()
+const { flags } = useFeatureFlags()
+const onboardingSurveyEnabled = computed(() => flags.onboardingSurveyEnabled)
 
 // Check if survey is already completed on mount
 onMounted(async () => {
+  if (!onboardingSurveyEnabled.value) {
+    await router.replace({ name: 'cloud-user-check' })
+    return
+  }
   try {
     const surveyCompleted = await getSurveyCompletedStatus()
     if (surveyCompleted) {
-      // User already completed survey, redirect to waitlist
-      await router.replace({ name: 'cloud-waitlist' })
+      // User already completed survey, return to onboarding flow
+      await router.replace({ name: 'cloud-user-check' })
     } else {
       // Track survey opened event
       if (isCloud) {
@@ -342,6 +349,10 @@ const goTo = (step: number, activate: (val: string | number) => void) => {
 // Submit
 const onSubmitSurvey = async () => {
   try {
+    if (!onboardingSurveyEnabled.value) {
+      await router.replace({ name: 'cloud-user-check' })
+      return
+    }
     isSubmitting.value = true
     // prepare payload with consistent structure
     const payload = {
diff --git a/src/platform/cloud/onboarding/UserCheckView.vue b/src/platform/cloud/onboarding/UserCheckView.vue
index 1260327280..30cac201ad 100644
--- a/src/platform/cloud/onboarding/UserCheckView.vue
+++ b/src/platform/cloud/onboarding/UserCheckView.vue
@@ -30,6 +30,7 @@ import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import {
   getSurveyCompletedStatus,
   getUserCloudStatus
@@ -40,6 +41,10 @@ import CloudSurveyViewSkeleton from './skeletons/CloudSurveyViewSkeleton.vue'
 
 const router = useRouter()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
+const { flags } = useFeatureFlags()
+const onboardingSurveyEnabled = computed(
+  () => flags.onboardingSurveyEnabled ?? true
+)
 
 const skeletonType = ref<'login' | 'survey' | 'waitlist' | 'loading'>('loading')
 
@@ -51,6 +56,11 @@ const {
   wrapWithErrorHandlingAsync(async () => {
     await nextTick()
 
+    if (!onboardingSurveyEnabled.value) {
+      await router.replace({ path: '/' })
+      return
+    }
+
     const [cloudUserStats, surveyStatus] = await Promise.all([
       getUserCloudStatus(),
       getSurveyCompletedStatus()
@@ -63,7 +73,7 @@ const {
       return
     }
 
-    // Survey is required for all users
+    // Survey is required for all users when feature flag is enabled
     if (!surveyStatus) {
       skeletonType.value = 'survey'
       await router.replace({ name: 'cloud-survey' })
diff --git a/src/platform/cloud/onboarding/components/CloudSignInForm.vue b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
index a7c85971de..b2874914cd 100644
--- a/src/platform/cloud/onboarding/components/CloudSignInForm.vue
+++ b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
@@ -69,6 +69,7 @@
       type="submit"
       :label="t('auth.login.loginButton')"
       class="mt-4 h-10 font-medium text-white"
+      :disabled="!$form.valid"
     />
   </Form>
 </template>
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
new file mode 100644
index 0000000000..119114ddb6
--- /dev/null
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -0,0 +1,340 @@
+<template>
+  <div class="flex flex-row items-stretch gap-6">
+    <div
+      v-for="tier in tiers"
+      :key="tier.id"
+      class="flex-1 flex flex-col rounded-2xl border border-interface-stroke bg-interface-panel-surface shadow-[0_0_12px_rgba(0,0,0,0.1)]"
+    >
+      <div class="flex flex-col gap-6 p-8">
+        <div class="flex flex-row items-center gap-2">
+          <span
+            class="font-inter text-base font-bold leading-normal text-base-foreground"
+          >
+            {{ tier.name }}
+          </span>
+          <div
+            v-if="tier.isPopular"
+            class="rounded-full bg-background px-1 text-xs font-semibold uppercase tracking-wide text-foreground h-[13px] leading-[13px]"
+          >
+            {{ t('subscription.mostPopular') }}
+          </div>
+        </div>
+        <div class="flex flex-row items-baseline gap-2">
+          <span
+            class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
+          >
+            ${{ tier.price }}
+          </span>
+          <span
+            class="font-inter text-base font-normal leading-normal text-base-foreground"
+          >
+            {{ t('subscription.usdPerMonth') }}
+          </span>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-4 px-8 pb-0 flex-1">
+        <div class="flex flex-row items-center justify-between">
+          <span
+            class="font-inter text-sm font-normal leading-normal text-muted-foreground"
+          >
+            {{ t('subscription.monthlyCreditsLabel') }}
+          </span>
+          <div class="flex flex-row items-center gap-1">
+            <i class="icon-[lucide--component] text-amber-400 text-sm" />
+            <span
+              class="font-inter text-sm font-bold leading-normal text-base-foreground"
+            >
+              {{ tier.credits }}
+            </span>
+          </div>
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.maxDurationLabel') }}
+          </span>
+          <span
+            class="font-inter text-sm font-bold leading-normal text-base-foreground"
+          >
+            {{ tier.maxDuration }}
+          </span>
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.gpuLabel') }}
+          </span>
+          <i class="pi pi-check text-xs text-success-foreground" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.addCreditsLabel') }}
+          </span>
+          <i class="pi pi-check text-xs text-success-foreground" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.customLoRAsLabel') }}
+          </span>
+          <i
+            v-if="tier.customLoRAs"
+            class="pi pi-check text-xs text-success-foreground"
+          />
+          <i v-else class="pi pi-times text-xs text-muted-foreground" />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <div class="flex flex-row items-start justify-between">
+            <div class="flex flex-col gap-2">
+              <span class="text-sm font-normal text-muted-foreground">
+                {{ t('subscription.videoEstimateLabel') }}
+              </span>
+              <div class="flex flex-row items-center gap-2 opacity-50">
+                <i
+                  class="pi pi-question-circle text-xs text-muted-foreground"
+                />
+                <span
+                  class="text-sm font-normal text-muted-foreground cursor-pointer hover:text-base-foreground"
+                  @click="togglePopover"
+                >
+                  {{ t('subscription.videoEstimateHelp') }}
+                </span>
+              </div>
+            </div>
+            <span
+              class="font-inter text-sm font-bold leading-normal text-base-foreground"
+            >
+              {{ tier.videoEstimate }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col p-8">
+        <Button
+          :label="getButtonLabel(tier)"
+          :severity="getButtonSeverity(tier)"
+          :disabled="isLoading || isCurrentPlan(tier.key)"
+          :loading="loadingTier === tier.key"
+          class="h-10 w-full"
+          :pt="{
+            label: {
+              class: getButtonTextClass(tier)
+            }
+          }"
+          @click="() => handleSubscribe(tier.key)"
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Video Estimate Help Popover -->
+  <Popover
+    ref="popover"
+    append-to="body"
+    :auto-z-index="true"
+    :base-z-index="1000"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="{
+      root: {
+        class:
+          'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+      }
+    }"
+  >
+    <div class="flex flex-col gap-2">
+      <p class="text-sm text-base-foreground">
+        {{ t('subscription.videoEstimateExplanation') }}
+      </p>
+      <a
+        href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-sm text-azure-600 hover:text-azure-400 underline"
+      >
+        {{ t('subscription.videoEstimateTryTemplate') }}
+      </a>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getComfyApiBaseUrl } from '@/config/comfyApi'
+import { t } from '@/i18n'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import {
+  FirebaseAuthStoreError,
+  useFirebaseAuthStore
+} from '@/stores/firebaseAuthStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+type TierKey = 'standard' | 'creator' | 'pro'
+
+interface PricingTierConfig {
+  id: SubscriptionTier
+  key: TierKey
+  name: string
+  price: string
+  credits: string
+  maxDuration: string
+  customLoRAs: boolean
+  videoEstimate: string
+  isPopular?: boolean
+}
+
+const TIER_TO_KEY: Record<SubscriptionTier, TierKey> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'standard'
+}
+
+const tiers: PricingTierConfig[] = [
+  {
+    id: 'STANDARD',
+    key: 'standard',
+    name: t('subscription.tiers.standard.name'),
+    price: t('subscription.tiers.standard.price'),
+    credits: t('subscription.credits.standard'),
+    maxDuration: t('subscription.maxDuration.standard'),
+    customLoRAs: false,
+    videoEstimate: t('subscription.tiers.standard.benefits.videoEstimate'),
+    isPopular: false
+  },
+  {
+    id: 'CREATOR',
+    key: 'creator',
+    name: t('subscription.tiers.creator.name'),
+    price: t('subscription.tiers.creator.price'),
+    credits: t('subscription.credits.creator'),
+    maxDuration: t('subscription.maxDuration.creator'),
+    customLoRAs: true,
+    videoEstimate: t('subscription.tiers.creator.benefits.videoEstimate'),
+    isPopular: true
+  },
+  {
+    id: 'PRO',
+    key: 'pro',
+    name: t('subscription.tiers.pro.name'),
+    price: t('subscription.tiers.pro.price'),
+    credits: t('subscription.credits.pro'),
+    maxDuration: t('subscription.maxDuration.pro'),
+    customLoRAs: true,
+    videoEstimate: t('subscription.tiers.pro.benefits.videoEstimate'),
+    isPopular: false
+  }
+]
+
+const { getAuthHeader } = useFirebaseAuthStore()
+const { isActiveSubscription, subscriptionTier } = useSubscription()
+const { accessBillingPortal, reportError } = useFirebaseAuthActions()
+const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+const isLoading = ref(false)
+const loadingTier = ref<TierKey | null>(null)
+const popover = ref()
+
+const currentTierKey = computed<TierKey | null>(() =>
+  subscriptionTier.value ? TIER_TO_KEY[subscriptionTier.value] : null
+)
+
+const isCurrentPlan = (tierKey: TierKey): boolean =>
+  currentTierKey.value === tierKey
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+
+const getButtonLabel = (tier: PricingTierConfig): string => {
+  if (isCurrentPlan(tier.key)) return t('subscription.currentPlan')
+  if (!isActiveSubscription.value)
+    return t('subscription.subscribeTo', { plan: tier.name })
+  return t('subscription.changeTo', { plan: tier.name })
+}
+
+const getButtonSeverity = (tier: PricingTierConfig): 'primary' | 'secondary' =>
+  isCurrentPlan(tier.key)
+    ? 'secondary'
+    : tier.key === 'creator'
+      ? 'primary'
+      : 'secondary'
+
+const getButtonTextClass = (tier: PricingTierConfig): string =>
+  tier.key === 'creator'
+    ? 'font-inter text-sm font-bold leading-normal text-white'
+    : 'font-inter text-sm font-bold leading-normal text-primary-foreground'
+
+const initiateCheckout = async (tierKey: TierKey) => {
+  const authHeader = await getAuthHeader()
+  if (!authHeader) {
+    throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
+  }
+
+  const response = await fetch(
+    `${getComfyApiBaseUrl()}/customers/cloud-subscription-checkout/${tierKey}`,
+    {
+      method: 'POST',
+      headers: { ...authHeader, 'Content-Type': 'application/json' }
+    }
+  )
+
+  if (!response.ok) {
+    let errorMessage = 'Failed to initiate checkout'
+    try {
+      const errorData = await response.json()
+      errorMessage = errorData.message || errorMessage
+    } catch {
+      // If JSON parsing fails, try to get text response or use HTTP status
+      try {
+        const errorText = await response.text()
+        errorMessage =
+          errorText || `HTTP ${response.status} ${response.statusText}`
+      } catch {
+        errorMessage = `HTTP ${response.status} ${response.statusText}`
+      }
+    }
+
+    throw new FirebaseAuthStoreError(
+      t('toastMessages.failedToInitiateSubscription', {
+        error: errorMessage
+      })
+    )
+  }
+
+  return await response.json()
+}
+
+const handleSubscribe = wrapWithErrorHandlingAsync(async (tierKey: TierKey) => {
+  if (!isCloud || isLoading.value || isCurrentPlan(tierKey)) return
+
+  isLoading.value = true
+  loadingTier.value = tierKey
+
+  try {
+    if (isActiveSubscription.value) {
+      await accessBillingPortal()
+    } else {
+      const response = await initiateCheckout(tierKey)
+      if (response.checkout_url) {
+        window.open(response.checkout_url, '_blank')
+      }
+    }
+  } finally {
+    isLoading.value = false
+    loadingTier.value = null
+  }
+}, reportError)
+</script>
diff --git a/src/platform/cloud/subscription/components/StripePricingTable.vue b/src/platform/cloud/subscription/components/StripePricingTable.vue
deleted file mode 100644
index 8efa7c21ed..0000000000
--- a/src/platform/cloud/subscription/components/StripePricingTable.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div
-    ref="tableContainer"
-    class="relative w-full rounded-[20px] border border-interface-stroke bg-interface-panel-background"
-  >
-    <div
-      v-if="!hasValidConfig"
-      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
-      data-testid="stripe-table-missing-config"
-    >
-      {{ $t('subscription.pricingTable.missingConfig') }}
-    </div>
-    <div
-      v-else-if="loadError"
-      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
-      data-testid="stripe-table-error"
-    >
-      {{ $t('subscription.pricingTable.loadError') }}
-    </div>
-    <div
-      v-else-if="!isReady"
-      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
-      data-testid="stripe-table-loading"
-    >
-      {{ $t('subscription.pricingTable.loading') }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-
-import { getStripePricingTableConfig } from '@/config/stripePricingTableConfig'
-import { useStripePricingTableLoader } from '@/platform/cloud/subscription/composables/useStripePricingTableLoader'
-
-const props = defineProps<{
-  pricingTableId?: string
-  publishableKey?: string
-}>()
-
-const tableContainer = ref<HTMLDivElement | null>(null)
-const isReady = ref(false)
-const loadError = ref<string | null>(null)
-const lastRenderedKey = ref('')
-const stripeElement = ref<HTMLElement | null>(null)
-
-const resolvedConfig = computed(() => {
-  const fallback = getStripePricingTableConfig()
-
-  return {
-    publishableKey: props.publishableKey || fallback.publishableKey,
-    pricingTableId: props.pricingTableId || fallback.pricingTableId
-  }
-})
-
-const hasValidConfig = computed(() => {
-  const { publishableKey, pricingTableId } = resolvedConfig.value
-  return Boolean(publishableKey && pricingTableId)
-})
-
-const { loadScript } = useStripePricingTableLoader()
-
-const renderPricingTable = async () => {
-  if (!tableContainer.value) return
-
-  const { publishableKey, pricingTableId } = resolvedConfig.value
-  if (!publishableKey || !pricingTableId) {
-    return
-  }
-
-  const renderKey = `${publishableKey}:${pricingTableId}`
-  if (renderKey === lastRenderedKey.value && isReady.value) {
-    return
-  }
-
-  try {
-    await loadScript()
-    loadError.value = null
-    if (!tableContainer.value) {
-      return
-    }
-    if (stripeElement.value) {
-      stripeElement.value.remove()
-      stripeElement.value = null
-    }
-    const stripeTable = document.createElement('stripe-pricing-table')
-    stripeTable.setAttribute('publishable-key', publishableKey)
-    stripeTable.setAttribute('pricing-table-id', pricingTableId)
-    stripeTable.style.display = 'block'
-    stripeTable.style.width = '100%'
-    stripeTable.style.minHeight = '420px'
-    tableContainer.value.appendChild(stripeTable)
-    stripeElement.value = stripeTable
-    lastRenderedKey.value = renderKey
-    isReady.value = true
-  } catch (error) {
-    console.error('[StripePricingTable] Failed to load pricing table', error)
-    loadError.value = (error as Error).message
-    isReady.value = false
-  }
-}
-
-watch(
-  [resolvedConfig, () => tableContainer.value],
-  () => {
-    if (!hasValidConfig.value) return
-    if (!tableContainer.value) return
-    void renderPricingTable()
-  },
-  { immediate: true }
-)
-
-onBeforeUnmount(() => {
-  stripeElement.value?.remove()
-  stripeElement.value = null
-})
-</script>
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index 3a342e99c2..49fbb103c7 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -18,10 +18,10 @@
       <div class="grow overflow-auto">
         <div class="rounded-2xl border border-interface-stroke p-6">
           <div>
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between gap-2">
               <div class="flex flex-col gap-2">
                 <div class="text-sm font-bold text-text-primary">
-                  {{ tierName }}
+                  {{ subscriptionTierName }}
                 </div>
                 <div class="flex items-baseline gap-1 font-inter font-semibold">
                   <span class="text-2xl">${{ tierPrice }}</span>
@@ -49,21 +49,41 @@
                   </template>
                 </div>
               </div>
+
               <Button
                 v-if="isActiveSubscription"
                 :label="$t('subscription.manageSubscription')"
                 severity="secondary"
-                class="text-xs bg-interface-menu-component-surface-selected"
+                class="ml-auto bg-interface-menu-component-surface-selected"
                 :pt="{
                   root: {
                     style: 'border-radius: 8px; padding: 8px 16px;'
                   },
                   label: {
-                    class: 'text-text-primary'
+                    class: 'text-sm font-normal text-text-primary'
+                  }
+                }"
+                @click="
+                  async () => {
+                    await authActions.accessBillingPortal()
+                  }
+                "
+              />
+              <Button
+                v-if="isActiveSubscription"
+                :label="$t('subscription.upgradePlan')"
+                severity="primary"
+                :pt="{
+                  root: {
+                    style: 'border-radius: 8px; padding: 8px 16px;'
+                  },
+                  label: {
+                    class: 'text-sm font-normal text-text-primary'
                   }
                 }"
                 @click="showSubscriptionDialog"
               />
+
               <SubscribeButton
                 v-else
                 :label="$t('subscription.subscribeNow')"
@@ -138,19 +158,6 @@
                         >
                           {{ $t('subscription.creditsRemainingThisMonth') }}
                         </div>
-                        <Button
-                          v-tooltip="refreshTooltip"
-                          icon="pi pi-question-circle"
-                          text
-                          rounded
-                          size="small"
-                          class="h-4 w-4 shrink-0"
-                          :pt="{
-                            icon: {
-                              class: 'text-text-secondary text-xs'
-                            }
-                          }"
-                        />
                       </div>
                     </div>
                     <div class="flex items-center gap-4">
@@ -208,7 +215,7 @@
                           style: 'border-radius: 8px;'
                         },
                         label: {
-                          class: 'text-sm'
+                          class: 'text-sm font-normal text-text-primary'
                         }
                       }"
                       @click="handleAddApiCredits"
@@ -347,15 +354,32 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import type { components } from '@/types/comfyRegistryTypes'
 import { cn } from '@/utils/tailwindUtil'
 
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+
+/** Maps API subscription tier values to i18n translation keys */
+const TIER_TO_I18N_KEY = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'founder'
+} as const satisfies Record<SubscriptionTier, string>
+
+type TierKey = (typeof TIER_TO_I18N_KEY)[SubscriptionTier]
+
+const DEFAULT_TIER_KEY: TierKey = 'standard'
+
 const { buildDocsUrl } = useExternalLink()
+const authActions = useFirebaseAuthActions()
 const { t } = useI18n()
 
 const {
@@ -363,14 +387,19 @@ const {
   isCancelled,
   formattedRenewalDate,
   formattedEndDate,
+  subscriptionTier,
+  subscriptionTierName,
   handleInvoiceHistory
 } = useSubscription()
 
 const { show: showSubscriptionDialog } = useSubscriptionDialog()
 
-// Tier data - hardcoded for Creator tier as requested
-const tierName = computed(() => t('subscription.tiers.creator.name'))
-const tierPrice = computed(() => t('subscription.tiers.creator.price'))
+const tierKey = computed(() => {
+  const tier = subscriptionTier.value
+  if (!tier) return DEFAULT_TIER_KEY
+  return TIER_TO_I18N_KEY[tier] ?? DEFAULT_TIER_KEY
+})
+const tierPrice = computed(() => t(`subscription.tiers.${tierKey.value}.price`))
 
 // Tier benefits for v-for loop
 type BenefitType = 'metric' | 'feature'
@@ -382,38 +411,49 @@ interface Benefit {
   value?: string
 }
 
-const tierBenefits = computed(() => {
-  const baseBenefits: Benefit[] = [
-    {
-      key: 'monthlyCredits',
-      type: 'metric',
-      value: t('subscription.tiers.creator.benefits.monthlyCredits'),
-      label: t('subscription.tiers.creator.benefits.monthlyCreditsLabel')
-    },
-    {
-      key: 'maxDuration',
-      type: 'metric',
-      value: t('subscription.tiers.creator.benefits.maxDuration'),
-      label: t('subscription.tiers.creator.benefits.maxDurationLabel')
-    },
-    {
-      key: 'gpu',
-      type: 'feature',
-      label: t('subscription.tiers.creator.benefits.gpuLabel')
-    },
-    {
-      key: 'addCredits',
-      type: 'feature',
-      label: t('subscription.tiers.creator.benefits.addCreditsLabel')
-    },
-    {
-      key: 'customLoRAs',
-      type: 'feature',
-      label: t('subscription.tiers.creator.benefits.customLoRAsLabel')
-    }
+const BENEFITS_BY_TIER: Record<
+  TierKey,
+  ReadonlyArray<Omit<Benefit, 'label' | 'value'>>
+> = {
+  standard: [
+    { key: 'monthlyCredits', type: 'metric' },
+    { key: 'maxDuration', type: 'metric' },
+    { key: 'gpu', type: 'feature' },
+    { key: 'addCredits', type: 'feature' }
+  ],
+  creator: [
+    { key: 'monthlyCredits', type: 'metric' },
+    { key: 'maxDuration', type: 'metric' },
+    { key: 'gpu', type: 'feature' },
+    { key: 'addCredits', type: 'feature' },
+    { key: 'customLoRAs', type: 'feature' }
+  ],
+  pro: [
+    { key: 'monthlyCredits', type: 'metric' },
+    { key: 'maxDuration', type: 'metric' },
+    { key: 'gpu', type: 'feature' },
+    { key: 'addCredits', type: 'feature' },
+    { key: 'customLoRAs', type: 'feature' }
+  ],
+  founder: [
+    { key: 'monthlyCredits', type: 'metric' },
+    { key: 'maxDuration', type: 'metric' },
+    { key: 'gpu', type: 'feature' },
+    { key: 'addCredits', type: 'feature' }
   ]
+}
 
-  return baseBenefits
+const tierBenefits = computed(() => {
+  const key = tierKey.value
+  const benefitConfig = BENEFITS_BY_TIER[key]
+
+  return benefitConfig.map((config) => ({
+    ...config,
+    ...(config.type === 'metric' && {
+      value: t(`subscription.tiers.${key}.benefits.${config.key}`)
+    }),
+    label: t(`subscription.tiers.${key}.benefits.${config.key}Label`)
+  }))
 })
 
 const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
@@ -421,7 +461,6 @@ const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
 
 const {
   isLoadingSupport,
-  refreshTooltip,
   handleAddApiCredits,
   handleMessageSupport,
   handleRefresh,
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index 2dd4ae548c..095ebec4e6 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="showStripePricingTable"
+    v-if="showCustomPricingTable"
     class="flex flex-col gap-6 rounded-[24px] border border-interface-stroke bg-[var(--p-dialog-background)] p-4 shadow-[0_25px_80px_rgba(5,6,12,0.45)] md:p-6"
   >
     <div
@@ -32,7 +32,7 @@
       />
     </div>
 
-    <StripePricingTable class="flex-1" />
+    <PricingTable class="flex-1" />
 
     <!-- Contact and Enterprise Links -->
     <div class="flex flex-col items-center">
@@ -46,7 +46,7 @@
           severity="secondary"
           icon="pi pi-comments"
           icon-pos="right"
-          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleContactUs"
         />
         <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
@@ -56,7 +56,7 @@
           severity="secondary"
           icon="pi pi-external-link"
           icon-pos="right"
-          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-base-foreground"
           @click="handleViewEnterprise"
         />
       </div>
@@ -138,8 +138,8 @@ import Button from 'primevue/button'
 import { computed, onBeforeUnmount, watch } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
+import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
+import PricingTable from '@/platform/cloud/subscription/components/PricingTable.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
@@ -155,27 +155,30 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { formattedMonthlyPrice, fetchStatus, isActiveSubscription } =
-  useSubscription()
-const { featureFlag } = useFeatureFlags()
-const subscriptionTiersEnabled = featureFlag(
-  'subscription_tiers_enabled',
-  false
-)
+const { fetchStatus, isActiveSubscription } = useSubscription()
+
+// Legacy price for non-tier flow with locale-aware formatting
+const formattedMonthlyPrice = new Intl.NumberFormat(
+  navigator.language || 'en-US',
+  {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }
+).format(MONTHLY_SUBSCRIPTION_PRICE)
 const commandStore = useCommandStore()
 const telemetry = useTelemetry()
 
-const showStripePricingTable = computed(
-  () =>
-    subscriptionTiersEnabled.value &&
-    isCloud &&
-    window.__CONFIG__?.subscription_required
+// Always show custom pricing table for cloud subscriptions
+const showCustomPricingTable = computed(
+  () => isCloud && window.__CONFIG__?.subscription_required
 )
 
 const POLL_INTERVAL_MS = 3000
-const MAX_POLL_DURATION_MS = 5 * 60 * 1000
+const MAX_POLL_ATTEMPTS = 3
 let pollInterval: number | null = null
-let pollStartTime = 0
+let pollAttempts = 0
 
 const stopPolling = () => {
   if (pollInterval) {
@@ -186,35 +189,44 @@ const stopPolling = () => {
 
 const startPolling = () => {
   stopPolling()
-  pollStartTime = Date.now()
+  pollAttempts = 0
 
   const poll = async () => {
     try {
       await fetchStatus()
+      pollAttempts++
+
+      if (pollAttempts >= MAX_POLL_ATTEMPTS) {
+        stopPolling()
+      }
     } catch (error) {
       console.error(
         '[SubscriptionDialog] Failed to poll subscription status',
         error
       )
+      stopPolling()
     }
   }
 
   void poll()
   pollInterval = window.setInterval(() => {
-    if (Date.now() - pollStartTime > MAX_POLL_DURATION_MS) {
-      stopPolling()
-      return
-    }
     void poll()
   }, POLL_INTERVAL_MS)
 }
 
+const handleWindowFocus = () => {
+  if (showCustomPricingTable.value) {
+    startPolling()
+  }
+}
+
 watch(
-  showStripePricingTable,
+  showCustomPricingTable,
   (enabled) => {
     if (enabled) {
-      startPolling()
+      window.addEventListener('focus', handleWindowFocus)
     } else {
+      window.removeEventListener('focus', handleWindowFocus)
       stopPolling()
     }
   },
@@ -224,7 +236,7 @@ watch(
 watch(
   () => isActiveSubscription.value,
   (isActive) => {
-    if (isActive && showStripePricingTable.value) {
+    if (isActive && showCustomPricingTable.value) {
       emit('close', true)
     }
   }
@@ -259,6 +271,7 @@ const handleViewEnterprise = () => {
 
 onBeforeUnmount(() => {
   stopPolling()
+  window.removeEventListener('focus', handleWindowFocus)
 })
 </script>
 
diff --git a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
deleted file mode 100644
index 06776166bc..0000000000
--- a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { createSharedComposable } from '@vueuse/core'
-import { ref } from 'vue'
-
-import { STRIPE_PRICING_TABLE_SCRIPT_SRC } from '@/config/stripePricingTableConfig'
-
-function useStripePricingTableLoaderInternal() {
-  const isLoaded = ref(false)
-  const isLoading = ref(false)
-  const error = ref<Error | null>(null)
-  let pendingPromise: Promise<void> | null = null
-
-  const resolveLoaded = () => {
-    isLoaded.value = true
-    isLoading.value = false
-    pendingPromise = null
-  }
-
-  const resolveError = (err: Error) => {
-    error.value = err
-    isLoading.value = false
-    pendingPromise = null
-  }
-
-  const loadScript = (): Promise<void> => {
-    if (isLoaded.value) {
-      return Promise.resolve()
-    }
-
-    if (pendingPromise) {
-      return pendingPromise
-    }
-
-    const existingScript = document.querySelector<HTMLScriptElement>(
-      `script[src="${STRIPE_PRICING_TABLE_SCRIPT_SRC}"]`
-    )
-
-    if (existingScript) {
-      isLoading.value = true
-
-      pendingPromise = new Promise<void>((resolve, reject) => {
-        existingScript.addEventListener(
-          'load',
-          () => {
-            existingScript.dataset.loaded = 'true'
-            resolveLoaded()
-            resolve()
-          },
-          { once: true }
-        )
-        existingScript.addEventListener(
-          'error',
-          () => {
-            const err = new Error('Stripe pricing table script failed to load')
-            resolveError(err)
-            reject(err)
-          },
-          { once: true }
-        )
-
-        // Check if script already loaded after attaching listeners
-        if (
-          existingScript.dataset.loaded === 'true' ||
-          (existingScript as any).readyState === 'complete' ||
-          (existingScript as any).complete
-        ) {
-          existingScript.dataset.loaded = 'true'
-          resolveLoaded()
-          resolve()
-        }
-      })
-
-      return pendingPromise
-    }
-
-    isLoading.value = true
-    pendingPromise = new Promise<void>((resolve, reject) => {
-      const script = document.createElement('script')
-      script.src = STRIPE_PRICING_TABLE_SCRIPT_SRC
-      script.async = true
-      script.dataset.loaded = 'false'
-
-      script.addEventListener(
-        'load',
-        () => {
-          script.dataset.loaded = 'true'
-          resolveLoaded()
-          resolve()
-        },
-        { once: true }
-      )
-
-      script.addEventListener(
-        'error',
-        () => {
-          const err = new Error('Stripe pricing table script failed to load')
-          resolveError(err)
-          reject(err)
-        },
-        { once: true }
-      )
-
-      document.head.appendChild(script)
-    })
-
-    return pendingPromise
-  }
-
-  return {
-    loadScript,
-    isLoaded,
-    isLoading,
-    error
-  }
-}
-
-export const useStripePricingTableLoader = createSharedComposable(
-  useStripePricingTableLoaderInternal
-)
diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
index 9762647d83..2647d35ff0 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -5,7 +5,6 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getComfyApiBaseUrl, getComfyPlatformBaseUrl } from '@/config/comfyApi'
-import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
@@ -14,17 +13,24 @@ import {
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
 import { useDialogService } from '@/services/dialogService'
+import type { components, operations } from '@/types/comfyRegistryTypes'
 import { useSubscriptionCancellationWatcher } from './useSubscriptionCancellationWatcher'
 
 type CloudSubscriptionCheckoutResponse = {
   checkout_url: string
 }
 
-export type CloudSubscriptionStatusResponse = {
-  is_active: boolean
-  subscription_id: string
-  renewal_date: string | null
-  end_date?: string | null
+export type CloudSubscriptionStatusResponse = NonNullable<
+  operations['GetCloudSubscriptionStatus']['responses']['200']['content']['application/json']
+>
+
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+
+const TIER_TO_I18N_KEY: Record<SubscriptionTier, string> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'founder'
 }
 
 function useSubscriptionInternal() {
@@ -53,7 +59,7 @@ function useSubscriptionInternal() {
 
     const renewalDate = new Date(subscriptionStatus.value.renewal_date)
 
-    return renewalDate.toLocaleDateString(undefined, {
+    return renewalDate.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
       year: 'numeric'
@@ -65,17 +71,24 @@ function useSubscriptionInternal() {
 
     const endDate = new Date(subscriptionStatus.value.end_date)
 
-    return endDate.toLocaleDateString(undefined, {
+    return endDate.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
       year: 'numeric'
     })
   })
 
-  const formattedMonthlyPrice = computed(
-    () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(0)}`
+  const subscriptionTier = computed(
+    () => subscriptionStatus.value?.subscription_tier ?? null
   )
 
+  const subscriptionTierName = computed(() => {
+    const tier = subscriptionTier.value
+    if (!tier) return ''
+    const key = TIER_TO_I18N_KEY[tier] ?? 'standard'
+    return t(`subscription.tiers.${key}.name`)
+  })
+
   const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
 
   const fetchStatus = wrapWithErrorHandlingAsync(
@@ -227,7 +240,9 @@ function useSubscriptionInternal() {
     isCancelled,
     formattedRenewalDate,
     formattedEndDate,
-    formattedMonthlyPrice,
+    subscriptionTier,
+    subscriptionTierName,
+    subscriptionStatus,
 
     // Actions
     subscribe,
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionActions.ts b/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
index 594981ec64..7c09942f0d 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionActions.ts
@@ -1,5 +1,4 @@
-import { computed, onMounted, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { onMounted, ref } from 'vue'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
@@ -8,30 +7,18 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 
-const MONTHLY_CREDIT_BONUS_USD = 10
-
 /**
  * Composable for handling subscription panel actions and loading states
  */
 export function useSubscriptionActions() {
-  const { t } = useI18n()
   const dialogService = useDialogService()
   const authActions = useFirebaseAuthActions()
   const commandStore = useCommandStore()
   const telemetry = useTelemetry()
-  const { fetchStatus, formattedRenewalDate } = useSubscription()
+  const { fetchStatus } = useSubscription()
 
   const isLoadingSupport = ref(false)
 
-  const refreshTooltip = computed(() => {
-    const date =
-      formattedRenewalDate.value || t('subscription.nextBillingCycle')
-    return t('subscription.refreshesOn', {
-      monthlyCreditBonusUsd: MONTHLY_CREDIT_BONUS_USD,
-      date
-    })
-  })
-
   onMounted(() => {
     void handleRefresh()
   })
@@ -72,7 +59,6 @@ export function useSubscriptionActions() {
 
   return {
     isLoadingSupport,
-    refreshTooltip,
     handleAddApiCredits,
     handleMessageSupport,
     handleRefresh,
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
index d79fdc4d84..ee78936ba9 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -1,7 +1,4 @@
-import { computed, defineAsyncComponent } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud } from '@/platform/distribution/types'
+import { defineAsyncComponent } from 'vue'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -10,14 +7,6 @@ const DIALOG_KEY = 'subscription-required'
 export const useSubscriptionDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
-  const { flags } = useFeatureFlags()
-
-  const showStripeDialog = computed(
-    () =>
-      flags.subscriptionTiersEnabled &&
-      isCloud &&
-      window.__CONFIG__?.subscription_required
-  )
 
   function hide() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
@@ -34,19 +23,15 @@ export const useSubscriptionDialog = () => {
         onClose: hide
       },
       dialogComponentProps: {
-        style: showStripeDialog.value
-          ? 'width: min(1200px, 95vw); max-height: 90vh;'
-          : 'width: 700px;',
-        pt: showStripeDialog.value
-          ? {
-              root: {
-                class: '!rounded-[32px] overflow-visible'
-              },
-              content: {
-                class: '!p-0 bg-transparent'
-              }
-            }
-          : undefined
+        style: 'width: min(1200px, 95vw); max-height: 90vh;',
+        pt: {
+          root: {
+            class: '!rounded-[32px] overflow-visible'
+          },
+          content: {
+            class: '!p-0 bg-transparent'
+          }
+        }
       }
     })
   }
diff --git a/src/platform/remote/comfyui/jobs/fetchJobs.ts b/src/platform/remote/comfyui/jobs/fetchJobs.ts
new file mode 100644
index 0000000000..136f683d65
--- /dev/null
+++ b/src/platform/remote/comfyui/jobs/fetchJobs.ts
@@ -0,0 +1,146 @@
+/**
+ * @fileoverview Jobs API Fetchers
+ * @module platform/remote/comfyui/jobs/fetchJobs
+ *
+ * Unified jobs API fetcher for history, queue, and job details.
+ * All distributions use the /jobs endpoint.
+ */
+
+import type { PromptId } from '@/schemas/apiSchema'
+
+import type {
+  JobDetail,
+  JobListItem,
+  JobStatus,
+  RawJobListItem
+} from './jobTypes'
+import { zJobDetail, zJobsListResponse, zWorkflowContainer } from './jobTypes'
+
+interface FetchJobsRawResult {
+  jobs: RawJobListItem[]
+  total: number
+  offset: number
+}
+
+/**
+ * Fetches raw jobs from /jobs endpoint
+ * @internal
+ */
+async function fetchJobsRaw(
+  fetchApi: (url: string) => Promise<Response>,
+  statuses: JobStatus[],
+  maxItems: number = 200,
+  offset: number = 0
+): Promise<FetchJobsRawResult> {
+  const statusParam = statuses.join(',')
+  const url = `/jobs?status=${statusParam}&limit=${maxItems}&offset=${offset}`
+  try {
+    const res = await fetchApi(url)
+    if (!res.ok) {
+      console.error(`[Jobs API] Failed to fetch jobs: ${res.status}`)
+      return { jobs: [], total: 0, offset: 0 }
+    }
+    const data = zJobsListResponse.parse(await res.json())
+    return { jobs: data.jobs, total: data.pagination.total, offset }
+  } catch (error) {
+    console.error('[Jobs API] Error fetching jobs:', error)
+    return { jobs: [], total: 0, offset: 0 }
+  }
+}
+
+// Large offset to ensure running/pending jobs sort above history
+const QUEUE_PRIORITY_BASE = 1_000_000
+
+/**
+ * Assigns synthetic priority to jobs.
+ * Only assigns if job doesn't already have a server-provided priority.
+ */
+function assignPriority(
+  jobs: RawJobListItem[],
+  basePriority: number
+): JobListItem[] {
+  return jobs.map((job, index) => ({
+    ...job,
+    priority: job.priority ?? basePriority - index
+  }))
+}
+
+/**
+ * Fetches history (completed jobs)
+ * Assigns synthetic priority starting from total (lower than queue jobs).
+ */
+export async function fetchHistory(
+  fetchApi: (url: string) => Promise<Response>,
+  maxItems: number = 200,
+  offset: number = 0
+): Promise<JobListItem[]> {
+  const { jobs, total } = await fetchJobsRaw(
+    fetchApi,
+    ['completed'],
+    maxItems,
+    offset
+  )
+  // History gets priority based on total count (lower than queue)
+  return assignPriority(jobs, total - offset)
+}
+
+/**
+ * Fetches queue (in_progress + pending jobs)
+ * Pending jobs get highest priority, then running jobs.
+ */
+export async function fetchQueue(
+  fetchApi: (url: string) => Promise<Response>
+): Promise<{ Running: JobListItem[]; Pending: JobListItem[] }> {
+  const { jobs } = await fetchJobsRaw(
+    fetchApi,
+    ['in_progress', 'pending'],
+    200,
+    0
+  )
+
+  const running = jobs.filter((j) => j.status === 'in_progress')
+  const pending = jobs.filter((j) => j.status === 'pending')
+
+  // Pending gets highest priority, then running
+  // Both are above any history job due to QUEUE_PRIORITY_BASE
+  return {
+    Running: assignPriority(running, QUEUE_PRIORITY_BASE + running.length),
+    Pending: assignPriority(
+      pending,
+      QUEUE_PRIORITY_BASE + running.length + pending.length
+    )
+  }
+}
+
+/**
+ * Fetches full job details from /jobs/{job_id}
+ */
+export async function fetchJobDetail(
+  fetchApi: (url: string) => Promise<Response>,
+  promptId: PromptId
+): Promise<JobDetail | undefined> {
+  try {
+    const res = await fetchApi(`/jobs/${encodeURIComponent(promptId)}`)
+
+    if (!res.ok) {
+      console.warn(`Job not found for prompt ${promptId}`)
+      return undefined
+    }
+
+    return zJobDetail.parse(await res.json())
+  } catch (error) {
+    console.error(`Failed to fetch job detail for prompt ${promptId}:`, error)
+    return undefined
+  }
+}
+
+/**
+ * Extracts workflow from job detail response.
+ * The workflow is nested at: workflow.extra_data.extra_pnginfo.workflow
+ * Full workflow validation happens downstream via validateComfyWorkflow.
+ */
+export function extractWorkflow(job: JobDetail | undefined): unknown {
+  const parsed = zWorkflowContainer.safeParse(job?.workflow)
+  if (!parsed.success) return undefined
+  return parsed.data.extra_data?.extra_pnginfo?.workflow
+}
diff --git a/src/platform/remote/comfyui/jobs/jobTypes.ts b/src/platform/remote/comfyui/jobs/jobTypes.ts
new file mode 100644
index 0000000000..8553483095
--- /dev/null
+++ b/src/platform/remote/comfyui/jobs/jobTypes.ts
@@ -0,0 +1,107 @@
+/**
+ * @fileoverview Jobs API types - Backend job API format
+ * @module platform/remote/comfyui/jobs/jobTypes
+ *
+ * These types represent the jobs API format returned by the backend.
+ * Jobs API provides a memory-optimized alternative to history API.
+ */
+
+import { z } from 'zod'
+
+import { resultItemType, zTaskOutput } from '@/schemas/apiSchema'
+
+const zJobStatus = z.enum([
+  'pending',
+  'in_progress',
+  'completed',
+  'failed',
+  'cancelled'
+])
+
+const zPreviewOutput = z.object({
+  filename: z.string(),
+  subfolder: z.string(),
+  type: resultItemType
+})
+
+/**
+ * Execution error details for error jobs.
+ * Contains the same structure as ExecutionErrorWsMessage from WebSocket.
+ */
+const zExecutionError = z
+  .object({
+    prompt_id: z.string().optional(),
+    timestamp: z.number().optional(),
+    node_id: z.string(),
+    node_type: z.string(),
+    executed: z.array(z.string()).optional(),
+    exception_message: z.string(),
+    exception_type: z.string(),
+    traceback: z.array(z.string()),
+    current_inputs: z.unknown(),
+    current_outputs: z.unknown()
+  })
+  .passthrough()
+
+/**
+ * Raw job from API - uses passthrough to allow extra fields
+ */
+const zRawJobListItem = z
+  .object({
+    id: z.string(),
+    status: zJobStatus,
+    create_time: z.number(),
+    execution_start_time: z.number().nullable().optional(),
+    execution_end_time: z.number().nullable().optional(),
+    preview_output: zPreviewOutput.nullable().optional(),
+    outputs_count: z.number().nullable().optional(),
+    execution_error: zExecutionError.nullable().optional(),
+    workflow_id: z.string().nullable().optional(),
+    priority: z.number().optional()
+  })
+  .passthrough()
+
+/**
+ * Job detail - returned by GET /api/jobs/{job_id} (detail endpoint)
+ * Includes full workflow and outputs for re-execution and downloads
+ */
+export const zJobDetail = zRawJobListItem
+  .extend({
+    workflow: z.unknown().optional(),
+    outputs: zTaskOutput.optional(),
+    update_time: z.number().optional(),
+    execution_status: z.unknown().optional(),
+    execution_meta: z.unknown().optional()
+  })
+  .passthrough()
+
+const zPaginationInfo = z.object({
+  offset: z.number(),
+  limit: z.number(),
+  total: z.number(),
+  has_more: z.boolean()
+})
+
+export const zJobsListResponse = z.object({
+  jobs: z.array(zRawJobListItem),
+  pagination: zPaginationInfo
+})
+
+/** Schema for workflow container structure in job detail responses */
+export const zWorkflowContainer = z.object({
+  extra_data: z
+    .object({
+      extra_pnginfo: z
+        .object({
+          workflow: z.unknown()
+        })
+        .optional()
+    })
+    .optional()
+})
+
+export type JobStatus = z.infer<typeof zJobStatus>
+export type RawJobListItem = z.infer<typeof zRawJobListItem>
+/** Job list item with priority always set (server-provided or synthetic) */
+export type JobListItem = RawJobListItem & { priority: number }
+export type JobDetail = z.infer<typeof zJobDetail>
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 1faf919e4c..4ac7d28318 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -38,6 +38,7 @@ export type RemoteConfig = {
   asset_update_options_enabled?: boolean
   private_models_enabled?: boolean
   subscription_tiers_enabled?: boolean
+  onboarding_survey_enabled?: boolean
   stripe_publishable_key?: string
   stripe_pricing_table_id?: string
 }
diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts
index fb87ea1334..3033cdf591 100644
--- a/src/platform/settings/constants/coreSettings.ts
+++ b/src/platform/settings/constants/coreSettings.ts
@@ -327,13 +327,6 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'hidden',
     defaultValue: {}
   },
-  // Hidden setting used by the queue for how to fit images
-  {
-    id: 'Comfy.Queue.ImageFit',
-    name: 'Queue image fit',
-    type: 'hidden',
-    defaultValue: 'cover'
-  },
   {
     id: 'Comfy.GroupSelectedNodes.Padding',
     category: ['LiteGraph', 'Group', 'Padding'],
@@ -562,8 +555,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Use new menu',
     type: 'combo',
     options: ['Disabled', 'Top'],
-    tooltip:
-      'Menu bar position. On mobile devices, the menu is always shown at the top.',
+    tooltip: 'Enable the redesigned top menu bar.',
     migrateDeprecatedValue: (value: string) => {
       // Floating is now supported by dragging the docked actionbar off.
       if (value === 'Floating') {
@@ -610,10 +602,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: [] as Keybinding[],
     versionAdded: '1.3.7',
     versionModified: '1.7.3',
-    migrateDeprecatedValue: (value: any[]) => {
+    migrateDeprecatedValue: (
+      value: (Keybinding & { targetSelector?: string })[]
+    ) => {
       return value.map((keybinding) => {
-        if (keybinding['targetSelector'] === '#graph-canvas') {
-          keybinding['targetElementId'] = 'graph-canvas-container'
+        if (keybinding.targetSelector === '#graph-canvas') {
+          keybinding.targetElementId = 'graph-canvas-container'
         }
         return keybinding
       })
@@ -788,7 +782,7 @@ export const CORE_SETTINGS: SettingParams[] = [
     tooltip: 'Server config values used for frontend display only',
     type: 'hidden',
     // Mapping from server config id to value.
-    defaultValue: {} as Record<string, any>,
+    defaultValue: {} as Record<string, unknown>,
     versionAdded: '1.4.8'
   },
   {
@@ -813,6 +807,17 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 64,
     versionAdded: '1.4.12'
   },
+  {
+    id: 'Comfy.Execution.PreviewMethod',
+    category: ['Comfy', 'Execution', 'PreviewMethod'],
+    name: 'Live preview method',
+    tooltip:
+      'Live preview method during image generation. "default" uses the server CLI setting.',
+    type: 'combo',
+    options: ['default', 'none', 'auto', 'latent2rgb', 'taesd'],
+    defaultValue: 'default',
+    versionAdded: '1.36.0'
+  },
   {
     id: 'LiteGraph.Canvas.MaximumFps',
     name: 'Maximum FPS',
diff --git a/src/platform/settings/settingStore.ts b/src/platform/settings/settingStore.ts
index 83742de709..2c9e8e0a36 100644
--- a/src/platform/settings/settingStore.ts
+++ b/src/platform/settings/settingStore.ts
@@ -117,9 +117,10 @@ export const useSettingStore = defineStore('setting', () => {
       return versionedDefault
     }
 
-    return typeof param.defaultValue === 'function'
-      ? param.defaultValue()
-      : param.defaultValue
+    const defaultValue = param.defaultValue
+    return typeof defaultValue === 'function'
+      ? (defaultValue as () => Settings[K])()
+      : defaultValue
   }
 
   function getVersionedDefaultValue<
diff --git a/src/platform/settings/types.ts b/src/platform/settings/types.ts
index 9bd48fc8c9..021fac3750 100644
--- a/src/platform/settings/types.ts
+++ b/src/platform/settings/types.ts
@@ -16,21 +16,21 @@ type SettingInputType =
 
 type SettingCustomRenderer = (
   name: string,
-  setter: (v: any) => void,
-  value: any,
-  attrs: any
+  setter: (v: unknown) => void,
+  value: unknown,
+  attrs?: Record<string, unknown>
 ) => HTMLElement
 
 export interface SettingOption {
   text: string
-  value?: any
+  value?: string | number
 }
 
-export interface SettingParams<TValue = unknown> extends FormItem {
+export interface SettingParams<TValue = any> extends FormItem {
   id: keyof Settings
-  defaultValue: any | (() => any)
+  defaultValue: TValue | (() => TValue)
   defaultsByInstallVersion?: Record<`${number}.${number}.${number}`, TValue>
-  onChange?: (newValue: any, oldValue?: any) => void
+  onChange?: (newValue: TValue, oldValue?: TValue) => void
   // By default category is id.split('.'). However, changing id to assign
   // new category has poor backward compatibility. Use this field to overwrite
   // default category from id.
@@ -38,8 +38,7 @@ export interface SettingParams<TValue = unknown> extends FormItem {
   category?: string[]
   experimental?: boolean
   deprecated?: boolean
-  // Deprecated values are mapped to new values.
-  migrateDeprecatedValue?: (value: any) => any
+  migrateDeprecatedValue?: (value: TValue) => TValue
   // Version of the setting when it was added
   versionAdded?: string
   // Version of the setting when it was last modified
@@ -57,7 +56,7 @@ export interface FormItem {
   name: string
   type: SettingInputType | SettingCustomRenderer
   tooltip?: string
-  attrs?: Record<string, any>
+  attrs?: Record<string, unknown>
   options?: Array<string | SettingOption>
 }
 
diff --git a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
index d683288c41..86b3a5553f 100644
--- a/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
+++ b/src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts
@@ -433,7 +433,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     }
 
     const nodeCounts = reduceAllNodes<NodeMetrics>(
-      app.graph,
+      app.rootGraph,
       (metrics, node) => {
         const nodeDef = nodeDefStore.nodeDefsByName[node.type]
         const isCustomNode =
diff --git a/src/platform/telemetry/types.ts b/src/platform/telemetry/types.ts
index 5b5e0f9fc6..a707069a48 100644
--- a/src/platform/telemetry/types.ts
+++ b/src/platform/telemetry/types.ts
@@ -12,6 +12,8 @@
  * 3. Check dist/assets/*.js files contain no tracking code
  */
 
+import type { AuditLog } from '@/services/customerEventsService'
+
 /**
  * Authentication metadata for sign-up tracking
  */
@@ -276,7 +278,7 @@ export interface TelemetryProvider {
 
   // Credit top-up tracking (composition with internal utilities)
   startTopupTracking(): void
-  checkForCompletedTopup(events: any[] | undefined | null): boolean
+  checkForCompletedTopup(events: AuditLog[] | undefined | null): boolean
   clearTopupTracking(): void
 
   // Survey flow events
diff --git a/src/platform/workflow/management/stores/workflowStore.ts b/src/platform/workflow/management/stores/workflowStore.ts
index e821d9c75e..4b8b64f3db 100644
--- a/src/platform/workflow/management/stores/workflowStore.ts
+++ b/src/platform/workflow/management/stores/workflowStore.ts
@@ -633,6 +633,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
   }
 
+  //FIXME: use existing util function
   const executionIdToCurrentId = (id: string) => {
     const subgraph = activeSubgraph.value
 
@@ -647,7 +648,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     const subgraphNodeIds = id.split(':')
 
     // Start from the root graph
-    const { graph } = comfyApp
+    const graph = comfyApp.rootGraph
 
     // If the last subgraph is the active subgraph, return the node ID
     const subgraphs = getSubgraphsFromInstanceIds(graph, subgraphNodeIds)
@@ -714,7 +715,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
 
     try {
       const subgraphs = getSubgraphsFromInstanceIds(
-        comfyApp.graph,
+        comfyApp.rootGraph,
         subgraphNodeIds.map((id) => String(id))
       )
       const immediateSubgraph = subgraphs[subgraphs.length - 1]
@@ -779,7 +780,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
       return null
     }
 
-    const path = findSubgraphPath(comfyApp.graph, subgraphUuid)
+    const path = findSubgraphPath(comfyApp.rootGraph, subgraphUuid)
     if (!path) return null
 
     // If we have a target subgraph, check if the path goes through it
@@ -787,7 +788,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
       targetSubgraph &&
       !path.some((_, idx) => {
         const subgraphs = getSubgraphsFromInstanceIds(
-          comfyApp.graph,
+          comfyApp.rootGraph,
           path.slice(0, idx + 1).map((id) => String(id))
         )
         return subgraphs[subgraphs.length - 1] === targetSubgraph
diff --git a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
index a297b2a79f..09ffd58950 100644
--- a/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
+++ b/src/platform/workflow/persistence/composables/useWorkflowPersistence.ts
@@ -44,7 +44,7 @@ export function useWorkflowPersistence() {
 
   const persistCurrentWorkflow = () => {
     if (!workflowPersistenceEnabled.value) return
-    const workflow = JSON.stringify(comfyApp.graph.serialize())
+    const workflow = JSON.stringify(comfyApp.rootGraph.serialize())
 
     try {
       localStorage.setItem('workflow', workflow)
diff --git a/src/platform/workflow/validation/schemas/workflowSchema.ts b/src/platform/workflow/validation/schemas/workflowSchema.ts
index cc73a3928b..558ef819db 100644
--- a/src/platform/workflow/validation/schemas/workflowSchema.ts
+++ b/src/platform/workflow/validation/schemas/workflowSchema.ts
@@ -466,14 +466,14 @@ type SubgraphDefinition = z.infer<typeof zSubgraphDefinition>
  * Type guard to check if an object is a SubgraphDefinition.
  * This helps TypeScript understand the type when z.lazy() breaks inference.
  */
-export function isSubgraphDefinition(obj: any): obj is SubgraphDefinition {
+export function isSubgraphDefinition(obj: unknown): obj is SubgraphDefinition {
   return (
-    obj &&
+    obj !== null &&
     typeof obj === 'object' &&
     'id' in obj &&
     'name' in obj &&
     'nodes' in obj &&
-    Array.isArray(obj.nodes) &&
+    Array.isArray((obj as SubgraphDefinition).nodes) &&
     'inputNode' in obj &&
     'outputNode' in obj
   )
@@ -514,6 +514,7 @@ export async function validateComfyWorkflow(
  */
 const zNodeInputValue = z.union([
   // For widget values (can be any type)
+
   z.any(),
   // For node links [nodeId, slotIndex]
   z.tuple([zNodeId, zSlotIndex])
diff --git a/src/renderer/core/layout/__tests__/TransformPane.test.ts b/src/renderer/core/layout/__tests__/TransformPane.test.ts
index 4876115b9b..64952a629a 100644
--- a/src/renderer/core/layout/__tests__/TransformPane.test.ts
+++ b/src/renderer/core/layout/__tests__/TransformPane.test.ts
@@ -117,6 +117,73 @@ describe('TransformPane', () => {
     })
   })
 
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      const mockCanvas = createMockCanvas()
+      mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).not.toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      const mockCanvas = createMockCanvas()
+      const wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).not.toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
   describe('interaction state management', () => {
     it('should apply interacting class during interactions', async () => {
       const mockCanvas = createMockCanvas()
@@ -131,7 +198,9 @@ describe('TransformPane', () => {
       const transformPane = wrapper.find('[data-testid="transform-pane"]')
 
       // Initially should not have interacting class
-      expect(transformPane.classes()).not.toContain('will-change-transform')
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
     })
 
     it('should handle pointer events for node delegation', async () => {
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index b39f671401..cf542bb895 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -1,7 +1,12 @@
 <template>
   <div
     data-testid="transform-pane"
-    class="absolute inset-0 w-full h-full pointer-events-none"
+    :class="
+      cn(
+        'absolute inset-0 w-full h-full pointer-events-none',
+        isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
+      )
+    "
     :style="transformStyle"
   >
     <!-- Vue nodes will be rendered here -->
@@ -11,9 +16,12 @@
 
 <script setup lang="ts">
 import { useRafFn } from '@vueuse/core'
+import { computed } from 'vue'
 
 import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+import { cn } from '@/utils/tailwindUtil'
 
 interface TransformPaneProps {
   canvas?: LGraphCanvas
@@ -23,6 +31,11 @@ const props = defineProps<TransformPaneProps>()
 
 const { transformStyle, syncWithCanvas } = useTransformState()
 
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming: isInteracting } = useTransformSettling(canvasElement, {
+  settleDelay: 16
+})
+
 useRafFn(
   () => {
     if (!props.canvas) {
@@ -33,3 +46,9 @@ useRafFn(
   { immediate: true }
 )
 </script>
+
+<style scoped>
+.transform-pane--interacting {
+  will-change: transform;
+}
+</style>
diff --git a/src/renderer/core/layout/transform/useTransformSettling.ts b/src/renderer/core/layout/transform/useTransformSettling.ts
new file mode 100644
index 0000000000..a336eef7ea
--- /dev/null
+++ b/src/renderer/core/layout/transform/useTransformSettling.ts
@@ -0,0 +1,84 @@
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface TransformSettlingOptions {
+  /**
+   * Delay in ms before transform is considered "settled" after last interaction
+   * @default 200
+   */
+  settleDelay?: number
+  /**
+   * Whether to use passive event listeners (better performance but can't preventDefault)
+   * @default true
+   */
+  passive?: boolean
+}
+
+/**
+ * Tracks when canvas zoom transforms are actively changing vs settled.
+ *
+ * This composable helps optimize rendering quality during zoom transformations.
+ * When the user is actively zooming, we can reduce rendering quality
+ * for better performance. Once the transform "settles" (stops changing), we can
+ * trigger high-quality re-rasterization.
+ *
+ * The settling concept prevents constant quality switching during interactions
+ * by waiting for a period of inactivity before considering the transform complete.
+ *
+ * Uses VueUse's useEventListener for automatic cleanup and useDebounceFn for
+ * efficient settle detection.
+ *
+ * @example
+ * ```ts
+ * const { isTransforming } = useTransformSettling(canvasRef, {
+ *   settleDelay: 200
+ * })
+ *
+ * // Use in CSS classes or rendering logic
+ * const cssClass = computed(() => ({
+ *   'low-quality': isTransforming.value,
+ *   'high-quality': !isTransforming.value
+ * }))
+ * ```
+ */
+export function useTransformSettling(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options: TransformSettlingOptions = {}
+) {
+  const { settleDelay = 256, passive = true } = options
+
+  const isTransforming = ref(false)
+
+  /**
+   * Mark transform as active
+   */
+  const markTransformActive = () => {
+    isTransforming.value = true
+  }
+
+  /**
+   * Mark transform as settled (debounced)
+   */
+  const markTransformSettled = useDebounceFn(() => {
+    isTransforming.value = false
+  }, settleDelay)
+
+  /**
+   * Handle zoom transform event - mark active then queue settle
+   */
+  const handleWheel = () => {
+    markTransformActive()
+    void markTransformSettled()
+  }
+
+  // Register wheel event listener with auto-cleanup
+  useEventListener(target, 'wheel', handleWheel, {
+    capture: true,
+    passive
+  })
+
+  return {
+    isTransforming
+  }
+}
diff --git a/src/renderer/core/layout/utils/layoutMath.ts b/src/renderer/core/layout/utils/layoutMath.ts
index adb73aa3d6..ff841b340d 100644
--- a/src/renderer/core/layout/utils/layoutMath.ts
+++ b/src/renderer/core/layout/utils/layoutMath.ts
@@ -41,13 +41,3 @@ export function calculateBounds(nodes: NodeLayout[]): Bounds {
     height: maxY - minY
   }
 }
-
-/**
- * Calculate combined bounds for Vue nodes selection
- * @param nodes Array of NodeLayout objects to calculate bounds for
- * @returns Bounds of the nodes or null if no nodes provided
- */
-export function selectionBounds(nodes: NodeLayout[]): Bounds | null {
-  if (nodes.length === 0) return null
-  return calculateBounds(nodes)
-}
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 6c42a51cc0..635e5564ca 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -90,7 +90,7 @@
     </div>
 
     <!-- Video Dimensions -->
-    <div class="mt-2 text-center text-xs text-white">
+    <div class="mt-2 text-center text-xs text-muted-foreground">
       <span v-if="videoError" class="text-red-400">
         {{ $t('g.errorLoadingVideo') }}
       </span>
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 4429c50322..538a5a5d34 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -1,21 +1,26 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview outline-none group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
-    tabindex="0"
-    role="region"
-    :aria-label="$t('g.imagePreview')"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
+    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
     @keydown="handleKeyDown"
   >
     <!-- Image Wrapper -->
     <div
-      class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface relative"
+      ref="imageWrapperEl"
+      class="h-full w-full overflow-hidden rounded-[5px] bg-muted-background relative"
+      tabindex="0"
+      role="img"
+      :aria-label="$t('g.imagePreview')"
+      :aria-busy="showLoader"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @focusin="handleFocusIn"
+      @focusout="handleFocusOut"
     >
       <!-- Error State -->
       <div
         v-if="imageError"
+        role="alert"
         class="flex size-full flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
       >
         <i
@@ -43,8 +48,11 @@
         @error="handleImageError"
       />
 
-      <!-- Floating Action Buttons (appear on hover) -->
-      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-2.5">
+      <!-- Floating Action Buttons (appear on hover and focus) -->
+      <div
+        v-if="isHovered || isFocused"
+        class="actions absolute top-2 right-2 flex gap-2.5"
+      >
         <!-- Mask/Edit Button -->
         <button
           v-if="!hasMultipleImages"
@@ -96,6 +104,7 @@
         v-for="(_, index) in imageUrls"
         :key="index"
         :class="getNavigationDotClass(index)"
+        :aria-current="index === currentIndex ? 'true' : undefined"
         :aria-label="
           $t('g.viewImageOfTotal', {
             index: index + 1,
@@ -139,11 +148,13 @@ const actionButtonClass =
 // Component state
 const currentIndex = ref(0)
 const isHovered = ref(false)
+const isFocused = ref(false)
 const actualDimensions = ref<string | null>(null)
 const imageError = ref(false)
 const showLoader = ref(false)
 
 const currentImageEl = ref<HTMLImageElement>()
+const imageWrapperEl = ref<HTMLDivElement>()
 
 const { start: startDelayedLoader, stop: stopDelayedLoader } = useTimeoutFn(
   () => {
@@ -247,6 +258,17 @@ const handleMouseLeave = () => {
   isHovered.value = false
 }
 
+const handleFocusIn = () => {
+  isFocused.value = true
+}
+
+const handleFocusOut = (event: FocusEvent) => {
+  // Only unfocus if focus is leaving the wrapper entirely
+  if (!imageWrapperEl.value?.contains(event.relatedTarget as Node)) {
+    isFocused.value = false
+  }
+}
+
 const getNavigationDotClass = (index: number) => {
   return [
     'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer p-0',
diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index a86a789e68..e32be802d4 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -1,11 +1,32 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
-  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
+  <div
+    v-else
+    v-tooltip.left="tooltipConfig"
+    :class="
+      cn(
+        'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
+        'cursor-crosshair',
+        props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
+        {
+          'lg-slot--connected': props.connected,
+          'lg-slot--compatible': props.compatible,
+          'opacity-40': shouldDim
+        },
+        props.socketless && 'pointer-events-none invisible'
+      )
+    "
+  >
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2 w-3', errorClassesDot)"
+      :class="
+        cn(
+          '-translate-x-1/2 w-3',
+          hasSlotError && 'ring-2 ring-error ring-offset-0 rounded-full'
+        )
+      "
       @click="onClick"
       @dblclick="onDoubleClick"
       @pointerdown="onPointerDown"
@@ -15,7 +36,12 @@
     <div class="h-full flex items-center min-w-0">
       <span
         v-if="!dotOnly"
-        :class="cn('truncate text-xs font-normal', labelClasses)"
+        :class="
+          cn(
+            'truncate text-node-component-slot-text',
+            hasSlotError && 'text-error font-medium'
+          )
+        "
       >
         {{ slotData.localized_name || slotData.name || `Input ${index}` }}
       </span>
@@ -65,18 +91,6 @@ const hasSlotError = computed(() => {
   )
 })
 
-const errorClassesDot = computed(() => {
-  return hasSlotError.value
-    ? 'ring-2 ring-error ring-offset-0 rounded-full'
-    : ''
-})
-
-const labelClasses = computed(() =>
-  hasSlotError.value
-    ? 'text-error font-medium'
-    : 'text-node-component-slot-text'
-)
-
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
 
@@ -113,20 +127,6 @@ const shouldDim = computed(() => {
   return !dragState.compatible.get(slotKey.value)
 })
 
-const slotWrapperClass = computed(() =>
-  cn(
-    'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
-    'cursor-crosshair',
-    props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
-    {
-      'lg-slot--connected': props.connected,
-      'lg-slot--compatible': props.compatible,
-      'opacity-40': shouldDim.value
-    },
-    props.socketless && 'pointer-events-none invisible'
-  )
-)
-
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 01d2ee7e5b..52426aa32c 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -5,11 +5,11 @@
   <div
     v-else
     ref="nodeContainerRef"
+    tabindex="0"
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node absolute pb-1',
-
+        'bg-component-node-background lg-node absolute text-sm',
         'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
         shapeClass,
         'touch-none flex flex-col',
@@ -17,7 +17,7 @@
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
-        'outline-transparent outline-2',
+        'outline-transparent outline-2 focus-visible:outline-node-component-outline',
         borderClass,
         outlineClass,
         cursorClass,
@@ -31,7 +31,8 @@
 
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
-          : 'pointer-events-none'
+          : 'pointer-events-none',
+        !isCollapsed && ' pb-1'
       )
     "
     :style="[
@@ -361,16 +362,14 @@ const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState(
 
 const borderClass = computed(() => {
   if (hasAnyError.value) return 'border-node-stroke-error'
-  if (executing.value) return 'border-node-stroke-executing'
-  return 'border-node-stroke'
+  return ''
 })
 
 const outlineClass = computed(() => {
   return cn(
-    isSelected.value &&
-      ((hasAnyError.value && 'outline-error ') ||
-        (executing.value && 'outline-node-executing') ||
-        'outline-node-component-outline')
+    isSelected.value && 'outline-node-component-outline',
+    hasAnyError.value && 'outline-node-stroke-error',
+    executing.value && 'outline-node-stroke-executing'
   )
 })
 
@@ -419,7 +418,7 @@ const handleEnterSubgraph = () => {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'graph_node_open_subgraph_clicked'
   })
-  const graph = app.graph?.rootGraph || app.graph
+  const graph = app.rootGraph
   if (!graph) {
     console.warn('LGraphNode: No graph available for subgraph navigation')
     return
@@ -451,9 +450,7 @@ const nodeOutputLocatorId = computed(() =>
 
 const lgraphNode = computed(() => {
   const locatorId = getLocatorIdFromNodeData(nodeData)
-  const rootGraph = app.graph?.rootGraph || app.graph
-  if (!rootGraph) return null
-  return getNodeByLocatorId(rootGraph, locatorId)
+  return getNodeByLocatorId(app.rootGraph, locatorId)
 })
 
 const nodeMedia = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index 577ca77c9c..a6b8cdd19a 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -1,12 +1,12 @@
 <template>
-  <div v-if="renderError" class="node-error p-4 text-sm text-red-500">
+  <div v-if="renderError" class="node-error p-4 text-red-500">
     {{ st('nodeErrors.header', 'Node Header Error') }}
   </div>
   <div
     v-else
     :class="
       cn(
-        'lg-node-header py-2 pl-2 pr-3 text-sm w-full min-w-0',
+        'lg-node-header text-sm py-2 pl-2 pr-3 w-full min-w-0',
         'text-node-component-header bg-node-component-header-surface',
         headerShapeClass
       )
@@ -34,7 +34,7 @@
                 )
               "
               class="relative top-px text-xs leading-none text-node-component-header-icon"
-            ></i>
+            />
           </IconButton>
         </div>
 
@@ -52,7 +52,7 @@
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="flex min-w-0 flex-1 items-center gap-2 text-sm font-bold"
+          class="flex min-w-0 flex-1 items-center gap-2"
           data-testid="node-title"
         >
           <div class="truncate min-w-0 flex-1">
@@ -92,7 +92,7 @@
             class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
           >
             {{ $t('g.edit') }}
-            <i class="icon-[lucide--scaling] size-5"></i>
+            <i class="icon-[lucide--scaling] size-5" />
           </div>
         </IconButton>
       </div>
@@ -243,7 +243,7 @@ const isSubgraphNode = computed(() => {
   if (!nodeData?.id) return false
 
   // Get the underlying LiteGraph node
-  const graph = app.graph?.rootGraph || app.graph
+  const graph = app.rootGraph
   if (!graph) return false
 
   const locatorId = getLocatorIdFromNodeData(nodeData)
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index f50ae37540..35057df965 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -15,6 +15,7 @@
     :style="{
       'grid-template-rows': gridTemplateRows
     }"
+    @pointerdown.capture="handleBringToFront"
     @pointerdown="handleWidgetPointerEvent"
     @pointermove="handleWidgetPointerEvent"
     @pointerup="handleWidgetPointerEvent"
@@ -31,7 +32,7 @@
         <div
           :class="
             cn(
-              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-center',
+              'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-stretch',
               widget.slotMetadata?.linked && 'opacity-100'
             )
           "
@@ -57,7 +58,7 @@
           :model-value="widget.value"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
           :node-type="nodeType"
-          class="flex-1 col-span-2"
+          class="col-span-2"
           @update:model-value="widget.updateHandler"
         />
       </div>
@@ -78,6 +79,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
+import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
 import WidgetDOM from '@/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue'
 // Import widget components directly
 import WidgetLegacy from '@/renderer/extensions/vueNodes/widgets/components/WidgetLegacy.vue'
@@ -99,12 +101,20 @@ const { nodeData } = defineProps<NodeWidgetsProps>()
 
 const { shouldHandleNodePointerEvents, forwardEventToCanvas } =
   useCanvasInteractions()
+const { bringNodeToFront } = useNodeZIndex()
+
 function handleWidgetPointerEvent(event: PointerEvent) {
   if (shouldHandleNodePointerEvents.value) return
   event.stopPropagation()
   forwardEventToCanvas(event)
 }
 
+function handleBringToFront() {
+  if (nodeData?.id != null) {
+    bringNodeToFront(String(nodeData.id))
+  }
+}
+
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 
@@ -162,7 +172,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       options: widgetOptions,
       callback: widget.callback,
       spec: widget.spec,
-      borderStyle: widget.borderStyle
+      borderStyle: widget.borderStyle,
+      controlWidget: widget.controlWidget
     }
 
     function updateHandler(value: WidgetValue) {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 18df757f97..a05b969fa4 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -3,10 +3,7 @@
   <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
     <div class="relative h-full flex items-center min-w-0">
       <!-- Slot Name -->
-      <span
-        v-if="!dotOnly"
-        class="text-xs font-normal truncate text-node-component-slot-text"
-      >
+      <span v-if="!dotOnly" class="truncate text-node-component-slot-text">
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
     </div>
diff --git a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
index d79f5af177..abed566ec1 100644
--- a/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
+++ b/src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts
@@ -134,6 +134,10 @@ function useNodeEventHandlersIndividual() {
       canvasStore.canvas.deselectAll()
       canvasStore.canvas.select(node)
       canvasStore.updateSelectedItems()
+      // Bring node to front when selected (unless pinned)
+      if (!node.flags?.pinned) {
+        bringNodeToFront(nodeId)
+      }
       return
     }
 
@@ -141,6 +145,10 @@ function useNodeEventHandlersIndividual() {
       canvasStore.canvas.deselect(node)
     } else {
       canvasStore.canvas.select(node)
+      // Bring node to front when selected (unless pinned)
+      if (!node.flags?.pinned) {
+        bringNodeToFront(nodeId)
+      }
     }
 
     canvasStore.updateSelectedItems()
diff --git a/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue
new file mode 100644
index 0000000000..7ef00c30eb
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, ref } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useDialogService } from '@/services/dialogService'
+
+import { NumberControlMode } from '../composables/useStepperControl'
+
+type ControlOption = {
+  description: string
+  mode: NumberControlMode
+  icon?: string
+  text?: string
+  title: string
+}
+
+const popover = ref()
+const settingStore = useSettingStore()
+const dialogService = useDialogService()
+
+const toggle = (event: Event) => {
+  popover.value.toggle(event)
+}
+defineExpose({ toggle })
+
+const ENABLE_LINK_TO_GLOBAL = false
+
+const controlOptions: ControlOption[] = [
+  ...(ENABLE_LINK_TO_GLOBAL
+    ? ([
+        {
+          mode: NumberControlMode.LINK_TO_GLOBAL,
+          icon: 'pi pi-link',
+          title: 'linkToGlobal',
+          description: 'linkToGlobalDesc'
+        } satisfies ControlOption
+      ] as ControlOption[])
+    : []),
+  {
+    mode: NumberControlMode.RANDOMIZE,
+    icon: 'icon-[lucide--shuffle]',
+    title: 'randomize',
+    description: 'randomizeDesc'
+  },
+  {
+    mode: NumberControlMode.INCREMENT,
+    text: '+1',
+    title: 'increment',
+    description: 'incrementDesc'
+  },
+  {
+    mode: NumberControlMode.DECREMENT,
+    text: '-1',
+    title: 'decrement',
+    description: 'decrementDesc'
+  }
+]
+
+const widgetControlMode = computed(() =>
+  settingStore.get('Comfy.WidgetControlMode')
+)
+
+const props = defineProps<{
+  controlMode: NumberControlMode
+}>()
+
+const emit = defineEmits<{
+  'update:controlMode': [mode: NumberControlMode]
+}>()
+
+const handleToggle = (mode: NumberControlMode) => {
+  if (props.controlMode === mode) return
+  emit('update:controlMode', mode)
+}
+
+const isActive = (mode: NumberControlMode) => {
+  return props.controlMode === mode
+}
+
+const handleEditSettings = () => {
+  popover.value.hide()
+  dialogService.showSettingsDialog()
+}
+</script>
+
+<template>
+  <Popover
+    ref="popover"
+    class="bg-interface-panel-surface border border-interface-stroke rounded-lg"
+  >
+    <div class="w-113 max-w-md p-4 space-y-4">
+      <div class="text-sm text-muted-foreground leading-tight">
+        {{ $t('widgets.numberControl.header.prefix') }}
+        <span class="text-base-foreground font-medium">
+          {{
+            widgetControlMode === 'before'
+              ? $t('widgets.numberControl.header.before')
+              : $t('widgets.numberControl.header.after')
+          }}
+        </span>
+        {{ $t('widgets.numberControl.header.postfix') }}
+      </div>
+
+      <div class="space-y-2">
+        <div
+          v-for="option in controlOptions"
+          :key="option.mode"
+          class="flex items-center justify-between py-2 gap-7"
+        >
+          <div class="flex items-center gap-2 flex-1 min-w-0">
+            <div
+              class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
+            >
+              <i
+                v-if="option.icon"
+                :class="option.icon"
+                class="text-base text-base-foreground"
+              />
+              <span
+                v-if="option.text"
+                class="text-xs font-normal text-base-foreground"
+              >
+                {{ option.text }}
+              </span>
+            </div>
+
+            <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+              <div
+                class="text-sm font-normal text-base-foreground leading-tight"
+              >
+                <span v-if="option.mode === NumberControlMode.LINK_TO_GLOBAL">
+                  {{ $t('widgets.numberControl.linkToGlobal') }}
+                  <em>{{ $t('widgets.numberControl.linkToGlobalSeed') }}</em>
+                </span>
+                <span v-else>
+                  {{ $t(`widgets.numberControl.${option.title}`) }}
+                </span>
+              </div>
+              <div
+                class="text-sm font-normal text-muted-foreground leading-tight"
+              >
+                {{ $t(`widgets.numberControl.${option.description}`) }}
+              </div>
+            </div>
+          </div>
+
+          <ToggleSwitch
+            :model-value="isActive(option.mode)"
+            class="flex-shrink-0"
+            @update:model-value="handleToggle(option.mode)"
+          />
+        </div>
+      </div>
+      <div class="border-t border-border-subtle"></div>
+      <Button
+        class="w-full bg-secondary-background hover:bg-secondary-background-hover border-0 rounded-lg p-2 text-sm"
+        @click="handleEditSettings"
+      >
+        <div class="flex items-center justify-center gap-1">
+          <i class="pi pi-cog text-xs text-muted-foreground" />
+          <span class="font-normal text-base-foreground">{{
+            $t('widgets.numberControl.editSettings')
+          }}</span>
+        </div>
+      </Button>
+    </div>
+  </Popover>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
index 2c54ed68ab..7b46670d21 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
@@ -39,8 +39,8 @@ defineEmits<{
 
 // Get litegraph node
 const litegraphNode = computed(() => {
-  if (!props.nodeId || !app.rootGraph) return null
-  return app.rootGraph.getNodeById(props.nodeId) as LGraphNode | null
+  if (!props.nodeId || !app.canvas.graph) return null
+  return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
 })
 
 // Check if this is an output node (PreviewAudio, SaveAudio, etc)
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
index ea63741886..0894114134 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue
@@ -1,22 +1,31 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
+import WidgetInputNumberWithControl from './WidgetInputNumberWithControl.vue'
 
-defineProps<{
+const props = defineProps<{
   widget: SimplifiedWidget<number>
 }>()
 
 const modelValue = defineModel<number>({ default: 0 })
+
+const hasControlAfterGenerate = computed(() => {
+  return !!props.widget.controlWidget
+})
 </script>
 
 <template>
   <component
     :is="
-      widget.type === 'slider'
-        ? WidgetInputNumberSlider
-        : WidgetInputNumberInput
+      hasControlAfterGenerate
+        ? WidgetInputNumberWithControl
+        : widget.type === 'slider'
+          ? WidgetInputNumberSlider
+          : WidgetInputNumberInput
     "
     v-model="modelValue"
     :widget="widget"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
index 15e4d223aa..2bd16cb3b1 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
@@ -89,8 +89,11 @@ const buttonTooltip = computed(() => {
       :show-buttons="!buttonsDisabled"
       :pt="{
         root: {
-          class:
-            '[&>input]:bg-transparent [&>input]:border-0 [&>input]:truncate [&>input]:min-w-[4ch]'
+          class: cn(
+            '[&>input]:bg-transparent [&>input]:border-0',
+            '[&>input]:truncate [&>input]:min-w-[4ch]',
+            $slots.default && '[&>input]:pr-7'
+          )
         },
         decrementButton: {
           class: 'w-8 border-0'
@@ -107,6 +110,9 @@ const buttonTooltip = computed(() => {
         <span class="pi pi-minus text-sm" />
       </template>
     </InputNumber>
+    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5">
+      <slot />
+    </div>
   </WidgetLayoutField>
 </template>
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index ee9eec6fa2..a7f1463552 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -39,6 +39,7 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { useNumberStepCalculation } from '../composables/useNumberStepCalculation'
 import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
@@ -56,7 +57,7 @@ const updateLocalValue = (newValue: number[] | undefined): void => {
 }
 
 const handleNumberInputUpdate = (newValue: number | undefined) => {
-  if (newValue) {
+  if (newValue !== undefined) {
     updateLocalValue([newValue])
     return
   }
@@ -67,33 +68,11 @@ const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )
 
-// Get the precision value for proper number formatting
-const precision = computed(() => {
-  const p = widget.options?.precision
-  // Treat negative or non-numeric precision as undefined
-  return typeof p === 'number' && p >= 0 ? p : undefined
-})
+const p = widget.options?.precision
+const precision = typeof p === 'number' && p >= 0 ? p : undefined
 
 // 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 (widget.options?.step2 !== undefined) {
-    return widget.options.step2
-  }
-
-  // Otherwise, derive from precision
-  if (precision.value === undefined) {
-    return 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)
-})
+const stepValue = useNumberStepCalculation(widget.options, precision, true)
 
 const sliderNumberPt = useNumberWidgetButtonPt({
   roundedLeft: true,
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue
new file mode 100644
index 0000000000..f333fe48de
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { defineAsyncComponent, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import type { NumberControlMode } from '../composables/useStepperControl'
+import { useStepperControl } from '../composables/useStepperControl'
+import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
+
+const NumberControlPopover = defineAsyncComponent(
+  () => import('./NumberControlPopover.vue')
+)
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+}>()
+
+const modelValue = defineModel<number>({ default: 0 })
+const popover = ref()
+
+const handleControlChange = (newValue: number) => {
+  modelValue.value = newValue
+}
+
+const { controlMode, controlButtonIcon } = useStepperControl(
+  modelValue,
+  {
+    ...props.widget.options,
+    onChange: handleControlChange
+  },
+  props.widget.controlWidget!.value
+)
+
+const setControlMode = (mode: NumberControlMode) => {
+  controlMode.value = mode
+  props.widget.controlWidget!.update(mode)
+}
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+</script>
+
+<template>
+  <div class="relative grid grid-cols-subgrid">
+    <WidgetInputNumberInput
+      v-model="modelValue"
+      :widget
+      class="grid grid-cols-subgrid col-span-2"
+    >
+      <Button
+        variant="link"
+        size="small"
+        class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
+        @click="togglePopover"
+      >
+        <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+      </Button>
+    </WidgetInputNumberInput>
+    <NumberControlPopover
+      ref="popover"
+      :control-mode
+      @update:control-mode="setControlMode"
+    />
+  </div>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 73c37111ff..aa0fc4df32 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -155,8 +155,8 @@ const isWaveformActive = computed(() => isRecording.value || isPlaying.value)
 const modelValue = defineModel<string>({ default: '' })
 
 const litegraphNode = computed(() => {
-  if (!props.nodeId || !app.rootGraph) return null
-  return app.rootGraph.getNodeById(props.nodeId) as LGraphNode | null
+  if (!props.nodeId || !app.canvas.graph) return null
+  return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
 })
 
 async function handleRecordingComplete(blob: Blob) {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
index 78702bafa5..28a148c45d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue
@@ -146,11 +146,9 @@ const outputItems = computed<DropdownItem[]>(() => {
 })
 
 const allItems = computed<DropdownItem[]>(() => {
-  if (props.isAssetMode && assetData) {
-    return assetData.dropdownItems.value
-  }
   return [...inputItems.value, ...outputItems.value]
 })
+
 const dropdownItems = computed<DropdownItem[]>(() => {
   if (props.isAssetMode) {
     return allItems.value
@@ -163,7 +161,7 @@ const dropdownItems = computed<DropdownItem[]>(() => {
       return outputItems.value
     case 'all':
     default:
-      return allItems.value
+      return [...inputItems.value, ...outputItems.value]
   }
 })
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 9f5eb24598..bf69add86c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -185,8 +185,8 @@ const showVolumeTwo = computed(() => !isMuted.value && volume.value > 0.5)
 const showVolumeOne = computed(() => isMuted.value && volume.value > 0)
 
 const litegraphNode = computed(() => {
-  if (!props.nodeId || !app.rootGraph) return null
-  return app.rootGraph.getNodeById(props.nodeId) as LGraphNode | null
+  if (!props.nodeId || !app.canvas.graph) return null
+  return app.canvas.graph.getNodeById(props.nodeId) as LGraphNode | null
 })
 
 const hidden = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index e2e45b739c..696e37a45a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { noop } from 'es-toolkit'
 import { inject } from 'vue'
 
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
@@ -17,31 +16,25 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
 
 <template>
   <div
-    class="grid grid-cols-subgrid min-w-0 items-center justify-between gap-1"
+    class="grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text"
   >
-    <div
-      v-if="!hideLayoutField"
-      class="relative flex h-full min-w-0 items-center"
-    >
-      <p
-        v-if="widget.name"
-        class="flex-1 truncate text-xs font-normal text-node-component-slot-text my-0"
-      >
+    <div v-if="!hideLayoutField" class="truncate content-center-safe">
+      <template v-if="widget.name">
         {{ widget.label || widget.name }}
-      </p>
+      </template>
     </div>
     <!-- basis-full grow -->
     <div class="relative min-w-0 flex-1">
       <div
         :class="
           cn(
-            'cursor-default min-w-0 rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+            'cursor-default min-w-0 rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
             widget.borderStyle
           )
         "
-        @pointerdown.stop="noop"
-        @pointermove.stop="noop"
-        @pointerup.stop="noop"
+        @pointerdown.stop
+        @pointermove.stop
+        @pointerup.stop
       >
         <slot />
       </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 9ecd8a5796..770d5b9da2 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -13,16 +13,16 @@ import {
 import { assetService } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
-import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type {
   ComboInputSpec,
   InputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
-import { addValueControlWidgets } from '@/scripts/widgets'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidgets } from '@/scripts/widgets'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
@@ -69,6 +69,16 @@ const addMultiSelectWidget = (
   addWidget(node, widget as BaseDOMWidget<object | string>)
   // TODO: Add remote support to multi-select widget
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3003
+  if (inputSpec.control_after_generate) {
+    widget.linkedWidgets = addValueControlWidgets(
+      node,
+      widget,
+      'fixed',
+      undefined,
+      transformInputSpecV2ToV1(inputSpec)
+    )
+  }
+
   return widget
 }
 
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
index 3b3d8f95ac..6595f3015e 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts
@@ -6,6 +6,8 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { isFloatInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidget } from '@/scripts/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 
 function onFloatValueChange(this: INumericWidget, v: number) {
   const round = this.options.round
@@ -55,7 +57,7 @@ export const useFloatWidget = () => {
 
     /** Assertion {@link inputSpec.default} */
     const defaultValue = (inputSpec.default as number | undefined) ?? 0
-    return node.addWidget(
+    const widget = node.addWidget(
       widgetType,
       inputSpec.name,
       defaultValue,
@@ -73,6 +75,20 @@ export const useFloatWidget = () => {
         precision
       }
     )
+
+    if (inputSpec.control_after_generate) {
+      const controlWidget = addValueControlWidget(
+        node,
+        widget,
+        'fixed',
+        undefined,
+        undefined,
+        transformInputSpecV2ToV1(inputSpec)
+      )
+      widget.linkedWidgets = [controlWidget]
+    }
+
+    return widget
   }
 
   return widgetConstructor
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
index 1b6eeaeeb4..3045012847 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
@@ -12,6 +12,37 @@ import { calculateImageGrid } from '@/scripts/ui/imagePreview'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
 import { is_all_same_aspect_ratio } from '@/utils/imageUtil'
 
+/**
+ * Workaround for Chrome GPU bug:
+ * When Chrome is maximized with GPU acceleration and high DPR, calling
+ * drawImage(canvas) + drawImage(img) in the same frame causes severe
+ * performance degradation (FPS drops to 2-10, memory spikes ~18GB).
+ *
+ * Solution: Defer image rendering using queueMicrotask to separate
+ * the two drawImage calls into different tasks.
+ *
+ * Note: As tested, requestAnimationFrame delays rendering to the next frame,
+ * causing visible image flickering. queueMicrotask executes within the same
+ * frame, avoiding flicker while still separating the drawImage calls.
+ */
+let deferredImageRenders: Array<() => void> = []
+let deferredRenderScheduled = false
+
+function scheduleDeferredImageRender() {
+  if (deferredRenderScheduled) return
+  deferredRenderScheduled = true
+
+  queueMicrotask(() => {
+    const renders = deferredImageRenders
+    deferredImageRenders = []
+    deferredRenderScheduled = false
+
+    for (const render of renders) {
+      render()
+    }
+  })
+}
+
 const renderPreview = (
   ctx: CanvasRenderingContext2D,
   node: LGraphNode,
@@ -124,13 +155,31 @@ const renderPreview = (
       const imgWidth = ratio * img.width
       const imgX = col * cellWidth + shiftX + (cellWidth - imgWidth) / 2
 
-      ctx.drawImage(
+      // Defer image rendering to work around Chrome GPU bug
+      const transform = ctx.getTransform()
+      const filter = ctx.filter
+      const drawParams = {
         img,
-        imgX + cell_padding,
-        imgY + cell_padding,
-        imgWidth - cell_padding * 2,
-        imgHeight - cell_padding * 2
-      )
+        x: imgX + cell_padding,
+        y: imgY + cell_padding,
+        w: imgWidth - cell_padding * 2,
+        h: imgHeight - cell_padding * 2
+      }
+      deferredImageRenders.push(() => {
+        ctx.save()
+        ctx.setTransform(transform)
+        ctx.filter = filter
+        ctx.drawImage(
+          drawParams.img,
+          drawParams.x,
+          drawParams.y,
+          drawParams.w,
+          drawParams.h
+        )
+        ctx.restore()
+      })
+      scheduleDeferredImageRender()
+
       if (!compact_mode) {
         // rectangle cell and border line style
         ctx.strokeStyle = '#8F8F8F'
@@ -167,7 +216,16 @@ const renderPreview = (
 
   const x = (dw - w) / 2
   const y = (dh - h) / 2 + shiftY
-  ctx.drawImage(img, x, y, w, h)
+
+  // Defer image rendering to work around Chrome GPU bug
+  const transform = ctx.getTransform()
+  deferredImageRenders.push(() => {
+    ctx.save()
+    ctx.setTransform(transform)
+    ctx.drawImage(img, x, y, w, h)
+    ctx.restore()
+  })
+  scheduleDeferredImageRender()
 
   // Draw image size text below the image
   if (allowImageSizeDraw) {
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
index ef2973837d..0c257c15b1 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts
@@ -1,11 +1,11 @@
 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 { isIntInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { addValueControlWidget } from '@/scripts/widgets'
+import { isIntInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidget } from '@/scripts/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 
 function onValueChange(this: INumericWidget, v: number) {
   // For integers, always round to the nearest step
@@ -69,14 +69,10 @@ export const useIntWidget = () => {
 
     const controlAfterGenerate =
       inputSpec.control_after_generate ??
-      /**
-       * Compatibility with legacy node convention. Int input with name
-       * 'seed' or 'noise_seed' get automatically added a control widget.
-       */
       ['seed', 'noise_seed'].includes(inputSpec.name)
 
     if (controlAfterGenerate) {
-      const seedControl = addValueControlWidget(
+      const controlWidget = addValueControlWidget(
         node,
         widget,
         'randomize',
@@ -84,7 +80,7 @@ export const useIntWidget = () => {
         undefined,
         transformInputSpecV2ToV1(inputSpec)
       )
-      widget.linkedWidgets = [seedControl]
+      widget.linkedWidgets = [controlWidget]
     }
 
     return widget
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts b/src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts
new file mode 100644
index 0000000000..e1da71063e
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts
@@ -0,0 +1,35 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface NumberWidgetOptions {
+  step2?: number
+  precision?: number
+}
+
+/**
+ * Shared composable for calculating step values in number input widgets
+ * Handles both explicit step2 values and precision-derived steps
+ */
+export function useNumberStepCalculation(
+  options: NumberWidgetOptions | undefined,
+  precisionArg: MaybeRefOrGetter<number | undefined>,
+  returnUndefinedForDefault = false
+) {
+  return computed(() => {
+    const precision = toValue(precisionArg)
+    // Use step2 (correct input spec value) instead of step (legacy 10x value)
+    if (options?.step2 !== undefined) {
+      return Number(options.step2)
+    }
+
+    if (precision === undefined) {
+      return returnUndefinedForDefault ? undefined : 0
+    }
+
+    if (precision === 0) return 1
+
+    // For precision > 0, step = 1 / (10^precision)
+    const step = 1 / Math.pow(10, precision)
+    return returnUndefinedForDefault ? step : Number(step.toFixed(precision))
+  })
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useStepperControl.ts b/src/renderer/extensions/vueNodes/widgets/composables/useStepperControl.ts
new file mode 100644
index 0000000000..bde6499e7d
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useStepperControl.ts
@@ -0,0 +1,111 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import type { ControlOptions } from '@/types/simplifiedWidget'
+
+import { numberControlRegistry } from '../services/NumberControlRegistry'
+
+export enum NumberControlMode {
+  FIXED = 'fixed',
+  INCREMENT = 'increment',
+  DECREMENT = 'decrement',
+  RANDOMIZE = 'randomize',
+  LINK_TO_GLOBAL = 'linkToGlobal'
+}
+
+interface StepperControlOptions {
+  min?: number
+  max?: number
+  step?: number
+  step2?: number
+  onChange?: (value: number) => void
+}
+
+function convertToEnum(str?: ControlOptions): NumberControlMode {
+  switch (str) {
+    case 'fixed':
+      return NumberControlMode.FIXED
+    case 'increment':
+      return NumberControlMode.INCREMENT
+    case 'decrement':
+      return NumberControlMode.DECREMENT
+    case 'randomize':
+      return NumberControlMode.RANDOMIZE
+  }
+  return NumberControlMode.RANDOMIZE
+}
+
+function useControlButtonIcon(controlMode: Ref<NumberControlMode>) {
+  return computed(() => {
+    switch (controlMode.value) {
+      case NumberControlMode.INCREMENT:
+        return 'pi pi-plus'
+      case NumberControlMode.DECREMENT:
+        return 'pi pi-minus'
+      case NumberControlMode.FIXED:
+        return 'icon-[lucide--pencil-off]'
+      case NumberControlMode.LINK_TO_GLOBAL:
+        return 'pi pi-link'
+      default:
+        return 'icon-[lucide--shuffle]'
+    }
+  })
+}
+
+export function useStepperControl(
+  modelValue: Ref<number>,
+  options: StepperControlOptions,
+  defaultValue?: ControlOptions
+) {
+  const controlMode = ref<NumberControlMode>(convertToEnum(defaultValue))
+  const controlId = Symbol('numberControl')
+
+  const applyControl = () => {
+    const { min = 0, max = 1000000, step2, step = 1, onChange } = options
+    const safeMax = Math.min(2 ** 50, max)
+    const safeMin = Math.max(-(2 ** 50), min)
+    // Use step2 if available (widget context), otherwise use step as-is (direct API usage)
+    const actualStep = step2 !== undefined ? step2 : step
+
+    let newValue: number
+    switch (controlMode.value) {
+      case NumberControlMode.FIXED:
+        // Do nothing - keep current value
+        return
+      case NumberControlMode.INCREMENT:
+        newValue = Math.min(safeMax, modelValue.value + actualStep)
+        break
+      case NumberControlMode.DECREMENT:
+        newValue = Math.max(safeMin, modelValue.value - actualStep)
+        break
+      case NumberControlMode.RANDOMIZE:
+        newValue = Math.floor(Math.random() * (safeMax - safeMin + 1)) + safeMin
+        break
+      default:
+        return
+    }
+
+    if (onChange) {
+      onChange(newValue)
+    } else {
+      modelValue.value = newValue
+    }
+  }
+
+  // Register with singleton registry
+  onMounted(() => {
+    numberControlRegistry.register(controlId, applyControl)
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    numberControlRegistry.unregister(controlId)
+  })
+  const controlButtonIcon = useControlButtonIcon(controlMode)
+
+  return {
+    applyControl,
+    controlButtonIcon,
+    controlMode
+  }
+}
diff --git a/src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts b/src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts
new file mode 100644
index 0000000000..9fc1e6f14b
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts
@@ -0,0 +1,59 @@
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+/**
+ * Registry for managing Vue number controls with deterministic execution timing.
+ * Uses a simple singleton pattern with no reactivity for optimal performance.
+ */
+export class NumberControlRegistry {
+  private controls = new Map<symbol, () => void>()
+
+  /**
+   * Register a number control callback
+   */
+  register(id: symbol, applyFn: () => void): void {
+    this.controls.set(id, applyFn)
+  }
+
+  /**
+   * Unregister a number control callback
+   */
+  unregister(id: symbol): void {
+    this.controls.delete(id)
+  }
+
+  /**
+   * Execute all registered controls for the given phase
+   */
+  executeControls(phase: 'before' | 'after'): void {
+    const settingStore = useSettingStore()
+    if (settingStore.get('Comfy.WidgetControlMode') === phase) {
+      for (const applyFn of this.controls.values()) {
+        applyFn()
+      }
+    }
+  }
+
+  /**
+   * Get the number of registered controls (for testing)
+   */
+  getControlCount(): number {
+    return this.controls.size
+  }
+
+  /**
+   * Clear all registered controls (for testing)
+   */
+  clear(): void {
+    this.controls.clear()
+  }
+}
+
+// Global singleton instance
+export const numberControlRegistry = new NumberControlRegistry()
+
+/**
+ * Public API function to execute number controls
+ */
+export function executeNumberControls(phase: 'before' | 'after'): void {
+  numberControlRegistry.executeControls(phase)
+}
diff --git a/src/router.ts b/src/router.ts
index 59a691322f..5ca66c9535 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -7,6 +7,7 @@ import {
 } from 'vue-router'
 import type { RouteLocationNormalized } from 'vue-router'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -89,6 +90,7 @@ installPreservedQueryTracker(router, [
 ])
 
 if (isCloud) {
+  const { flags } = useFeatureFlags()
   const PUBLIC_ROUTE_NAMES = new Set([
     'cloud-login',
     'cloud-signup',
@@ -165,9 +167,12 @@ if (isCloud) {
       return next({ name: 'cloud-login' })
     }
 
-    // User is logged in - check if they need onboarding
+    // User is logged in - check if they need onboarding (when enabled)
     // For root path, check actual user status to handle waitlisted users
     if (!isElectron() && isLoggedIn && to.path === '/') {
+      if (!flags.onboardingSurveyEnabled) {
+        return next()
+      }
       // Import auth functions dynamically to avoid circular dependency
       const { getSurveyCompletedStatus } =
         await import('@/platform/cloud/onboarding/auth')
@@ -175,7 +180,7 @@ if (isCloud) {
         // Check user's actual status
         const surveyCompleted = await getSurveyCompletedStatus()
 
-        // Survey is required for all users regardless of whitelist status
+        // Survey is required for all users (when feature flag enabled)
         if (!surveyCompleted) {
           return next({ name: 'cloud-survey' })
         }
diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts
index 5187145cf6..b26d3b6aac 100644
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -28,10 +28,13 @@ const zOutputs = z
     audio: z.array(zResultItem).optional(),
     images: z.array(zResultItem).optional(),
     video: z.array(zResultItem).optional(),
-    animated: z.array(z.boolean()).optional()
+    animated: z.array(z.boolean()).optional(),
+    text: z.union([z.string(), z.array(z.string())]).optional()
   })
   .passthrough()
 
+export type NodeExecutionOutput = z.infer<typeof zOutputs>
+
 // WS messages
 const zStatusWsMessageStatus = z.object({
   exec_info: z.object({
@@ -369,6 +372,15 @@ const zNodeBadgeMode = z.enum(
   Object.values(NodeBadgeMode) as [string, ...string[]]
 )
 
+const zPreviewMethod = z.enum([
+  'default',
+  'none',
+  'auto',
+  'latent2rgb',
+  'taesd'
+])
+export type PreviewMethod = z.infer<typeof zPreviewMethod>
+
 const zSettings = z.object({
   'Comfy.ColorPalette': z.string(),
   'Comfy.CustomColorPalettes': colorPalettesSchema,
@@ -430,7 +442,7 @@ const zSettings = z.object({
   'Comfy.TreeExplorer.ItemPadding': z.number(),
   'Comfy.Validation.Workflows': z.boolean(),
   'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),
-  'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
+  'Comfy.Execution.PreviewMethod': zPreviewMethod,
   'Comfy.Workflow.WorkflowTabsPosition': z.enum(['Sidebar', 'Topbar']),
   'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
   'Comfy.WidgetControlMode': z.enum(['before', 'after']),
diff --git a/src/schemas/nodeDefSchema.ts b/src/schemas/nodeDefSchema.ts
index 867ee46ba6..bb36da2284 100644
--- a/src/schemas/nodeDefSchema.ts
+++ b/src/schemas/nodeDefSchema.ts
@@ -267,7 +267,7 @@ export type ComboInputSpecV2 = z.infer<typeof zComboInputSpecV2>
 export type InputSpec = z.infer<typeof zInputSpec>
 
 export function validateComfyNodeDef(
-  data: any,
+  data: unknown,
   onError: (error: string) => void = console.warn
 ): ComfyNodeDef | null {
   const result = zComfyNodeDef.safeParse(data)
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index d89c1dfb36..268aef8a2b 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -42,7 +42,8 @@ import type {
   StatusWsMessageStatus,
   SystemStats,
   User,
-  UserDataFullInfo
+  UserDataFullInfo,
+  PreviewMethod
 } from '@/schemas/apiSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import type { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -89,6 +90,11 @@ interface QueuePromptRequestBody {
      * ```
      */
     api_key_comfy_org?: string
+    /**
+     * Override the preview method for this prompt execution.
+     * 'default' uses the server's CLI setting.
+     */
+    preview_method?: PreviewMethod
   }
   front?: boolean
   number?: number
@@ -104,6 +110,11 @@ interface QueuePromptOptions {
    * Format: Colon-separated path of node IDs (e.g., "123:456:789")
    */
   partialExecutionTargets?: NodeExecutionId[]
+  /**
+   * Override the preview method for this prompt execution.
+   * 'default' uses the server's CLI setting and is not sent to backend.
+   */
+  previewMethod?: PreviewMethod
 }
 
 /** Dictionary of Frontend-generated API calls */
@@ -773,7 +784,11 @@ export class ComfyApi extends EventTarget {
       extra_data: {
         auth_token_comfy_org: this.authToken,
         api_key_comfy_org: this.apiKey,
-        extra_pnginfo: { workflow }
+        extra_pnginfo: { workflow },
+        ...(options?.previewMethod &&
+          options.previewMethod !== 'default' && {
+            preview_method: options.previewMethod
+          })
       }
     }
 
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 9c152d4bea..3a953e9634 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -31,6 +31,7 @@ import {
   type NodeId,
   isSubgraphDefinition
 } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { executeNumberControls } from '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
@@ -64,7 +65,7 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { type ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { forEachNode } from '@/utils/graphTraversalUtil'
+import { collectAllNodes, forEachNode } from '@/utils/graphTraversalUtil'
 import {
   getNodeByExecutionId,
   triggerCallbackOnAllNodes
@@ -157,15 +158,15 @@ export class ComfyApp {
 
   // TODO: Migrate internal usage to the
   /** @deprecated Use {@link rootGraph} instead */
-  get graph() {
+  get graph(): unknown {
     return this.rootGraphInternal!
   }
 
-  get rootGraph(): LGraph | undefined {
+  get rootGraph(): LGraph {
     if (!this.rootGraphInternal) {
       console.error('ComfyApp graph accessed before initialization')
     }
-    return this.rootGraphInternal
+    return this.rootGraphInternal!
   }
 
   // @ts-expect-error fixme ts strict error
@@ -512,7 +513,7 @@ export class ComfyApp {
         }
       }
 
-      app.graph.setDirtyCanvas(true)
+      app.canvas.setDirty(true)
 
       useNodeOutputStore().updateNodeImages(node)
     }
@@ -553,7 +554,7 @@ export class ComfyApp {
     useEventListener(this.canvasElRef, 'dragleave', async () => {
       if (!this.dragOverNode) return
       this.dragOverNode = null
-      this.graph.setDirtyCanvas(false, true)
+      this.canvas.setDirty(false, true)
     })
 
     // Add handler for dropping onto a specific node
@@ -562,7 +563,10 @@ export class ComfyApp {
       'dragover',
       (event: DragEvent) => {
         this.canvas.adjustMouseEvent(event)
-        const node = this.graph.getNodeOnPos(event.canvasX, event.canvasY)
+        const node = this.canvas.graph?.getNodeOnPos(
+          event.canvasX,
+          event.canvasY
+        )
 
         if (!node?.onDragOver?.(event)) {
           this.dragOverNode = null
@@ -573,7 +577,7 @@ export class ComfyApp {
 
         // dragover event is fired very frequently, run this on an animation frame
         requestAnimationFrame(() => {
-          this.graph.setDirtyCanvas(false, true)
+          this.canvas.setDirty(false, true)
         })
       },
       false
@@ -638,11 +642,11 @@ export class ComfyApp {
     })
 
     api.addEventListener('progress', () => {
-      this.graph.setDirtyCanvas(true, false)
+      this.canvas.setDirty(true, false)
     })
 
     api.addEventListener('executing', () => {
-      this.graph.setDirtyCanvas(true, false)
+      this.canvas.setDirty(true, false)
     })
 
     api.addEventListener('executed', ({ detail }) => {
@@ -653,14 +657,14 @@ export class ComfyApp {
         merge: detail.merge
       })
 
-      const node = getNodeByExecutionId(this.graph, executionId)
+      const node = getNodeByExecutionId(this.rootGraph, executionId)
       if (node && node.onExecuted) {
         node.onExecuted(detail.output)
       }
     })
 
     api.addEventListener('execution_start', () => {
-      triggerCallbackOnAllNodes(this.graph, 'onExecutionStart')
+      triggerCallbackOnAllNodes(this.rootGraph, 'onExecutionStart')
     })
 
     api.addEventListener('execution_error', ({ detail }) => {
@@ -844,7 +848,7 @@ export class ComfyApp {
 
     registerProxyWidgets(this.canvas)
 
-    this.graph.start()
+    this.rootGraph.start()
 
     // Ensure the canvas fills the window
     useResizeObserver(this.canvasElRef, ([canvasEl]) => {
@@ -1194,17 +1198,18 @@ export class ComfyApp {
 
     try {
       // @ts-expect-error Discrepancies between zod and litegraph - in progress
-      this.graph.configure(graphData)
+      this.rootGraph.configure(graphData)
 
       // Save original renderer version before scaling (it gets modified during scaling)
-      const originalMainGraphRenderer = this.graph.extra.workflowRendererVersion
+      const originalMainGraphRenderer =
+        this.rootGraph.extra.workflowRendererVersion
 
       // Scale main graph
       ensureCorrectLayoutScale(originalMainGraphRenderer)
 
       // Scale all subgraphs that were loaded with the workflow
       // Use original main graph renderer as fallback (not the modified one)
-      for (const subgraph of this.graph.subgraphs.values()) {
+      for (const subgraph of this.rootGraph.subgraphs.values()) {
         ensureCorrectLayoutScale(
           subgraph.extra.workflowRendererVersion || originalMainGraphRenderer,
           subgraph
@@ -1235,7 +1240,7 @@ export class ComfyApp {
       console.error(error)
       return
     }
-    for (const node of this.graph.nodes) {
+    forEachNode(this.rootGraph, (node) => {
       const size = node.computeSize()
       size[0] = Math.max(node.size[0], size[0])
       size[1] = Math.max(node.size[1], size[1])
@@ -1284,7 +1289,7 @@ export class ComfyApp {
       }
 
       useExtensionService().invokeExtensions('loadedGraphNode', node)
-    }
+    })
 
     if (missingNodeTypes.length && showMissingNodesDialog) {
       this.showMissingNodesError(missingNodeTypes)
@@ -1309,14 +1314,14 @@ export class ComfyApp {
     useTelemetry()?.trackWorkflowImported(telemetryPayload)
     await useWorkflowService().afterLoadNewGraph(
       workflow,
-      this.graph.serialize() as unknown as ComfyWorkflowJSON
+      this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
     )
     requestAnimationFrame(() => {
-      this.graph.setDirtyCanvas(true, true)
+      this.canvas.setDirty(true, true)
     })
   }
 
-  async graphToPrompt(graph = this.graph) {
+  async graphToPrompt(graph = this.rootGraph) {
     return graphToPrompt(graph, {
       sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
     })
@@ -1344,21 +1349,26 @@ export class ComfyApp {
     try {
       while (this.queueItems.length) {
         const { number, batchCount, queueNodeIds } = this.queueItems.pop()!
+        const previewMethod = useSettingStore().get(
+          'Comfy.Execution.PreviewMethod'
+        )
 
         for (let i = 0; i < batchCount; i++) {
           // Allow widgets to run callbacks before a prompt has been queued
           // e.g. random seed before every gen
-          executeWidgetsCallback(this.graph.nodes, 'beforeQueued')
-          for (const subgraph of this.graph.subgraphs.values()) {
-            executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
-          }
+          forEachNode(this.rootGraph, (node) => {
+            for (const widget of node.widgets ?? []) widget.beforeQueued?.()
+          })
+          executeNumberControls('before')
 
-          const p = await this.graphToPrompt(this.graph)
+          const p = await this.graphToPrompt(this.rootGraph)
+          const queuedNodes = collectAllNodes(this.rootGraph)
           try {
             api.authToken = comfyOrgAuthToken
             api.apiKey = comfyOrgApiKey ?? undefined
             const res = await api.queuePrompt(number, p, {
-              partialExecutionTargets: queueNodeIds
+              partialExecutionTargets: queueNodeIds,
+              previewMethod
             })
             delete api.authToken
             delete api.apiKey
@@ -1393,16 +1403,8 @@ export class ComfyApp {
 
           // Allow widgets to run callbacks after a prompt has been queued
           // e.g. random seed after every gen
-          executeWidgetsCallback(
-            p.workflow.nodes
-              .map((n) => this.graph.getNodeById(n.id))
-              .filter((n) => !!n),
-            'afterQueued'
-          )
-          for (const subgraph of this.graph.subgraphs.values()) {
-            executeWidgetsCallback(subgraph.nodes, 'afterQueued')
-          }
-
+          executeWidgetsCallback(queuedNodes, 'afterQueued')
+          executeNumberControls('after')
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }
@@ -1469,7 +1471,21 @@ export class ComfyApp {
       }
     }
 
-    // Use parameters as fallback when no workflow exists
+    if (prompt) {
+      try {
+        const promptObj =
+          typeof prompt === 'string' ? JSON.parse(prompt) : prompt
+        if (this.isApiJson(promptObj)) {
+          this.loadApiJson(promptObj, fileName)
+          return
+        }
+      } catch (err) {
+        console.error('Failed to parse prompt:', err)
+      }
+      // Fall through to parameters as a last resort
+    }
+
+    // Use parameters strictly as the final fallback
     if (parameters) {
       // Note: Not putting this in `importA1111` as it is mostly not used
       // by external callers, and `importA1111` has no access to `app`.
@@ -1477,23 +1493,30 @@ export class ComfyApp {
       importA1111(this.graph, parameters)
       useWorkflowService().afterLoadNewGraph(
         fileName,
-        this.graph.serialize() as unknown as ComfyWorkflowJSON
+        this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
       )
       return
     }
 
-    if (prompt) {
-      const promptObj = typeof prompt === 'string' ? JSON.parse(prompt) : prompt
-      this.loadApiJson(promptObj, fileName)
-      return
-    }
-
     this.showErrorOnFileLoad(file)
   }
 
   // @deprecated
-  isApiJson(data: unknown) {
-    return _.isObject(data) && Object.values(data).every((v) => v.class_type)
+  isApiJson(data: unknown): data is ComfyApiWorkflow {
+    if (!_.isObject(data) || Array.isArray(data)) {
+      return false
+    }
+    if (Object.keys(data).length === 0) return false
+
+    return Object.values(data).every((node) => {
+      if (!node || typeof node !== 'object' || Array.isArray(node)) {
+        return false
+      }
+
+      const { class_type: classType, inputs } = node as Record<string, unknown>
+      const inputsIsRecord = _.isObject(inputs) && !Array.isArray(inputs)
+      return typeof classType === 'string' && inputsIsRecord
+    })
   }
 
   loadApiJson(apiData: ComfyApiWorkflow, fileName: string) {
@@ -1508,24 +1531,25 @@ export class ComfyApp {
     }
 
     const ids = Object.keys(apiData)
-    app.graph.clear()
+    app.rootGraph.clear()
     for (const id of ids) {
       const data = apiData[id]
       const node = LiteGraph.createNode(data.class_type)
       if (!node) continue
       node.id = isNaN(+id) ? id : +id
       node.title = data._meta?.title ?? node.title
-      app.graph.add(node)
+      app.rootGraph.add(node)
     }
 
+    //TODO: Investigate repeat of for loop. Can compress?
     for (const id of ids) {
       const data = apiData[id]
-      const node = app.graph.getNodeById(id)
+      const node = app.rootGraph.getNodeById(id)
       for (const input in data.inputs ?? {}) {
         const value = data.inputs[input]
         if (value instanceof Array) {
           const [fromId, fromSlot] = value
-          const fromNode = app.graph.getNodeById(fromId)
+          const fromNode = app.rootGraph.getNodeById(fromId)
           // @ts-expect-error fixme ts strict error
           let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
           if (toSlot == null || toSlot === -1) {
@@ -1554,16 +1578,16 @@ export class ComfyApp {
         }
       }
     }
-    app.graph.arrange()
+    app.rootGraph.arrange()
 
     for (const id of ids) {
       const data = apiData[id]
-      const node = app.graph.getNodeById(id)
+      const node = app.rootGraph.getNodeById(id)
       for (const input in data.inputs ?? {}) {
         const value = data.inputs[input]
         if (value instanceof Array) {
           const [fromId, fromSlot] = value
-          const fromNode = app.graph.getNodeById(fromId)
+          const fromNode = app.rootGraph.getNodeById(fromId)
           // @ts-expect-error fixme ts strict error
           let toSlot = node.inputs?.findIndex((inp) => inp.name === input)
           if (toSlot == null || toSlot === -1) {
@@ -1593,11 +1617,11 @@ export class ComfyApp {
       }
     }
 
-    app.graph.arrange()
+    app.rootGraph.arrange()
 
     useWorkflowService().afterLoadNewGraph(
       fileName,
-      this.graph.serialize() as unknown as ComfyWorkflowJSON
+      this.rootGraph.serialize() as unknown as ComfyWorkflowJSON
     )
   }
 
@@ -1649,7 +1673,7 @@ export class ComfyApp {
       this.registerNodeDef(nodeId, defs[nodeId])
     }
     // Refresh combo widgets in all nodes including those in subgraphs
-    forEachNode(this.graph, (node) => {
+    forEachNode(this.rootGraph, (node) => {
       const def = defs[node.type]
       // Allow primitive nodes to handle refresh
       node.refreshComboInNode?.(defs)
@@ -1714,8 +1738,8 @@ export class ComfyApp {
 
     // Subgraph does not properly implement `clear` and the parent class's
     // (`LGraph`) `clear` breaks the subgraph structure.
-    if (this.graph && !this.canvas.subgraph) {
-      this.graph.clear()
+    if (this.rootGraph && !this.canvas.subgraph) {
+      this.rootGraph.clear()
     }
   }
 
diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts
index f2b2afc30b..fa09ad49af 100644
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -96,13 +96,13 @@ export class ChangeTracker {
       const activeId = navigation.at(-1)
       if (activeId) {
         // Navigate to the saved subgraph
-        const subgraph = app.graph.subgraphs.get(activeId)
+        const subgraph = app.rootGraph.subgraphs.get(activeId)
         if (subgraph) {
           app.canvas.setGraph(subgraph)
         }
       } else {
         // Empty navigation array means root level
-        app.canvas.setGraph(app.graph)
+        app.canvas.setGraph(app.rootGraph)
       }
     }
   }
@@ -130,7 +130,7 @@ export class ChangeTracker {
 
   checkState() {
     if (!app.graph || this.changeCount) return
-    const currentState = clone(app.graph.serialize()) as ComfyWorkflowJSON
+    const currentState = clone(app.rootGraph.serialize()) as ComfyWorkflowJSON
     if (!this.activeState) {
       this.activeState = currentState
       return
diff --git a/src/scripts/utils.ts b/src/scripts/utils.ts
index 26327f6cbb..6fbdc7dcc1 100644
--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -17,15 +17,13 @@ export function clone<T>(obj: T): T {
 }
 
 /**
- * @knipIgnoreUnusedButUsedByCustomNodes
  * @deprecated Use `applyTextReplacements` from `@/utils/searchAndReplace` instead
  * There are external callers to this function, so we need to keep it for now
  */
 export function applyTextReplacements(app: ComfyApp, value: string): string {
-  return _applyTextReplacements(app.graph, value)
+  return _applyTextReplacements(app.rootGraph, value)
 }
 
-/** @knipIgnoreUnusedButUsedByCustomNodes */
 export async function addStylesheet(
   urlOrFile: string,
   relativeTo?: string
diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 7cc451c032..a64a77addb 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -2,6 +2,7 @@ import _ from 'es-toolkit/compat'
 
 import { downloadFile } from '@/base/common/downloadUtil'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
 import { useNodeAnimatedImage } from '@/composables/node/useNodeAnimatedImage'
 import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImagePreview'
 import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
@@ -264,7 +265,7 @@ export const useLitegraphService = () => {
       _initialMinSize = { width: 1, height: 1 }
 
       constructor() {
-        super(app.graph, subgraph, instanceData)
+        super(app.rootGraph, subgraph, instanceData)
 
         // Set up event listener for promoted widget registration
         subgraph.events.addEventListener('widget-promoted', (event) => {
@@ -661,8 +662,8 @@ export const useLitegraphService = () => {
           {
             content: 'Unpack Subgraph',
             callback: () => {
-              useNodeOutputStore().revokeSubgraphPreviews(this)
-              this.graph.unpackSubgraph(this)
+              const { unpackSubgraph } = useSubgraphOperations()
+              unpackSubgraph()
             }
           }
         )
@@ -862,7 +863,7 @@ export const useLitegraphService = () => {
   }
 
   function goToNode(nodeId: NodeId) {
-    const graphNode = app.graph.getNodeById(nodeId)
+    const graphNode = app.canvas.graph?.getNodeById(nodeId)
     if (!graphNode) return
     app.canvas.animateToBounds(graphNode.boundingRect)
   }
@@ -883,7 +884,9 @@ export const useLitegraphService = () => {
     const canvas = canvasStore.canvas
     if (!canvas) return
 
-    const bounds = createBounds(app.graph.nodes)
+    const nodes = canvas.graph?.nodes
+    if (!nodes) return
+    const bounds = createBounds(nodes)
     if (!bounds) return
 
     canvas.ds.fitToBounds(bounds)
diff --git a/src/services/subgraphService.ts b/src/services/subgraphService.ts
index b16bf9ca96..3a9f1f7c70 100644
--- a/src/services/subgraphService.ts
+++ b/src/services/subgraphService.ts
@@ -67,8 +67,8 @@ export const useSubgraphService = () => {
     // Assertion: overriding Zod schema
     for (const subgraphData of subgraphs as ExportedSubgraph[]) {
       const subgraph =
-        comfyApp.graph.subgraphs.get(subgraphData.id) ??
-        comfyApp.graph.createSubgraph(subgraphData)
+        comfyApp.rootGraph.subgraphs.get(subgraphData.id) ??
+        comfyApp.rootGraph.createSubgraph(subgraphData)
 
       registerNewSubgraph(subgraph, subgraphData)
     }
diff --git a/src/stores/executionStore.ts b/src/stores/executionStore.ts
index eabce26132..b9f89c29a1 100644
--- a/src/stores/executionStore.ts
+++ b/src/stores/executionStore.ts
@@ -97,7 +97,7 @@ function executionIdToNodeLocatorId(
   // It's an execution node ID
   const parts = nodeIdStr.split(':')
   const localNodeId = parts[parts.length - 1]
-  const subgraphs = getSubgraphsFromInstanceIds(app.graph, parts)
+  const subgraphs = getSubgraphsFromInstanceIds(app.rootGraph, parts)
   if (!subgraphs) return undefined
   const nodeLocatorId = createNodeLocatorId(subgraphs.at(-1)!.id, localNodeId)
   return nodeLocatorId
@@ -578,10 +578,10 @@ export const useExecutionStore = defineStore('execution', () => {
    * Propagates errors up subgraph chains.
    */
   watch(lastNodeErrors, () => {
-    if (!app.graph || !app.graph.nodes) return
+    if (!app.rootGraph) return
 
     // Clear all error flags
-    forEachNode(app.graph, (node) => {
+    forEachNode(app.rootGraph, (node) => {
       node.has_errors = false
       if (node.inputs) {
         for (const slot of node.inputs) {
@@ -596,7 +596,7 @@ export const useExecutionStore = defineStore('execution', () => {
     for (const [executionId, nodeError] of Object.entries(
       lastNodeErrors.value
     )) {
-      const node = getNodeByExecutionId(app.graph, executionId)
+      const node = getNodeByExecutionId(app.rootGraph, executionId)
       if (!node) continue
 
       node.has_errors = true
@@ -618,7 +618,10 @@ export const useExecutionStore = defineStore('execution', () => {
       const parts = executionId.split(':')
       for (let i = parts.length - 1; i > 0; i--) {
         const parentExecutionId = parts.slice(0, i).join(':')
-        const parentNode = getNodeByExecutionId(app.graph, parentExecutionId)
+        const parentNode = getNodeByExecutionId(
+          app.rootGraph,
+          parentExecutionId
+        )
         if (parentNode) {
           parentNode.has_errors = true
         }
diff --git a/src/stores/subgraphNavigationStore.ts b/src/stores/subgraphNavigationStore.ts
index b986299517..8c29f2723f 100644
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -49,7 +49,7 @@ export const useSubgraphNavigationStore = defineStore(
      */
     const navigationStack = computed(() =>
       idStack.value
-        .map((id) => app.graph.subgraphs.get(id))
+        .map((id) => app.rootGraph.subgraphs.get(id))
         .filter(isNonNullish)
     )
 
diff --git a/src/types/extensionTypes.ts b/src/types/extensionTypes.ts
index 2c96faa057..7061a9b158 100644
--- a/src/types/extensionTypes.ts
+++ b/src/types/extensionTypes.ts
@@ -67,7 +67,7 @@ export interface ToastMessageOptions {
   /**
    * Detail content of the message.
    */
-  detail?: any | undefined
+  detail?: string
   /**
    * Whether the message can be closed manually using the close icon.
    * @defaultValue true
@@ -84,11 +84,12 @@ export interface ToastMessageOptions {
   /**
    * Style class of the message.
    */
-  styleClass?: any
+  styleClass?: string | string[] | Record<string, boolean>
   /**
    * Style class of the content.
+   * Matches PrimeVue Toast API which accepts Vue class bindings.
    */
-  contentStyleClass?: any
+  contentStyleClass?: string | string[] | Record<string, boolean>
 }
 
 export type ToastManager = {
@@ -107,8 +108,8 @@ export interface ExtensionManager {
   dialog: ReturnType<typeof useDialogService>
   command: CommandManager
   setting: {
-    get: (id: string) => any
-    set: (id: string, value: any) => void
+    get: <T = unknown>(id: string) => T | undefined
+    set: <T = unknown>(id: string, value: T) => void
   }
 }
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 6947f433fc..25f8e20900 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,3 @@
-import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import type {
   DeviceStats,
   EmbeddingsResponse,
@@ -71,6 +70,6 @@ declare global {
     app?: ComfyApp
 
     /** For use by extensions and in the browser console. Where possible, import `app` and access via `app.graph` instead. */
-    graph?: LGraph
+    graph?: unknown
   }
 }
diff --git a/src/types/litegraph-augmentation.d.ts b/src/types/litegraph-augmentation.d.ts
index f6b4aaf42f..0b283b1586 100644
--- a/src/types/litegraph-augmentation.d.ts
+++ b/src/types/litegraph-augmentation.d.ts
@@ -7,6 +7,7 @@ import type {
 } 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 { NodeExecutionOutput } from '@/schemas/apiSchema'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
 import type { DOMWidget, DOMWidgetOptions } from '@/scripts/domWidget'
@@ -94,7 +95,12 @@ declare module '@/lib/litegraph/src/litegraph' {
      */
     onAfterGraphConfigured?(): void
     onGraphConfigured?(): void
-    onExecuted?(output: any): void
+    /**
+     * Callback fired when node execution completes.
+     * Output contains known media properties (images, audio, video) plus
+     * arbitrary node-specific outputs (text, ui, custom properties).
+     */
+    onExecuted?(output: NodeExecutionOutput): void
     onNodeCreated?(this: LGraphNode): void
     /** @deprecated groupNode */
     setInnerNodes?(nodes: LGraphNode[]): void
diff --git a/src/types/metadataTypes.ts b/src/types/metadataTypes.ts
index 943e39ae7f..72f3a72934 100644
--- a/src/types/metadataTypes.ts
+++ b/src/types/metadataTypes.ts
@@ -69,15 +69,15 @@ export type GltfChunkHeader = {
 type GltfExtras = {
   workflow?: string | object
   prompt?: string | object
-  [key: string]: any
+  [key: string]: unknown
 }
 
 export type GltfJsonData = {
   asset?: {
     extras?: GltfExtras
-    [key: string]: any
+    [key: string]: unknown
   }
-  [key: string]: any
+  [key: string]: unknown
 }
 
 /**
diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
index 6d8f1d50b3..8411bd617f 100644
--- a/src/types/simplifiedWidget.ts
+++ b/src/types/simplifiedWidget.ts
@@ -15,6 +15,28 @@ export type WidgetValue =
   | void
   | File[]
 
+const CONTROL_OPTIONS = [
+  'fixed',
+  'increment',
+  'decrement',
+  'randomize'
+] as const
+export type ControlOptions = (typeof CONTROL_OPTIONS)[number]
+
+function isControlOption(val: WidgetValue): val is ControlOptions {
+  return CONTROL_OPTIONS.includes(val as ControlOptions)
+}
+
+export function normalizeControlOption(val: WidgetValue): ControlOptions {
+  if (isControlOption(val)) return val
+  return 'randomize'
+}
+
+export type SafeControlWidget = {
+  value: ControlOptions
+  update: (value: WidgetValue) => void
+}
+
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>
@@ -47,4 +69,6 @@ export interface SimplifiedWidget<
 
   /** Optional input specification backing this widget */
   spec?: InputSpecV2
+
+  controlWidget?: SafeControlWidget
 }
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 03fdb7ca2c..58b428afdc 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -17,7 +17,6 @@
 
   <GlobalToast />
   <RerouteMigrationToast />
-  <VueNodesMigrationToast />
   <UnloadWindowConfirmDialog v-if="!isElectron()" />
   <MenuHamburger />
 </template>
@@ -44,7 +43,6 @@ import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDi
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import RerouteMigrationToast from '@/components/toast/RerouteMigrationToast.vue'
-import VueNodesMigrationToast from '@/components/toast/VueNodesMigrationToast.vue'
 import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useErrorHandling } from '@/composables/useErrorHandling'
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 3c81f3b395..1a02d37dc1 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -55,7 +55,7 @@ const nodeDatas = computed(() => {
       widgets
     }
   }
-  return app.graph.nodes
+  return app.rootGraph.nodes
     .filter((node) => node.mode === 0 && node.widgets?.length)
     .map(nodeToNodeData)
 })
diff --git a/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
index e076e0cafb..973820c728 100644
--- a/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/workbench/extensions/manager/components/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-// eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
+// oxlint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
 import Dropdown from 'primevue/dropdown'
 
 import type { SearchOption } from '@/workbench/extensions/manager/types/comfyManagerTypes'
diff --git a/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts b/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
index 580a687fcd..96f1d4403d 100644
--- a/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useMissingNodes.ts
@@ -61,7 +61,7 @@ export const useMissingNodes = createSharedComposable(() => {
   }
 
   const missingCoreNodes = computed<Record<string, LGraphNode[]>>(() => {
-    const missingNodes = collectAllNodes(app.graph, isMissingCoreNode)
+    const missingNodes = collectAllNodes(app.rootGraph, isMissingCoreNode)
     return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
   })
 
diff --git a/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts b/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
index b83508dddb..e2580ee8de 100644
--- a/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
+++ b/src/workbench/extensions/manager/composables/nodePack/useWorkflowPacks.ts
@@ -7,7 +7,7 @@ import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { mapAllNodes } from '@/utils/graphTraversalUtil'
 import { useNodePacks } from '@/workbench/extensions/manager/composables/nodePack/useNodePacks'
 import type { UseNodePacksOptions } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
@@ -112,13 +112,9 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
    * Get the node packs for all nodes in the workflow (including subgraphs).
    */
   const getWorkflowPacks = async () => {
-    if (!app.graph) return []
-    const allNodes = collectAllNodes(app.graph)
-    if (!allNodes.length) {
-      workflowPacks.value = []
-      return []
-    }
-    const packs = await Promise.all(allNodes.map(workflowNodeToPack))
+    if (!app.rootGraph) return []
+    const packPromises = mapAllNodes(app.rootGraph, workflowNodeToPack)
+    const packs = await Promise.all(packPromises)
     workflowPacks.value = packs.filter((pack) => pack !== undefined)
   }
 
diff --git a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
index e117b492c6..756dee2628 100644
--- a/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
+++ b/tests-ui/platform/assets/components/AssetBrowserModal.test.ts
@@ -35,7 +35,7 @@ vi.mock('@/stores/modelToNodeStore', () => ({
   })
 }))
 
-vi.mock('@/components/input/SearchBox.vue', () => ({
+vi.mock('@/components/common/SearchBox.vue', () => ({
   default: {
     name: 'SearchBox',
     props: ['modelValue', 'size', 'placeholder', 'class'],
diff --git a/tests-ui/tests/composables/graph/useTransformSettling.test.ts b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
new file mode 100644
index 0000000000..bbd4002cd2
--- /dev/null
+++ b/tests-ui/tests/composables/graph/useTransformSettling.test.ts
@@ -0,0 +1,171 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
+
+describe('useTransformSettling', () => {
+  let element: HTMLDivElement
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    element = document.createElement('div')
+    document.body.appendChild(element)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    document.body.removeChild(element)
+  })
+
+  it('should track wheel events and settle after delay', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      settleDelay: 200
+    })
+
+    // Initially not transforming
+    expect(isTransforming.value).toBe(false)
+
+    // Dispatch wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Should be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time but not past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(150)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should reset settle timer on subsequent wheel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      settleDelay: 300
+    })
+
+    // First wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time partially
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Another wheel event should reset the timer
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Advance 200ms more - should still be transforming
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Need another 100ms to settle (300ms total from last event)
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should not track pan events', async () => {
+    const { isTransforming } = useTransformSettling(element)
+
+    // Pointer events should not trigger transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should work with ref target', async () => {
+    const targetRef = ref<HTMLElement | null>(null)
+    const { isTransforming } = useTransformSettling(targetRef, {
+      settleDelay: 200
+    })
+
+    // No target yet
+    expect(isTransforming.value).toBe(false)
+
+    // Set target
+    targetRef.value = element
+    await nextTick()
+
+    // Now events should work
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should use capture phase for events', async () => {
+    const captureHandler = vi.fn()
+    const bubbleHandler = vi.fn()
+
+    // Add handlers to verify capture phase
+    element.addEventListener('wheel', captureHandler, true)
+    element.addEventListener('wheel', bubbleHandler, false)
+
+    const { isTransforming } = useTransformSettling(element)
+
+    // Create child element
+    const child = document.createElement('div')
+    element.appendChild(child)
+
+    // Dispatch event on child
+    child.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Capture handler should be called before bubble handler
+    expect(captureHandler).toHaveBeenCalled()
+    expect(isTransforming.value).toBe(true)
+
+    element.removeEventListener('wheel', captureHandler, true)
+    element.removeEventListener('wheel', bubbleHandler, false)
+  })
+
+  it('should clean up event listeners when component unmounts', async () => {
+    const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
+
+    // Create a test component
+    const TestComponent = {
+      setup() {
+        const { isTransforming } = useTransformSettling(element)
+        return { isTransforming }
+      },
+      template: '<div>{{ isTransforming }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    // Unmount component
+    wrapper.unmount()
+
+    // Should have removed wheel event listener
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+  })
+
+  it('should use passive listeners when specified', async () => {
+    const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
+
+    useTransformSettling(element, {
+      passive: true
+    })
+
+    // Check that passive option was used for wheel event
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+  })
+})
diff --git a/tests-ui/tests/composables/node/useNodePricing.test.ts b/tests-ui/tests/composables/node/useNodePricing.test.ts
index dad9e878ad..ae62699c52 100644
--- a/tests-ui/tests/composables/node/useNodePricing.test.ts
+++ b/tests-ui/tests/composables/node/useNodePricing.test.ts
@@ -577,32 +577,32 @@ describe('useNodePricing', () => {
         {
           rendering_speed: 'Quality',
           character_image: false,
-          expected: '$0.09/Run'
+          expected: '$0.13/Run'
         },
         {
           rendering_speed: 'Quality',
           character_image: true,
-          expected: '$0.20/Run'
+          expected: '$0.29/Run'
         },
         {
           rendering_speed: 'Default',
           character_image: false,
-          expected: '$0.06/Run'
+          expected: '$0.09/Run'
         },
         {
           rendering_speed: 'Default',
           character_image: true,
-          expected: '$0.15/Run'
+          expected: '$0.21/Run'
         },
         {
           rendering_speed: 'Turbo',
           character_image: false,
-          expected: '$0.03/Run'
+          expected: '$0.04/Run'
         },
         {
           rendering_speed: 'Turbo',
           character_image: true,
-          expected: '$0.10/Run'
+          expected: '$0.14/Run'
         }
       ]
 
@@ -623,7 +623,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$0.03-0.08 x num_images/Run (varies with rendering speed & num_images)'
+        '$0.04-0.11 x num_images/Run (varies with rendering speed & num_images)'
       )
     })
 
@@ -635,7 +635,7 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.27/Run') // 0.09 * 3
+      expect(price).toBe('$0.39/Run') // 0.09 * 3 * 1.43
     })
 
     it('should multiply price by num_images for Turbo rendering speed', () => {
@@ -646,7 +646,7 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.15/Run') // 0.03 * 5
+      expect(price).toBe('$0.21/Run') // 0.03 * 5 * 1.43
     })
   })
 
@@ -770,7 +770,7 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$2.19/Run')
+      expect(price).toBe('$3.13/Run')
     })
 
     it('should return $6.37 for ray-2 4K 5s', () => {
@@ -782,7 +782,7 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$6.37/Run')
+      expect(price).toBe('$9.11/Run')
     })
 
     it('should return $0.35 for ray-1-6 model', () => {
@@ -794,7 +794,7 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.35/Run')
+      expect(price).toBe('$0.50/Run')
     })
 
     it('should return range when widgets are missing', () => {
@@ -803,7 +803,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$0.14-11.47/Run (varies with model, resolution & duration)'
+        '$0.20-16.40/Run (varies with model, resolution & duration)'
       )
     })
   })
@@ -1192,7 +1192,7 @@ describe('useNodePricing', () => {
         ])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.18/Run') // 0.06 * 3
+        expect(price).toBe('$0.26/Run') // 0.06 * 3 * 1.43
       })
 
       it('should calculate dynamic pricing for IdeogramV2 based on num_images value', () => {
@@ -1202,7 +1202,7 @@ describe('useNodePricing', () => {
         ])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.32/Run') // 0.08 * 4
+        expect(price).toBe('$0.46/Run') // 0.08 * 4 * 1.43
       })
 
       it('should fall back to static display when num_images widget is missing for IdeogramV1', () => {
@@ -1210,7 +1210,7 @@ describe('useNodePricing', () => {
         const node = createMockNode('IdeogramV1', [])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.02-0.06 x num_images/Run')
+        expect(price).toBe('$0.03-0.09 x num_images/Run')
       })
 
       it('should fall back to static display when num_images widget is missing for IdeogramV2', () => {
@@ -1218,7 +1218,7 @@ describe('useNodePricing', () => {
         const node = createMockNode('IdeogramV2', [])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.05-0.08 x num_images/Run')
+        expect(price).toBe('$0.07-0.11 x num_images/Run')
       })
 
       it('should handle edge case when num_images value is 1 for IdeogramV1', () => {
@@ -1228,7 +1228,7 @@ describe('useNodePricing', () => {
         ])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.06/Run') // 0.06 * 1 (turbo=false by default)
+        expect(price).toBe('$0.09/Run') // 0.06 * 1 * 1.43 (turbo=false by default)
       })
     })
 
@@ -1435,7 +1435,7 @@ describe('useNodePricing', () => {
         const node = createMockNode('RunwayTextToImageNode')
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.08/Run')
+        expect(price).toBe('$0.11/Run')
       })
 
       it('should calculate dynamic pricing for RunwayImageToVideoNodeGen3a', () => {
@@ -1445,7 +1445,7 @@ describe('useNodePricing', () => {
         ])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.50/Run') // 0.05 * 10
+        expect(price).toBe('$0.71/Run') // 0.05 * 10 * 1.43
       })
 
       it('should return fallback for RunwayImageToVideoNodeGen3a without duration', () => {
@@ -1453,7 +1453,7 @@ describe('useNodePricing', () => {
         const node = createMockNode('RunwayImageToVideoNodeGen3a', [])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.05/second')
+        expect(price).toBe('$0.0715/second')
       })
 
       it('should handle zero duration for RunwayImageToVideoNodeGen3a', () => {
@@ -1473,7 +1473,7 @@ describe('useNodePricing', () => {
         ])
 
         const price = getNodeDisplayPrice(node)
-        expect(price).toBe('$0.25/Run') // Falls back to 5 seconds: 0.05 * 5
+        expect(price).toBe('$0.36/Run') // Falls back to 5 seconds: 0.05 * 5 * 1.43
       })
     })
 
@@ -1810,8 +1810,8 @@ describe('useNodePricing', () => {
         // Test edge cases
         const testCases = [
           { duration: 0, expected: '$0.00/Run' }, // Now correctly handles 0 duration
-          { duration: 1, expected: '$0.05/Run' },
-          { duration: 30, expected: '$1.50/Run' }
+          { duration: 1, expected: '$0.07/Run' },
+          { duration: 30, expected: '$2.15/Run' }
         ]
 
         testCases.forEach(({ duration, expected }) => {
@@ -1828,7 +1828,7 @@ describe('useNodePricing', () => {
           { name: 'duration', value: 'invalid-string' }
         ])
         // When Number('invalid-string') returns NaN, it falls back to 5 seconds
-        expect(getNodeDisplayPrice(node)).toBe('$0.25/Run')
+        expect(getNodeDisplayPrice(node)).toBe('$0.36/Run')
       })
 
       it('should handle missing duration widget gracefully', () => {
@@ -1841,7 +1841,7 @@ describe('useNodePricing', () => {
 
         nodes.forEach((nodeType) => {
           const node = createMockNode(nodeType, [])
-          expect(getNodeDisplayPrice(node)).toBe('$0.05/second')
+          expect(getNodeDisplayPrice(node)).toBe('$0.0715/second')
         })
       })
     })
diff --git a/tests-ui/tests/composables/useCoreCommands.test.ts b/tests-ui/tests/composables/useCoreCommands.test.ts
index 6ab5d58db7..3c86faa5a2 100644
--- a/tests-ui/tests/composables/useCoreCommands.test.ts
+++ b/tests-ui/tests/composables/useCoreCommands.test.ts
@@ -32,7 +32,7 @@ vi.mock('@/scripts/app', () => {
         }
       }),
       canvas: mockCanvas,
-      graph: {
+      rootGraph: {
         clear: mockGraphClear
       }
     }
@@ -161,7 +161,7 @@ describe('useCoreCommands', () => {
       await clearCommand.function()
 
       expect(app.clean).toHaveBeenCalled()
-      expect(app.graph.clear).toHaveBeenCalled()
+      expect(app.rootGraph.clear).toHaveBeenCalled()
       expect(api.dispatchCustomEvent).toHaveBeenCalledWith('graphCleared')
     })
 
@@ -178,7 +178,7 @@ describe('useCoreCommands', () => {
       await clearCommand.function()
 
       expect(app.clean).toHaveBeenCalled()
-      expect(app.graph.clear).not.toHaveBeenCalled()
+      expect(app.rootGraph.clear).not.toHaveBeenCalled()
 
       // Should only remove user nodes, not input/output nodes
       expect(mockSubgraph.remove).toHaveBeenCalledTimes(2)
@@ -212,7 +212,7 @@ describe('useCoreCommands', () => {
 
       // Should not clear anything when user cancels
       expect(app.clean).not.toHaveBeenCalled()
-      expect(app.graph.clear).not.toHaveBeenCalled()
+      expect(app.rootGraph.clear).not.toHaveBeenCalled()
       expect(api.dispatchCustomEvent).not.toHaveBeenCalled()
     })
   })
diff --git a/tests-ui/tests/composables/useMissingNodes.test.ts b/tests-ui/tests/composables/useMissingNodes.test.ts
index 41bd098bb0..04a4e5ffd0 100644
--- a/tests-ui/tests/composables/useMissingNodes.test.ts
+++ b/tests-ui/tests/composables/useMissingNodes.test.ts
@@ -1,8 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { app } from '@/scripts/app'
+import type { LGraphNode, LGraph } from '@/lib/litegraph/src/litegraph'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -40,12 +39,10 @@ vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   }))
 }))
 
+const mockApp: { rootGraph?: Partial<LGraph> } = vi.hoisted(() => ({}))
+
 vi.mock('@/scripts/app', () => ({
-  app: {
-    graph: {
-      nodes: []
-    }
-  }
+  app: mockApp
 }))
 
 vi.mock('@/utils/graphTraversalUtil', () => ({
@@ -107,9 +104,8 @@ describe('useMissingNodes', () => {
       nodeDefsByName: {}
     })
 
-    // Reset app.graph.nodes
-    // @ts-expect-error - app.graph.nodes is readonly, but we need to modify it for testing.
-    app.graph.nodes = []
+    // Reset app.rootGraph.nodes
+    mockApp.rootGraph = { nodes: [] }
 
     // Default mock for collectAllNodes - returns empty array
     mockCollectAllNodes.mockReturnValue([])
@@ -306,13 +302,7 @@ describe('useMissingNodes', () => {
   })
 
   describe('missing core nodes detection', () => {
-    const createMockNode = (
-      type: string,
-      packId?: string,
-      version?: string
-    ): LGraphNode =>
-      // @ts-expect-error - Creating a partial mock of LGraphNode for testing.
-      // We only need specific properties for our tests, not the full LGraphNode interface.
+    const createMockNode = (type: string, packId?: string, version?: string) =>
       ({
         type,
         properties: { cnr_id: packId, ver: version },
@@ -325,7 +315,7 @@ describe('useMissingNodes', () => {
         mode: 0,
         inputs: [],
         outputs: []
-      })
+      }) as unknown as LGraphNode
 
     it('identifies missing core nodes not in nodeDefStore', () => {
       const coreNode1 = createMockNode('CoreNode1', 'comfy-core', '1.2.0')
@@ -467,8 +457,7 @@ describe('useMissingNodes', () => {
 
     it('calls collectAllNodes with the app graph and filter function', () => {
       const mockGraph = { nodes: [], subgraphs: new Map() }
-      // @ts-expect-error - Mocking app.graph for testing
-      app.graph = mockGraph
+      mockApp.rootGraph = mockGraph
 
       const { missingCoreNodes } = useMissingNodes()
       // Access the computed to trigger the function
@@ -490,8 +479,7 @@ describe('useMissingNodes', () => {
 
     it('filter function correctly identifies missing core nodes', () => {
       const mockGraph = { nodes: [], subgraphs: new Map() }
-      // @ts-expect-error - Mocking app.graph for testing
-      app.graph = mockGraph
+      mockApp.rootGraph = mockGraph
 
       mockUseNodeDefStore.mockReturnValue({
         nodeDefsByName: {
@@ -579,14 +567,13 @@ describe('useMissingNodes', () => {
         subgraph: mockSubgraph,
         type: 'SubgraphContainer',
         properties: { cnr_id: 'custom-pack' }
-      }
+      } as unknown as LGraphNode
 
       const mockMainGraph = {
         nodes: [mainMissingNode, mockSubgraphNode]
-      }
+      } as Partial<LGraph> as LGraph
 
-      // @ts-expect-error - Mocking app.graph for testing
-      app.graph = mockMainGraph
+      mockApp.rootGraph = mockMainGraph
 
       mockUseNodeDefStore.mockReturnValue({
         nodeDefsByName: {
diff --git a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
deleted file mode 100644
index 9a4d9a3524..0000000000
--- a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { mount, flushPromises } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-import { ref } from 'vue'
-
-import enMessages from '@/locales/en/main.json' with { type: 'json' }
-import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
-
-const mockLoadStripeScript = vi.fn()
-let currentConfig = {
-  publishableKey: 'pk_test_123',
-  pricingTableId: 'prctbl_123'
-}
-let hasConfig = true
-
-vi.mock('@/config/stripePricingTableConfig', () => ({
-  getStripePricingTableConfig: () => currentConfig,
-  hasStripePricingTableConfig: () => hasConfig
-}))
-
-const mockIsLoaded = ref(false)
-const mockIsLoading = ref(false)
-const mockError = ref(null)
-
-vi.mock(
-  '@/platform/cloud/subscription/composables/useStripePricingTableLoader',
-  () => ({
-    useStripePricingTableLoader: () => ({
-      loadScript: mockLoadStripeScript,
-      isLoaded: mockIsLoaded,
-      isLoading: mockIsLoading,
-      error: mockError
-    })
-  })
-)
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: enMessages }
-})
-
-const mountComponent = () =>
-  mount(StripePricingTable, {
-    global: {
-      plugins: [i18n]
-    }
-  })
-
-describe('StripePricingTable', () => {
-  beforeEach(() => {
-    currentConfig = {
-      publishableKey: 'pk_test_123',
-      pricingTableId: 'prctbl_123'
-    }
-    hasConfig = true
-    mockLoadStripeScript.mockReset().mockResolvedValue(undefined)
-    mockIsLoaded.value = false
-    mockIsLoading.value = false
-    mockError.value = null
-  })
-
-  it('renders the Stripe pricing table when config is available', async () => {
-    const wrapper = mountComponent()
-
-    await flushPromises()
-
-    expect(mockLoadStripeScript).toHaveBeenCalled()
-
-    const stripePricingTable = wrapper.find('stripe-pricing-table')
-    expect(stripePricingTable.exists()).toBe(true)
-    expect(stripePricingTable.attributes('publishable-key')).toBe('pk_test_123')
-    expect(stripePricingTable.attributes('pricing-table-id')).toBe('prctbl_123')
-  })
-
-  it('shows missing config message when credentials are absent', () => {
-    hasConfig = false
-    currentConfig = { publishableKey: '', pricingTableId: '' }
-
-    const wrapper = mountComponent()
-
-    expect(
-      wrapper.find('[data-testid="stripe-table-missing-config"]').exists()
-    ).toBe(true)
-    expect(mockLoadStripeScript).not.toHaveBeenCalled()
-  })
-
-  it('shows loading indicator when script is loading', async () => {
-    // Mock loadScript to never resolve, simulating loading state
-    mockLoadStripeScript.mockImplementation(() => new Promise(() => {}))
-
-    const wrapper = mountComponent()
-    await flushPromises()
-
-    expect(wrapper.find('[data-testid="stripe-table-loading"]').exists()).toBe(
-      true
-    )
-    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
-  })
-
-  it('shows error indicator when script fails to load', async () => {
-    // Mock loadScript to reject, simulating error state
-    mockLoadStripeScript.mockRejectedValue(new Error('Script failed to load'))
-
-    const wrapper = mountComponent()
-    await flushPromises()
-
-    expect(wrapper.find('[data-testid="stripe-table-error"]').exists()).toBe(
-      true
-    )
-    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
-  })
-})
diff --git a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
index 5be9f7d80c..2c6f9c04a7 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts
@@ -1,18 +1,35 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import SubscriptionPanel from '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
 
-// Mock composables
+// Mock state refs that can be modified between tests
+const mockIsActiveSubscription = ref(false)
+const mockIsCancelled = ref(false)
+const mockSubscriptionTier = ref<
+  'STANDARD' | 'CREATOR' | 'PRO' | 'FOUNDERS_EDITION' | null
+>('CREATOR')
+
+const TIER_TO_NAME: Record<string, string> = {
+  STANDARD: 'Standard',
+  CREATOR: 'Creator',
+  PRO: 'Pro',
+  FOUNDERS_EDITION: "Founder's Edition"
+}
+
+// Mock composables - using computed to match composable return types
 const mockSubscriptionData = {
-  isActiveSubscription: false,
-  isCancelled: false,
-  formattedRenewalDate: '2024-12-31',
-  formattedEndDate: '2024-12-31',
-  formattedMonthlyPrice: '$9.99',
-  manageSubscription: vi.fn(),
+  isActiveSubscription: computed(() => mockIsActiveSubscription.value),
+  isCancelled: computed(() => mockIsCancelled.value),
+  formattedRenewalDate: computed(() => '2024-12-31'),
+  formattedEndDate: computed(() => '2024-12-31'),
+  subscriptionTier: computed(() => mockSubscriptionTier.value),
+  subscriptionTierName: computed(() =>
+    mockSubscriptionTier.value ? TIER_TO_NAME[mockSubscriptionTier.value] : ''
+  ),
   handleInvoiceHistory: vi.fn()
 }
 
@@ -25,7 +42,6 @@ const mockCreditsData = {
 
 const mockActionsData = {
   isLoadingSupport: false,
-  refreshTooltip: 'Refreshes on 2024-12-31',
   handleAddApiCredits: vi.fn(),
   handleMessageSupport: vi.fn(),
   handleRefresh: vi.fn(),
@@ -50,6 +66,23 @@ vi.mock(
   })
 )
 
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionDialog',
+  () => ({
+    useSubscriptionDialog: () => ({
+      show: vi.fn()
+    })
+  })
+)
+
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: vi.fn(() => ({
+    authActions: vi.fn(() => ({
+      accessBillingPortal: vi.fn()
+    }))
+  }))
+}))
+
 // Create i18n instance for testing
 const i18n = createI18n({
   legacy: false,
@@ -58,12 +91,15 @@ const i18n = createI18n({
     en: {
       subscription: {
         title: 'Subscription',
+        titleUnsubscribed: 'Subscribe',
         perMonth: '/ month',
         subscribeNow: 'Subscribe Now',
         manageSubscription: 'Manage Subscription',
         partnerNodesBalance: 'Partner Nodes Balance',
         partnerNodesDescription: 'Credits for partner nodes',
         totalCredits: 'Total Credits',
+        creditsRemainingThisMonth: 'Credits remaining this month',
+        creditsYouveAdded: "Credits you've added",
         monthlyBonusDescription: 'Monthly bonus',
         prepaidDescription: 'Prepaid credits',
         monthlyCreditsRollover: 'Monthly credits rollover info',
@@ -71,11 +107,67 @@ const i18n = createI18n({
         viewUsageHistory: 'View Usage History',
         addCredits: 'Add Credits',
         yourPlanIncludes: 'Your plan includes',
+        viewMoreDetailsPlans: 'View more details about plans & pricing',
         learnMore: 'Learn More',
         messageSupport: 'Message Support',
         invoiceHistory: 'Invoice History',
+        partnerNodesCredits: 'Partner nodes pricing',
         renewsDate: 'Renews {date}',
-        expiresDate: 'Expires {date}'
+        expiresDate: 'Expires {date}',
+        tiers: {
+          founder: {
+            name: "Founder's Edition",
+            price: '20.00',
+            benefits: {
+              monthlyCredits: '5,460',
+              monthlyCreditsLabel: 'monthly credits',
+              maxDuration: '30 min',
+              maxDurationLabel: 'max duration of each workflow run',
+              gpuLabel: 'RTX 6000 Pro (96GB VRAM)',
+              addCreditsLabel: 'Add more credits whenever',
+              customLoRAsLabel: 'Import your own LoRAs'
+            }
+          },
+          standard: {
+            name: 'Standard',
+            price: '20.00',
+            benefits: {
+              monthlyCredits: '4,200',
+              monthlyCreditsLabel: 'monthly credits',
+              maxDuration: '30 min',
+              maxDurationLabel: 'max duration of each workflow run',
+              gpuLabel: 'RTX 6000 Pro (96GB VRAM)',
+              addCreditsLabel: 'Add more credits whenever',
+              customLoRAsLabel: 'Import your own LoRAs'
+            }
+          },
+          creator: {
+            name: 'Creator',
+            price: '35.00',
+            benefits: {
+              monthlyCredits: '7,400',
+              monthlyCreditsLabel: 'monthly credits',
+              maxDuration: '30 min',
+              maxDurationLabel: 'max duration of each workflow run',
+              gpuLabel: 'RTX 6000 Pro (96GB VRAM)',
+              addCreditsLabel: 'Add more credits whenever',
+              customLoRAsLabel: 'Import your own LoRAs'
+            }
+          },
+          pro: {
+            name: 'Pro',
+            price: '100.00',
+            benefits: {
+              monthlyCredits: '21,100',
+              monthlyCreditsLabel: 'monthly credits',
+              maxDuration: '1 hr',
+              maxDurationLabel: 'max duration of each workflow run',
+              gpuLabel: 'RTX 6000 Pro (96GB VRAM)',
+              addCreditsLabel: 'Add more credits whenever',
+              customLoRAsLabel: 'Import your own LoRAs'
+            }
+          }
+        }
       }
     }
   }
@@ -116,18 +208,22 @@ function createWrapper(overrides = {}) {
 describe('SubscriptionPanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    // Reset mock state
+    mockIsActiveSubscription.value = false
+    mockIsCancelled.value = false
+    mockSubscriptionTier.value = 'CREATOR'
   })
 
   describe('subscription state functionality', () => {
     it('shows correct UI for active subscription', () => {
-      mockSubscriptionData.isActiveSubscription = true
+      mockIsActiveSubscription.value = true
       const wrapper = createWrapper()
       expect(wrapper.text()).toContain('Manage Subscription')
       expect(wrapper.text()).toContain('Add Credits')
     })
 
     it('shows correct UI for inactive subscription', () => {
-      mockSubscriptionData.isActiveSubscription = false
+      mockIsActiveSubscription.value = false
       const wrapper = createWrapper()
       expect(wrapper.findComponent({ name: 'SubscribeButton' }).exists()).toBe(
         true
@@ -137,18 +233,32 @@ describe('SubscriptionPanel', () => {
     })
 
     it('shows renewal date for active non-cancelled subscription', () => {
-      mockSubscriptionData.isActiveSubscription = true
-      mockSubscriptionData.isCancelled = false
+      mockIsActiveSubscription.value = true
+      mockIsCancelled.value = false
       const wrapper = createWrapper()
       expect(wrapper.text()).toContain('Renews 2024-12-31')
     })
 
     it('shows expiry date for cancelled subscription', () => {
-      mockSubscriptionData.isActiveSubscription = true
-      mockSubscriptionData.isCancelled = true
+      mockIsActiveSubscription.value = true
+      mockIsCancelled.value = true
       const wrapper = createWrapper()
       expect(wrapper.text()).toContain('Expires 2024-12-31')
     })
+
+    it('displays FOUNDERS_EDITION tier correctly', () => {
+      mockSubscriptionTier.value = 'FOUNDERS_EDITION'
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain("Founder's Edition")
+      expect(wrapper.text()).toContain('5,460')
+    })
+
+    it('displays CREATOR tier correctly', () => {
+      mockSubscriptionTier.value = 'CREATOR'
+      const wrapper = createWrapper()
+      expect(wrapper.text()).toContain('Creator')
+      expect(wrapper.text()).toContain('7,400')
+    })
   })
 
   describe('credit display functionality', () => {
diff --git a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
index 5de71bf6bf..f3f3de2957 100644
--- a/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/composables/useSubscriptionActions.test.ts
@@ -7,23 +7,6 @@ const mockFetchBalance = vi.fn()
 const mockFetchStatus = vi.fn()
 const mockShowTopUpCreditsDialog = vi.fn()
 const mockExecute = vi.fn()
-const mockT = vi.fn((key: string, values?: any) => {
-  if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
-  if (key === 'subscription.refreshesOn') {
-    return `Refreshes to $${values?.monthlyCreditBonusUsd} on ${values?.date}`
-  }
-  return key
-})
-
-vi.mock('vue-i18n', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('vue-i18n')>()
-  return {
-    ...actual,
-    useI18n: () => ({
-      t: mockT
-    })
-  }
-})
 
 vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
   useFirebaseAuthActions: () => ({
@@ -31,12 +14,9 @@ vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
   })
 }))
 
-const mockFormattedRenewalDate = { value: '2024-12-31' }
-
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: () => ({
-    fetchStatus: mockFetchStatus,
-    formattedRenewalDate: mockFormattedRenewalDate
+    fetchStatus: mockFetchStatus
   })
 }))
 
@@ -62,23 +42,6 @@ Object.defineProperty(window, 'open', {
 describe('useSubscriptionActions', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockFormattedRenewalDate.value = '2024-12-31'
-  })
-
-  describe('refreshTooltip', () => {
-    it('should format tooltip with renewal date', () => {
-      const { refreshTooltip } = useSubscriptionActions()
-      expect(refreshTooltip.value).toBe('Refreshes to $10 on 2024-12-31')
-    })
-
-    it('should use fallback text when no renewal date', () => {
-      mockFormattedRenewalDate.value = ''
-      const { refreshTooltip } = useSubscriptionActions()
-      expect(refreshTooltip.value).toBe(
-        'Refreshes to $10 on next billing cycle'
-      )
-      expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
-    })
   })
 
   describe('handleAddApiCredits', () => {
diff --git a/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts b/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts
index 1305e9f156..9409709d3a 100644
--- a/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts
@@ -152,10 +152,28 @@ describe('useSubscription', () => {
       expect(formattedRenewalDate.value).toBe('')
     })
 
-    it('should format monthly price correctly', () => {
-      const { formattedMonthlyPrice } = useSubscription()
+    it('should return subscription tier from status', async () => {
+      vi.mocked(global.fetch).mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          is_active: true,
+          subscription_id: 'sub_123',
+          subscription_tier: 'CREATOR',
+          renewal_date: '2025-11-16T12:00:00Z'
+        })
+      } as Response)
 
-      expect(formattedMonthlyPrice.value).toBe('$20')
+      mockIsLoggedIn.value = true
+      const { subscriptionTier, fetchStatus } = useSubscription()
+
+      await fetchStatus()
+      expect(subscriptionTier.value).toBe('CREATOR')
+    })
+
+    it('should return null when subscription tier is not available', () => {
+      const { subscriptionTier } = useSubscription()
+
+      expect(subscriptionTier.value).toBeNull()
     })
   })
 
diff --git a/tests-ui/tests/platform/remote/comfyui/jobs/fetchJobs.test.ts b/tests-ui/tests/platform/remote/comfyui/jobs/fetchJobs.test.ts
new file mode 100644
index 0000000000..f3b2ad5a82
--- /dev/null
+++ b/tests-ui/tests/platform/remote/comfyui/jobs/fetchJobs.test.ts
@@ -0,0 +1,291 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  extractWorkflow,
+  fetchHistory,
+  fetchJobDetail,
+  fetchQueue
+} from '@/platform/remote/comfyui/jobs/fetchJobs'
+import type {
+  RawJobListItem,
+  zJobsListResponse
+} from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { z } from 'zod'
+
+type JobsListResponse = z.infer<typeof zJobsListResponse>
+
+function createMockJob(
+  id: string,
+  status: 'pending' | 'in_progress' | 'completed' = 'completed',
+  overrides: Partial<RawJobListItem> = {}
+): RawJobListItem {
+  return {
+    id,
+    status,
+    create_time: Date.now(),
+    execution_start_time: null,
+    execution_end_time: null,
+    preview_output: null,
+    outputs_count: 0,
+    ...overrides
+  }
+}
+
+function createMockResponse(
+  jobs: RawJobListItem[],
+  total: number = jobs.length
+): JobsListResponse {
+  return {
+    jobs,
+    pagination: {
+      offset: 0,
+      limit: 200,
+      total,
+      has_more: false
+    }
+  }
+}
+
+describe('fetchJobs', () => {
+  describe('fetchHistory', () => {
+    it('fetches completed jobs', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse([
+              createMockJob('job1', 'completed'),
+              createMockJob('job2', 'completed')
+            ])
+          )
+      })
+
+      const result = await fetchHistory(mockFetch)
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/jobs?status=completed&limit=200&offset=0'
+      )
+      expect(result).toHaveLength(2)
+      expect(result[0].id).toBe('job1')
+      expect(result[1].id).toBe('job2')
+    })
+
+    it('assigns synthetic priorities', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse(
+              [
+                createMockJob('job1', 'completed'),
+                createMockJob('job2', 'completed'),
+                createMockJob('job3', 'completed')
+              ],
+              3
+            )
+          )
+      })
+
+      const result = await fetchHistory(mockFetch)
+
+      // Priority should be assigned from total down
+      expect(result[0].priority).toBe(3) // total - 0 - 0
+      expect(result[1].priority).toBe(2) // total - 0 - 1
+      expect(result[2].priority).toBe(1) // total - 0 - 2
+    })
+
+    it('calculates priority correctly with non-zero offset', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse(
+              [
+                createMockJob('job4', 'completed'),
+                createMockJob('job5', 'completed')
+              ],
+              10 // total of 10 jobs
+            )
+          )
+      })
+
+      // Fetch page 2 (offset=5)
+      const result = await fetchHistory(mockFetch, 200, 5)
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/jobs?status=completed&limit=200&offset=5'
+      )
+      // Priority base is total - offset = 10 - 5 = 5
+      expect(result[0].priority).toBe(5) // (total - offset) - 0
+      expect(result[1].priority).toBe(4) // (total - offset) - 1
+    })
+
+    it('preserves server-provided priority', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse([
+              createMockJob('job1', 'completed', { priority: 999 })
+            ])
+          )
+      })
+
+      const result = await fetchHistory(mockFetch)
+
+      expect(result[0].priority).toBe(999)
+    })
+
+    it('returns empty array on error', async () => {
+      const mockFetch = vi.fn().mockRejectedValue(new Error('Network error'))
+
+      const result = await fetchHistory(mockFetch)
+
+      expect(result).toEqual([])
+    })
+
+    it('returns empty array on non-ok response', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: false,
+        status: 500
+      })
+
+      const result = await fetchHistory(mockFetch)
+
+      expect(result).toEqual([])
+    })
+  })
+
+  describe('fetchQueue', () => {
+    it('fetches running and pending jobs', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse([
+              createMockJob('running1', 'in_progress'),
+              createMockJob('pending1', 'pending'),
+              createMockJob('pending2', 'pending')
+            ])
+          )
+      })
+
+      const result = await fetchQueue(mockFetch)
+
+      expect(mockFetch).toHaveBeenCalledWith(
+        '/jobs?status=in_progress,pending&limit=200&offset=0'
+      )
+      expect(result.Running).toHaveLength(1)
+      expect(result.Pending).toHaveLength(2)
+      expect(result.Running[0].id).toBe('running1')
+      expect(result.Pending[0].id).toBe('pending1')
+    })
+
+    it('assigns queue priorities above history', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () =>
+          Promise.resolve(
+            createMockResponse([
+              createMockJob('running1', 'in_progress'),
+              createMockJob('pending1', 'pending')
+            ])
+          )
+      })
+
+      const result = await fetchQueue(mockFetch)
+
+      // Queue priorities should be above 1_000_000 (QUEUE_PRIORITY_BASE)
+      expect(result.Running[0].priority).toBeGreaterThan(1_000_000)
+      expect(result.Pending[0].priority).toBeGreaterThan(1_000_000)
+      // Pending should have higher priority than running
+      expect(result.Pending[0].priority).toBeGreaterThan(
+        result.Running[0].priority
+      )
+    })
+
+    it('returns empty arrays on error', async () => {
+      const mockFetch = vi.fn().mockRejectedValue(new Error('Network error'))
+
+      const result = await fetchQueue(mockFetch)
+
+      expect(result).toEqual({ Running: [], Pending: [] })
+    })
+  })
+
+  describe('fetchJobDetail', () => {
+    it('fetches job detail by id', async () => {
+      const jobDetail = {
+        ...createMockJob('job1', 'completed'),
+        workflow: { extra_data: { extra_pnginfo: { workflow: {} } } },
+        outputs: {
+          '1': {
+            images: [{ filename: 'test.png', subfolder: '', type: 'output' }]
+          }
+        }
+      }
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(jobDetail)
+      })
+
+      const result = await fetchJobDetail(mockFetch, 'job1')
+
+      expect(mockFetch).toHaveBeenCalledWith('/jobs/job1')
+      expect(result?.id).toBe('job1')
+      expect(result?.outputs).toBeDefined()
+    })
+
+    it('returns undefined for non-ok response', async () => {
+      const mockFetch = vi.fn().mockResolvedValue({
+        ok: false,
+        status: 404
+      })
+
+      const result = await fetchJobDetail(mockFetch, 'nonexistent')
+
+      expect(result).toBeUndefined()
+    })
+
+    it('returns undefined on error', async () => {
+      const mockFetch = vi.fn().mockRejectedValue(new Error('Network error'))
+
+      const result = await fetchJobDetail(mockFetch, 'job1')
+
+      expect(result).toBeUndefined()
+    })
+  })
+
+  describe('extractWorkflow', () => {
+    it('extracts workflow from nested structure', () => {
+      const jobDetail = {
+        ...createMockJob('job1', 'completed'),
+        workflow: {
+          extra_data: {
+            extra_pnginfo: {
+              workflow: { nodes: [], links: [] }
+            }
+          }
+        }
+      }
+
+      const workflow = extractWorkflow(jobDetail)
+
+      expect(workflow).toEqual({ nodes: [], links: [] })
+    })
+
+    it('returns undefined if workflow not present', () => {
+      const jobDetail = createMockJob('job1', 'completed')
+
+      const workflow = extractWorkflow(jobDetail)
+
+      expect(workflow).toBeUndefined()
+    })
+
+    it('returns undefined for undefined input', () => {
+      const workflow = extractWorkflow(undefined)
+
+      expect(workflow).toBeUndefined()
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
index b1c5b19fce..583bc1856d 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
@@ -1,6 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
+import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
@@ -41,9 +42,10 @@ describe('ImagePreview', () => {
       '/api/view?filename=test2.png&type=output'
     ]
   }
+  const wrapperRegistry = new Set<VueWrapper>()
 
   const mountImagePreview = (props = {}) => {
-    return mount(ImagePreview, {
+    const wrapper = mount(ImagePreview, {
       props: { ...defaultProps, ...props },
       global: {
         plugins: [
@@ -61,8 +63,17 @@ describe('ImagePreview', () => {
         }
       }
     })
+    wrapperRegistry.add(wrapper)
+    return wrapper
   }
 
+  afterEach(() => {
+    wrapperRegistry.forEach((wrapper) => {
+      wrapper.unmount()
+    })
+    wrapperRegistry.clear()
+  })
+
   it('renders image preview when imageUrls provided', () => {
     const wrapper = mountImagePreview()
 
@@ -107,8 +118,9 @@ describe('ImagePreview', () => {
     // Initially buttons should not be visible
     expect(wrapper.find('.actions').exists()).toBe(false)
 
-    // Trigger hover
-    await wrapper.trigger('mouseenter')
+    // Trigger hover on the image wrapper (the element with role="img" has the hover handlers)
+    const imageWrapper = wrapper.find('[role="img"]')
+    await imageWrapper.trigger('mouseenter')
     await nextTick()
 
     // Action buttons should now be visible
@@ -123,14 +135,45 @@ describe('ImagePreview', () => {
 
   it('hides action buttons when not hovering', async () => {
     const wrapper = mountImagePreview()
+    const imageWrapper = wrapper.find('[role="img"]')
 
     // Trigger hover
-    await wrapper.trigger('mouseenter')
+    await imageWrapper.trigger('mouseenter')
     await nextTick()
     expect(wrapper.find('.actions').exists()).toBe(true)
 
     // Trigger mouse leave
-    await wrapper.trigger('mouseleave')
+    await imageWrapper.trigger('mouseleave')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(false)
+  })
+
+  it('shows action buttons on focus', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially buttons should not be visible
+    expect(wrapper.find('.actions').exists()).toBe(false)
+
+    // Trigger focusin on the image wrapper (useFocusWithin listens to focusin/focusout)
+    const imageWrapper = wrapper.find('[role="img"]')
+    await imageWrapper.trigger('focusin')
+    await nextTick()
+
+    // Action buttons should now be visible
+    expect(wrapper.find('.actions').exists()).toBe(true)
+  })
+
+  it('hides action buttons on blur', async () => {
+    const wrapper = mountImagePreview()
+    const imageWrapper = wrapper.find('[role="img"]')
+
+    // Trigger focus
+    await imageWrapper.trigger('focusin')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(true)
+
+    // Trigger focusout
+    await imageWrapper.trigger('focusout')
     await nextTick()
     expect(wrapper.find('.actions').exists()).toBe(false)
   })
@@ -138,7 +181,7 @@ describe('ImagePreview', () => {
   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 multipleImagesWrapper.find('[role="img"]').trigger('mouseenter')
     await nextTick()
 
     const maskButtonMultiple = multipleImagesWrapper.find(
@@ -150,7 +193,7 @@ describe('ImagePreview', () => {
     const singleImageWrapper = mountImagePreview({
       imageUrls: [defaultProps.imageUrls[0]]
     })
-    await singleImageWrapper.trigger('mouseenter')
+    await singleImageWrapper.find('[role="img"]').trigger('mouseenter')
     await nextTick()
 
     const maskButtonSingle = singleImageWrapper.find(
@@ -164,7 +207,7 @@ describe('ImagePreview', () => {
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    await wrapper.trigger('mouseenter')
+    await wrapper.find('[role="img"]').trigger('mouseenter')
     await nextTick()
 
     // Test Edit/Mask button - just verify it can be clicked without errors
@@ -183,7 +226,7 @@ describe('ImagePreview', () => {
       imageUrls: [defaultProps.imageUrls[0]]
     })
 
-    await wrapper.trigger('mouseenter')
+    await wrapper.find('[role="img"]').trigger('mouseenter')
     await nextTick()
 
     // Test Download button
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
index 0d598b15d6..b8dec32015 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts
@@ -199,6 +199,6 @@ describe('LGraphNode', () => {
 
     const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
-    expect(wrapper.classes()).toContain('border-node-stroke-executing')
+    expect(wrapper.classes()).toContain('outline-node-stroke-executing')
   })
 })
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
index 740b9e7dbb..0f7ca7aefa 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts
@@ -5,15 +5,19 @@ import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import type {
+  LGraph,
+  LGraphNode,
+  SubgraphNode
+} from '@/lib/litegraph/src/litegraph'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
 import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 
+const mockApp: { rootGraph?: Partial<LGraph> } = vi.hoisted(() => ({}))
 // Mock dependencies
 vi.mock('@/scripts/app', () => ({
-  app: {
-    graph: null as any
-  }
+  app: mockApp
 }))
 
 vi.mock('@/utils/graphTraversalUtil', () => ({
@@ -55,17 +59,12 @@ vi.mock('@/i18n', () => ({
 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
-    }
+    if (hasGraph) mockApp.rootGraph = {}
+    else mockApp.rootGraph = undefined
 
     vi.mocked(getNodeByLocatorId).mockReturnValue({
-      isSubgraphNode: () => isSubgraph
-    } as any)
+      isSubgraphNode: (): this is SubgraphNode => isSubgraph
+    } as LGraphNode)
   }
 
   beforeEach(() => {
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useStepperControl.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useStepperControl.test.ts
new file mode 100644
index 0000000000..1950136a90
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useStepperControl.test.ts
@@ -0,0 +1,238 @@
+import { setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  NumberControlMode,
+  useStepperControl
+} from '@/renderer/extensions/vueNodes/widgets/composables/useStepperControl'
+
+// Mock the registry to spy on calls
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry',
+  () => ({
+    numberControlRegistry: {
+      register: vi.fn(),
+      unregister: vi.fn(),
+      executeControls: vi.fn(),
+      getControlCount: vi.fn(() => 0),
+      clear: vi.fn()
+    },
+    executeNumberControls: vi.fn()
+  })
+)
+
+describe('useStepperControl', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with RANDOMIZED mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode } = useStepperControl(modelValue, options)
+
+      expect(controlMode.value).toBe(NumberControlMode.RANDOMIZE)
+    })
+
+    it('should return control mode and apply function', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+
+      expect(controlMode.value).toBe(NumberControlMode.RANDOMIZE)
+      expect(typeof applyControl).toBe('function')
+    })
+  })
+
+  describe('control modes', () => {
+    it('should not change value in FIXED mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.FIXED
+
+      applyControl()
+      expect(modelValue.value).toBe(100)
+    })
+
+    it('should increment value in INCREMENT mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 5 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(105)
+    })
+
+    it('should decrement value in DECREMENT mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 5 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.DECREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(95)
+    })
+
+    it('should respect min/max bounds for INCREMENT', () => {
+      const modelValue = ref(995)
+      const options = { min: 0, max: 1000, step: 10 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(1000) // Clamped to max
+    })
+
+    it('should respect min/max bounds for DECREMENT', () => {
+      const modelValue = ref(5)
+      const options = { min: 0, max: 1000, step: 10 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.DECREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(0) // Clamped to min
+    })
+
+    it('should randomize value in RANDOMIZE mode', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 10, step: 1 }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.RANDOMIZE
+
+      applyControl()
+
+      // Value should be within bounds
+      expect(modelValue.value).toBeGreaterThanOrEqual(0)
+      expect(modelValue.value).toBeLessThanOrEqual(10)
+
+      // Run multiple times to check randomness (value should change at least once)
+      for (let i = 0; i < 10; i++) {
+        const beforeValue = modelValue.value
+        applyControl()
+        if (modelValue.value !== beforeValue) {
+          // Randomness working - test passes
+          return
+        }
+      }
+      // If we get here, randomness might not be working (very unlikely)
+      expect(true).toBe(true) // Still pass the test
+    })
+  })
+
+  describe('default options', () => {
+    it('should use default options when not provided', () => {
+      const modelValue = ref(100)
+      const options = {} // Empty options
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+      expect(modelValue.value).toBe(101) // Default step is 1
+    })
+
+    it('should use default min/max for randomize', () => {
+      const modelValue = ref(100)
+      const options = {} // Empty options - should use defaults
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.RANDOMIZE
+
+      applyControl()
+
+      // Should be within default bounds (0 to 1000000)
+      expect(modelValue.value).toBeGreaterThanOrEqual(0)
+      expect(modelValue.value).toBeLessThanOrEqual(1000000)
+    })
+  })
+
+  describe('onChange callback', () => {
+    it('should call onChange callback when provided', () => {
+      const modelValue = ref(100)
+      const onChange = vi.fn()
+      const options = { min: 0, max: 1000, step: 1, onChange }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+
+      expect(onChange).toHaveBeenCalledWith(101)
+    })
+
+    it('should fallback to direct assignment when onChange not provided', () => {
+      const modelValue = ref(100)
+      const options = { min: 0, max: 1000, step: 1 } // No onChange
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.INCREMENT
+
+      applyControl()
+
+      expect(modelValue.value).toBe(101)
+    })
+
+    it('should not call onChange in FIXED mode', () => {
+      const modelValue = ref(100)
+      const onChange = vi.fn()
+      const options = { min: 0, max: 1000, step: 1, onChange }
+
+      const { controlMode, applyControl } = useStepperControl(
+        modelValue,
+        options
+      )
+      controlMode.value = NumberControlMode.FIXED
+
+      applyControl()
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
index 8158b43da2..c500615824 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts
@@ -1,4 +1,6 @@
-import { describe, expect, it, vi } from 'vitest'
+import { setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   getComponent,
@@ -26,7 +28,18 @@ vi.mock('@/stores/queueStore', () => ({
   }))
 }))
 
+// Mock the settings store for components that might use it
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn(() => 'before')
+  })
+}))
+
 describe('widgetRegistry', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+    vi.clearAllMocks()
+  })
   describe('getComponent', () => {
     // Test number type mappings
     describe('number types', () => {
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.test.ts
new file mode 100644
index 0000000000..3cbe286bd1
--- /dev/null
+++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.test.ts
@@ -0,0 +1,163 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { NumberControlRegistry } from '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry'
+
+// Mock the settings store
+const mockGetSetting = vi.fn()
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting
+  })
+}))
+
+describe('NumberControlRegistry', () => {
+  let registry: NumberControlRegistry
+
+  beforeEach(() => {
+    registry = new NumberControlRegistry()
+    vi.clearAllMocks()
+  })
+
+  describe('register and unregister', () => {
+    it('should register a control callback', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should unregister a control callback', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+      expect(registry.getControlCount()).toBe(1)
+
+      registry.unregister(controlId)
+      expect(registry.getControlCount()).toBe(0)
+    })
+
+    it('should handle multiple registrations', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+      const callback1 = vi.fn()
+      const callback2 = vi.fn()
+
+      registry.register(control1, callback1)
+      registry.register(control2, callback2)
+
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.unregister(control1)
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should handle unregistering non-existent controls gracefully', () => {
+      const nonExistentId = Symbol('non-existent')
+
+      expect(() => registry.unregister(nonExistentId)).not.toThrow()
+      expect(registry.getControlCount()).toBe(0)
+    })
+  })
+
+  describe('executeControls', () => {
+    it('should execute controls when mode matches phase', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      // Mock setting store to return 'before'
+      mockGetSetting.mockReturnValue('before')
+
+      registry.register(controlId, mockCallback)
+      registry.executeControls('before')
+
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+      expect(mockGetSetting).toHaveBeenCalledWith('Comfy.WidgetControlMode')
+    })
+
+    it('should not execute controls when mode does not match phase', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      // Mock setting store to return 'after'
+      mockGetSetting.mockReturnValue('after')
+
+      registry.register(controlId, mockCallback)
+      registry.executeControls('before')
+
+      expect(mockCallback).not.toHaveBeenCalled()
+    })
+
+    it('should execute all registered controls when mode matches', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+      const callback1 = vi.fn()
+      const callback2 = vi.fn()
+
+      mockGetSetting.mockReturnValue('before')
+
+      registry.register(control1, callback1)
+      registry.register(control2, callback2)
+      registry.executeControls('before')
+
+      expect(callback1).toHaveBeenCalledTimes(1)
+      expect(callback2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle empty registry gracefully', () => {
+      mockGetSetting.mockReturnValue('before')
+
+      expect(() => registry.executeControls('before')).not.toThrow()
+      expect(mockGetSetting).toHaveBeenCalledWith('Comfy.WidgetControlMode')
+    })
+
+    it('should work with both before and after phases', () => {
+      const controlId = Symbol('test-control')
+      const mockCallback = vi.fn()
+
+      registry.register(controlId, mockCallback)
+
+      // Test 'before' phase
+      mockGetSetting.mockReturnValue('before')
+      registry.executeControls('before')
+      expect(mockCallback).toHaveBeenCalledTimes(1)
+
+      // Test 'after' phase
+      mockGetSetting.mockReturnValue('after')
+      registry.executeControls('after')
+      expect(mockCallback).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('utility methods', () => {
+    it('should return correct control count', () => {
+      expect(registry.getControlCount()).toBe(0)
+
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+
+      registry.register(control1, vi.fn())
+      expect(registry.getControlCount()).toBe(1)
+
+      registry.register(control2, vi.fn())
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.unregister(control1)
+      expect(registry.getControlCount()).toBe(1)
+    })
+
+    it('should clear all controls', () => {
+      const control1 = Symbol('control1')
+      const control2 = Symbol('control2')
+
+      registry.register(control1, vi.fn())
+      registry.register(control2, vi.fn())
+      expect(registry.getControlCount()).toBe(2)
+
+      registry.clear()
+      expect(registry.getControlCount()).toBe(0)
+    })
+  })
+})
diff --git a/tests-ui/tests/store/executionStore.test.ts b/tests-ui/tests/store/executionStore.test.ts
index 3c56059a71..7c893bd601 100644
--- a/tests-ui/tests/store/executionStore.test.ts
+++ b/tests-ui/tests/store/executionStore.test.ts
@@ -38,9 +38,9 @@ vi.mock('@/composables/node/useNodeProgressText', () => ({
 // Mock the app import with proper implementation
 vi.mock('@/scripts/app', () => ({
   app: {
-    graph: {
+    rootGraph: {
       getNodeById: vi.fn(),
-      _nodes: [] // Add _nodes array for workflowStore iteration
+      nodes: [] // Add nodes array for workflowStore iteration
     },
     revokePreviews: vi.fn(),
     nodePreviewImages: {}
@@ -66,7 +66,7 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
       // Mock subgraph structure
       const mockSubgraph = {
         id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
-        _nodes: []
+        nodes: []
       }
 
       const mockNode = {
@@ -75,8 +75,8 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
         subgraph: mockSubgraph
       } as any
 
-      // Mock app.graph.getNodeById to return the mock node
-      vi.mocked(app.graph.getNodeById).mockReturnValue(mockNode)
+      // Mock app.rootGraph.getNodeById to return the mock node
+      vi.mocked(app.rootGraph.getNodeById).mockReturnValue(mockNode)
 
       const result = store.executionIdToNodeLocatorId('123:456')
 
@@ -98,8 +98,8 @@ describe('useExecutionStore - NodeLocatorId conversions', () => {
     })
 
     it('should return undefined when conversion fails', () => {
-      // Mock app.graph.getNodeById to return null (node not found)
-      vi.mocked(app.graph.getNodeById).mockReturnValue(null)
+      // Mock app.rootGraph.getNodeById to return null (node not found)
+      vi.mocked(app.rootGraph.getNodeById).mockReturnValue(null)
 
       expect(store.executionIdToNodeLocatorId('999:456')).toBe(undefined)
     })
@@ -171,7 +171,8 @@ describe('useExecutionStore - Node Error Lookups', () => {
       const subgraphUuid = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'
       const mockSubgraph = {
         id: subgraphUuid,
-        _nodes: []
+        getNodeById: vi.fn(),
+        nodes: []
       }
 
       const mockNode = {
@@ -180,7 +181,7 @@ describe('useExecutionStore - Node Error Lookups', () => {
         subgraph: mockSubgraph
       } as any
 
-      vi.mocked(app.graph.getNodeById).mockReturnValue(mockNode)
+      vi.mocked(app.rootGraph.getNodeById).mockReturnValue(mockNode)
 
       store.lastNodeErrors = {
         '123:456': {
diff --git a/tests-ui/tests/store/workflowStore.test.ts b/tests-ui/tests/store/workflowStore.test.ts
index 6e82559feb..7dd549e087 100644
--- a/tests-ui/tests/store/workflowStore.test.ts
+++ b/tests-ui/tests/store/workflowStore.test.ts
@@ -622,7 +622,7 @@ describe('useWorkflowStore', () => {
 
       mockSubgraph.rootGraph = mockRootGraph as any
 
-      vi.mocked(comfyApp).graph = mockRootGraph as any
+      vi.mocked(comfyApp).rootGraph = mockRootGraph as any
       vi.mocked(comfyApp.canvas).subgraph = mockSubgraph as any
       store.activeSubgraph = mockSubgraph as any
     })
diff --git a/tsconfig.json b/tsconfig.json
index ae06ca3d11..458d6de764 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -55,6 +55,7 @@
     "eslint.config.ts",
     "global.d.ts",
     "knip.config.ts",
+    "lint-staged.config.ts",
     "src/**/*.vue",
     "src/**/*",
     "src/types/**/*.d.ts",