[feat] Add remote config support for model upload and asset update feature flags (#7143)

Feature flags for model upload button and asset update options now check
remote config from `/api/features` first, falling back to websocket
feature flags.

- **What**: Added `model_upload_button_enabled` and
`asset_update_options_enabled` to `RemoteConfig` type
- **What**: Updated feature flag getters to prioritize remote config
over websocket flags
- **Why**: Enables dynamic feature control without requiring websocket
connection, consistent with other feature flags pattern

- Pattern consistency with other remote config feature flags
- Proper fallback behavior when remote config is unavailable

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7143-feat-Add-remote-config-support-for-model-upload-and-asset-update-feature-flags-2bf6d73d3650819cb364f0ab69d77dd0)
by [Unito](https://www.unito.io)

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

.github/workflows/api-update-electron-api-types.yaml

@@ -1,5 +1,5 @@
+# Description: When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Electron API Types'
-description: 'When upstream electron API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   workflow_dispatch:

.github/workflows/api-update-manager-api-types.yaml

@@ -1,5 +1,5 @@
+# Description: When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Manager API Types'
-description: 'When upstream ComfyUI-Manager API is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

.github/workflows/api-update-registry-api-types.yaml

@@ -1,5 +1,5 @@
+# Description: When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo
 name: 'Api: Update Registry API Types'
-description: 'When upstream comfy-api is updated, click dispatch to update the TypeScript type definitions in this repo'
 
 on:
   # Manual trigger

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

@@ -1,5 +1,5 @@
+# Description: Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq
 name: "CI: JSON Validation"
-description: "Validates JSON syntax in all tracked .json files (excluding tsconfig*.json) using jq"
 
 on:
   push:

.github/workflows/ci-lint-format.yaml

@@ -1,5 +1,5 @@
+# Description: Linting and code formatting validation for pull requests
 name: "CI: Lint Format"
-description: "Linting and code formatting validation for pull requests"
 
 on:
   pull_request:

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

@@ -1,5 +1,5 @@
+# Description: Validates Python code in tools/devtools directory
 name: "CI: Python Validation"
-description: "Validates Python code in tools/devtools directory"
 
 on:
   pull_request:

.github/workflows/ci-tests-e2e-forks.yaml

@@ -1,5 +1,5 @@
+# Description: Deploys test results from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests E2E (Deploy for Forks)"
-description: "Deploys test results from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

.github/workflows/ci-tests-e2e.yaml

@@ -1,5 +1,5 @@
+# Description: End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages
 name: "CI: Tests E2E"
-description: "End-to-end testing with Playwright across multiple browsers, deploys test reports to Cloudflare Pages"
 
 on:
   push:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -1,5 +1,5 @@
+# Description: Deploys Storybook previews from forked PRs (forks can't access deployment secrets)
 name: "CI: Tests Storybook (Deploy for Forks)"
-description: "Deploys Storybook previews from forked PRs (forks can't access deployment secrets)"
 
 on:
   workflow_run:

.github/workflows/ci-tests-storybook.yaml

@@ -1,10 +1,9 @@
+# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
 name: "CI: Tests Storybook"
-description: "Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages"
 
 on:
   workflow_dispatch:  # Allow manual triggering
   pull_request:
-    branches: [main]
 
 jobs:
   # Post starting comment for non-forked PRs

.github/workflows/ci-tests-unit.yaml

@@ -1,5 +1,5 @@
+# Description: Unit and component testing with Vitest
 name: "CI: Tests Unit"
-description: "Unit and component testing with Vitest"
 
 on:
   push:

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

@@ -1,5 +1,5 @@
+# Description: Validates YAML syntax and style using yamllint with relaxed rules
 name: "CI: YAML Validation"
-description: "Validates YAML syntax and style using yamllint with relaxed rules"
 
 on:
   push:

.github/workflows/cloud-backport-tag.yaml

@@ -0,0 +1,69 @@
+---
+name: Cloud Backport Tag
+
+on:
+  pull_request:
+    types: ['closed']
+    branches: [cloud/*]
+
+jobs:
+  create-tag:
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'backport')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: read
+
+    steps:
+      - name: Checkout merge commit
+        uses: actions/checkout@v5
+        with:
+          ref: ${{ github.event.pull_request.merge_commit_sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Create tag for cloud backport
+        id: tag
+        run: |
+          set -euo pipefail
+
+          BRANCH="${{ github.event.pull_request.base.ref }}"
+          if [[ ! "$BRANCH" =~ ^cloud/([0-9]+)\.([0-9]+)$ ]]; then
+            echo "::error::Base branch '$BRANCH' is not a cloud/x.y branch"
+            exit 1
+          fi
+
+          MAJOR="${BASH_REMATCH[1]}"
+          MINOR="${BASH_REMATCH[2]}"
+
+          VERSION=$(node -p "require('./package.json').version")
+          if [[ "$VERSION" =~ ^${MAJOR}\.${MINOR}\.([0-9]+)(-.+)?$ ]]; then
+            PATCH="${BASH_REMATCH[1]}"
+            SUFFIX="${BASH_REMATCH[2]:-}"
+          else
+            echo "::error::Version '${VERSION}' does not match cloud branch '${BRANCH}'"
+            exit 1
+          fi
+
+          TAG="cloud/v${VERSION}"
+
+          if git ls-remote --tags origin "${TAG}" | grep -Fq "refs/tags/${TAG}"; then
+            echo "::notice::Tag ${TAG} already exists; skipping"
+            echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          git tag "${TAG}" "${{ github.event.pull_request.merge_commit_sha }}"
+          git push origin "${TAG}"
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+          {
+            echo "Created tag: ${TAG}"
+            echo "Branch: ${BRANCH}"
+            echo "Version: ${VERSION}"
+            echo "Commit: ${{ github.event.pull_request.merge_commit_sha }}"
+          } >> "$GITHUB_STEP_SUMMARY"

.github/workflows/i18n-update-core.yaml

@@ -1,5 +1,5 @@
+# Description: Generates and updates translations for core ComfyUI components using OpenAI
 name: "i18n: Update Core"
-description: "Generates and updates translations for core ComfyUI components using OpenAI"
 
 on:
   # Manual dispatch for urgent translation updates

.github/workflows/pr-backport.yaml

@@ -236,8 +236,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
+            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
           fi
 
           for target in ${{ steps.filter-targets.outputs.pending-targets }}; do
@@ -326,8 +326,8 @@ jobs:
             PR_TITLE=$(echo "$PR_DATA" | jq -r '.title')
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
           else
-            PR_TITLE="${{ github.event.pull_request.title }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+            PR_TITLE=$(jq -r '.pull_request.title' "$GITHUB_EVENT_PATH")
+            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
           fi
 
           for backport in ${{ steps.backport.outputs.success }}; do
@@ -364,9 +364,9 @@ jobs:
             PR_AUTHOR=$(echo "$PR_DATA" | jq -r '.author.login')
             MERGE_COMMIT=$(echo "$PR_DATA" | jq -r '.mergeCommit.oid')
           else
-            PR_NUMBER="${{ github.event.pull_request.number }}"
-            PR_AUTHOR="${{ github.event.pull_request.user.login }}"
-            MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+            PR_NUMBER=$(jq -r '.pull_request.number' "$GITHUB_EVENT_PATH")
+            PR_AUTHOR=$(jq -r '.pull_request.user.login' "$GITHUB_EVENT_PATH")
+            MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
           fi
 
           for failure in ${{ steps.backport.outputs.failed }}; do

.github/workflows/pr-claude-review.yaml

@@ -1,5 +1,5 @@
+# Description: AI-powered code review triggered by adding the 'claude-review' label to a PR
 name: "PR: Claude Review"
-description: "AI-powered code review triggered by adding the 'claude-review' label to a PR"
 
 permissions:
   contents: read

.github/workflows/release-branch-create.yaml

@@ -148,10 +148,10 @@ jobs:
           done
 
           {
-            echo "results<<'EOF'"
+            echo "results<<EOF"
             cat "$RESULTS_FILE"
             echo "EOF"
-          } >> $GITHUB_OUTPUT
+          } >> "$GITHUB_OUTPUT"
 
       - name: Ensure release labels
         if: steps.check_version.outputs.is_minor_bump == 'true'

.github/workflows/release-version-bump.yaml

@@ -1,5 +1,5 @@
+# Description: Manual workflow to increment package version with semantic versioning support
 name: "Release: Version Bump"
-description: "Manual workflow to increment package version with semantic versioning support"
 
 on:
   workflow_dispatch:

.github/workflows/weekly-docs-check.yaml

@@ -1,5 +1,5 @@
+# Description: Automated weekly documentation accuracy check and update via Claude
 name: "Weekly Documentation Check"
-description: "Automated weekly documentation accuracy check and update via Claude"
 
 permissions:
   contents: write

.storybook/main.ts

@@ -64,7 +64,6 @@ const config: StorybookConfig = {
           deep: true,
           extensions: ['vue']
         })
-        // Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
       ],
       server: {
         allowedHosts: true

CODEOWNERS

@@ -1,8 +1,11 @@
+# Global Ownership
+*                                                 @Comfy-org/comfy_frontend_devs
+
 # Desktop/Electron
-/apps/desktop-ui/                                 @webfiltered
-/src/stores/electronDownloadStore.ts              @webfiltered
-/src/extensions/core/electronAdapter.ts           @webfiltered
-/vite.electron.config.mts                         @webfiltered
+/apps/desktop-ui/                                 @benceruleanlu
+/src/stores/electronDownloadStore.ts              @benceruleanlu
+/src/extensions/core/electronAdapter.ts           @benceruleanlu
+/vite.electron.config.mts                         @benceruleanlu
 
 # Common UI Components
 /src/components/chip/                             @viva-jinyi
@@ -31,10 +34,7 @@
 /src/components/graph/selectionToolbox/           @Myestery
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88
-
-# Assets
-/src/platform/assets/                             @arjansingh
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery 
 
 # Workflow Templates
 /src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
@@ -53,7 +53,7 @@
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
 
 # Translations
-/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer
+/src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
 
 # LLM Instructions (blank on purpose)
 .claude/

apps/desktop-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "nx": {
     "tags": [

apps/desktop-ui/src/components/common/StartupDisplay.vue

@@ -22,7 +22,11 @@
         <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
           {{ title }}
         </h1>
-        <p v-if="statusText" class="text-lg text-neutral-400">
+        <p
+          v-if="statusText"
+          class="text-lg text-neutral-400"
+          data-testid="startup-status-text"
+        >
           {{ statusText }}
         </p>
       </div>

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

@@ -0,0 +1,54 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Resizing', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should resize node without position drift after selecting', async ({
+    comfyPage
+  }) => {
+    // Get a Vue node fixture
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    const initialBox = await node.boundingBox()
+    if (!initialBox) throw new Error('Node bounding box not found')
+
+    // Select the node first (this was causing the bug)
+    await node.header.click()
+    await comfyPage.page.waitForTimeout(100) // Brief pause after selection
+
+    // Get position after selection
+    const selectedBox = await node.boundingBox()
+    if (!selectedBox)
+      throw new Error('Node bounding box not found after select')
+
+    // Verify position unchanged after selection
+    expect(selectedBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(selectedBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Now resize from bottom-right corner
+    const resizeStartX = selectedBox.x + selectedBox.width - 5
+    const resizeStartY = selectedBox.y + selectedBox.height - 5
+
+    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
+    await comfyPage.page.mouse.up()
+
+    // Get final position and size
+    const finalBox = await node.boundingBox()
+    if (!finalBox) throw new Error('Node bounding box not found after resize')
+
+    // Position should NOT have changed (the bug was position drift)
+    expect(finalBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(finalBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Size should have increased
+    expect(finalBox.width).toBeGreaterThan(initialBox.width)
+    expect(finalBox.height).toBeGreaterThan(initialBox.height)
+  })
+})

browser_tests/tests/vueNodes/nodeStates/lod.spec.ts

@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-test.describe('Vue Nodes - LOD', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
-    await comfyPage.setup()
-    await comfyPage.loadWorkflow('default')
-  })
-
-  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
-
-    const vueNodesContainer = comfyPage.vueNodes.nodes
-    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
-    const comboboxesInNodes = vueNodesContainer.getByRole('combobox')
-
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-
-    await comfyPage.zoom(120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
-
-    await expect(textboxesInNodes.first()).toBeHidden()
-    await expect(comboboxesInNodes.first()).toBeHidden()
-
-    await comfyPage.zoom(-120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-lod-inactive.png'
-    )
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-  })
-})

build/plugins/comfyAPIPlugin.ts

@@ -88,12 +88,14 @@ export function comfyAPIPlugin(isDev: boolean): Plugin {
 
         if (result.exports.length > 0) {
           const projectRoot = process.cwd()
-          const relativePath = path.relative(path.join(projectRoot, 'src'), id)
+          const relativePath = path
+            .relative(path.join(projectRoot, 'src'), id)
+            .replace(/\\/g, '/')
           const shimFileName = relativePath.replace(/\.ts$/, '.js')
 
           let shimContent = `// Shim for ${relativePath}\n`
 
-          const fileKey = relativePath.replace(/\.ts$/, '').replace(/\\/g, '/')
+          const fileKey = relativePath.replace(/\.ts$/, '')
           const warningMessage = getWarningMessage(fileKey, shimFileName)
 
           if (warningMessage) {

build/plugins/generateImportMapPlugin.ts

@@ -1,154 +0,0 @@
-import glob from 'fast-glob'
-import fs from 'fs-extra'
-import { dirname, join } from 'node:path'
-import { type HtmlTagDescriptor, type Plugin, normalizePath } from 'vite'
-
-interface ImportMapSource {
-  name: string
-  pattern: string | RegExp
-  entry: string
-  recursiveDependence?: boolean
-  override?: Record<string, Partial<ImportMapSource>>
-}
-
-const parseDeps = (root: string, pkg: string) => {
-  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
-  if (fs.existsSync(pkgPath)) {
-    const content = fs.readFileSync(pkgPath, 'utf-8')
-    const pkg = JSON.parse(content)
-    return Object.keys(pkg.dependencies || {})
-  }
-  return []
-}
-
-/**
- * Vite plugin that generates an import map for vendor chunks.
- *
- * This plugin creates a browser-compatible import map that maps module specifiers
- * (like 'vue' or 'primevue') to their actual file locations in the build output.
- * This improves module loading in modern browsers and enables better caching.
- *
- * The plugin:
- * 1. Tracks vendor chunks during bundle generation
- * 2. Creates mappings between module names and their file paths
- * 3. Injects an import map script tag into the HTML head
- * 4. Configures manual chunk splitting for vendor libraries
- *
- * @param vendorLibraries - An array of vendor libraries to split into separate chunks
- * @returns {Plugin} A Vite plugin that generates and injects an import map
- */
-export function generateImportMapPlugin(
-  importMapSources: ImportMapSource[]
-): Plugin {
-  const importMapEntries: Record<string, string> = {}
-  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
-  const assetDir = 'assets/lib'
-  let root: string
-
-  return {
-    name: 'generate-import-map-plugin',
-
-    // Configure manual chunks during the build process
-    configResolved(config) {
-      root = config.root
-
-      if (config.build) {
-        // Ensure rollupOptions exists
-        if (!config.build.rollupOptions) {
-          config.build.rollupOptions = {}
-        }
-
-        for (const source of importMapSources) {
-          resolvedImportMapSources.set(source.name, source)
-          if (source.recursiveDependence) {
-            const deps = parseDeps(root, source.name)
-
-            while (deps.length) {
-              const dep = deps.shift()!
-              const depSource = Object.assign({}, source, {
-                name: dep,
-                pattern: dep,
-                ...source.override?.[dep]
-              })
-              resolvedImportMapSources.set(depSource.name, depSource)
-
-              const _deps = parseDeps(root, depSource.name)
-              deps.unshift(..._deps)
-            }
-          }
-        }
-
-        const external: (string | RegExp)[] = []
-        for (const [, source] of resolvedImportMapSources) {
-          external.push(source.pattern)
-        }
-        config.build.rollupOptions.external = external
-      }
-    },
-
-    generateBundle(_options) {
-      for (const [, source] of resolvedImportMapSources) {
-        if (source.entry) {
-          const moduleFile = join(source.name, source.entry)
-          const sourceFile = join(root, 'node_modules', moduleFile)
-          const targetFile = join(root, 'dist', assetDir, moduleFile)
-
-          importMapEntries[source.name] =
-            './' + normalizePath(join(assetDir, moduleFile))
-
-          const targetDir = dirname(targetFile)
-          if (!fs.existsSync(targetDir)) {
-            fs.mkdirSync(targetDir, { recursive: true })
-          }
-          fs.copyFileSync(sourceFile, targetFile)
-        }
-
-        if (source.recursiveDependence) {
-          const files = glob.sync(['**/*.{js,mjs}'], {
-            cwd: join(root, 'node_modules', source.name)
-          })
-
-          for (const file of files) {
-            const moduleFile = join(source.name, file)
-            const sourceFile = join(root, 'node_modules', moduleFile)
-            const targetFile = join(root, 'dist', assetDir, moduleFile)
-
-            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
-              './' + normalizePath(join(assetDir, moduleFile))
-
-            const targetDir = dirname(targetFile)
-            if (!fs.existsSync(targetDir)) {
-              fs.mkdirSync(targetDir, { recursive: true })
-            }
-            fs.copyFileSync(sourceFile, targetFile)
-          }
-        }
-      }
-    },
-
-    transformIndexHtml(html) {
-      if (Object.keys(importMapEntries).length === 0) {
-        console.warn(
-          '[ImportMap Plugin] No vendor chunks found to create import map.'
-        )
-        return html
-      }
-
-      const importMap = {
-        imports: importMapEntries
-      }
-
-      const importMapTag: HtmlTagDescriptor = {
-        tag: 'script',
-        attrs: { type: 'importmap' },
-        children: JSON.stringify(importMap, null, 2),
-        injectTo: 'head'
-      }
-
-      return {
-        html,
-        tags: [importMapTag]
-      }
-    }
-  }
-}

build/plugins/index.ts

@@ -1,2 +1 @@
 export { comfyAPIPlugin } from './comfyAPIPlugin'
-export { generateImportMapPlugin } from './generateImportMapPlugin'

cloud-loader-dropdown.md

@@ -0,0 +1,24 @@
+Fixes loader dropdown placeholder
+===============================
+
+Cloud loader dropdowns hydrate via `useAssetWidgetData(nodeType)`, so `dropdownItems` stays empty until the Asset API returns friendly filenames. Meanwhile `modelValue` already holds the saved asset and the watcher at [WidgetSelectDropdown.vue#L215-L227](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue#L215-L227) only tracks `modelValue`. It runs before assets load, fails to find a match, clears `selectedSet`, and the placeholder persists.
+
+```ts
+watch(
+  modelValue,
+  (currentValue) => {
+    if (currentValue === undefined) {
+      selectedSet.value.clear()
+      return
+    }
+    const item = dropdownItems.value.find((item) => item.name === currentValue)
+    if (item) {
+      selectedSet.value.clear()
+      selectedSet.value.add(item.id)
+    }
+  },
+  { immediate: true }
+)
+```
+
+Once the API resolves, `dropdownItems` recomputes but nothing resyncs because the watcher never sees that change. Desktop doesn’t hit this because it still reads from `widget.options.values` immediately.

eslint.config.ts

@@ -191,6 +191,19 @@ export default defineConfig([
       '@intlify/vue-i18n/no-raw-text': [
         'error',
         {
+          attributes: {
+            '/.+/': [
+              'aria-label',
+              'aria-placeholder',
+              'aria-roledescription',
+              'aria-valuetext',
+              'label',
+              'placeholder',
+              'title',
+              'v-tooltip'
+            ],
+            img: ['alt']
+          },
           // Ignore strings that are:
           // 1. Less than 2 characters
           // 2. Only symbols/numbers/whitespace (no letters)
@@ -200,24 +213,27 @@ export default defineConfig([
           ignoreNodes: ['md-icon', 'v-icon', 'pre', 'code', 'script', 'style'],
           // Brand names and technical terms that shouldn't be translated
           ignoreText: [
-            'ComfyUI',
-            'GitHub',
-            'OpenAI',
             'API',
-            'URL',
-            'JSON',
-            'YAML',
-            'GPU',
-            'CPU',
-            'RAM',
-            'GB',
-            'MB',
-            'KB',
-            'ms',
-            'fps',
-            'px',
             'App Data:',
-            'App Path:'
+            'App Path:',
+            'ComfyUI',
+            'CPU',
+            'fps',
+            'GB',
+            'GitHub',
+            'GPU',
+            'JSON',
+            'KB',
+            'LoRA',
+            'MB',
+            'ms',
+            'OpenAI',
+            'png',
+            'px',
+            'RAM',
+            'URL',
+            'YAML',
+            '1.2 MB'
           ]
         }
       ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.33.5",
+  "version": "1.33.9",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -164,7 +164,6 @@
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
     "extendable-media-recorder-wav-encoder": "^7.0.129",
-    "fast-glob": "^3.3.3",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
     "glob": "^11.0.3",

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

@@ -1329,57 +1329,6 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
-/* START LOD specific styles */
-/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
-
-.isLOD .lg-node {
-  box-shadow: none;
-  filter: none;
-  backdrop-filter: none;
-  text-shadow: none;
-  mask-image: none;
-  clip-path: none;
-  background-image: none;
-  text-rendering: optimizeSpeed;
-  border-radius: 0;
-  contain: layout style;
-  transition: none;
-}
-
-.isLOD .lg-node-header {
-  border-radius: 0;
-  pointer-events: none;
-}
-
-.isLOD .lg-node-widgets {
-  pointer-events: none;
-}
-
-.lod-toggle {
-  visibility: visible;
-}
-
-.isLOD .lod-toggle {
-  visibility: hidden;
-}
-
-.lod-fallback {
-  display: none;
-}
-
-.isLOD .lod-fallback {
-  display: block;
-}
-
-.isLOD .image-preview img {
-  image-rendering: pixelated;
-}
-
-.isLOD .slot-dot {
-  border-radius: 0;
-}
-/* END LOD specific styles */
-
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {

packages/shared-frontend-utils/src/formatUtil.ts

@@ -75,6 +75,17 @@ export function formatSize(value?: number) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
 
+/**
+ * Formats a commit hash by truncating long (40-char) hashes to 7 chars.
+ * Returns the original string if not a valid full commit hash.
+ */
+export function formatCommitHash(value: string): string {
+  if (/^[a-f0-9]{40}$/i.test(value)) {
+    return value.slice(0, 7)
+  }
+  return value
+}
+
 /**
  * Returns various filename components.
  * Example:

pnpm-lock.yaml

@@ -15,15 +15,9 @@ catalogs:
     '@eslint/js':
       specifier: ^9.35.0
       version: 9.35.0
-    '@iconify-json/lucide':
-      specifier: ^1.1.178
-      version: 1.2.66
     '@iconify/json':
       specifier: ^2.2.380
       version: 2.2.380
-    '@iconify/tailwind':
-      specifier: ^1.1.3
-      version: 1.2.0
     '@intlify/eslint-plugin-vue-i18n':
       specifier: ^4.1.0
       version: 4.1.0
@@ -431,9 +425,6 @@ importers:
       extendable-media-recorder-wav-encoder:
         specifier: ^7.0.129
         version: 7.0.129
-      fast-glob:
-        specifier: ^3.3.3
-        version: 3.3.3
       firebase:
         specifier: 'catalog:'
         version: 11.6.0
@@ -7877,8 +7868,8 @@ packages:
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
-  vue-component-type-helpers@3.1.4:
-    resolution: {integrity: sha512-Uws7Ew1OzTTqHW8ZVl/qLl/HB+jf08M0NdFONbVWAx0N4gMLK8yfZDgeB77hDnBmaigWWEn5qP8T9BG59jIeyQ==}
+  vue-component-type-helpers@3.1.5:
+    resolution: {integrity: sha512-7V3yJuNWW7/1jxCcI1CswnpDsvs02Qcx/N43LkV+ZqhLj2PKj50slUflHAroNkN4UWiYfzMUUUXiNuv9khmSpQ==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -10681,7 +10672,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.4
+      vue-component-type-helpers: 3.1.5
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -16448,7 +16439,7 @@ snapshots:
 
   vue-component-type-helpers@3.1.1: {}
 
-  vue-component-type-helpers@3.1.4: {}
+  vue-component-type-helpers@3.1.5: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:

public/assets/CREDIT.txt

@@ -1 +1,9 @@
-Thanks to OpenArt (https://openart.ai) for providing the sorted-custom-node-map data, captured in September 2024.
+Node usage data merged from two sources:
+- Mixpanel "app:node_search_result_selected" events (Nov 2025): 1,112 nodes, 46,514 selections
+  Reflects actual user search behavior - what users choose when searching.
+- OpenArt workflow data (Sept 2024): 2,600 nodes, 118,676 uses
+  Reflects overall popularity - what's used in workflows.
+
+Merge strategy: New data overwrites old for 514 overlapping nodes. Old data
+normalized by 2.55x scale factor to match new data. Total: 3,198 nodes.
+Search-selected nodes prioritized in ranking.

src/App.vue

@@ -17,7 +17,6 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { t } from '@/i18n'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
@@ -48,7 +47,7 @@ const showContextMenu = (event: MouseEvent) => {
   }
 }
 
-onMounted(async () => {
+onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
   if (isElectron()) {
@@ -78,25 +77,5 @@ onMounted(async () => {
   // Initialize conflict detection in background
   // This runs async and doesn't block UI setup
   void conflictDetection.initializeConflictDetection()
-
-  // Show cloud notification for macOS desktop users (one-time)
-  // Delayed to ensure it appears after workflow loading (missing models dialog, etc.)
-  if (isElectron()) {
-    const isMacOS = navigator.platform.toLowerCase().includes('mac')
-    if (isMacOS) {
-      const settingStore = useSettingStore()
-      const hasShownNotification = settingStore.get(
-        'Comfy.Desktop.CloudNotificationShown'
-      )
-
-      if (!hasShownNotification) {
-        // Delay to show after initial workflow loading completes
-        setTimeout(async () => {
-          dialogService.showCloudNotification()
-          await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
-        }, 2000)
-      }
-    }
-  }
 })
 </script>

src/components/TopMenuSection.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="!workspaceStore.focusMode" class="ml-1 flex gap-x-0.5 pt-1">
+  <div
+    v-if="!workspaceStore.focusMode"
+    class="ml-1 flex gap-x-0.5 pt-1"
+    @mouseenter="isTopMenuHovered = true"
+    @mouseleave="isTopMenuHovered = false"
+  >
     <div class="min-w-0 flex-1">
       <SubgraphBreadcrumb />
     </div>
@@ -40,7 +45,10 @@
         <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
         <LoginButton v-else-if="isDesktop" />
       </div>
-      <QueueProgressOverlay v-model:expanded="isQueueOverlayExpanded" />
+      <QueueProgressOverlay
+        v-model:expanded="isQueueOverlayExpanded"
+        :menu-hovered="isTopMenuHovered"
+      />
     </div>
   </div>
 </template>
@@ -69,6 +77,7 @@ const isDesktop = isElectron()
 const { t } = useI18n()
 const isQueueOverlayExpanded = ref(false)
 const queueStore = useQueueStore()
+const isTopMenuHovered = ref(false)
 const queuedCount = computed(() => queueStore.pendingTasks.length)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))

src/components/actionbar/ComfyActionbar.vue

@@ -257,7 +257,7 @@ watch(isDragging, (dragging) => {
 })
 const actionbarClass = computed(() =>
   cn(
-    'w-[265px] border-dashed border-blue-500 opacity-80',
+    'w-[200px] border-dashed border-blue-500 opacity-80',
     'm-1.5 flex items-center justify-center self-stretch',
     'rounded-md before:w-50 before:-ml-50 before:h-full',
     'pointer-events-auto',

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -44,17 +44,22 @@ import { useI18n } from 'vue-i18n'
 
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
 
 const workspaceStore = useWorkspaceStore()
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
-const { hasMissingNodes } = useMissingNodes()
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
 
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -64,11 +64,13 @@ import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { appendJsonExt } from '@/utils/formatUtil'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -79,7 +81,10 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
-const { hasMissingNodes } = useMissingNodes()
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
 
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()

src/components/common/SystemStatsPanel.vue

@@ -9,29 +9,31 @@
           <div class="font-medium">
             {{ col.header }}
           </div>
-          <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
+          <div>{{ getDisplayValue(col) }}</div>
         </template>
       </div>
     </div>
 
-    <Divider />
+    <template v-if="hasDevices">
+      <Divider />
 
-    <div>
-      <h2 class="mb-4 text-2xl font-semibold">
-        {{ $t('g.devices') }}
-      </h2>
-      <TabView v-if="props.stats.devices.length > 1">
-        <TabPanel
-          v-for="device in props.stats.devices"
-          :key="device.index"
-          :header="device.name"
-          :value="device.index"
-        >
-          <DeviceInfo :device="device" />
-        </TabPanel>
-      </TabView>
-      <DeviceInfo v-else :device="props.stats.devices[0]" />
-    </div>
+      <div>
+        <h2 class="mb-4 text-2xl font-semibold">
+          {{ $t('g.devices') }}
+        </h2>
+        <TabView v-if="props.stats.devices.length > 1">
+          <TabPanel
+            v-for="device in props.stats.devices"
+            :key="device.index"
+            :header="device.name"
+            :value="device.index"
+          >
+            <DeviceInfo :device="device" />
+          </TabPanel>
+        </TabView>
+        <DeviceInfo v-else :device="props.stats.devices[0]" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -42,8 +44,9 @@ import TabView from 'primevue/tabview'
 import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
-import { formatSize } from '@/utils/formatUtil'
+import { formatCommitHash, formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -54,20 +57,53 @@ const systemInfo = computed(() => ({
   argv: props.stats.system.argv.join(' ')
 }))
 
-const systemColumns: { field: keyof SystemStats['system']; header: string }[] =
-  [
-    { field: 'os', header: 'OS' },
-    { field: 'python_version', header: 'Python Version' },
-    { field: 'embedded_python', header: 'Embedded Python' },
-    { field: 'pytorch_version', header: 'Pytorch Version' },
-    { field: 'argv', header: 'Arguments' },
-    { field: 'ram_total', header: 'RAM Total' },
-    { field: 'ram_free', header: 'RAM Free' }
-  ]
+const hasDevices = computed(() => props.stats.devices.length > 0)
 
-const formatValue = (value: any, field: string) => {
-  if (['ram_total', 'ram_free'].includes(field)) {
-    return formatSize(value)
+type SystemInfoKey = keyof SystemStats['system']
+
+type ColumnDef = {
+  field: SystemInfoKey
+  header: string
+  format?: (value: string) => string
+  formatNumber?: (value: number) => string
+}
+
+/** Columns for local distribution */
+const localColumns: ColumnDef[] = [
+  { field: 'os', header: 'OS' },
+  { field: 'python_version', header: 'Python Version' },
+  { field: 'embedded_python', header: 'Embedded Python' },
+  { field: 'pytorch_version', header: 'Pytorch Version' },
+  { field: 'argv', header: 'Arguments' },
+  { field: 'ram_total', header: 'RAM Total', formatNumber: formatSize },
+  { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize }
+]
+
+/** Columns for cloud distribution */
+const cloudColumns: ColumnDef[] = [
+  { field: 'cloud_version', header: 'Cloud Version' },
+  {
+    field: 'comfyui_version',
+    header: 'ComfyUI Version',
+    format: formatCommitHash
+  },
+  {
+    field: 'comfyui_frontend_version',
+    header: 'Frontend Version',
+    format: formatCommitHash
+  },
+  { field: 'workflow_templates_version', header: 'Templates Version' }
+]
+
+const systemColumns = computed(() => (isCloud ? cloudColumns : localColumns))
+
+const getDisplayValue = (column: ColumnDef) => {
+  const value = systemInfo.value[column.field]
+  if (column.formatNumber && typeof value === 'number') {
+    return column.formatNumber(value)
+  }
+  if (column.format && typeof value === 'string') {
+    return column.format(value)
   }
   return value
 }

src/components/dialog/content/CloudNotificationContent.vue

@@ -1,126 +0,0 @@
-<template>
-  <div class="w-[480px] p-6">
-    <!-- Header with Logo -->
-    <div class="mb-6">
-      <div class="mb-2 flex items-center gap-3">
-        <img
-          src="/assets/images/comfy-cloud-logo.svg"
-          alt="Comfy Cloud"
-          class="h-8 w-8 shrink-0"
-        />
-        <h1 class="text-2xl font-semibold">
-          {{ t('cloudNotification.title') }}
-        </h1>
-      </div>
-      <p class="text-base text-muted">
-        {{ t('cloudNotification.message') }}
-      </p>
-    </div>
-
-    <!-- Features -->
-    <div class="mb-6 space-y-4">
-      <div class="flex gap-3">
-        <i class="pi pi-check-circle mt-0.5 shrink-0 text-xl text-blue-500"></i>
-        <div class="flex-1">
-          <div class="mb-1 font-medium">
-            {{ t('cloudNotification.feature1Title') }}
-          </div>
-          <div class="text-sm text-muted">
-            {{ t('cloudNotification.feature1') }}
-          </div>
-        </div>
-      </div>
-
-      <div class="flex gap-3">
-        <i class="pi pi-server mt-0.5 shrink-0 text-xl text-blue-500"></i>
-        <div class="flex-1">
-          <div class="mb-1 font-medium">
-            {{ t('cloudNotification.feature2Title') }}
-          </div>
-          <div class="text-sm text-muted">
-            {{ t('cloudNotification.feature2') }}
-          </div>
-        </div>
-      </div>
-
-      <div class="flex gap-3">
-        <i class="pi pi-tag mt-0.5 shrink-0 text-xl text-blue-500"></i>
-        <div class="flex-1">
-          <div class="mb-1 font-medium">
-            {{ t('cloudNotification.feature3Title') }}
-          </div>
-          <div class="text-sm text-muted">
-            {{ t('cloudNotification.feature3') }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer Note -->
-    <div
-      class="mb-6 rounded border-l-2 border-blue-500 bg-blue-500/5 py-2.5 pl-3 pr-4"
-    >
-      <p class="whitespace-pre-line text-sm text-muted">
-        {{ t('cloudNotification.feature4') }}
-      </p>
-    </div>
-
-    <!-- Actions -->
-    <div class="flex gap-3">
-      <Button
-        :label="t('cloudNotification.continueLocally')"
-        severity="secondary"
-        outlined
-        class="flex-1"
-        @click="onDismiss"
-      />
-      <Button
-        :label="t('cloudNotification.exploreCloud')"
-        icon="pi pi-arrow-right"
-        icon-pos="right"
-        class="flex-1"
-        @click="onExplore"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useTelemetry } from '@/platform/telemetry'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { t } = useI18n()
-
-// Track when modal is shown
-onMounted(() => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'cloud_notification_modal_shown'
-  })
-})
-
-const onDismiss = () => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'cloud_notification_continue_locally_clicked'
-  })
-  useDialogStore().closeDialog()
-}
-
-const onExplore = () => {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'cloud_notification_explore_cloud_clicked'
-  })
-
-  // Add UTM parameters for attribution tracking
-  const url = new URL('https://www.comfy.org/cloud')
-  url.searchParams.set('utm_source', 'desktop')
-  url.searchParams.set('utm_medium', 'notification')
-  url.searchParams.set('utm_campaign', 'macos_first_launch')
-
-  window.open(url.toString(), '_blank')
-  useDialogStore().closeDialog()
-}
-</script>

src/components/input/MultiSelect.vue

@@ -83,7 +83,7 @@
     role="combobox"
     :aria-expanded="false"
     aria-haspopup="listbox"
-    tabindex="0"
+    :tabindex="0"
   >
     <template
       v-if="showSearchBox || showSelectedCount || showClearButton"

src/components/input/SingleSelect.vue

@@ -152,7 +152,7 @@ const {
   popoverMaxWidth?: string
 }>()
 
-const selectedItem = defineModel<string | null>({ required: true })
+const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 

src/components/maskeditor/BrushSettingsPanel.vue

@@ -80,7 +80,7 @@
     />
 
     <SliderControl
-      label="Stepsize"
+      :label="$t('maskEditor.stepSize')"
       :min="1"
       :max="100"
       :step="1"

src/components/queue/CompletionSummaryBanner.vue

@@ -25,7 +25,11 @@
             class="inline-block h-6 w-6 overflow-hidden rounded-[6px] border-0 bg-secondary-background"
             :style="{ marginLeft: idx === 0 ? '0' : '-12px' }"
           >
-            <img :src="url" alt="preview" class="h-full w-full object-cover" />
+            <img
+              :src="url"
+              :alt="$t('sideToolbar.queueProgressOverlay.preview')"
+              class="h-full w-full object-cover"
+            />
           </span>
         </span>
 

src/components/queue/QueueOverlayActive.vue

@@ -47,7 +47,7 @@
             v-tooltip.top="cancelJobTooltip"
             type="secondary"
             size="sm"
-            class="size-6 bg-secondary-background hover:bg-destructive-background"
+            class="size-6 bg-destructive-background hover:bg-destructive-background-hover"
             :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
             @click="$emit('interruptAll')"
           >

src/components/queue/QueueProgressOverlay.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, withDefaults } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
@@ -85,9 +85,15 @@ import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'
 
