fix: trigger widget callback when model is selected

Fixes model dropdown not properly updating when a model is selected from the model library or dropped onto canvas by calling the widget callback and forcing reactivity.

.github/workflows/ci-shell-validation.yaml

@@ -1,26 +0,0 @@
-# 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

.github/workflows/pr-backport.yaml

@@ -16,10 +16,6 @@ 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: >

.github/workflows/pr-update-playwright-expectations.yaml

@@ -124,16 +124,12 @@ 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 (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 )
+          # Get list of changed snapshot files
+          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
 
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
@@ -155,11 +151,6 @@ 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
@@ -270,19 +261,11 @@ jobs:
           echo "CHANGES SUMMARY"
           echo "=========================================="
           echo ""
-          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
+          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"
 
       - name: Commit updated expectations
         id: commit
@@ -290,7 +273,7 @@ jobs:
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
 
-          if [ -z "$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)" ]; then
+          if git diff --quiet browser_tests/; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0

.oxlintrc.json

@@ -2,98 +2,25 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    ".nx/*",
+    "components.d.ts",
+    "lint-staged.config.js",
+    "vitest.setup.ts",
     "**/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",
-    "test-results/*",
-    "vitest.setup.ts"
-  ],
-  "plugins": [
-    "eslint",
-    "import",
-    "oxc",
-    "typescript",
-    "unicorn",
-    "vitest",
-    "vue"
+    "src/types/vue-shim.d.ts"
   ],
   "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",
     "no-useless-rename": "off",
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/no-duplicates": "error",
-    "import/consistent-type-specifier-style": [
-      "error",
-      "prefer-top-level"
-    ],
-    "jest/expect-expect": "off",
-    "jest/no-conditional-expect": "off",
-    "jest/no-disabled-tests": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-title": "off",
     "typescript/no-this-alias": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
@@ -112,18 +39,6 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "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"
-      }
-    }
-  ]
+    "vue/no-import-compiler-macros": "error"
+  }
 }

.stylelintrc.json

@@ -12,9 +12,6 @@
     "declaration-property-value-no-unknown": [
       true,
       {
-        "typesSyntax": {
-          "radial-gradient()": "| <any-value>"
-        },
         "ignoreProperties": {
           "speak": ["none"],
           "app-region": ["drag", "no-drag"],
@@ -59,7 +56,10 @@
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind"]
+        "ignoreFunctions": [
+          "theme",
+          "v-bind"
+        ]
       }
     ]
   },

apps/desktop-ui/package.json

@@ -87,8 +87,6 @@
     }
   },
   "scripts": {
-    "lint": "nx run @comfyorg/desktop-ui:lint",
-    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
   },

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -40,8 +40,7 @@
 <script setup lang="ts">
 import type { PassThrough } from '@primevue/core'
 import Button from 'primevue/button'
-import Step from 'primevue/step'
-import type { StepPassThroughOptions } from 'primevue/step'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
 import StepList from 'primevue/steplist'
 
 defineProps<{

apps/desktop-ui/src/i18n.ts

@@ -155,14 +155,12 @@ export async function loadLocale(locale: string): Promise<void> {
 }
 
 // Only include English in the initial bundle
-const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings)
+}
 
 // Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof enMessages
-
-const messages: Record<string, LocaleMessages> = {
-  en: enMessages
-}
+type LocaleMessages = typeof messages.en
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2

apps/desktop-ui/src/utils/refUtil.ts

@@ -1,6 +1,5 @@
 import { useTimeout } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import { type Ref, computed, ref, watch } from 'vue'
 
 /**
  * Vue boolean ref (writable computed) with one difference: when set to `true` it stays that way for at least {@link minDuration}.

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -29,8 +29,7 @@ import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { useRoute } from 'vue-router'
 
-import { getDialog } from '@/constants/desktopDialogs'
-import type { DialogAction } from '@/constants/desktopDialogs'
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
 import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -5,7 +5,7 @@
       <img
         class="sad-girl"
         src="/assets/images/sad_girl.png"
-        :alt="$t('notSupported.illustrationAlt')"
+        alt="Sad girl illustration"
       />
 
       <div class="no-drag sad-text flex items-center">

browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json

@@ -1,150 +0,0 @@
-{
-  "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
-}

browser_tests/fixtures/ComfyPage.ts

@@ -126,20 +126,6 @@ class ConfirmDialog {
     const loc = this[locator]
     await expect(loc).toBeVisible()
     await loc.click()
-
-    // Wait for the dialog mask to disappear after confirming
-    const mask = this.page.locator('.p-dialog-mask')
-    const count = await mask.count()
-    if (count > 0) {
-      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
-    }
-
-    // Wait for workflow service to finish if it's busy
-    await this.page.waitForFunction(
-      () => window['app']?.extensionManager?.workflow?.isBusy === false,
-      undefined,
-      { timeout: 3000 }
-    )
   }
 }
 
@@ -256,9 +242,6 @@ export class ComfyPage {
     await this.page.evaluate(async () => {
       await window['app'].extensionManager.workflow.syncWorkflows()
     })
-
-    // Wait for Vue to re-render the workflow list
-    await this.nextFrame()
   }
 
   async setupUser(username: string) {
@@ -585,15 +568,9 @@ export class ComfyPage {
       fileName?: string
       url?: string
       dropPosition?: Position
-      waitForUpload?: boolean
     } = {}
   ) {
-    const {
-      dropPosition = { x: 100, y: 100 },
-      fileName,
-      url,
-      waitForUpload = false
-    } = options
+    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
 
     if (!fileName && !url)
       throw new Error('Must provide either fileName or url')
@@ -630,14 +607,6 @@ 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()
@@ -704,17 +673,12 @@ export class ComfyPage {
       }
     }, evaluateParams)
 
-    // Wait for file upload to complete
-    if (uploadResponsePromise) {
-      await uploadResponsePromise
-    }
-
     await this.nextFrame()
   }
 
   async dragAndDropFile(
     fileName: string,
-    options: { dropPosition?: Position; waitForUpload?: boolean } = {}
+    options: { dropPosition?: Position } = {}
   ) {
     return this.dragAndDropExternalResource({ fileName, ...options })
   }

browser_tests/fixtures/components/SidebarTab.ts

@@ -137,13 +137,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
     await this.page.keyboard.type(newName)
     await this.page.keyboard.press('Enter')
-
-    // Wait for workflow service to finish renaming
-    await this.page.waitForFunction(
-      () => !window['app']?.extensionManager?.workflow?.isBusy,
-      undefined,
-      { timeout: 3000 }
-    )
   }
 
   async insertWorkflow(locator: Locator) {

browser_tests/fixtures/components/Topbar.ts

@@ -92,26 +92,9 @@ export class Topbar {
     )
     // Wait for the dialog to close.
     await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
-
-    // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
-    // If so, return early to let the test handle the confirmation
-    const confirmationDialog = this.page.locator(
-      '.p-dialog:has-text("Overwrite")'
-    )
-    if (await confirmationDialog.isVisible()) {
-      return
-    }
   }
 
   async openTopbarMenu() {
-    // If menu is already open, close it first to reset state
-    const isAlreadyOpen = await this.menuLocator.isVisible()
-    if (isAlreadyOpen) {
-      // Click outside the menu to close it properly
-      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
-      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
-    }
-
     await this.menuTrigger.click()
     await this.menuLocator.waitFor({ state: 'visible' })
     return this.menuLocator
@@ -179,36 +162,15 @@ export class Topbar {
 
     await topLevelMenu.hover()
 
-    // Hover over top-level menu with retry logic for flaky submenu appearance
-    const submenu = this.getVisibleSubmenu()
-    try {
-      await submenu.waitFor({ state: 'visible', timeout: 1000 })
-    } catch {
-      // Click outside to reset, then reopen menu
-      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
-      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
-      await this.menuTrigger.click()
-      await this.menuLocator.waitFor({ state: 'visible' })
-      // Re-hover on top-level menu to trigger submenu
-      await topLevelMenu.hover()
-      await submenu.waitFor({ state: 'visible', timeout: 1000 })
-    }
-
     let currentMenu = topLevelMenu
     for (let i = 1; i < path.length; i++) {
       const commandName = path[i]
-      const menuItem = submenu
-        .locator(`.p-tieredmenu-item:has-text("${commandName}")`)
+      const menuItem = currentMenu
+        .locator(
+          `.p-tieredmenu-submenu .p-tieredmenu-item:has-text("${commandName}")`
+        )
         .first()
       await menuItem.waitFor({ state: 'visible' })
-
-      // For the last item, click it
-      if (i === path.length - 1) {
-        await menuItem.click()
-        return
-      }
-
-      // Otherwise, hover to open nested submenu
       await menuItem.hover()
       currentMenu = menuItem
     }

browser_tests/helpers/templates.ts

@@ -1,5 +1,4 @@
 import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
 import path from 'path'
 
 import type {
@@ -9,20 +8,9 @@ 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) {

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -77,7 +77,8 @@ test.describe('Background Image Upload', () => {
 
     // Verify the URL input now has an API URL
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
-    await expect(urlInput).toHaveValue(/^\/api\/view\?.*subfolder=backgrounds/)
+    const inputValue = await urlInput.inputValue()
+    expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
 
     // Verify clear button is now enabled
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')

browser_tests/tests/execution.spec.ts

@@ -36,10 +36,9 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
-    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 })
+
+    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('')
   })
 })

browser_tests/tests/interaction.spec.ts

@@ -306,16 +306,14 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: numberWidgetPos
     })
-    const legacyPrompt = comfyPage.page.locator('.graphdialog')
-    await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(legacyPrompt).toBeHidden()
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
   })
 
   test('Can close prompt dialog with canvas click (text widget)', async ({
@@ -329,16 +327,18 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: textWidgetPos
     })
-    const legacyPrompt = comfyPage.page.locator('.graphdialog')
-    await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-opened-text.png'
+    )
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(legacyPrompt).toBeHidden()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-closed-text.png'
+    )
   })
 
   test('Can double click node title to edit', async ({ comfyPage }) => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -260,12 +260,6 @@ 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(

browser_tests/tests/remoteWidgets.spec.ts

@@ -212,12 +212,8 @@ test.describe('Remote COMBO Widget', () => {
       // Click on the canvas to trigger widget refresh
       await comfyPage.page.mouse.click(400, 300)
 
-      await expect(async () => {
-        const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
-        expect(refreshedOptions).not.toEqual(initialOptions)
-      }).toPass({
-        timeout: 2_000
-      })
+      const refreshedOptions = await getWidgetOptions(comfyPage, nodeName)
+      expect(refreshedOptions).not.toEqual(initialOptions)
     })
 
     test('does not refresh when TTL is not set', async ({ comfyPage }) => {
@@ -325,12 +321,8 @@ test.describe('Remote COMBO Widget', () => {
       await clickRefreshButton(comfyPage, nodeName)
 
       // Verify the selected value of the widget is the first option in the refreshed list
-      await expect(async () => {
-        const refreshedValue = await getWidgetValue(comfyPage, nodeName)
-        expect(refreshedValue).toEqual('new first option')
-      }).toPass({
-        timeout: 2_000
-      })
+      const refreshedValue = await getWidgetValue(comfyPage, nodeName)
+      expect(refreshedValue).toEqual('new first option')
     })
   })
 

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -290,20 +290,16 @@ test.describe('Node library sidebar', () => {
     await comfyPage.page.keyboard.insertText('bar')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.nextFrame()
-    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
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+    ).toEqual(['bar/'])
+    expect(
+      await comfyPage.getSetting('Comfy.NodeLibrary.BookmarksCustomization')
+    ).toEqual({
+      'bar/': {
+        icon: 'pi-folder',
+        color: '#007bff'
+      }
     })
   })
 

browser_tests/tests/sidebar/workflows.spec.ts

@@ -340,11 +340,6 @@ test.describe('Workflows sidebar', () => {
 
     await comfyPage.menu.workflowsTab.open()
 
-    // Wait for workflow to appear in Browse section after sync
-    const workflowItem =
-      comfyPage.menu.workflowsTab.getPersistedItem('workflow1.json')
-    await expect(workflowItem).toBeVisible({ timeout: 3000 })
-
     const nodeCount = await comfyPage.getGraphNodesCount()
 
     // Get the bounding box of the canvas element
@@ -363,10 +358,6 @@ test.describe('Workflows sidebar', () => {
       '#graph-canvas',
       { targetPosition }
     )
-
-    // Wait for nodes to be inserted after drag-drop with retryable assertion
-    await expect
-      .poll(() => comfyPage.getGraphNodesCount(), { timeout: 3000 })
-      .toBe(nodeCount * 2)
+    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
   })
 })

browser_tests/tests/subgraph.spec.ts

@@ -329,15 +329,6 @@ 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', () => {

browser_tests/tests/templates.spec.ts

@@ -188,19 +188,22 @@ test.describe('Templates', () => {
       .locator('header')
       .filter({ hasText: 'Templates' })
 
-    await comfyPage.templates.waitForMinimumCardCount(1)
+    const cardCount = await comfyPage.page
+      .locator('[data-testid^="template-workflow-"]')
+      .count()
+    expect(cardCount).toBeGreaterThan(0)
     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)
-    await comfyPage.templates.waitForMinimumCardCount(1)
+    expect(cardCount).toBeGreaterThan(0)
     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)
-    await comfyPage.templates.waitForMinimumCardCount(1)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })

browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts

@@ -1,144 +0,0 @@
-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'
-    )
-  })
-})

browser_tests/tests/widget.spec.ts

@@ -252,8 +252,7 @@ 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 },
-      waitForUpload: true
+      dropPosition: { x, y }
     })
 
     // Expect the filename combo value to be updated

eslint.config.ts

@@ -15,7 +15,6 @@ import {
   parser as tseslintParser
 } from 'typescript-eslint'
 import vueParser from 'vue-eslint-parser'
-import path from 'node:path'
 
 const extraFileExtensions = ['.vue']
 
@@ -62,20 +61,16 @@ export default defineConfig([
   {
     ignores: [
       '.i18nrc.cjs',
-      '.nx/*',
+      'components.d.ts',
+      'lint-staged.config.js',
+      'vitest.setup.ts',
       '**/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',