-const props = defineProps<{
-  expanded?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean
+    menuHovered?: boolean
+  }>(),
+  {
+    menuHovered: false
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:expanded', value: boolean): void
@@ -110,6 +116,7 @@ const {
   currentNodeProgressStyle
 } = useQueueProgress()
 const isHovered = ref(false)
+const isOverlayHovered = computed(() => isHovered.value || props.menuHovered)
 const internalExpanded = ref(false)
 const isExpanded = computed({
   get: () =>
@@ -142,7 +149,7 @@ const showBackground = computed(
   () =>
     overlayState.value === 'expanded' ||
     overlayState.value === 'empty' ||
-    (overlayState.value === 'active' && isHovered.value)
+    (overlayState.value === 'active' && isOverlayHovered.value)
 )
 
 const isVisible = computed(() => overlayState.value !== 'hidden')
@@ -156,7 +163,7 @@ const containerClass = computed(() =>
 const bottomRowClass = computed(
   () =>
     `flex items-center justify-end gap-4 transition-opacity duration-200 ease-in-out ${
-      overlayState.value === 'active' && isHovered.value
+      overlayState.value === 'active' && isOverlayHovered.value
         ? 'opacity-100 pointer-events-auto'
         : 'opacity-0 pointer-events-none'
     }`

src/components/queue/job/QueueJobItem.vue

@@ -82,7 +82,10 @@
               :src="iconImageUrl"
               class="h-full w-full object-cover"
             />
-            <i v-else :class="[iconClass, 'size-4']" />
+            <i
+              v-else
+              :class="cn(iconClass, 'size-4', shouldSpin && 'animate-spin')"
+            />
           </div>
         </div>
       </div>
@@ -93,6 +96,23 @@
         </div>
       </div>
 
+      <!--
+        TODO: Refactor action buttons to use a declarative config system.
+
+        Instead of hardcoding button visibility logic in the template, define an array of
+        action button configs with properties like:
+        - icon, label, action, tooltip
+        - visibleStates: JobState[] (which job states show this button)
+        - alwaysVisible: boolean (show without hover)
+        - destructive: boolean (use destructive styling)
+
+        Then render buttons in two groups:
+        1. Always-visible buttons (outside Transition)
+        2. Hover-only buttons (inside Transition)
+
+        This would eliminate the current duplication where the cancel button exists
+        both outside (for running) and inside (for pending) the Transition.
+      -->
       <div class="relative z-[1] flex items-center gap-2 text-text-secondary">
         <Transition
           mode="out-in"
@@ -113,18 +133,22 @@
               v-tooltip.top="deleteTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.delete')"
               @click.stop="emit('delete')"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </IconButton>
             <IconButton
-              v-else-if="props.state !== 'completed' && computedShowClear"
+              v-else-if="
+                props.state !== 'completed' &&
+                props.state !== 'running' &&
+                computedShowClear
+              "
               v-tooltip.top="cancelTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
               :aria-label="t('g.cancel')"
               @click.stop="emit('cancel')"
             >
@@ -143,17 +167,33 @@
               v-tooltip.top="moreTooltipConfig"
               type="transparent"
               size="sm"
-              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              class="size-6 transform gap-1 rounded bg-modal-card-button-surface text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
               :aria-label="t('g.more')"
               @click.stop="emit('menu', $event)"
             >
               <i class="icon-[lucide--more-horizontal] size-4" />
             </IconButton>
           </div>
-          <div v-else key="secondary" class="pr-2">
+          <div
+            v-else-if="props.state !== 'running'"
+            key="secondary"
+            class="pr-2"
+          >
             <slot name="secondary">{{ props.rightText }}</slot>
           </div>
         </Transition>
+        <!-- Running job cancel button - always visible -->
+        <IconButton
+          v-if="props.state === 'running' && computedShowClear"
+          v-tooltip.top="cancelTooltipConfig"
+          type="transparent"
+          size="sm"
+          class="size-6 transform gap-1 rounded bg-destructive-background text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background-hover hover:opacity-95"
+          :aria-label="t('g.cancel')"
+          @click.stop="emit('cancel')"
+        >
+          <i class="icon-[lucide--x] size-4" />
+        </IconButton>
       </div>
     </div>
   </div>
@@ -170,6 +210,7 @@ import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
+import { cn } from '@/utils/tailwindUtil'
 
 const props = withDefaults(
   defineProps<{
@@ -302,6 +343,13 @@ const iconClass = computed(() => {
   return iconForJobState(props.state)
 })
 
+const shouldSpin = computed(
+  () =>
+    props.state === 'pending' &&
+    iconClass.value === iconForJobState('pending') &&
+    !props.iconImageUrl
+)
+
 const computedShowClear = computed(() => {
   if (props.showClear !== undefined) return props.showClear
   return props.state !== 'completed'

src/components/sidebar/ComfyMenuButton.vue

@@ -73,6 +73,7 @@
         @click.stop="handleNodes2ToggleClick"
       >
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
+        <Tag severity="info" class="ml-2 text-xs">{{ $t('g.beta') }}</Tag>
         <ToggleSwitch
           v-model="nodes2Enabled"
           class="ml-4"
@@ -101,6 +102,7 @@
 
 <script setup lang="ts">
 import type { MenuItem } from 'primevue/menuitem'
+import Tag from 'primevue/tag'
 import TieredMenu from 'primevue/tieredmenu'
 import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import ToggleSwitch from 'primevue/toggleswitch'

src/components/sidebar/SideToolbar.vue

@@ -44,6 +44,7 @@
         <SidebarHelpCenterIcon :is-small="isSmall" />
         <SidebarBottomPanelToggleButton :is-small="isSmall" />
         <SidebarShortcutsToggleButton :is-small="isSmall" />
+        <SidebarSettingsButton :is-small="isSmall" />
       </div>
     </div>
   </nav>
@@ -56,6 +57,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
+import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'

src/components/sidebar/SidebarSettingsButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <SidebarIcon
+    :label="$t('g.settings')"
+    :tooltip="tooltipText"
+    @click="showSettingsDialog"
+  >
+    <template #icon>
+      <i class="icon-[lucide--settings]" />
+    </template>
+  </SidebarIcon>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useTelemetry } from '@/platform/telemetry'
+import { useCommandStore } from '@/stores/commandStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+const { t } = useI18n()
+const { getCommand, formatKeySequence } = useCommandStore()
+const command = getCommand('Comfy.ShowSettingsDialog')
+
+const tooltipText = computed(
+  () => `${t('g.settings')} (${formatKeySequence(command)})`
+)
+
+/**
+ * Toggle keyboard shortcuts panel and track UI button click.
+ */
+const showSettingsDialog = () => {
+  command.function()
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'sidebar_settings_button_clicked'
+  })
+}
+</script>

src/components/topbar/TryVueNodeBanner.vue

@@ -3,9 +3,12 @@
     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">
+    <div class="flex items-center text-sm">
       <i class="icon-[lucide--rocket]"></i>
-      <span class="pl-2 text-sm">{{ $t('vueNodesBanner.message') }}</span>
+      <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"
@@ -63,7 +66,7 @@ const handleTryItOut = async (): Promise<void> => {
   try {
     await settingStore.set('Comfy.VueNodes.Enabled', true)
   } catch (error) {
-    console.error('Failed to enable Vue nodes:', error)
+    console.error('Failed to enable Nodes 2.0:', error)
   } finally {
     handleDismiss()
   }

src/components/widget/SampleModelSelector.vue

@@ -30,7 +30,7 @@
           <template #default="{ close }">
             <IconTextButton
               type="secondary"
-              label="Settings"
+              :label="$t('g.settings')"
               @click="
                 () => {
                   close()
@@ -43,7 +43,7 @@
             </IconTextButton>
             <IconTextButton
               type="primary"
-              label="Profile"
+              :label="$t('g.profile')"
               @click="
                 () => {
                   close()
@@ -65,7 +65,7 @@
           v-model="selectedFrameworks"
           v-model:search-query="searchText"
           class="w-[250px]"
-          label="Select Frameworks"
+          :label="$t('assetBrowser.selectFrameworks')"
           :options="frameworkOptions"
           :show-search-box="true"
           :show-selected-count="true"
@@ -73,12 +73,12 @@
         />
         <MultiSelect
           v-model="selectedProjects"
-          label="Select Projects"
+          :label="$t('assetBrowser.selectProjects')"
           :options="projectOptions"
         />
         <SingleSelect
           v-model="selectedSort"
-          label="Sorting Type"
+          :label="$t('assetBrowser.sortingType')"
           :options="sortOptions"
           class="w-[135px]"
         >

src/composables/graph/useVueNodeLifecycle.ts

@@ -3,7 +3,6 @@ import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
-import { useRenderModeSetting } from '@/composables/settings/useRenderModeSetting'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -11,6 +10,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
+import { 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'
@@ -26,11 +26,6 @@ function useVueNodeLifecycleIndividual() {
 
   let hasShownMigrationToast = false
 
-  useRenderModeSetting(
-    { setting: 'LiteGraph.Canvas.MinFontSizeForLOD', vue: 0, litegraph: 8 },
-    shouldRenderVueNodes
-  )
-
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph
@@ -44,7 +39,10 @@ function useVueNodeLifecycleIndividual() {
     const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
       id: node.id.toString(),
       pos: [node.pos[0], node.pos[1]] as [number, number],
-      size: [node.size[0], node.size[1]] as [number, number]
+      size: [node.size[0], removeNodeTitleHeight(node.size[1])] as [
+        number,
+        number
+      ]
     }))
     layoutStore.initializeFromLiteGraph(nodes)
 

src/composables/node/useNodePricing.ts

@@ -49,6 +49,21 @@ const calculateRunwayDurationPrice = (node: LGraphNode): string => {
   return `$${cost}/Run`
 }
 
+const makeOmniProDurationCalculator =
+  (pricePerSecond: number): PricingFunction =>
+  (node: LGraphNode): string => {
+    const durationWidget = node.widgets?.find(
+      (w) => w.name === 'duration'
+    ) as IComboWidget
+    if (!durationWidget) return `$${pricePerSecond.toFixed(3)}/second`
+
+    const seconds = parseFloat(String(durationWidget.value))
+    if (!Number.isFinite(seconds)) return `$${pricePerSecond.toFixed(3)}/second`
+
+    const cost = pricePerSecond * seconds
+    return `$${cost.toFixed(2)}/Run`
+  }
+
 const pixversePricingCalculator = (node: LGraphNode): string => {
   const durationWidget = node.widgets?.find(
     (w) => w.name === 'duration_seconds'
@@ -131,6 +146,11 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
       '720p': [0.51, 0.56],
       '1080p': [1.18, 1.22]
     },
+    'seedance-1-0-pro-fast': {
+      '480p': [0.09, 0.1],
+      '720p': [0.21, 0.23],
+      '1080p': [0.47, 0.49]
+    },
     'seedance-1-0-lite': {
       '480p': [0.17, 0.18],
       '720p': [0.37, 0.41],
@@ -138,11 +158,13 @@ const byteDanceVideoPricingCalculator = (node: LGraphNode): string => {
     }
   }
 
-  const modelKey = model.includes('seedance-1-0-pro')
-    ? 'seedance-1-0-pro'
-    : model.includes('seedance-1-0-lite')
-      ? 'seedance-1-0-lite'
-      : ''
+  const modelKey = model.includes('seedance-1-0-pro-fast')
+    ? 'seedance-1-0-pro-fast'
+    : model.includes('seedance-1-0-pro')
+      ? 'seedance-1-0-pro'
+      : model.includes('seedance-1-0-lite')
+        ? 'seedance-1-0-lite'
+        : ''
 
   const resKey = resolution.includes('1080')
     ? '1080p'
@@ -303,6 +325,46 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     FluxProKontextMaxNode: {
       displayPrice: '$0.08/Run'
     },
+    Flux2ProImageNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const widthW = node.widgets?.find(
+          (w) => w.name === 'width'
+        ) as IComboWidget
+        const heightW = node.widgets?.find(
+          (w) => w.name === 'height'
+        ) as IComboWidget
+
+        const w = Number(widthW?.value)
+        const h = Number(heightW?.value)
+        if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+          // global min/max for this node given schema bounds (1MP..4MP output)
+          return '$0.03–$0.15/Run'
+        }
+
+        // Is the 'images' input connected?
+        const imagesInput = node.inputs?.find(
+          (i) => i.name === 'images'
+        ) as INodeInputSlot
+        const hasRefs =
+          typeof imagesInput?.link !== 'undefined' && imagesInput.link != null
+
+        // Output cost: ceil((w*h)/MP); first MP $0.03, each additional $0.015
+        const MP = 1024 * 1024
+        const outMP = Math.max(1, Math.floor((w * h + MP - 1) / MP))
+        const outputCost = 0.03 + 0.015 * Math.max(outMP - 1, 0)
+
+        if (hasRefs) {
+          // Unknown ref count/size on the frontend:
+          // min extra is $0.015, max extra is $0.120 (8 MP cap / 8 refs)
+          const minTotal = outputCost + 0.015
+          const maxTotal = outputCost + 0.12
+          return `~$${parseFloat(minTotal.toFixed(3))}–$${parseFloat(maxTotal.toFixed(3))}/Run`
+        }
+
+        // Precise text-to-image price
+        return `$${parseFloat(outputCost.toFixed(3))}/Run`
+      }
+    },
     OpenAIVideoSora2: {
       displayPrice: sora2PricingCalculator
     },
@@ -659,6 +721,21 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     KlingVirtualTryOnNode: {
       displayPrice: '$0.07/Run'
     },
+    KlingOmniProTextToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProFirstLastFrameNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProImageToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.112)
+    },
+    KlingOmniProVideoToVideoNode: {
+      displayPrice: makeOmniProDurationCalculator(0.168)
+    },
+    KlingOmniProEditVideoNode: {
+      displayPrice: '$0.168/second'
+    },
     LumaImageToVideoNode: {
       displayPrice: (node: LGraphNode): string => {
         // Same pricing as LumaVideoNode per CSV
@@ -1197,6 +1274,40 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return '$0.80-3.20/Run'
       }
     },
+    Veo3FirstLastFrameNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const modelWidget = node.widgets?.find(
+          (w) => w.name === 'model'
+        ) as IComboWidget
+        const generateAudioWidget = node.widgets?.find(
+          (w) => w.name === 'generate_audio'
+        ) as IComboWidget
+        const durationWidget = node.widgets?.find(
+          (w) => w.name === 'duration'
+        ) as IComboWidget
+
+        if (!modelWidget || !generateAudioWidget || !durationWidget) {
+          return '$0.40-3.20/Run (varies with model & audio generation)'
+        }
+
+        const model = String(modelWidget.value)
+        const generateAudio =
+          String(generateAudioWidget.value).toLowerCase() === 'true'
+        const seconds = parseFloat(String(durationWidget.value))
+
+        let pricePerSecond: number | null = null
+        if (model.includes('veo-3.1-fast-generate')) {
+          pricePerSecond = generateAudio ? 0.15 : 0.1
+        } else if (model.includes('veo-3.1-generate')) {
+          pricePerSecond = generateAudio ? 0.4 : 0.2
+        }
+        if (pricePerSecond === null) {
+          return '$0.40-3.20/Run'
+        }
+        const cost = pricePerSecond * seconds
+        return `$${cost.toFixed(2)}/Run`
+      }
+    },
     LumaImageNode: {
       displayPrice: (node: LGraphNode): string => {
         const modelWidget = node.widgets?.find(
@@ -1799,6 +1910,10 @@ export const useNodePricing = () => {
       KlingDualCharacterVideoEffectNode: ['mode', 'model_name', 'duration'],
       KlingSingleImageVideoEffectNode: ['effect_scene'],
       KlingStartEndFrameNode: ['mode', 'model_name', 'duration'],
+      KlingOmniProTextToVideoNode: ['duration'],
+      KlingOmniProFirstLastFrameNode: ['duration'],
+      KlingOmniProImageToVideoNode: ['duration'],
+      KlingOmniProVideoToVideoNode: ['duration'],
       MinimaxHailuoVideoNode: ['resolution', 'duration'],
       OpenAIDalle3: ['size', 'quality'],
       OpenAIDalle2: ['size', 'n'],
@@ -1809,8 +1924,10 @@ export const useNodePricing = () => {
       IdeogramV3: ['rendering_speed', 'num_images', 'character_image'],
       FluxProKontextProNode: [],
       FluxProKontextMaxNode: [],
+      Flux2ProImageNode: ['width', 'height', 'images'],
       VeoVideoGenerationNode: ['duration_seconds'],
       Veo3VideoGenerationNode: ['model', 'generate_audio'],
+      Veo3FirstLastFrameNode: ['model', 'generate_audio', 'duration'],
       LumaVideoNode: ['model', 'resolution', 'duration'],
       LumaImageToVideoNode: ['model', 'resolution', 'duration'],
       LumaImageNode: ['model', 'aspect_ratio'],

src/composables/queue/useJobList.ts

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { st } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
@@ -96,6 +97,7 @@ export function useJobList() {
   const executionStore = useExecutionStore()
   const workflowStore = useWorkflowStore()
 
+  const seenPendingIds = ref<Set<string>>(new Set())
   const recentlyAddedPendingIds = ref<Set<string>>(new Set())
   const addedHintTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
@@ -126,23 +128,27 @@ export function useJobList() {
         .filter((id): id is string => !!id),
     (pendingIds) => {
       const pendingSet = new Set(pendingIds)
-      const next = new Set(recentlyAddedPendingIds.value)
+      const nextAdded = new Set(recentlyAddedPendingIds.value)
+      const nextSeen = new Set(seenPendingIds.value)
 
       pendingIds.forEach((id) => {
-        if (!next.has(id)) {
-          next.add(id)
+        if (!nextSeen.has(id)) {
+          nextSeen.add(id)
+          nextAdded.add(id)
           scheduleAddedHintExpiry(id)
         }
       })
 
-      for (const id of Array.from(next)) {
+      for (const id of Array.from(nextSeen)) {
         if (!pendingSet.has(id)) {
-          next.delete(id)
+          nextSeen.delete(id)
+          nextAdded.delete(id)
           clearAddedHintTimeout(id)
         }
       }
 
-      recentlyAddedPendingIds.value = next
+      recentlyAddedPendingIds.value = nextAdded
+      seenPendingIds.value = nextSeen
     },
     { immediate: true }
   )
@@ -157,6 +163,7 @@ export function useJobList() {
   onUnmounted(() => {
     addedHintTimeouts.forEach((timeoutId) => clearTimeout(timeoutId))
     addedHintTimeouts.clear()
+    seenPendingIds.value = new Set<string>()
     recentlyAddedPendingIds.value = new Set<string>()
   })
 
@@ -257,7 +264,8 @@ export function useJobList() {
         totalPercent: isActive ? totalPercent.value : undefined,
         currentNodePercent: isActive ? currentNodePercent.value : undefined,
         currentNodeName: isActive ? currentNodeName.value : undefined,
-        showAddedHint
+        showAddedHint,
+        isCloud
       })
 
       return {

src/composables/settings/useRenderModeSetting.ts

@@ -1,42 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { ref, watch } from 'vue'
-
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { Settings } from '@/schemas/apiSchema'
-
-interface RenderModeSettingConfig<TSettingKey extends keyof Settings> {
-  setting: TSettingKey
-  vue: Settings[TSettingKey]
-  litegraph: Settings[TSettingKey]
-}
-
-export function useRenderModeSetting<TSettingKey extends keyof Settings>(
-  config: RenderModeSettingConfig<TSettingKey>,
-  isVueMode: ComputedRef<boolean>
-) {
-  const settingStore = useSettingStore()
-  const vueValue = ref(config.vue)
-  const litegraphValue = ref(config.litegraph)
-  const lastWasVue = ref<boolean | null>(null)
-
-  const load = async (vue: boolean) => {
-    if (lastWasVue.value === vue) return
-
-    if (lastWasVue.value !== null) {
-      const currentValue = settingStore.get(config.setting)
-      if (lastWasVue.value) {
-        vueValue.value = currentValue
-      } else {
-        litegraphValue.value = currentValue
-      }
-    }
-
-    await settingStore.set(
-      config.setting,
-      vue ? vueValue.value : litegraphValue.value
-    )
-    lastWasVue.value = vue
-  }
-
-  watch(isVueMode, load, { immediate: true })
-}

src/composables/useCoreCommands.ts

@@ -330,7 +330,7 @@ export function useCoreCommands(): ComfyCommand[] {
       label: () =>
         `Experimental: ${
           useSettingStore().get('Comfy.VueNodes.Enabled') ? 'Disable' : 'Enable'
-        } Vue Nodes`,
+        } Nodes 2.0`,
       function: async () => {
         const settingStore = useSettingStore()
         const current = settingStore.get('Comfy.VueNodes.Enabled') ?? false

src/composables/useFeatureFlags.ts

@@ -1,5 +1,6 @@
 import { computed, reactive, readonly } from 'vue'
 
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
 /**
@@ -9,7 +10,8 @@ export enum ServerFeatureFlag {
   SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
-  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
+  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
+  ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled'
 }
 
 /**
@@ -27,9 +29,23 @@ export function useFeatureFlags() {
       return api.getServerFeature(ServerFeatureFlag.MANAGER_SUPPORTS_V4)
     },
     get modelUploadButtonEnabled() {
-      return api.getServerFeature(
-        ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
-        false
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.model_upload_button_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
+          false
+        )
+      )
+    },
+    get assetUpdateOptionsEnabled() {
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.asset_update_options_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.ASSET_UPDATE_OPTIONS_ENABLED,
+          false
+        )
       )
     }
   })

src/constants/coreMenuCommands.ts

@@ -1,3 +1,5 @@
+import { isCloud } from '@/platform/distribution/types'
+
 export const CORE_MENU_COMMANDS = [
   [[], ['Comfy.NewBlankWorkflow']],
   [[], []], // Separator after New
@@ -14,13 +16,16 @@ export const CORE_MENU_COMMANDS = [
   [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
   [['Edit'], ['Comfy.ClearWorkflow']],
   [['Edit'], ['Comfy.OpenClipspace']],
-  [['Edit'], ['Comfy.RefreshNodeDefinitions']],
   [
     ['Edit'],
     [
       'Comfy.RefreshNodeDefinitions',
-      'Comfy.Memory.UnloadModels',
-      'Comfy.Memory.UnloadModelsAndExecutionCache'
+      ...(isCloud
+        ? []
+        : [
+            'Comfy.Memory.UnloadModels',
+            'Comfy.Memory.UnloadModelsAndExecutionCache'
+          ])
     ]
   ],
   [['View'], []],

src/extensions/core/cloudRemoteConfig.ts

@@ -9,7 +9,7 @@ useExtensionService().registerExtension({
   name: 'Comfy.Cloud.RemoteConfig',
 
   setup: async () => {
-    // Poll for config updates every 30 seconds
-    setInterval(() => void loadRemoteConfig(), 30000)
+    // Poll for config updates every 10 minutes
+    setInterval(() => void loadRemoteConfig(), 600_000)
   }
 })

src/extensions/core/widgetInputs.ts

@@ -7,9 +7,9 @@ import type {
   INodeInputSlot,
   INodeOutputSlot,
   ISlotType,
-  LLink,
-  Point
+  LLink
 } from '@/lib/litegraph/src/litegraph'
+import { NodeSlot } from '@/lib/litegraph/src/node/NodeSlot'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDefSchema'
@@ -37,15 +37,15 @@ export class PrimitiveNode extends LGraphNode {
   }
 
   override applyToGraph(extraLinks: LLink[] = []) {
-    if (!this.outputs[0].links?.length) return
+    if (!this.outputs[0].links?.length || !this.graph) return
 
     const links = [
-      ...this.outputs[0].links.map((l) => app.graph.links[l]),
+      ...this.outputs[0].links.map((l) => this.graph!.links[l]),
       ...extraLinks
     ]
     let v = this.widgets?.[0].value
     if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app.graph, v as string)
+      v = applyTextReplacements(this.graph, v as string)
     }
 
     // For each output link copy our value over the original widget value
@@ -331,13 +331,13 @@ export class PrimitiveNode extends LGraphNode {
     const config1 = (output.widget?.[GET_CONFIG] as () => InputSpec)?.()
     if (!config1) return
     const isNumber = config1[0] === 'INT' || config1[0] === 'FLOAT'
-    if (!isNumber) return
+    if (!isNumber || !this.graph) return
 
     for (const linkId of links) {
-      const link = app.graph.links[linkId]
+      const link = this.graph.links[linkId]
       if (!link) continue // Can be null when removing a node
 
-      const theirNode = app.graph.getNodeById(link.target_id)
+      const theirNode = this.graph.getNodeById(link.target_id)
       if (!theirNode) continue
       const theirInput = theirNode.inputs[link.target_slot]
 
@@ -441,10 +441,7 @@ function getWidgetType(config: InputSpec) {
   return { type }
 }
 
-export function setWidgetConfig(
-  slot: INodeInputSlot | INodeOutputSlot,
-  config?: InputSpec
-) {
+export function setWidgetConfig(slot: INodeInputSlot, config?: InputSpec) {
   if (!slot.widget) return
   if (config) {
     slot.widget[GET_CONFIG] = () => config
@@ -452,19 +449,18 @@ export function setWidgetConfig(
     delete slot.widget
   }
 
-  if ('link' in slot) {
-    const link = app.graph.links[slot.link ?? -1]
-    if (link) {
-      const originNode = app.graph.getNodeById(link.origin_id)
-      if (originNode && isPrimitiveNode(originNode)) {
-        if (config) {
-          originNode.recreateWidget()
-        } else if (!app.configuringGraph) {
-          originNode.disconnectOutput(0)
-          originNode.onLastDisconnect()
-        }
-      }
-    }
+  if (!(slot instanceof NodeSlot)) return
+  const graph = slot.node.graph
+  if (!graph) return
+  const link = graph.links[slot.link ?? -1]
+  if (!link) return
+  const originNode = graph.getNodeById(link.origin_id)
+  if (!originNode || !isPrimitiveNode(originNode)) return
+  if (config) {
+    originNode.recreateWidget()
+  } else if (!app.configuringGraph) {
+    originNode.disconnectOutput(0)
+    originNode.onLastDisconnect()
   }
 }
 
@@ -555,15 +551,6 @@ app.registerExtension({
       }
     )
 
-    function isNodeAtPos(pos: Point) {
-      for (const n of app.graph.nodes) {
-        if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
-          return true
-        }
-      }
-      return false
-    }
-
     // Double click a widget input to automatically attach a primitive
     const origOnInputDblClick = nodeType.prototype.onInputDblClick
     nodeType.prototype.onInputDblClick = function (
@@ -589,18 +576,18 @@ app.registerExtension({
 
       // Create a primitive node
       const node = LiteGraph.createNode('PrimitiveNode')
-      if (!node) return r
+      const graph = app.canvas.graph
+      if (!node || !graph) return r
 
-      this.graph?.add(node)
+      graph?.add(node)
 
       // Calculate a position that won't directly overlap another node
       const pos: [number, number] = [
         this.pos[0] - node.size[0] - 30,
         this.pos[1]
       ]
-      while (isNodeAtPos(pos)) {
+      while (graph.getNodeOnPos(pos[0], pos[1], graph.nodes))
         pos[1] += LiteGraph.NODE_TITLE_HEIGHT
-      }
 
       node.pos = pos
       node.connect(0, this, slot)

src/lib/litegraph/src/LGraphCanvas.ts

@@ -7,6 +7,7 @@ import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculatio
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
@@ -4043,16 +4044,25 @@ export class LGraphCanvas
 
     // TODO: Report failures, i.e. `failedNodes`
 
-    const newPositions = created.map((node) => ({
-      nodeId: String(node.id),
-      bounds: {
-        x: node.pos[0],
-        y: node.pos[1],
-        width: node.size?.[0] ?? 100,
-        height: node.size?.[1] ?? 200
-      }
-    }))
+    const newPositions = created
+      .filter((item): item is LGraphNode => item instanceof LGraphNode)
+      .map((node) => {
+        const fullHeight = node.size?.[1] ?? 200
+        const layoutHeight = LiteGraph.vueNodesMode
+          ? removeNodeTitleHeight(fullHeight)
+          : fullHeight
+        return {
+          nodeId: String(node.id),
+          bounds: {
+            x: node.pos[0],
+            y: node.pos[1],
+            width: node.size?.[0] ?? 100,
+            height: layoutHeight
+          }
+        }
+      })
 
+    if (newPositions.length) layoutStore.setSource(LayoutSource.Canvas)
     layoutStore.batchUpdateNodeBounds(newPositions)
 
     this.selectItems(created)

src/lib/litegraph/src/types/widgets.ts

@@ -32,6 +32,7 @@ export interface IWidgetOptions<TValues = unknown[]> {
   /** Optional function to format values for display (e.g., hash → human-readable name) */
   getOptionLabel?: (value?: string | null) => string
   callback?: IWidget['callback']
+  iconClass?: string
 }
 
 interface IWidgetSliderOptions extends IWidgetOptions<number[]> {

src/locales/en/commands.json

@@ -237,7 +237,7 @@
     "label": "Sign Out"
   },
   "Experimental_ToggleVueNodes": {
-    "label": "Experimental: Enable Vue Nodes"
+    "label": "Experimental: Enable Nodes 2.0"
   },
   "Workspace_CloseWorkflow": {
     "label": "Close Current Workflow"

src/locales/en/main.json

@@ -1,5 +1,6 @@
 {
   "g": {
+    "beta": "Beta",
     "user": "User",
     "currentUser": "Current user",
     "empty": "Empty",
@@ -105,6 +106,7 @@
     "dropYourFileOr": "Drop your file or",
     "back": "Back",
     "next": "Next",
+    "submit": "Submit",
     "install": "Install",
     "installing": "Installing",
     "overwrite": "Overwrite",
@@ -234,6 +236,7 @@
     "frameNodes": "Frame Nodes",
     "listening": "Listening...",
     "ready": "Ready",
+    "playPause": "Play/Pause",
     "playRecording": "Play Recording",
     "playing": "Playing",
     "stopPlayback": "Stop Playback",
@@ -242,7 +245,9 @@
     "halfSpeed": "0.5x",
     "1x": "1x",
     "2x": "2x",
-    "beta": "BETA"
+    "beta": "BETA",
+    "profile": "Profile",
+    "noItems": "No items"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -689,6 +694,7 @@
       "currentNode": "Current node:",
       "viewAllJobs": "View all jobs",
       "running": "running",
+      "preview": "Preview",
       "interruptAll": "Interrupt all running jobs",
       "moreOptions": "More options",
       "showAssets": "Show assets",
@@ -930,6 +936,7 @@
     "thickness": "Thickness",
     "opacity": "Opacity",
     "hardness": "Hardness",
+    "stepSize": "Step Size",
     "smoothingPrecision": "Smoothing Precision",
     "resetToDefault": "Reset to Default",
     "paintBucketSettings": "Paint Bucket Settings",
@@ -978,6 +985,7 @@
     "initializingAlmostReady": "Initializing - Almost ready",
     "inQueue": "In queue...",
     "jobAddedToQueue": "Job added to queue",
+    "completedIn": "Finished in {duration}",
     "jobMenu": {
       "openAsWorkflowNewTab": "Open as workflow in new tab",
       "openWorkflowNewTab": "Open workflow in new tab",
@@ -1107,7 +1115,9 @@
     "Undo": "Undo",
     "Open Sign In Dialog": "Open Sign In Dialog",
     "Sign Out": "Sign Out",
-    "Experimental: Enable Vue Nodes": "Experimental: Enable Vue Nodes",
+    "Experimental: Enable Vue Nodes": "Experimental: Enable Nodes 2.0",
+    "Experimental: Enable Nodes 2.0": "Experimental: Enable Nodes 2.0",
+    "Experimental: Disable Nodes 2.0": "Experimental: Disable Nodes 2.0",
     "Close Current Workflow": "Close Current Workflow",
     "Next Opened Workflow": "Next Opened Workflow",
     "Previous Opened Workflow": "Previous Opened Workflow",
@@ -1183,10 +1193,11 @@
     "API Nodes": "API Nodes",
     "Notification Preferences": "Notification Preferences",
     "3DViewer": "3DViewer",
-    "Vue Nodes": "Vue Nodes",
     "Canvas Navigation": "Canvas Navigation",
     "PlanCredits": "Plan & Credits",
-    "VueNodes": "Vue Nodes"
+    "Vue Nodes": "Nodes 2.0",
+    "VueNodes": "Nodes 2.0",
+    "Nodes 2_0": "Nodes 2.0"
   },
   "serverConfigItems": {
     "listen": {
@@ -1832,6 +1843,7 @@
     "title": "Subscription",
     "titleUnsubscribed": "Subscribe to Comfy Cloud",
     "comfyCloud": "Comfy Cloud",
+    "comfyCloudLogo": "Comfy Cloud Logo",
     "beta": "BETA",
     "perMonth": "USD / month",
     "renewsDate": "Renews {date}",
@@ -2067,6 +2079,7 @@
   "cloudSurvey_steps_making": "What do you plan on making?",
   "assetBrowser": {
     "assets": "Assets",
+    "assetCollection": "Asset collection",
     "checkpoints": "Checkpoints",
     "browseAssets": "Browse Assets",
     "noAssetsFound": "No assets found",
@@ -2081,11 +2094,11 @@
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "onlyCivitaiUrlsSupported": "Only Civitai URLs are supported",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
-    "uploadModelDescription2": "Only links from https://civitai.com are supported at the moment",
-    "uploadModelDescription3": "Max file size: 1 GB",
-    "civitaiLinkLabel": "Civitai model download link",
+    "uploadModelDescription2": "Only links from <a href=\"https://civitai.com\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com</a> are supported at the moment",
+    "uploadModelDescription3": "Max file size: <strong>1 GB</strong>",
+    "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
     "civitaiLinkPlaceholder": "Paste link here",
-    "civitaiLinkExample": "Example: https://civitai.com/api/download/models/833921?type=Model&format=SafeTensor",
+    "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>",
     "confirmModelDetails": "Confirm Model Details",
     "fileName": "File Name",
     "fileSize": "File Size",
@@ -2117,6 +2130,9 @@
     "sortZA": "Z-A",
     "sortRecent": "Recent",
     "sortPopular": "Popular",
+    "selectFrameworks": "Select Frameworks",
+    "selectProjects": "Select Projects",
+    "sortingType": "Sorting Type",
     "errorFileTooLarge": "File exceeds the maximum allowed size limit",
     "errorFormatNotAllowed": "Only SafeTensor format is allowed",
     "errorUnsafePickleScan": "CivitAI detected potentially unsafe code in this file",
@@ -2188,7 +2204,8 @@
     }
   },
   "vueNodesBanner": {
-    "message": "Introducing Nodes 2.0 – More flexible workflows, powerful new widgets, built for extensibility",
+    "title": "Introducing Nodes 2.0",
+    "desc": "– More flexible workflows, powerful new widgets, built for extensibility",
     "tryItOut": "Try it out"
   },
   "vueNodesMigration": {
@@ -2198,6 +2215,10 @@
   "vueNodesMigrationMainMenu": {
     "message": "Switch back to Nodes 2.0 anytime from the main menu."
   },
+  "linearMode": {
+    "share": "Share",
+    "openWorkflow": "Open Workflow"
+  },
   "missingNodes": {
     "cloud": {
       "title": "These nodes aren't available on Comfy Cloud yet",
@@ -2212,18 +2233,5 @@
       "description": "This workflow uses custom nodes you haven't installed yet.",
       "replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
     }
-  },
-  "cloudNotification": {
-    "title": "Discover Comfy Cloud",
-    "message": "Get access to industry-grade GPUs and run workflows up to 10x faster",
-    "feature1Title": "No Setup Required",
-    "feature1": "Start creating instantly with popular models pre-installed",
-    "feature2Title": "Powerful GPUs",
-    "feature2": "A100 and RTX PRO 6000 GPUs for heavy video models",
-    "feature3Title": "$20/month",
-    "feature3": "Simple subscription with unlimited workflow runs",
-    "feature4": "ComfyUI stays free and open source.\nCloud is optional—for instant access to high-end GPUs.",
-    "continueLocally": "Continue Locally",
-    "exploreCloud": "Explore Cloud"
   }
-}
+}

src/locales/en/nodeDefs.json

@@ -2001,7 +2001,7 @@
     }
   },
   "EmptyHunyuanLatentVideo": {
-    "display_name": "EmptyHunyuanLatentVideo",
+    "display_name": "Empty HunyuanVideo 1.0 Latent",
     "inputs": {
       "width": {
         "name": "width"
@@ -2023,7 +2023,7 @@
     }
   },
   "EmptyHunyuanVideo15Latent": {
-    "display_name": "EmptyHunyuanVideo15Latent",
+    "display_name": "Empty HunyuanVideo 1.5 Latent",
     "inputs": {
       "width": {
         "name": "width"

src/locales/en/settings.json

@@ -336,7 +336,7 @@
   },
   "Comfy_VueNodes_AutoScaleLayout": {
     "name": "Auto-scale layout (Nodes 2.0)",
-    "tooltip": "Automatically scale node positions when switching to Vue rendering to prevent overlap"
+    "tooltip": "Automatically scale node positions when switching to Nodes 2.0 rendering to prevent overlap"
   },
   "Comfy_VueNodes_Enabled": {
     "name": "Modern Node Design (Nodes 2.0)",

src/platform/assets/components/AssetBrowserModal.vue

@@ -201,6 +201,12 @@ function handleUploadClick() {
       onUploadSuccess: async () => {
         await execute()
       }
+    },
+    dialogComponentProps: {
+      pt: {
+        header: 'py-0! pl-0!',
+        content: 'p-0!'
+      }
     }
   })
 }

src/platform/assets/components/AssetGrid.vue

@@ -3,7 +3,7 @@
     data-component-id="AssetGrid"
     :style="gridStyle"
     role="grid"
-    aria-label="Asset collection"
+    :aria-label="$t('assetBrowser.assetCollection')"
     :aria-rowcount="-1"
     :aria-colcount="-1"
     :aria-setsize="assets.length"

src/platform/assets/components/MediaAssetMoreMenu.vue

@@ -6,7 +6,7 @@
     <IconTextButton
       v-if="asset?.kind !== '3D'"
       type="transparent"
-      label="Inspect asset"
+      :label="$t('queue.jobMenu.inspectAsset')"
       @click="handleInspect"
     >
       <template #icon>
@@ -17,7 +17,7 @@
     <IconTextButton
       v-if="showAddToWorkflow"
       type="transparent"
-      label="Add to current workflow"
+      :label="$t('queue.jobMenu.addToCurrentWorkflow')"
       @click="handleAddToWorkflow"
     >
       <template #icon>
@@ -25,7 +25,11 @@
       </template>
     </IconTextButton>
 
-    <IconTextButton type="transparent" label="Download" @click="handleDownload">
+    <IconTextButton
+      type="transparent"
+      :label="$t('queue.jobMenu.download')"
+      @click="handleDownload"
+    >
       <template #icon>
         <i class="icon-[lucide--download] size-4" />
       </template>
@@ -36,7 +40,7 @@
     <IconTextButton
       v-if="showWorkflowActions"
       type="transparent"
-      label="Open as workflow in new tab"
+      :label="$t('queue.jobMenu.openAsWorkflowNewTab')"
       @click="handleOpenWorkflow"
     >
       <template #icon>
@@ -47,7 +51,7 @@
     <IconTextButton
       v-if="showWorkflowActions"
       type="transparent"
-      label="Export workflow"
+      :label="$t('queue.jobMenu.exportWorkflow')"
       @click="handleExportWorkflow"
     >
       <template #icon>
@@ -60,7 +64,7 @@
     <IconTextButton
       v-if="showCopyJobId"
       type="transparent"
-      label="Copy job ID"
+      :label="$t('queue.jobMenu.copyJobId')"
       @click="handleCopyJobId"
     >
       <template #icon>
@@ -73,7 +77,7 @@
     <IconTextButton
       v-if="shouldShowDeleteButton"
       type="transparent"
-      label="Delete"
+      :label="$t('queue.jobMenu.delete')"
       @click="handleDelete"
     >
       <template #icon>

src/platform/assets/components/UploadModelConfirmation.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-4 text-sm text-muted-foreground">
     <!-- Model Info Section -->
     <div class="flex flex-col gap-2">
-      <p class="text-sm text-muted m-0">
+      <p class="m-0">
         {{ $t('assetBrowser.modelAssociatedWithLink') }}
       </p>
-      <p class="text-sm mt-0">
+      <p
+        class="mt-0 bg-modal-card-background text-base-foreground p-3 rounded-lg"
+      >
         {{ metadata?.name || metadata?.filename }}
       </p>
     </div>
 
     <!-- Model Type Selection -->
     <div class="flex flex-col gap-2">
-      <label class="text-sm text-muted">
+      <label class="">
         {{ $t('assetBrowser.modelTypeSelectorLabel') }}
       </label>
       <SingleSelect
-        v-model="selectedModelType"
+        v-model="modelValue"
         :label="
           isLoading
             ? $t('g.loading')
@@ -25,8 +27,8 @@
         :options="modelTypes"
         :disabled="isLoading"
       />
-      <div class="flex items-center gap-2 text-sm text-muted">
-        <i class="icon-[lucide--info]" />
+      <div class="flex items-center gap-2">
+        <i class="icon-[lucide--circle-question-mark]" />
         <span>{{ $t('assetBrowser.notSureLeaveAsIs') }}</span>
       </div>
     </div>
@@ -34,25 +36,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
 import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 
-const props = defineProps<{
-  modelValue: string | undefined
+defineProps<{
   metadata: AssetMetadata | null
 }>()
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | undefined]
-}>()
+const modelValue = defineModel<string | undefined>()
 
 const { modelTypes, isLoading } = useModelTypes()
-
-const selectedModelType = computed({
-  get: () => props.modelValue ?? null,
-  set: (value: string | null) => emit('update:modelValue', value ?? undefined)
-})
 </script>

src/platform/assets/components/UploadModelDialog.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6">
+  <div
+    class="upload-model-dialog flex flex-col justify-between gap-6 p-4 pt-6 border-t-[1px] border-border-default"
+  >
     <!-- Step 1: Enter URL -->
     <UploadModelUrlInput
       v-if="currentStep === 1"