-      'test-results/*',
-      'vitest.setup.ts'
+      'src/types/vue-shim.d.ts'
     ]
   },
   {
@@ -107,17 +102,24 @@ 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'],
-  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.recommended,
-  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.typescript,
   {
     plugins: {
       'unused-imports': unusedImports,
-      // @ts-expect-error Type incompatibility in i18n plugin
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore Type incompatibility in i18n plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
@@ -132,24 +134,59 @@ export default defineConfig([
           allowInterfaces: 'always'
         }
       ],
+      'import-x/consistent-type-specifier-style': ['error', 'prefer-top-level'],
       '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)?:/'],
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/match-component-import-name': 'error',
+      /* Toggle on to do additional until we can clean up existing violations.
+      'vue/no-unused-emit-declarations': 'error',
       'vue/no-unused-properties': 'error',
       'vue/no-unused-refs': 'error',
-      'vue/no-useless-mustaches': 'error',
-      'vue/no-useless-v-bind': 'error',
-      'vue/no-unused-emit-declarations': 'error',
       'vue/no-use-v-else-with-v-for': 'error',
-      'vue/one-component-per-file': 'error',
+      'vue/no-useless-v-bind': 'error',
+      // */
+      'vue/one-component-per-file': 'off', // TODO: fix
       'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
-
+      // Restrict deprecated PrimeVue components
+      'no-restricted-imports': [
+        'error',
+        {
+          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',
@@ -237,6 +274,12 @@ export default defineConfig([
       ]
     }
   },
+  {
+    files: ['**/*.{test,spec,stories}.ts', '**/*.stories.vue'],
+    rules: {
+      'no-console': 'off'
+    }
+  },
   {
     files: ['scripts/**/*.js'],
     languageOptions: {
@@ -249,18 +292,6 @@ export default defineConfig([
       'no-console': 'off'
     }
   },
-
   // Turn off ESLint rules that are already handled by oxlint
-  ...oxlint.buildFromOxlintConfigFile(
-    path.resolve(import.meta.dirname, '.oxlintrc.json')
-  ),
-  {
-    rules: {
-      'import-x/default': 'off',
-      'import-x/export': 'off',
-      'import-x/namespace': 'off',
-      'import-x/no-duplicates': 'off',
-      'import-x/consistent-type-specifier-style': 'off'
-    }
-  }
+  ...oxlint.buildFromOxlintConfigFile('./.oxlintrc.json')
 ])

lint-staged.config.js

@@ -0,0 +1,17 @@
+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(' ')}`
+  ]
+}

lint-staged.config.ts

@@ -1,21 +0,0 @@
-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}`
-  ]
-}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.35.4",
+  "version": "1.35.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -34,7 +34,6 @@
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
     "lint": "oxlint src --type-aware && eslint src --cache",
-    "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",
     "preinstall": "pnpm dlx only-allow pnpm",
@@ -47,7 +46,6 @@
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 pnpm test:browser",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
-    "typecheck:desktop": "nx run @comfyorg/desktop-ui:typecheck",
     "zipdist": "node scripts/zipdist.js",
     "clean": "nx reset"
   },

packages/design-system/src/css/style.css

@@ -98,6 +98,7 @@
   --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);
@@ -260,8 +261,6 @@
   --component-node-widget-background-selected: var(--secondary-background-selected);
   --component-node-widget-background-disabled: var(--color-alpha-ash-500-20);
   --component-node-widget-background-highlighted: var(--color-ash-500);
-  --component-node-widget-promoted: var(--color-purple-700);
-  --component-node-widget-advanced: var(--color-azure-400);
 
   /* Default UI element color palette variables */
    --palette-contrast-mix-color: #fff;
@@ -385,8 +384,6 @@
   --component-node-widget-background-selected: var(--color-charcoal-100);
   --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30);
   --component-node-widget-background-highlighted: var(--color-graphite-400);
-  --component-node-widget-promoted: var(--color-purple-700);
-  --component-node-widget-advanced: var(--color-azure-600);
 
   --modal-card-background: var(--secondary-background);
   --modal-card-background-hovered: var(--secondary-background-hover);
@@ -437,11 +434,7 @@
   --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);
@@ -497,8 +490,6 @@
   --color-component-node-widget-background-selected: var(--component-node-widget-background-selected);
   --color-component-node-widget-background-disabled: var(--component-node-widget-background-disabled);
   --color-component-node-widget-background-highlighted: var(--component-node-widget-background-highlighted);
-  --color-component-node-widget-promoted: var(--component-node-widget-promoted);
-  --color-component-node-widget-advanced: var(--component-node-widget-advanced);
 
   /* Semantic tokens */
   --color-base-foreground: var(--base-foreground);
@@ -1328,15 +1319,6 @@ 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 {

packages/registry-types/src/comfyRegistryTypes.ts

@@ -1945,40 +1945,6 @@ 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;
@@ -3910,7 +3876,7 @@ export interface components {
          * @description The subscription tier level
          * @enum {string}
          */
-        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
+        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO";
         FeaturesResponse: {
             /**
              * @description The conversion rate for partner nodes
@@ -5130,71 +5096,6 @@ 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;
@@ -10164,7 +10065,7 @@ export interface components {
         };
         BytePlusImageGenerationRequest: {
             /** @enum {string} */
-            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828" | "seedream-4-5-251128";
+            model: "seedream-3-0-t2i-250415" | "seededit-3-0-i2i-250628" | "seedream-4-0-250828";
             /** @description Text description for image generation or transformation */
             prompt: string;
             /**
@@ -10269,10 +10170,10 @@ export interface components {
         };
         BytePlusVideoGenerationRequest: {
             /**
-             * @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
+             * @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
              * @enum {string}
              */
-            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428" | "seedance-1-0-pro-fast-251015";
+            model: "seedance-1-0-pro-250528" | "seedance-1-0-lite-t2v-250428" | "seedance-1-0-lite-i2v-250428";
             /** @description The input content for the model to generate a video */
             content: components["schemas"]["BytePlusVideoGenerationContent"][];
             /**
@@ -14046,15 +13947,6 @@ 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: {
@@ -18453,198 +18345,6 @@ 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?: {

pnpm-workspace.yaml

@@ -5,7 +5,7 @@ packages:
 catalog:
   '@alloc/quick-lru': ^5.2.0
   '@comfyorg/comfyui-electron-types': 0.5.5
-  '@eslint/js': ^9.39.1
+  '@eslint/js': ^9.35.0
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
   '@iconify/tailwind': ^1.1.3
@@ -17,7 +17,7 @@ catalog:
   '@nx/vite': 21.4.1
   '@pinia/testing': ^0.1.5
   '@playwright/test': ^1.52.0
-  '@prettier/plugin-oxc': ^0.1.3
+  '@prettier/plugin-oxc': ^0.0.4
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -48,15 +48,15 @@ catalog:
   axios: ^1.8.2
   cross-env: ^10.1.0
   dotenv: ^16.4.5
-  eslint: ^9.39.1
+  eslint: ^9.34.0
   eslint-config-prettier: ^10.1.8
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
   eslint-plugin-prettier: ^5.5.4
-  eslint-plugin-storybook: ^9.1.16
-  eslint-plugin-unused-imports: ^4.3.0
-  eslint-plugin-vue: ^10.6.2
+  eslint-plugin-storybook: ^9.1.6
+  eslint-plugin-unused-imports: ^4.2.0
+  eslint-plugin-vue: ^10.4.0
   firebase: ^11.6.0
   globals: ^15.9.0
   happy-dom: ^15.11.0
@@ -64,29 +64,29 @@ catalog:
   jiti: 2.4.2
   jsdom: ^26.1.0
   knip: ^5.62.0
-  lint-staged: ^15.5.2
+  lint-staged: ^15.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 21.4.1
-  oxlint: ^1.32.0
-  oxlint-tsgolint: ^0.8.4
+  oxlint: ^1.25.0
+  oxlint-tsgolint: ^0.4.0
   picocolors: ^1.1.1
   pinia: ^2.1.7
   postcss-html: ^1.8.0
-  prettier: ^3.7.4
+  prettier: ^3.6.2
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
   rollup-plugin-visualizer: ^6.0.4
-  storybook: ^9.1.16
-  stylelint: ^16.26.1
+  storybook: ^9.1.6
+  stylelint: ^16.24.0
   tailwindcss: ^4.1.12
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
   typegpu: ^0.8.2
-  typescript: ^5.9.3
-  typescript-eslint: ^8.49.0
+  typescript: ^5.9.2
+  typescript-eslint: ^8.44.0
   unplugin-icons: ^0.22.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^0.28.0
@@ -100,7 +100,7 @@ catalog:
   vue-eslint-parser: ^10.2.0
   vue-i18n: ^9.14.3
   vue-router: ^4.4.3
-  vue-tsc: ^3.1.8
+  vue-tsc: ^3.0.7
   vuefire: ^3.2.1
   yjs: ^13.6.27
   zod: ^3.23.8

scripts/cicd/check-shell.sh

@@ -1,19 +0,0 @@
-#!/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[@]}"

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="${browser//./-}"
+    sanitized_browser=$(echo "$browser" | sed 's/\./-/g')
     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='|' read -r -a counts_array <<< "$all_counts"
-    for counts_json in "${counts_array[@]}"; do
-        [ -z "$counts_json" ] && continue
+    IFS='|'
+    set -- $all_counts
+    for counts_json; do
         if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
             # Parse JSON counts using simple grep/sed if jq is not available
             if command -v jq > /dev/null 2>&1; then
@@ -324,12 +324,13 @@ $status_icon **$status_text**
     
     # Add browser results with individual counts
     i=0
-    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]:-}"
+    IFS='|'
+    set -- $all_counts
+    for counts_json; do
+        # Get browser name
+        browser=$(echo "$BROWSERS" | cut -d' ' -f$((i + 1)))
+        # Get URL at position i
+        url=$(echo "$urls" | cut -d' ' -f$((i + 1)))
         
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
             # Parse individual browser counts
@@ -373,4 +374,4 @@ $status_icon **$status_text**
 🎉 Click on the links above to view detailed test results for each browser configuration."
     
     post_comment "$comment"
-fi
+fi

src/components/actionbar/ComfyActionbar.vue

@@ -28,9 +28,8 @@
             )
           "
         />
-        <Suspense @resolve="comfyRunButtonResolved">
-          <ComfyRunButton />
-        </Suspense>
+
+        <ComfyRunButton />
         <IconButton
           v-tooltip.bottom="cancelJobTooltipConfig"
           type="transparent"
@@ -57,7 +56,7 @@ import {
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
 import Panel from 'primevue/panel'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
@@ -140,14 +139,7 @@ const 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()
-}
-
+onMounted(setInitialPosition)
 watch(visible, async (newVisible) => {
   if (newVisible) {
     await nextTick(setInitialPosition)

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -58,7 +58,7 @@ const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -55,6 +55,7 @@ import { normalizeI18nKey } from '@/utils/formatUtil'
 const { t } = useI18n()
 
 const { subcategories } = defineProps<{
+  commands: ComfyCommandImpl[]
   subcategories: Record<string, ComfyCommandImpl[]>
 }>()
 

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -21,7 +21,7 @@
       class="icon-[lucide--triangle-alert] text-warning-background"
     />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
-    <Tag v-if="item.isBlueprint" value="Blueprint" severity="primary" />
+    <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
   </a>
   <Menu
@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
-  graphHasMissingNodes(app.rootGraph, nodeDefStore.nodeDefsByName)
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
 )
 
 const { t } = useI18n()

src/components/common/EditableText.vue

@@ -41,7 +41,7 @@ const {
   inputAttrs?: Record<string, string>
 }>()
 
-const emit = defineEmits(['edit', 'cancel'])
+const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
 const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
 const isCanceling = ref(false)

src/components/common/FormColorPicker.vue

@@ -11,6 +11,7 @@ import InputText from 'primevue/inputtext'
 
 const modelValue = defineModel<string>('modelValue')
 defineProps<{
+  defaultValue?: string
   label?: string
 }>()
 

src/components/common/SearchBox.vue

@@ -1,93 +1,84 @@
 <template>
-  <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>
+    <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>
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import { cn } from '@comfyorg/tailwind-utils'
-import { watchDebounced } from '@vueuse/core'
+import { debounce } from 'es-toolkit/compat'
 import Button from 'primevue/button'
+import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import { computed, ref } from 'vue'
+import { 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,
-  showBorder = false,
-  size = 'md',
-  class: customClass
+  autofocus = false
 } = 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({
@@ -96,27 +87,20 @@ defineExpose({
   }
 })
 
-watchDebounced(
-  modelValue,
-  (value: string) => {
-    emit('search', value, filters)
-  },
-  { debounce: debounceTime }
-)
+const emitSearch = debounce((value: string) => {
+  emit('search', value, filters)
+}, debounceTime)
 
-const wrapperStyle = computed(() => {
-  if (showBorder) {
-    return cn('rounded p-2 border border-solid border-border-default')
-  }
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+  emitSearch(target.value)
+}
 
-  // 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)
-})
+const clearSearch = () => {
+  emit('update:modelValue', '')
+  emitSearch('')
+}
 </script>
 
 <style scoped>

src/components/common/UserCredit.vue

@@ -7,12 +7,7 @@
     <Skeleton width="8rem" height="2rem" />
   </div>
   <div v-else class="flex items-center gap-1">
-    <Tag
-      v-if="!showCreditsOnly"
-      severity="secondary"
-      rounded
-      class="p-1 text-amber-400"
-    >
+    <Tag severity="secondary" rounded class="p-1 text-amber-400">
       <template #icon>
         <i
           :class="
@@ -23,9 +18,7 @@
         />
       </template>
     </Tag>
-    <div :class="textClass">
-      {{ showCreditsOnly ? formattedCreditsOnly : formattedBalance }}
-    </div>
+    <div :class="textClass">{{ formattedBalance }}</div>
   </div>
 </template>
 
@@ -39,9 +32,8 @@ import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
-const { textClass, showCreditsOnly } = defineProps<{
+const { textClass } = defineProps<{
   textClass?: string
-  showCreditsOnly?: boolean
 }>()
 
 const authStore = useFirebaseAuthStore()
@@ -58,15 +50,4 @@ const formattedBalance = computed(() => {
   })
   return `${amount} ${t('credits.credits')}`
 })
-
-const formattedCreditsOnly = computed(() => {
-  // Backend returns cents despite the *_micros naming convention.
-  const cents = authStore.balance?.amount_micros ?? 0
-  const amount = formatCreditsFromCents({
-    cents,
-    locale: locale.value,
-    numberOptions: { minimumFractionDigits: 0, maximumFractionDigits: 0 }
-  })
-  return amount
-})
 </script>

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'

src/components/dialog/content/ErrorDialogContent.vue

@@ -5,7 +5,7 @@
       icon="pi pi-exclamation-circle"
       :title="title"
       :message="error.exceptionMessage"
-      text-class="break-words max-w-[60vw]"
+      :text-class="'break-words max-w-[60vw]'"
     />
     <template v-if="error.extensionFile">
       <span>{{ t('errorDialog.extensionFileHint') }}:</span>
@@ -128,7 +128,7 @@ onMounted(async () => {
     reportContent.value = generateErrorReport({
       systemStats: systemStatsStore.systemStats!,
       serverLogs: logs,
-      workflow: app.rootGraph.serialize(),
+      workflow: app.graph.serialize(),
       exceptionType: error.exceptionType,
       exceptionMessage: error.exceptionMessage,
       traceback: error.traceback,

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,43 +1,35 @@
 <template>
   <!-- New Credits Design (default) -->
-  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
+  <div
+    v-if="useNewDesign"
+    class="flex w-96 flex-col gap-8 p-8 bg-node-component-surface rounded-2xl border border-border-primary"
+  >
     <!-- Header -->
     <div class="flex flex-col gap-4">
-      <h1 class="text-2xl font-semibold text-base-foreground m-0">
-        {{
-          isInsufficientCredits
-            ? $t('credits.topUp.addMoreCreditsToRun')
-            : $t('credits.topUp.addMoreCredits')
-        }}
+      <h1 class="text-2xl font-semibold text-foreground-primary m-0">
+        {{ $t('credits.topUp.addMoreCredits') }}
       </h1>
-      <div v-if="isInsufficientCredits" class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0 w-96">
-          {{ $t('credits.topUp.insufficientWorkflowMessage') }}
-        </p>
-      </div>
-      <div v-else class="flex flex-col gap-2">
-        <p class="text-sm text-muted-foreground m-0">
-          {{ $t('credits.topUp.creditsDescription') }}
-        </p>
-      </div>
+      <p class="text-sm text-foreground-secondary m-0">
+        {{ $t('credits.topUp.creditsDescription') }}
+      </p>
     </div>
 
     <!-- Current Balance Section -->
     <div class="flex flex-col gap-4">
       <div class="flex items-baseline gap-2">
-        <UserCredit text-class="text-3xl font-bold" show-credits-only />
-        <span class="text-sm text-muted-foreground">{{
+        <UserCredit text-class="text-3xl font-bold" />
+        <span class="text-sm text-foreground-secondary">{{
           $t('credits.creditsAvailable')
         }}</span>
       </div>
-      <div v-if="formattedRenewalDate" class="text-sm text-muted-foreground">
-        {{ $t('credits.refreshes', { date: formattedRenewalDate }) }}
+      <div v-if="refreshDate" class="text-sm text-foreground-secondary">
+        {{ $t('credits.refreshes', { date: refreshDate }) }}
       </div>
     </div>
 
     <!-- Credit Options Section -->
     <div class="flex flex-col gap-4">
-      <span class="text-sm text-muted-foreground">
+      <span class="text-sm text-foreground-secondary">
         {{ $t('credits.topUp.howManyCredits') }}
       </span>
       <div class="flex flex-col gap-2">
@@ -50,7 +42,7 @@
           @select="selectedCredits = option.credits"
         />
       </div>
-      <div class="text-xs text-muted-foreground w-96">
+      <div class="text-xs text-foreground-secondary">
         {{ $t('credits.topUp.templateNote') }}
       </div>
     </div>
@@ -61,8 +53,7 @@
       :loading="loading"
       severity="primary"
       :label="$t('credits.topUp.buy')"
-      :class="['w-full', { 'opacity-30': !selectedCredits || loading }]"
-      :pt="{ label: { class: 'text-primary-foreground' } }"
+      class="w-full"
       @click="handleBuy"
     />
   </div>
@@ -122,11 +113,14 @@ import { useToast } from 'primevue/usetoast'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { creditsToUsd } from '@/base/credits/comfyCredits'
+import {
+  creditsToUsd,
+  formatCredits,
+  formatUsd
+} from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
@@ -138,21 +132,22 @@ interface CreditOption {
 }
 
 const {
+  refreshDate,
   isInsufficientCredits = false,
   amountOptions = [5, 10, 20, 50],
   preselectedAmountOption = 10
 } = defineProps<{
+  refreshDate?: string
   isInsufficientCredits?: boolean
   amountOptions?: number[]
   preselectedAmountOption?: number
 }>()
 
 const { flags } = useFeatureFlags()
-const { formattedRenewalDate } = useSubscription()
 // Use feature flag to determine design - defaults to true (new design)
 const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const authActions = useFirebaseAuthActions()
 const telemetry = useTelemetry()
 const toast = useToast()
@@ -162,20 +157,20 @@ const loading = ref(false)
 
 const creditOptions: CreditOption[] = [
   {
-    credits: 1055, // $5.00
-    description: t('credits.topUp.videosEstimate', { count: 41 })
+    credits: 1000,
+    description: t('credits.topUp.videosEstimate', { count: 100 })
   },
   {
-    credits: 2110, // $10.00
-    description: t('credits.topUp.videosEstimate', { count: 82 })
+    credits: 5000,
+    description: t('credits.topUp.videosEstimate', { count: 500 })
   },
   {
-    credits: 4220, // $20.00
-    description: t('credits.topUp.videosEstimate', { count: 184 })
+    credits: 10000,
+    description: t('credits.topUp.videosEstimate', { count: 1000 })
   },
   {
-    credits: 10550, // $50.00
-    description: t('credits.topUp.videosEstimate', { count: 412 })
+    credits: 20000,
+    description: t('credits.topUp.videosEstimate', { count: 2000 })
   }
 ]
 
@@ -187,6 +182,19 @@ 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)
 

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -3,17 +3,19 @@
     class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
     :class="[
       selected
-        ? 'bg-secondary-background border-2 border-border-default'
-        : 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
+        ? 'bg-surface-secondary border-2 border-primary'
+        : 'bg-surface-tertiary border border-border-primary hover:bg-surface-secondary'
     ]"
     @click="$emit('select')"
   >
-    <span class="text-base font-bold text-base-foreground">
-      {{ formattedCredits }}
-    </span>
-    <span class="text-sm font-normal text-muted-foreground">
-      {{ description }}
-    </span>
+    <div class="flex flex-col">
+      <span class="text-base font-medium text-foreground-primary">
+        {{ formattedCredits }}
+      </span>
+      <span class="text-sm text-foreground-secondary">
+        {{ description }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -36,10 +38,6 @@ defineEmits<{
 const { locale } = useI18n()
 
 const formattedCredits = computed(() => {
-  return formatCredits({
-    value: credits,
-    locale: locale.value,
-    numberOptions: { minimumFractionDigits: 0, maximumFractionDigits: 0 }
-  })
+  return formatCredits({ value: credits, locale: locale.value })
 })
 </script>

src/components/dialog/content/setting/CreditsPanel.vue

@@ -1,6 +1,5 @@
 <template>
   <TabPanel value="Credits" class="credits-container h-full">
-    <!-- Legacy Design -->
     <div class="flex h-full flex-col">
       <h2 class="mb-2 text-2xl font-bold">
         {{ $t('credits.credits') }}

src/components/dialog/content/signin/SignInForm.vue

@@ -60,13 +60,12 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="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>
@@ -75,7 +74,6 @@
 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'
@@ -102,11 +100,11 @@ const emit = defineEmits<{
 
 const emailInputId = 'comfy-org-sign-in-email'
 
-const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
+const onSubmit = (event: FormSubmitEvent) => {
   if (event.valid) {
     emit('submit', event.values as SignInData)
   }
-}, 1_500)
+}
 
 const handleForgotPassword = async (
   email: string,

src/components/dialog/content/signin/SignUpForm.vue

@@ -1,6 +1,5 @@
 <template>
   <Form
-    v-slot="$form"
     class="flex flex-col gap-6"
     :resolver="zodResolver(signUpSchema)"
     @submit="onSubmit"
@@ -29,13 +28,10 @@
     <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>
@@ -44,30 +40,24 @@
 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 = useThrottleFn((event: FormSubmitEvent) => {
+const onSubmit = (event: FormSubmitEvent) => {
   if (event.valid) {
     emit('submit', event.values as SignUpData)
   }
-}, 1_500)
+}
 </script>

src/components/graph/GraphCanvas.vue

@@ -4,6 +4,7 @@
   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"
@@ -159,8 +160,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<{
@@ -270,18 +271,20 @@ watch(
   () => {
     if (!canvasStore.canvas) return
 
-    forEachNode(comfyApp.rootGraph, (n) => {
-      if (!n.widgets) return
+    for (const n of comfyApp.graph.nodes) {
+      if (!n.widgets) continue
       for (const w of n.widgets) {
-        if (!w[IS_CONTROL_WIDGET]) continue
-        updateControlWidgetLabel(w)
-        if (!w.linkedWidgets) continue
-        for (const l of w.linkedWidgets) {
-          updateControlWidgetLabel(l)
+        if (w[IS_CONTROL_WIDGET]) {
+          updateControlWidgetLabel(w)
+          if (w.linkedWidgets) {
+            for (const l of w.linkedWidgets) {
+              updateControlWidgetLabel(l)
+            }
+          }
         }
       }
-    })
-    canvasStore.canvas.setDirty(true)
+    }
+    comfyApp.graph.setDirtyCanvas(true)
   }
 )
 
@@ -331,7 +334,7 @@ watch(
     }
 
     // Force canvas redraw to ensure progress updates are visible
-    canvas.setDirty(true, false)
+    canvas.graph.setDirtyCanvas(true, false)
   },
   { deep: true }
 )
@@ -343,7 +346,7 @@ watch(
   (lastNodeErrors) => {
     if (!comfyApp.graph) return
 
-    forEachNode(comfyApp.rootGraph, (node) => {
+    for (const node of comfyApp.graph.nodes) {
       // Clear existing errors
       for (const slot of node.inputs) {
         delete slot.hasErrors
@@ -353,7 +356,7 @@ watch(
       }
 
       const nodeErrors = lastNodeErrors?.[node.id]
-      if (!nodeErrors) return
+      if (!nodeErrors) continue
 
       const validErrors = nodeErrors.errors.filter(
         (error) => error.extra_info?.input_name !== undefined
@@ -366,9 +369,9 @@ watch(
           node.inputs[inputIndex].hasErrors = true
         }
       })
-    })
+    }
 
-    comfyApp.canvas.setDirty(true, true)
+    comfyApp.canvas.draw(true, true)
   }
 )
 
@@ -462,8 +465,9 @@ onMounted(async () => {
   await workflowPersistence.loadTemplateFromUrlIfPresent()
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
-  const { useReleaseStore } =
-    await import('@/platform/updates/common/releaseStore')
+  const { useReleaseStore } = await import(
+    '@/platform/updates/common/releaseStore'
+  )
   const releaseStore = useReleaseStore()
   void releaseStore.initialize()
 

src/components/graph/GraphCanvasMenu.vue

@@ -37,6 +37,7 @@
       </Button>
 
       <Button
+        ref="zoomButton"
         v-tooltip.top="t('zoomControls.label')"
         severity="secondary"
         :label="t('zoomControls.label')"
@@ -55,6 +56,7 @@
       <div class="h-[27px] w-[1px] self-center bg-node-divider" />
 
       <Button
+        ref="minimapButton"
         v-tooltip.top="minimapTooltip"
         severity="secondary"
         :aria-label="minimapTooltip"