1.47.1 (#12862)

Patch version increment to 1.47.1

**Base branch:** `main`

---------

Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -109,3 +109,27 @@ jobs:
             exit 1
           fi
           echo '✅ No PostHog references found'
+
+      - name: Scan dist for Customer.io telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Customer.io references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e 'CustomerIoTelemetryProvider' \
+            -e '@customerio/cdp-analytics-browser' \
+            -e 'customerio-gist-web' \
+            -e '(?i)cdp\.customer\.io' \
+            -e 'Comfy\.CustomerIo' \
+            dist; then
+            echo '❌ ERROR: Customer.io references found in dist assets!'
+            echo 'Customer.io must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Customer.io references found'

.oxlintrc.json

@@ -65,6 +65,7 @@
     ],
     "no-unsafe-optional-chaining": "error",
     "no-self-assign": "allow",
+    "no-unreachable": "error",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
@@ -73,12 +74,14 @@
     "import/namespace": "error",
     "import/no-duplicates": "error",
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "jest/expect-expect": "off",
-    "jest/no-conditional-expect": "off",
-    "jest/no-disabled-tests": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-title": "off",
+    "vitest/expect-expect": "off",
+    "vitest/no-conditional-expect": "off",
+    "vitest/no-disabled-tests": "off",
+    "vitest/no-standalone-expect": "off",
+    "vitest/valid-title": "off",
+    "vitest/require-to-throw-message": "off",
     "typescript/no-this-alias": "off",
+    "typescript/no-useless-default-assignment": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",

apps/website/e2e/download.spec.ts

@@ -15,7 +15,9 @@ test.describe('Download page @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Download Comfy — Run AI Locally')
+    await expect(page).toHaveTitle(
+      'Download Comfy Desktop — Run AI on Your Hardware'
+    )
   })
 
   test('CloudBannerSection is visible with cloud link', async ({ page }) => {

apps/website/public/site.webmanifest

@@ -1,23 +1,23 @@
 {
   "name": "Comfy",
   "short_name": "Comfy",
-  "id": "/",
-  "start_url": "/",
   "icons": [
     {
       "src": "/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
     },
     {
       "src": "/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
     }
   ],
   "theme_color": "#211927",
   "background_color": "#211927",
-  "display": "standalone"
+  "display": "standalone",
+  "id": "/",
+  "start_url": "/"
 }

apps/website/src/components/common/FooterLinkColumn.stories.ts

@@ -21,7 +21,7 @@ export const Default: Story = {
   args: {
     title: 'Product',
     links: [
-      { label: 'Local', href: '/local' },
+      { label: 'Desktop', href: '/download' },
       { label: 'Cloud', href: '/cloud' },
       { label: 'API', href: '/api' },
       { label: 'Enterprise', href: '/enterprise' }

apps/website/src/components/common/ProductCard.stories.ts

@@ -12,9 +12,9 @@ const meta: Meta<typeof ProductCard> = {
     })
   ],
   args: {
-    title: 'Comfy\nLocal',
+    title: 'Comfy\nDesktop',
     description: 'Run ComfyUI on your own hardware.',
-    cta: 'SEE LOCAL FEATURES',
+    cta: 'SEE DESKTOP FEATURES',
     href: '#',
     bg: 'bg-primary-warm-gray'
   }
@@ -31,9 +31,9 @@ export const AllCards: Story = {
     template: `
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <ProductCard
-          title="Comfy\nLocal"
+          title="Comfy\nDesktop"
           description="Run ComfyUI on your own hardware."
-          cta="SEE LOCAL FEATURES"
+          cta="SEE DESKTOP FEATURES"
           href="#"
           bg="bg-primary-warm-gray"
         />

apps/website/src/components/product/local/DownloadLocalButton.vue

@@ -3,6 +3,7 @@ import type { Locale } from '../../../i18n/translations'
 import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
+import type { Platform } from '../../../composables/useDownloadUrl'
 import {
   downloadUrls,
   useDownloadUrl
@@ -18,13 +19,15 @@ const { locale = 'en', class: customClass = '' } = defineProps<{
 
 const { downloadUrl, platform, showFallback } = useDownloadUrl()
 
-const ICONS = {
+const label = computed(() => t('download.hero.downloadLocal', locale))
+
+const ICONS: Record<Platform, string> = {
   windows: '/icons/os/windows.svg',
   mac: '/icons/os/apple.svg'
-} as const
+}
 
 interface ButtonSpec {
-  key: string
+  key: Platform
   href: string
   icon: string
   ariaLabel?: string
@@ -41,19 +44,18 @@ const buttons = computed<ButtonSpec[]>(() => {
     ]
   }
   if (showFallback.value) {
-    const label = t('download.hero.downloadLocal', locale)
     return [
       {
         key: 'windows',
         href: downloadUrls.windows,
         icon: ICONS.windows,
-        ariaLabel: `${label} — Windows`
+        ariaLabel: `${label.value} — Windows`
       },
       {
         key: 'mac',
         href: downloadUrls.macArm,
         icon: ICONS.mac,
-        ariaLabel: `${label} — macOS`
+        ariaLabel: `${label.value} — macOS`
       }
     ]
   }
@@ -77,11 +79,8 @@ const buttons = computed<ButtonSpec[]>(() => {
         :src="btn.icon"
         alt=""
         class="ppformula-text-center size-5 -translate-y-0.75"
-        aria-hidden="true"
       />
-      <span class="ppformula-text-center">{{
-        t('download.hero.downloadLocal', locale)
-      }}</span>
+      <span class="ppformula-text-center">{{ label }}</span>
     </span>
   </BrandButton>
 </template>

apps/website/src/composables/useDownloadUrl.ts

@@ -7,13 +7,13 @@ export const downloadUrls = {
   macArm: 'https://download.comfy.org/mac/dmg/arm64'
 } as const
 
-type DetectedPlatform = 'windows' | 'mac' | null
+export type Platform = 'windows' | 'mac'
 
 function isMobile(ua: string): boolean {
   return /iphone|ipad|ipod|android/.test(ua)
 }
 
-function detectPlatform(ua: string): DetectedPlatform {
+function detectPlatform(ua: string): Platform | null {
   if (isMobile(ua)) return null
   if (ua.includes('win')) return 'windows'
   if (ua.includes('macintosh') || ua.includes('mac os x')) return 'mac'
@@ -23,7 +23,7 @@ function detectPlatform(ua: string): DetectedPlatform {
 // TODO: Only Windows x64 and macOS arm64 are available today.
 // When Linux and/or macIntel builds are added, extend detection and URLs here.
 export function useDownloadUrl() {
-  const platform = ref<DetectedPlatform>(null)
+  const platform = ref<Platform | null>(null)
   const detected = ref(false)
   const isMobileUa = ref(false)
 

apps/website/src/i18n/translations.ts

@@ -174,16 +174,16 @@ const translations = {
     'zh-CN': '掌控每个模型、每个节点、每个步骤、每个输出。'
   },
   'products.local.title': {
-    en: 'Comfy\nLocal',
-    'zh-CN': 'Comfy\n本地版'
+    en: 'Comfy\nDesktop',
+    'zh-CN': 'Comfy\n桌面版'
   },
   'products.local.description': {
     en: 'Run ComfyUI on your own hardware.',
     'zh-CN': '在您自己的硬件上运行 ComfyUI。'
   },
   'products.local.cta': {
-    en: 'SEE LOCAL FEATURES',
-    'zh-CN': '查看本地版属性'
+    en: 'SEE DESKTOP FEATURES',
+    'zh-CN': '查看桌面版属性'
   },
   'products.cloud.title': {
     en: 'Comfy\nCloud',
@@ -1057,18 +1057,18 @@ const translations = {
     'zh-CN': 'Cloud 与本地运行 ComfyUI 有什么区别？'
   },
   'cloud.faq.2.a': {
-    en: 'Cloud runs on powerful remote GPUs and is accessible from any device. Local runs entirely on your computer, giving you full control and offline use.',
+    en: 'Cloud runs on powerful remote GPUs and is accessible from any device. Comfy Desktop runs entirely on your computer, giving you full control and offline use.',
     'zh-CN':
-      'Cloud 在强大的远程 GPU 上运行，可从任何设备访问。本地版完全在您的电脑上运行，提供完全控制和离线使用。'
+      'Cloud 在强大的远程 GPU 上运行，可从任何设备访问。Comfy 桌面版完全在您的电脑上运行，提供完全控制和离线使用。'
   },
   'cloud.faq.3.q': {
-    en: 'Which version should I choose, Comfy Cloud or local ComfyUI (self-hosted)?',
-    'zh-CN': '我应该选择 Comfy Cloud 还是本地 ComfyUI（自托管）？'
+    en: 'Which version should I choose, Comfy Cloud or Comfy Desktop?',
+    'zh-CN': '我应该选择 Comfy Cloud 还是 Comfy 桌面版？'
   },
   'cloud.faq.3.a': {
-    en: "Comfy Cloud has zero setup, is easy to share with your team, and is faster than most GPUs you can run on a desktop workstation. You can immediately run the best models and workflows from the community on Comfy Cloud.\nLocal ComfyUI is infinitely customizable, works offline, and you don't need to worry about queue times. However, depending on what you want to create, you might need to have a good GPU and some amount of technical knowledge to install community-created custom nodes.",
+    en: "Comfy Cloud has zero setup, is easy to share with your team, and is faster than most GPUs you can run on a desktop workstation. You can immediately run the best models and workflows from the community on Comfy Cloud.\nComfy Desktop is infinitely customizable, works offline, and you don't need to worry about queue times. However, depending on what you want to create, you might need to have a good GPU and some amount of technical knowledge to install community-created custom nodes.",
     'zh-CN':
-      'Comfy Cloud 无需任何设置，方便与团队共享，比大多数桌面工作站 GPU 更快。您可以立即在 Comfy Cloud 上运行社区中最好的模型和工作流。\n本地 ComfyUI 可以无限定制，支持离线工作，无需担心排队时间。但根据您的创作需求，可能需要一块好的 GPU 以及一定的技术知识来安装社区创建的自定义节点。'
+      'Comfy Cloud 无需任何设置，方便与团队共享，比大多数桌面工作站 GPU 更快。您可以立即在 Comfy Cloud 上运行社区中最好的模型和工作流。\nComfy 桌面版可以无限定制，支持离线工作，无需担心排队时间。但根据您的创作需求，可能需要一块好的 GPU 以及一定的技术知识来安装社区创建的自定义节点。'
   },
   'cloud.faq.4.q': {
     en: 'Do I need a GPU or a strong computer to use Comfy Cloud?',
@@ -1091,9 +1091,9 @@ const translations = {
     'zh-CN': '我可以在 Comfy Cloud 上使用现有的工作流吗？'
   },
   'cloud.faq.6.a': {
-    en: 'Yes, your workflows work across Local and Cloud. Just note that only the most popular custom nodes are supported for now, but more will be added soon.',
+    en: 'Yes, your workflows work across Desktop and Cloud. Just note that only the most popular custom nodes are supported for now, but more will be added soon.',
     'zh-CN':
-      '可以，您的工作流在本地和云端都能使用。请注意，目前仅支持最热门的自定义节点，但很快会添加更多。'
+      '可以，您的工作流在桌面版和云端都能使用。请注意，目前仅支持最热门的自定义节点，但很快会添加更多。'
   },
   'cloud.faq.7.q': {
     en: 'Are all ComfyUI extensions and custom nodes supported?',
@@ -1145,9 +1145,9 @@ const translations = {
     'zh-CN': '合作伙伴节点积分和我的 Cloud 订阅有什么区别？'
   },
   'cloud.faq.12.a': {
-    en: 'Comfy Cloud has a credit system that is used for both Partner nodes (formerly API nodes) and running workflows on cloud.\n1. Partner Nodes (Pay-as-you-go): These nodes (formerly called API nodes) run third-party models via API calls and can be used on both Comfy Cloud and Local/Self-Hosted ComfyUI. Each node has its own usage cost, determined by the API provider, and we directly match their pricing.\n2. Running workflows on cloud: Exclusive to Comfy Cloud, you get a set amount of credits per month, with the amount differing based on your plan. More credits can be topped up anytime. Credits are only used up for GPU time while workflows are running — not while editing or building them. No idle costs, no setup, and no infrastructure to manage.',
+    en: 'Comfy Cloud has a credit system that is used for both Partner nodes (formerly API nodes) and running workflows on cloud.\n1. Partner Nodes (Pay-as-you-go): These nodes (formerly called API nodes) run third-party models via API calls and can be used on both Comfy Cloud and Comfy Desktop. Each node has its own usage cost, determined by the API provider, and we directly match their pricing.\n2. Running workflows on cloud: Exclusive to Comfy Cloud, you get a set amount of credits per month, with the amount differing based on your plan. More credits can be topped up anytime. Credits are only used up for GPU time while workflows are running — not while editing or building them. No idle costs, no setup, and no infrastructure to manage.',
     'zh-CN':
-      'Comfy Cloud 有一个积分系统，用于合作伙伴节点（原 API 节点）和在云端运行工作流。\n1. 合作伙伴节点（按需付费）：这些节点（原称 API 节点）通过 API 调用运行第三方模型，可在 Comfy Cloud 和本地/自托管 ComfyUI 上使用。每个节点有其自身的使用成本，由 API 提供商决定，我们直接匹配他们的定价。\n2. 在云端运行工作流：Comfy Cloud 专属，您每月获得一定数量的积分，数量根据您的计划而不同。积分可随时充值。积分仅在工作流运行时用于 GPU 时间——编辑或构建时不消耗。无闲置成本，无需设置，无需管理基础设施。'
+      'Comfy Cloud 有一个积分系统，用于合作伙伴节点（原 API 节点）和在云端运行工作流。\n1. 合作伙伴节点（按需付费）：这些节点（原称 API 节点）通过 API 调用运行第三方模型，可在 Comfy Cloud 和 Comfy 桌面版上使用。每个节点有其自身的使用成本，由 API 提供商决定，我们直接匹配他们的定价。\n2. 在云端运行工作流：Comfy Cloud 专属，您每月获得一定数量的积分，数量根据您的计划而不同。积分可随时充值。积分仅在工作流运行时用于 GPU 时间——编辑或构建时不消耗。无闲置成本，无需设置，无需管理基础设施。'
   },
   'cloud.faq.13.q': {
     en: 'Can I cancel my subscription?',
@@ -1411,9 +1411,9 @@ const translations = {
     'zh-CN': '合作伙伴节点'
   },
   'pricing.included.feature8.description': {
-    en: 'Run <strong>proprietary models</strong> through Comfy\'s <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">Partner Nodes</a>, such as Nano Banana. The amount of credits each node uses depends on the model and parameters you set in the node, but these credits are the same ones that your monthly subscription comes with. These credits can also be used across Comfy Cloud and local ComfyUI. Read more about Partner nodes <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">here</a>.',
+    en: 'Run <strong>proprietary models</strong> through Comfy\'s <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">Partner Nodes</a>, such as Nano Banana. The amount of credits each node uses depends on the model and parameters you set in the node, but these credits are the same ones that your monthly subscription comes with. These credits can also be used across Comfy Cloud and Comfy Desktop. Read more about Partner nodes <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">here</a>.',
     'zh-CN':
-      '通过 Comfy 的<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">合作伙伴节点</a>运行<strong>专有模型</strong>，如 Nano Banana。每个节点消耗的积分取决于所用模型和参数设置，且与月度订阅积分通用。积分可在 Comfy Cloud 和本地 ComfyUI 间通用。了解更多关于合作伙伴节点的信息请点击<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">此处</a>。'
+      '通过 Comfy 的<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">合作伙伴节点</a>运行<strong>专有模型</strong>，如 Nano Banana。每个节点消耗的积分取决于所用模型和参数设置，且与月度订阅积分通用。积分可在 Comfy Cloud 和 Comfy 桌面版间通用。了解更多关于合作伙伴节点的信息请点击<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">此处</a>。'
   },
   'pricing.included.feature9.title': {
     en: 'Job queue',

apps/website/src/layouts/BaseLayout.astro

@@ -73,7 +73,7 @@ const websiteJsonLd = {
 
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" sizes="48x48" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="theme-color" content="#211927" />

apps/website/src/pages/download.astro

@@ -11,9 +11,9 @@ import { t } from '../i18n/translations'
 ---
 
 <BaseLayout
-  title="Download Comfy — Run AI Locally"
+  title="Download Comfy Desktop — Run AI on Your Hardware"
   description={t('download.hero.subtitle', 'en')}
-  keywords={['comfyui app', 'comfyui desktop app', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux', 'comfyui local']}
+  keywords={['comfyui app', 'comfyui desktop app', 'comfyui desktop', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux']}
 >
   <CloudBannerSection />
   <HeroSection client:load />

apps/website/src/pages/zh-CN/download.astro

@@ -11,7 +11,7 @@ import { t } from '../../i18n/translations'
 ---
 
 <BaseLayout
-  title="下载 — Comfy"
+  title="下载 Comfy 桌面版 — 在您的硬件上运行 AI"
   description={t('download.hero.subtitle', 'zh-CN')}
   keywords={['comfyui app', 'comfyui desktop app', 'comfyui download', 'ComfyUI 下载', 'ComfyUI 桌面应用', 'ComfyUI 应用', 'ComfyUI Windows', 'ComfyUI macOS', 'ComfyUI Linux']}
 >

apps/website/src/scripts/posthog.ts

@@ -2,6 +2,8 @@ import posthog from 'posthog-js'
 
 import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
 
+import type { Platform } from '@/composables/useDownloadUrl'
+
 const POSTHOG_KEY =
   import.meta.env.PUBLIC_POSTHOG_KEY ??
   'phc_iKfK86id4xVYws9LybMje0h44eGtfwFgRPIBehmy8rO'
@@ -39,7 +41,7 @@ export function capturePageview() {
   }
 }
 
-export function captureDownloadClick(platform: string) {
+export function captureDownloadClick(platform: Platform) {
   if (!initialized) return
   try {
     posthog.capture('website:download_button_clicked', { platform })

browser_tests/assets/missing/cloud_missing_model_import_sections.json

@@ -0,0 +1,60 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 100],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "MODEL", "type": "MODEL", "links": null },
+        { "name": "CLIP", "type": "CLIP", "links": null },
+        { "name": "VAE", "type": "VAE", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["cloud_importable_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "LoadImage",
+      "pos": [560, 100],
+      "size": [400, 314],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        { "name": "IMAGE", "type": "IMAGE", "links": null },
+        { "name": "MASK", "type": "MASK", "links": null }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["cloud_unknown_model.safetensors", "image"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "models": [
+    {
+      "name": "cloud_importable_model.safetensors",
+      "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+      "directory": "checkpoints"
+    }
+  ],
+  "version": 0.4
+}

browser_tests/assets/missing/node_replacement_same_type.json

@@ -0,0 +1,61 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "E2E_OldSampler",
+      "pos": [100, 100],
+      "size": [400, 262],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "E2E_OldSampler" },
+      "widgets_values": [42, 20, 7, "euler", "normal"]
+    },
+    {
+      "id": 2,
+      "type": "E2E_OldSampler",
+      "pos": [520, 100],
+      "size": [400, 262],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        { "name": "model", "type": "MODEL", "link": null },
+        { "name": "positive", "type": "CONDITIONING", "link": null },
+        { "name": "negative", "type": "CONDITIONING", "link": null },
+        { "name": "latent_image", "type": "LATENT", "link": null }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": { "Node name for S&R": "E2E_OldSampler" },
+      "widgets_values": [43, 20, 7, "euler", "normal"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": { "ds": { "scale": 1, "offset": [0, 0] } },
+  "version": 0.4
+}

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

@@ -51,20 +51,6 @@ export class FeatureFlagHelper {
     })
   }
 
-  async setServerFlags(flags: Record<string, unknown>): Promise<void> {
-    await this.page.evaluate((flagMap: Record<string, unknown>) => {
-      const api = window.app!.api
-      api.serverFeatureFlags.value = {
-        ...api.serverFeatureFlags.value,
-        ...flagMap
-      }
-    }, flags)
-  }
-
-  async setServerFlag(name: string, value: unknown): Promise<void> {
-    await this.setServerFlags({ [name]: value })
-  }
-
   /**
    * Mock server feature flags via route interception on /api/features.
    */

browser_tests/fixtures/selectors.ts

@@ -60,16 +60,19 @@ export const TestIds = {
     missingNodePacksGroup: 'error-group-missing-node',
     missingModelsGroup: 'error-group-missing-model',
     missingModelExpand: 'missing-model-expand',
+    missingModelImport: 'missing-model-import',
+    missingModelImportableRows: 'missing-model-importable-rows',
     missingModelLocate: 'missing-model-locate',
-    missingModelCopyName: 'missing-model-copy-name',
-    missingModelCopyUrl: 'missing-model-copy-url',
+    missingModelReferenceCount: 'missing-model-reference-count',
+    missingModelUnsupportedSection:
+      'missing-model-import-not-supported-section',
     missingModelDownload: 'missing-model-download',
     missingModelActions: 'missing-model-actions',
     missingModelDownloadAll: 'missing-model-download-all',
-    missingModelRefresh: 'missing-model-refresh',
-    missingModelImportUnsupported: 'missing-model-import-unsupported',
+    missingModelRefresh: 'missing-model-header-refresh',
     missingMediaGroup: 'error-group-missing-media',
     swapNodesGroup: 'error-group-swap-nodes',
+    swapNodeGroupCount: 'swap-node-group-count',
     missingMediaRow: 'missing-media-row',
     missingMediaLocateButton: 'missing-media-locate-button',
     publishTabPanel: 'publish-tab-panel',
@@ -136,7 +139,8 @@ export const TestIds = {
     colorPickerCurrentColor: 'color-picker-current-color',
     colorBlue: 'blue',
     colorRed: 'red',
-    convertSubgraph: 'convert-to-subgraph-button'
+    convertSubgraph: 'convert-to-subgraph-button',
+    bypass: 'bypass-button'
   },
   menu: {
     moreMenuContent: 'more-menu-content'

browser_tests/tests/colorPalette.spec.ts

@@ -190,6 +190,16 @@ test.describe('Color Palette', { tag: ['@screenshot', '@settings'] }, () => {
       'custom-color-palette-obsidian-dark.png'
     )
   })
+
+  test('Palette can modify @vue-nodes color', async ({ comfyPage }) => {
+    const node = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    const getColor = () =>
+      node.body.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    const initialColor = await getColor()
+    await comfyPage.settings.setSetting('Comfy.ColorPalette', 'solarized')
+    await expect.poll(getColor).not.toEqual(initialColor)
+  })
 })
 
 test.describe(

browser_tests/tests/maskEditorLoadSave.spec.ts

@@ -0,0 +1,103 @@
+import { expect } from '@playwright/test'
+
+import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
+
+interface UploadResponse {
+  name: string
+  subfolder: string
+  type: 'input' | 'output' | 'temp'
+}
+
+const IMAGE_CANVAS_INDEX = 0
+const MASK_CANVAS_INDEX = 2
+
+const successResponse = (name: string): UploadResponse => ({
+  name,
+  subfolder: 'clipspace',
+  type: 'input'
+})
+
+const fulfillJson = (body: UploadResponse) => ({
+  status: 200,
+  contentType: 'application/json',
+  body: JSON.stringify(body)
+})
+
+test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
+  test('Save with drawn mask uploads non-empty mask data', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
+
+    let observedContentType = ''
+    let observedBodyLength = 0
+
+    await comfyPage.page.route('**/upload/mask', async (route) => {
+      const request = route.request()
+      observedContentType = (await request.headerValue('content-type')) ?? ''
+      observedBodyLength = request.postDataBuffer()?.byteLength ?? 0
+      await route.fulfill(
+        fulfillJson(successResponse('clipspace-mask-123.png'))
+      )
+    })
+
+    await comfyPage.page.route('**/upload/image', (route) =>
+      route.fulfill(fulfillJson(successResponse('clipspace-painted-123.png')))
+    )
+
+    await dialog.getByRole('button', { name: 'Save' }).click()
+    await expect(dialog).toBeHidden()
+    expect(observedContentType).toContain('multipart/form-data')
+    expect(observedBodyLength).toBeGreaterThan(256)
+  })
+
+  test('Canvas dimensions match the loaded image', async ({ maskEditor }) => {
+    const dialog = await maskEditor.openDialog()
+
+    const imageDimensions =
+      await maskEditor.getCanvasPixelData(IMAGE_CANVAS_INDEX)
+    const maskDimensions =
+      await maskEditor.getCanvasPixelData(MASK_CANVAS_INDEX)
+
+    expect(imageDimensions).not.toBeNull()
+    expect(maskDimensions).not.toBeNull()
+    expect(imageDimensions?.totalPixels).toBe(64 * 64)
+    expect(maskDimensions?.totalPixels).toBe(64 * 64)
+
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Save failure on partial upload keeps dialog open', async ({
+    comfyPage,
+    maskEditor
+  }) => {
+    const dialog = await maskEditor.openDialog()
+    await maskEditor.drawStrokeAndExpectPixels(dialog)
+
+    // The saver uploads sequentially: mask layer first, then image layers.
+    // Let the mask upload succeed and the image upload fail to exercise both
+    // endpoints and verify the dialog stays open after a partial failure.
+    let maskUploadHit = false
+    let imageUploadHit = false
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadHit = true
+      return route.fulfill(
+        fulfillJson(successResponse('clipspace-mask-999.png'))
+      )
+    })
+    await comfyPage.page.route('**/upload/image', (route) => {
+      imageUploadHit = true
+      return route.fulfill({ status: 500 })
+    })
+
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.click()
+
+    await expect.poll(() => maskUploadHit).toBe(true)
+    await expect.poll(() => imageUploadHit).toBe(true)
+    await expect(dialog).toBeVisible()
+    await expect(saveButton).toBeVisible()
+  })
+})

browser_tests/tests/nodeReplacement.spec.ts

@@ -48,6 +48,36 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
           ).toBeVisible()
         })
 
+        test('Shows direct row label and locate action for a single replacement group', async ({
+          comfyPage
+        }) => {
+          const swapGroup = getSwapNodesGroup(comfyPage.page)
+          const rowLabel = swapGroup.getByRole('button', {
+            name: 'E2E_OldSampler',
+            exact: true
+          })
+
+          await expect(rowLabel).toBeVisible()
+          await expect(
+            swapGroup.getByRole('button', {
+              name: 'Locate node on canvas',
+              exact: true
+            })
+          ).toBeVisible()
+          await expect(
+            swapGroup.getByTestId(TestIds.dialogs.swapNodeGroupCount)
+          ).toHaveCount(0)
+
+          await comfyPage.canvasOps.pan({ x: -800, y: -800 })
+          const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()
+
+          await rowLabel.click()
+
+          await expect
+            .poll(() => comfyPage.canvasOps.getOffset())
+            .not.toEqual(offsetBeforeLocate)
+        })
+
         test('Replace Node replaces a single group in-place', async ({
           comfyPage
         }) => {
@@ -101,6 +131,14 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
             'normal',
             1
           ])
+
+          if (mode.vueNodesEnabled) {
+            await expect(
+              comfyPage.vueNodes
+                .getWidgetByName('KSampler', 'denoise')
+                .locator('input')
+            ).toHaveValue(/^1(?:\.0+)?$/)
+          }
         })
 
         test('Success toast is shown after replacement', async ({
@@ -116,6 +154,55 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
         })
       })
 
+      test.describe('Same-type replacement group', () => {
+        test.beforeEach(async ({ comfyPage }) => {
+          await comfyPage.settings.setSetting(
+            'Comfy.VueNodes.Enabled',
+            mode.vueNodesEnabled
+          )
+          await setupNodeReplacement(comfyPage, mockNodeReplacementsSingle)
+          await loadWorkflowAndOpenErrorsTab(
+            comfyPage,
+            'missing/node_replacement_same_type'
+          )
+        })
+
+        test('Groups same-type replacement rows behind the title disclosure', async ({
+          comfyPage
+        }) => {
+          const swapGroup = getSwapNodesGroup(comfyPage.page)
+          const countBadge = swapGroup.getByTestId(
+            TestIds.dialogs.swapNodeGroupCount
+          )
+          const childRows = swapGroup.getByRole('listitem')
+          const expandButton = swapGroup.getByRole('button', {
+            name: 'Expand E2E_OldSampler',
+            exact: true
+          })
+
+          await expect(expandButton).toBeVisible()
+          await expect(countBadge).toHaveText('2')
+          await expect(childRows).toHaveCount(0)
+
+          await expandButton.click()
+          await expect(childRows).toHaveCount(2)
+          await expect(
+            swapGroup.getByRole('button', {
+              name: 'E2E_OldSampler',
+              exact: true
+            })
+          ).toHaveCount(2)
+
+          await swapGroup
+            .getByRole('button', {
+              name: 'Collapse E2E_OldSampler',
+              exact: true
+            })
+            .click()
+          await expect(childRows).toHaveCount(0)
+        })
+      })
+
       test.describe('Multi-type replacement', () => {
         test.beforeEach(async ({ comfyPage }) => {
           await comfyPage.settings.setSetting(

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -309,50 +309,6 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     )
   })
 
-  test.describe('Empty graph defaults', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.featureFlags.setServerFlag(
-        'node_library_essentials_enabled',
-        true
-      )
-    })
-
-    test('Defaults to Essentials when graph is empty', async ({
-      comfyPage
-    }) => {
-      const { searchBoxV2 } = comfyPage
-      await comfyPage.nodeOps.clearGraph()
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-
-      await searchBoxV2.open()
-
-      const essentialsBtn = searchBoxV2.rootCategoryButton(
-        RootCategory.Essentials
-      )
-      await expect(essentialsBtn).toBeVisible()
-      await expect(essentialsBtn).toHaveAttribute('aria-pressed', 'true')
-    })
-
-    test('Defaults to Most Relevant when graph has nodes', async ({
-      comfyPage
-    }) => {
-      const { searchBoxV2 } = comfyPage
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-        .toBeGreaterThan(0)
-
-      await searchBoxV2.open()
-
-      await expect(searchBoxV2.categoryButton('most-relevant')).toHaveAttribute(
-        'aria-current',
-        'true'
-      )
-      await expect(
-        searchBoxV2.rootCategoryButton(RootCategory.Essentials)
-      ).toHaveAttribute('aria-pressed', 'false')
-    })
-  })
-
   test.describe('Search behavior', () => {
     test('Search narrows results progressively', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage

browser_tests/tests/propertiesPanel/errorsTabCloudMissingModels.spec.ts

@@ -1,16 +1,29 @@
 import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
 
-import type { Asset } from '@comfyorg/ingest-types'
+import type {
+  Asset,
+  AssetCreated,
+  ListAssetsResponse
+} from '@comfyorg/ingest-types'
 import {
   countAssetRequestsByTag,
   createCloudAssetsFixture
 } from '@e2e/fixtures/assetApiFixture'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
 
+import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
+
 const WORKFLOW = 'missing/nested_subgraph_installed_model'
+const IMPORT_SECTIONS_WORKFLOW = 'missing/cloud_missing_model_import_sections'
 const OUTER_SUBGRAPH_NODE_ID = '205'
 const LOTUS_MODEL_NAME = 'lotus-depth-d-v1-1.safetensors'
+const CLOUD_IMPORTABLE_MODEL_NAME = 'cloud_importable_model.safetensors'
+const CLOUD_UNKNOWN_MODEL_NAME = 'cloud_unknown_model.safetensors'
+const CLOUD_IMPORTED_CANONICAL_MODEL_NAME =
+  'models/checkpoints/cloud_importable_model.safetensors'
 
 const LOTUS_DIFFUSION_MODEL: Asset & { hash?: string } = {
   id: 'test-lotus-depth-d-v1-1',
@@ -27,13 +40,62 @@ const LOTUS_DIFFUSION_MODEL: Asset & { hash?: string } = {
   }
 }
 
+const EXISTING_CLOUD_IMPORTABLE_MODEL: Asset & { hash?: string } = {
+  id: 'test-existing-cloud-importable-model',
+  name: 'asset-record-display-name.safetensors',
+  hash: 'blake3:0000000000000000000000000000000000000000000000000000000000000204',
+  size: 2_048,
+  mime_type: 'application/octet-stream',
+  tags: ['models', 'checkpoints'],
+  created_at: '2026-05-05T00:00:00Z',
+  updated_at: '2026-05-05T00:00:00Z',
+  last_access_time: '2026-05-05T00:00:00Z',
+  user_metadata: {
+    filename: CLOUD_IMPORTED_CANONICAL_MODEL_NAME
+  }
+}
+
 const test = createCloudAssetsFixture([LOTUS_DIFFUSION_MODEL])
 
+function getRequestedIncludeTags(requestUrl: string): string[] {
+  return (
+    new URL(requestUrl).searchParams
+      .get('include_tags')
+      ?.split(',')
+      .map((tag) => tag.trim())
+      .filter(Boolean) ?? []
+  )
+}
+
+function filterAssetsByRequest(
+  assets: ReadonlyArray<Asset>,
+  requestUrl: string
+): Asset[] {
+  const includeTags = getRequestedIncludeTags(requestUrl)
+  return includeTags.length
+    ? assets.filter((asset) =>
+        includeTags.every((tag) => asset.tags?.includes(tag))
+      )
+    : [...assets]
+}
+
+async function enableMissingModelImportFeatures(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const api = window.app!.api
+    api.serverFeatureFlags.value = {
+      ...api.serverFeatureFlags.value,
+      model_upload_button_enabled: true,
+      private_models_enabled: true
+    }
+  })
+}
+
 test.describe(
   'Errors tab - Cloud missing models',
   { tag: ['@cloud', '@vue-nodes'] },
   () => {
     test.beforeEach(async ({ comfyPage }) => {
+      await enableMissingModelImportFeatures(comfyPage.page)
       await comfyPage.settings.setSetting(
         'Comfy.RightSidePanel.ShowErrorsTab',
         true
@@ -88,5 +150,216 @@ test.describe(
 
       await expect(errorsTab).toBeHidden()
     })
+
+    test('separates importable cloud models from unsupported rows', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, IMPORT_SECTIONS_WORKFLOW)
+
+      const missingModelsGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      const importableRows = missingModelsGroup.getByTestId(
+        TestIds.dialogs.missingModelImportableRows
+      )
+      const unsupportedSection = missingModelsGroup.getByTestId(
+        TestIds.dialogs.missingModelUnsupportedSection
+      )
+
+      await expect(
+        importableRows.getByRole('button', {
+          name: CLOUD_IMPORTABLE_MODEL_NAME,
+          exact: true
+        })
+      ).toBeVisible()
+      await expect(
+        importableRows.getByTestId(TestIds.dialogs.missingModelImport)
+      ).toBeVisible()
+
+      await expect(unsupportedSection).toBeVisible()
+      await expect(
+        unsupportedSection.getByText('Import Not Supported')
+      ).toBeVisible()
+      await expect(
+        unsupportedSection.getByText(
+          /Nodes that reference the models below do not support imported models/
+        )
+      ).toBeVisible()
+      await expect(
+        unsupportedSection.getByText(CLOUD_UNKNOWN_MODEL_NAME)
+      ).toBeVisible()
+      await expect(
+        unsupportedSection.getByText('Unknown', { exact: true })
+      ).toBeVisible()
+      await expect(
+        unsupportedSection.getByRole('button', {
+          name: 'Load Image',
+          exact: true
+        })
+      ).toBeVisible()
+      await expect(
+        unsupportedSection.getByTestId(TestIds.dialogs.missingModelImport)
+      ).toHaveCount(0)
+    })
+
+    test('opens cloud import with missing-model replacement context', async ({
+      comfyPage
+    }) => {
+      await comfyPage.modelLibrary.mockModelFolders([
+        { name: 'checkpoints', folders: [] }
+      ])
+      await comfyPage.page.route('**/assets/remote-metadata?**', (route) => {
+        const response: AssetMetadata = {
+          content_length: 1024,
+          final_url:
+            'https://huggingface.co/comfy/test/resolve/main/replacement.safetensors',
+          content_type: 'application/octet-stream',
+          filename: 'replacement.safetensors',
+          tags: ['loras']
+        }
+
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      })
+      await loadWorkflowAndOpenErrorsTab(comfyPage, IMPORT_SECTIONS_WORKFLOW)
+
+      const missingModelsGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await missingModelsGroup
+        .getByTestId(TestIds.dialogs.missingModelImport)
+        .click()
+
+      const urlInput = comfyPage.page.locator(
+        '[data-attr="upload-model-step1-url-input"]'
+      )
+      await expect(urlInput).toBeVisible()
+      await urlInput.fill(
+        'https://huggingface.co/comfy/test/resolve/main/replacement.safetensors'
+      )
+      await comfyPage.page
+        .locator('[data-attr="upload-model-step1-continue-button"]')
+        .click()
+
+      const uploadDialog = comfyPage.page.getByRole('dialog', {
+        name: /Import a model/
+      })
+      await expect(
+        uploadDialog.getByText(
+          `This import will replace ${CLOUD_IMPORTABLE_MODEL_NAME} in:`
+        )
+      ).toBeVisible()
+      await expect(uploadDialog.getByText('Load Checkpoint')).toBeVisible()
+      await expect(uploadDialog.getByText('- ckpt_name')).toBeVisible()
+      await expect(
+        uploadDialog.getByText(
+          /Locked to (Checkpoints|checkpoints) for this missing model/
+        )
+      ).toBeVisible()
+    })
+
+    test('uses the synced asset filename when applying an already imported cloud model', async ({
+      comfyPage
+    }) => {
+      let isImportedAssetAvailable = false
+      const visibleAssets = () =>
+        isImportedAssetAvailable
+          ? [LOTUS_DIFFUSION_MODEL, EXISTING_CLOUD_IMPORTABLE_MODEL]
+          : [LOTUS_DIFFUSION_MODEL]
+
+      await comfyPage.modelLibrary.mockModelFolders([
+        { name: 'checkpoints', folders: [] }
+      ])
+      await comfyPage.page.route(/\/api\/assets(?:\?.*)?$/, (route) => {
+        const assets = filterAssetsByRequest(
+          visibleAssets(),
+          route.request().url()
+        )
+        const response: ListAssetsResponse = {
+          assets,
+          total: assets.length,
+          has_more: false
+        }
+
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      })
+      await comfyPage.page.route('**/assets/remote-metadata?**', (route) => {
+        const response: AssetMetadata = {
+          content_length: 2048,
+          final_url:
+            'https://huggingface.co/comfy/test/resolve/main/cloud_importable_model.safetensors',
+          content_type: 'application/octet-stream',
+          filename: CLOUD_IMPORTABLE_MODEL_NAME,
+          tags: ['checkpoints']
+        }
+
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      })
+      await comfyPage.page.route('**/assets/download', (route) => {
+        isImportedAssetAvailable = true
+        const response: AssetCreated = {
+          ...EXISTING_CLOUD_IMPORTABLE_MODEL,
+          created_new: false
+        }
+
+        return route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      })
+
+      await loadWorkflowAndOpenErrorsTab(comfyPage, IMPORT_SECTIONS_WORKFLOW)
+
+      const missingModelsGroup = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelsGroup
+      )
+      await missingModelsGroup
+        .getByTestId(TestIds.dialogs.missingModelImport)
+        .click()
+
+      const uploadDialog = comfyPage.page.getByRole('dialog', {
+        name: /Import a model/
+      })
+      const urlInput = uploadDialog.locator(
+        '[data-attr="upload-model-step1-url-input"]'
+      )
+      await urlInput.fill(
+        'https://huggingface.co/comfy/test/resolve/main/cloud_importable_model.safetensors'
+      )
+      await uploadDialog
+        .locator('[data-attr="upload-model-step1-continue-button"]')
+        .click()
+      await expect(
+        uploadDialog.getByText(
+          `This import will replace ${CLOUD_IMPORTABLE_MODEL_NAME} in:`
+        )
+      ).toBeVisible()
+
+      await uploadDialog
+        .locator('[data-attr="upload-model-step2-confirm-button"]')
+        .click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const node = window.app!.graph.getNodeById(1)
+            return node?.widgets?.find((widget) => widget.name === 'ckpt_name')
+              ?.value
+          })
+        )
+        .toBe(CLOUD_IMPORTED_CANONICAL_MODEL_NAME)
+    })
   }
 )

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
@@ -11,6 +12,18 @@ import {
   loadWorkflowAndOpenErrorsTab
 } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
+const FAKE_MODEL_NAME = 'fake_model.safetensors'
+
+function getModelLabel(group: Locator, modelName: string = FAKE_MODEL_NAME) {
+  return group.getByRole('button', { name: modelName, exact: true })
+}
+
+async function expectReferenceBadge(group: Locator, count: number) {
+  await expect(
+    group.getByTestId(TestIds.dialogs.missingModelReferenceCount)
+  ).toHaveText(String(count))
+}
+
 test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
@@ -34,15 +47,14 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     ).toHaveText(/\S/)
   })
 
-  test('Should display model name with referencing node count', async ({
-    comfyPage
-  }) => {
+  test('Should display model name and metadata', async ({ comfyPage }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
     const modelsGroup = comfyPage.page.getByTestId(
       TestIds.dialogs.missingModelsGroup
     )
-    await expect(modelsGroup).toContainText(/fake_model\.safetensors\s*\(\d+\)/)
+    await expect(getModelLabel(modelsGroup)).toBeVisible()
+    await expect(modelsGroup.getByText('checkpoints')).toBeVisible()
   })
 
   test('Should expand model row to show referencing nodes', async ({
@@ -53,32 +65,33 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
       'missing/missing_models_with_nodes'
     )
 
-    const locateButton = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingModelLocate
+    const modelsGroup = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelsGroup
     )
-    await expect(locateButton.first()).toBeHidden()
-
-    const expandButton = comfyPage.page.getByTestId(
+    const expandButton = modelsGroup.getByTestId(
       TestIds.dialogs.missingModelExpand
     )
     await expect(expandButton.first()).toBeVisible()
+    await expectReferenceBadge(modelsGroup, 2)
     await expandButton.first().click()
 
-    await expect(locateButton.first()).toBeVisible()
+    await expect(
+      modelsGroup.getByTestId(TestIds.dialogs.missingModelLocate)
+    ).toHaveCount(2)
   })
 
-  test('Should copy model name to clipboard', async ({ comfyPage }) => {
+  test('Should copy model URL to clipboard', async ({ comfyPage }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
     await interceptClipboardWrite(comfyPage.page)
 
-    const copyButton = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingModelCopyName
-    )
+    const copyButton = comfyPage.page.getByRole('button', {
+      name: 'Copy URL'
+    })
     await expect(copyButton.first()).toBeVisible()
     await copyButton.first().dispatchEvent('click')
 
     const copiedText = await getClipboardText(comfyPage.page)
-    expect(copiedText).toContain('fake_model.safetensors')
+    expect(copiedText).toContain('/api/devtools/')
   })
 
   test.describe('OSS-specific', { tag: '@oss' }, () => {
@@ -87,9 +100,9 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     }) => {
       await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
-      const copyUrlButton = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingModelCopyUrl
-      )
+      const copyUrlButton = comfyPage.page.getByRole('button', {
+        name: 'Copy URL'
+      })
       await expect(copyUrlButton.first()).toBeVisible()
     })
 
@@ -102,6 +115,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         TestIds.dialogs.missingModelDownload
       )
       await expect(downloadButton.first()).toBeVisible()
+      await expect(downloadButton.first()).toHaveText('Download')
     })
 
     test('Should render Download all and Refresh actions for one downloadable model', async ({

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
@@ -8,6 +9,18 @@ import {
   loadWorkflowAndOpenErrorsTab
 } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
+const FAKE_MODEL_NAME = 'fake_model.safetensors'
+
+function getModelLabel(group: Locator, modelName: string = FAKE_MODEL_NAME) {
+  return group.getByRole('button', { name: modelName, exact: true })
+}
+
+async function expectReferenceBadge(group: Locator, count: number) {
+  await expect(
+    group.getByTestId(TestIds.dialogs.missingModelReferenceCount)
+  ).toHaveText(String(count))
+}
+
 test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -130,9 +143,9 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
         'missing/missing_models_from_node_properties'
       )
 
-      const copyUrlButton = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingModelCopyUrl
-      )
+      const copyUrlButton = comfyPage.page.getByRole('button', {
+        name: 'Copy URL'
+      })
       await expect(copyUrlButton.first()).toBeVisible()
 
       const node = await comfyPage.nodeOps.getNodeRefById('1')
@@ -156,9 +169,7 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
         TestIds.dialogs.missingModelsGroup
       )
       await expect(missingModelGroup).toBeVisible()
-      await expect(missingModelGroup).toContainText(
-        /fake_model\.safetensors\s*\(1\)/
-      )
+      await expect(getModelLabel(missingModelGroup)).toBeVisible()
 
       const node = await comfyPage.nodeOps.getNodeRefById('1')
       await node.click('title')
@@ -168,9 +179,7 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
       await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(2)
 
       await comfyPage.canvas.click()
-      await expect(missingModelGroup).toContainText(
-        /fake_model\.safetensors\s*\(2\)/
-      )
+      await expectReferenceBadge(missingModelGroup, 2)
     })
 
     test('Pasting a bypassed node does not add a new error', async ({
@@ -252,14 +261,17 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
       const missingModelGroup = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelsGroup
       )
-      await expect(missingModelGroup).toContainText(/\(2\)/)
+      await expectReferenceBadge(missingModelGroup, 2)
 
       const node1 = await comfyPage.nodeOps.getNodeRefById('1')
       await node1.click('title')
-      await expect(missingModelGroup).toContainText(/\(1\)/)
+      await expect(getModelLabel(missingModelGroup)).toBeVisible()
+      await expect(
+        missingModelGroup.getByTestId(TestIds.dialogs.missingModelLocate)
+      ).toHaveCount(1)
 
       await comfyPage.canvas.click()
-      await expect(missingModelGroup).toContainText(/\(2\)/)
+      await expectReferenceBadge(missingModelGroup, 2)
     })
   })
 
@@ -384,9 +396,7 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
         const missingModelGroup = comfyPage.page.getByTestId(
           TestIds.dialogs.missingModelsGroup
         )
-        await expect(missingModelGroup).toContainText(
-          /fake_model\.safetensors\s*\(1\)/
-        )
+        await expect(getModelLabel(missingModelGroup)).toBeVisible()
 
         await comfyPage.page.evaluate((value) => {
           const hostNode = window.app!.graph!.getNodeById(2)
@@ -439,9 +449,7 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
         const missingModelGroup = comfyPage.page.getByTestId(
           TestIds.dialogs.missingModelsGroup
         )
-        await expect(missingModelGroup).toContainText(
-          /fake_model\.safetensors\s*\(1\)/
-        )
+        await expect(getModelLabel(missingModelGroup)).toBeVisible()
 
         const promotedModelCombo = comfyPage.vueNodes
           .getNodeByTitle('Subgraph with Promoted Missing Model')

browser_tests/tests/selectionToolbox.spec.ts

@@ -129,23 +129,18 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
   }) => {
     // A group + a KSampler node
     await comfyPage.workflow.loadWorkflow('groups/single_group')
+    const bypass = comfyPage.page.getByTestId(TestIds.selectionToolbox.bypass)
 
     // Select group + node should show bypass button
     await comfyPage.canvas.focus()
-    await comfyPage.page.keyboard.press('Control+A')
-    await expect(
-      comfyPage.page.locator(
-        '.selection-toolbox *[data-testid="bypass-button"]'
-      )
-    ).toBeVisible()
-
-    // Deselect node (Only group is selected) should hide bypass button
     await comfyPage.nodeOps.selectNodes(['KSampler'])
-    await expect(
-      comfyPage.page.locator(
-        '.selection-toolbox *[data-testid="bypass-button"]'
-      )
-    ).toBeHidden()
+    await expect(bypass).toBeVisible()
+    await comfyPage.keyboard.delete()
+
+    // (Only empty group is selected) should hide bypass button
+    await comfyPage.keyboard.selectAll()
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    await expect(bypass).toBeHidden()
   })
 
   test.describe('Color Picker', () => {

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -3,6 +3,8 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { getGroupTitlePosition } from '@e2e/fixtures/utils/groupHelpers'
 
 const CREATE_GROUP_HOTKEY = 'Control+g'
 
@@ -175,6 +177,30 @@ test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
     }).toPass({ timeout: 5000 })
   })
 
+  test('does not drag contents when control is held', async ({ comfyPage }) => {
+    await comfyPage.keyboard.selectAll()
+    await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
+    const groupCount = () => comfyPage.page.evaluate(() => graph!.groups.length)
+    await expect.poll(groupCount, 'create group').toBe(1)
+    await comfyPage.page.mouse.click(100, 100)
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    const initialNodeBounds = await ksampler.boundingBox()
+    expect(initialNodeBounds).toBeTruthy()
+
+    const groupPos = await getGroupTitlePosition(comfyPage, 'Group')
+    await comfyPage.page.mouse.move(groupPos.x, groupPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.mouse.move(groupPos.x + 100, groupPos.y)
+    await comfyPage.page.mouse.up()
+    await comfyPage.page.keyboard.up('Control')
+    await expect
+      .poll(() => getGroupTitlePosition(comfyPage, 'Group'))
+      .not.toEqual(groupPos)
+    expect(await ksampler.boundingBox()).toEqual(initialNodeBounds)
+  })
+
   test('should keep groups aligned after loading legacy Vue workflows', async ({
     comfyPage
   }) => {
@@ -217,4 +243,40 @@ test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
       )
     }).toPass({ timeout: 5000 })
   })
+
+  test('Bypassing a group bypasses contents', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.keyboard.selectAll()
+    await comfyPage.page.keyboard.press('.')
+    await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
+
+    const toggleBypass = () =>
+      comfyPage.page.getByTestId(TestIds.selectionToolbox.bypass).click()
+    const bypassCount = () =>
+      comfyPage.page.evaluate(
+        () => graph!.nodes.filter((node) => node.mode === 4).length
+      )
+    expect(await bypassCount()).toBe(0)
+    const groupCount = () => comfyPage.page.evaluate(() => graph!.groups.length)
+    await expect.poll(groupCount, 'create group').toBe(1)
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await ksampler.select()
+    await toggleBypass()
+    await expect.poll(bypassCount, 'setup bypass of single node').toBe(1)
+
+    const groupPos = await getGroupTitlePosition(comfyPage, 'Group')
+    await comfyPage.page.mouse.click(groupPos.x, groupPos.y)
+    await toggleBypass()
+    await expect.poll(bypassCount, 'all nodes are set to bypassed').toBe(7)
+    await toggleBypass()
+    await expect.poll(bypassCount, 'all nodes are unbypassed').toBe(0)
+
+    await comfyPage.page.keyboard.down('Shift')
+    await ksampler.select()
+    await comfyPage.page.keyboard.up('Shift')
+
+    await toggleBypass()
+    await expect.poll(bypassCount, "won't toggle double selected node").toBe(7)
+  })
 })

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

@@ -8,6 +8,7 @@ import {
   getPromotedWidgetNames,
   getPromotedWidgetCountByName
 } from '@e2e/fixtures/utils/promotedWidgets'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
 import { webSocketFixture } from '@e2e/fixtures/ws'
 const wstest = mergeTests(test, webSocketFixture)
 
@@ -139,6 +140,46 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
       )
     }
   )
+
+  wstest(
+    'Displays previews inside subgraphs received while workflow inactive',
+    async ({ comfyPage, getWebSocket }) => {
+      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
+      const previewLocator = comfyPage.vueNodes.getNodeByTitle('Preview Image')
+      const previewImage = new VueNodeFixture(previewLocator)
+      const subgraphLocator = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      const subgraphNode = new VueNodeFixture(subgraphLocator)
+
+      await test.step('Add node', async () => {
+        await comfyPage.menu.topbar.newWorkflowButton.click()
+        await comfyPage.nextFrame()
+
+        await comfyPage.searchBoxV2.addNode('Preview Image')
+        await expect(previewImage.root).toBeVisible()
+      })
+
+      await test.step('Create subgraph', async () => {
+        await previewImage.title.click()
+        await comfyPage.page.keyboard.press('Control+Shift+e')
+        await expect(subgraphNode.root).toBeVisible()
+      })
+
+      await test.step('Inject Previews from different tab', async () => {
+        const jobId = await execution.run()
+        await comfyPage.menu.topbar.getTab(0).click()
+        await comfyPage.vueNodes.waitForNodes(7)
+
+        const images = [{ filename: 'example.png', type: 'input' }]
+        execution.executed(jobId, '2:1', { images })
+        await comfyPage.nextFrame()
+
+        await comfyPage.menu.topbar.getTab(1).click()
+        await comfyPage.vueNodes.waitForNodes(1)
+      })
+
+      await expect(subgraphNode.imagePreview.locator('img')).toHaveCount(1)
+    }
+  )
 })
 
 async function countColumns(locator: Locator) {

browser_tests/tests/workspaceSwitcher.spec.ts

@@ -98,4 +98,43 @@ test.describe('Workspace switcher', { tag: '@cloud' }, () => {
     expect(box).not.toBeNull()
     expect(box!.height).toBeLessThan(SINGLE_LINE_MAX_HEIGHT_PX)
   })
+
+  test('opens the switcher to the left of the profile menu without overlap', async ({
+    comfyPage
+  }) => {
+    const page = comfyPage.page
+
+    await comfyPage.toast.closeToasts()
+    await page.getByRole('button', { name: 'Current user' }).click()
+    await page.getByTestId('workspace-switcher-trigger').click()
+
+    const panel = page.getByTestId('workspace-switcher-panel')
+    await expect(panel).toBeVisible()
+
+    const profileMenu = page.locator('.current-user-popover')
+    const panelBox = await panel.boundingBox()
+    const profileBox = await profileMenu.boundingBox()
+    expect(panelBox).not.toBeNull()
+    expect(profileBox).not.toBeNull()
+    expect(panelBox!.x + panelBox!.width).toBeLessThanOrEqual(profileBox!.x)
+  })
+
+  test('opens the create-workspace dialog with DES-246 copy', async ({
+    comfyPage
+  }) => {
+    const page = comfyPage.page
+
+    await comfyPage.toast.closeToasts()
+    await page.getByRole('button', { name: 'Current user' }).click()
+    await page.getByTestId('workspace-switcher-trigger').click()
+
+    await page.getByText('Create a workspace').click()
+
+    await expect(
+      page.getByText(
+        'Workspaces keep your projects and files organized. Subscribe to a Team plan to invite members.'
+      )
+    ).toBeVisible()
+    await expect(page.getByPlaceholder('Ex: Comfy Org')).toBeVisible()
+  })
 })

global.d.ts

@@ -49,6 +49,11 @@ interface Window {
     posthog_project_token?: string
     posthog_api_host?: string
     posthog_config?: Record<string, unknown>
+    customer_io?: {
+      write_key?: string
+      site_id?: string
+      user_id?: string
+    }
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

lint-staged.config.ts

@@ -34,7 +34,7 @@ function formatAndEslint(fileNames: string[]) {
   const joinedPaths = toJoinedRelativePaths(fileNames)
   return [
     `pnpm exec oxfmt --write ${joinedPaths}`,
-    `pnpm exec oxlint --type-aware --fix ${joinedPaths}`,
+    `pnpm exec oxlint --type-aware --no-error-on-unmatched-pattern --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.46.12",
+  "version": "1.47.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -66,6 +66,7 @@
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
+    "@customerio/cdp-analytics-browser": "catalog:",
     "@formkit/auto-animate": "catalog:",
     "@iconify/json": "catalog:",
     "@primeuix/forms": "catalog:",
@@ -206,7 +207,7 @@
     "zod-to-json-schema": "catalog:"
   },
   "engines": {
-    "node": ">=25",
+    "node": ">=25 <26",
     "pnpm": ">=11.3"
   },
   "packageManager": "pnpm@11.3.0"

packages/tailwind-utils/src/index.ts

@@ -7,7 +7,10 @@ export type { ClassValue } from 'clsx'
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      'font-size': ['text-xxs', 'text-xxxs']
+      'font-size': ['text-xxs', 'text-xxxs'],
+      // tailwind-merge does not know Tailwind's `max-h-none`, so it never
+      // resolves conflicts like `max-h-[80vh] max-h-none` (both survive).
+      'max-h': [{ 'max-h': ['none'] }]
     }
   }
 })

pnpm-workspace.yaml

@@ -15,6 +15,7 @@ catalog:
   '@astrojs/sitemap': ^3.7.3
   '@astrojs/vue': ^6.0.1
   '@comfyorg/comfyui-electron-types': 0.6.2
+  '@customerio/cdp-analytics-browser': ^0.5.3
   '@eslint/js': ^10.0.1
   '@formkit/auto-animate': ^0.9.0
   '@iconify-json/lucide': ^1.1.178
@@ -79,7 +80,7 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-better-tailwindcss: ^4.3.1
   eslint-plugin-import-x: ^4.16.2
-  eslint-plugin-oxlint: 1.59.0
+  eslint-plugin-oxlint: 1.69.0
   eslint-plugin-playwright: ^2.10.1
   eslint-plugin-storybook: ^10.2.10
   eslint-plugin-testing-library: ^7.16.1
@@ -101,9 +102,9 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9
-  oxfmt: ^0.44.0
-  oxlint: ^1.59.0
-  oxlint-tsgolint: ^0.20.0
+  oxfmt: ^0.54.0
+  oxlint: ^1.69.0
+  oxlint-tsgolint: ^0.23.0
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0

src/components/TopMenuSection.test.ts

@@ -87,6 +87,14 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
+const mockTrackUiButtonClicked = vi.hoisted(() => vi.fn())
+
+vi.mock('@/platform/telemetry', () => ({
+  useTelemetry: () => ({
+    trackUiButtonClicked: mockTrackUiButtonClicked
+  })
+}))
+
 type WrapperOptions = {
   pinia?: ReturnType<typeof createTestingPinia>
   stubs?: Record<string, boolean | Component>
@@ -110,6 +118,9 @@ function createWrapper({
             activeJobsShort: '{count} active | {count} active',
             clearQueueTooltip: 'Clear queue'
           }
+        },
+        rightSidePanel: {
+          togglePanel: 'Toggle properties panel'
         }
       }
     }
@@ -266,6 +277,19 @@ describe('TopMenuSection', () => {
     expect(screen.queryByTestId('active-jobs-indicator')).toBeNull()
   })
 
+  it('tracks right side panel opens', async () => {
+    const { user } = createWrapper()
+
+    await user.click(
+      screen.getByRole('button', { name: 'Toggle properties panel' })
+    )
+
+    expect(mockTrackUiButtonClicked).toHaveBeenCalledWith({
+      button_id: 'right_side_panel_opened',
+      element_group: 'top_menu'
+    })
+  })
+
   it('hides queue progress overlay when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn })
     const settingStore = useSettingStore(pinia)

src/components/TopMenuSection.vue

@@ -78,7 +78,7 @@
                 variant="secondary"
                 size="icon"
                 :aria-label="t('rightSidePanel.togglePanel')"
-                @click="rightSidePanelStore.togglePanel"
+                @click="openRightSidePanel"
               >
                 <i class="icon-[lucide--panel-right] size-4" />
               </Button>
@@ -148,6 +148,7 @@ import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useActionBarButtonStore } from '@/stores/actionBarButtonStore'
@@ -282,6 +283,14 @@ const rightSidePanelTooltipConfig = computed(() =>
   buildTooltipConfig(t('rightSidePanel.togglePanel'))
 )
 
+function openRightSidePanel() {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'right_side_panel_opened',
+    element_group: 'top_menu'
+  })
+  rightSidePanelStore.togglePanel()
+}
+
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 const hasLegacyContent = ref(false)

src/components/actionbar/ComfyActionbar.vue

@@ -222,7 +222,8 @@ watch(visible, async (newVisible) => {
  */
 useEventListener(dragHandleRef, 'mousedown', () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'actionbar_run_handle_drag_start'
+    button_id: 'actionbar_run_handle_drag_start',
+    element_group: 'actionbar'
   })
 })
 

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -131,7 +131,8 @@ const queueModeMenuItemLookup = computed<Record<string, QueueModeMenuItem>>(
         tooltip: t('menu.onChangeTooltip'),
         command: () => {
           useTelemetry()?.trackUiButtonClicked({
-            button_id: 'queue_mode_option_run_on_change_selected'
+            button_id: 'queue_mode_option_run_on_change_selected',
+            element_group: 'queue'
           })
           queueMode.value = 'change'
         }
@@ -145,7 +146,8 @@ const queueModeMenuItemLookup = computed<Record<string, QueueModeMenuItem>>(
         tooltip: t('menu.instantTooltip'),
         command: () => {
           useTelemetry()?.trackUiButtonClicked({
-            button_id: 'queue_mode_option_run_instant_selected'
+            button_id: 'queue_mode_option_run_instant_selected',
+            element_group: 'queue'
           })
           queueMode.value = 'instant-idle'
         }
@@ -237,7 +239,8 @@ const queuePrompt = async (e: Event) => {
 
   if (batchCount.value > 1) {
     useTelemetry()?.trackUiButtonClicked({
-      button_id: 'queue_run_multiple_batches_submitted'
+      button_id: 'queue_run_multiple_batches_submitted',
+      element_group: 'queue'
     })
   }
 

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -88,7 +88,8 @@ const home = computed(() => ({
   isBlueprint: isBlueprint.value,
   command: () => {
     useTelemetry()?.trackUiButtonClicked({
-      button_id: 'breadcrumb_subgraph_root_selected'
+      button_id: 'breadcrumb_subgraph_root_selected',
+      element_group: 'breadcrumb'
     })
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
@@ -103,7 +104,8 @@ const items = computed(() => {
     key: `subgraph-${subgraph.id}`,
     command: () => {
       useTelemetry()?.trackUiButtonClicked({
-        button_id: 'breadcrumb_subgraph_item_selected'
+        button_id: 'breadcrumb_subgraph_item_selected',
+        element_group: 'breadcrumb'
       })
       const canvas = useCanvasStore().getCanvas()
       if (!canvas.graph) throw new TypeError('Canvas has no graph')

src/components/common/VirtualGrid.vue

@@ -33,7 +33,6 @@ const {
   items,
   gridStyle,
   bufferRows = 1,
-  scrollThrottle = 64,
   resizeDebounce = 64,
   defaultItemHeight = 200,
   defaultItemWidth = 200,
@@ -42,7 +41,6 @@ const {
   items: (T & { key: string })[]
   gridStyle: CSSProperties
   bufferRows?: number
-  scrollThrottle?: number
   resizeDebounce?: number
   defaultItemHeight?: number
   defaultItemWidth?: number
@@ -61,7 +59,6 @@ const itemWidth = ref(defaultItemWidth)
 const container = ref<HTMLElement | null>(null)
 const { width, height } = useElementSize(container)
 const { y: scrollY } = useScroll(container, {
-  throttle: scrollThrottle,
   eventListenerOptions: { passive: true }
 })
 

src/components/common/WorkflowActionsDropdown.vue

@@ -40,7 +40,8 @@ function handleOpen(open: boolean) {
   if (open) {
     markAsSeen()
     useTelemetry()?.trackUiButtonClicked({
-      button_id: source
+      button_id: source,
+      element_group: 'workflow_actions'
     })
   }
 }

src/components/dialog/GlobalDialog.test.ts

@@ -17,7 +17,9 @@ import { useDialogStore } from '@/stores/dialogStore'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: { g: { close: 'Close' } } },
+  messages: {
+    en: { g: { close: 'Close', maximizeDialog: 'Maximize' } }
+  },
   missingWarn: false,
   fallbackWarn: false
 })
@@ -193,6 +195,68 @@ describe('GlobalDialog Reka parity with PrimeVue', () => {
 
     expect(store.isDialogOpen('reka-esc-blocked')).toBe(true)
   })
+
+  it('applies headerClass and bodyClass on the non-headless path', async () => {
+    mountDialog()
+    const store = useDialogStore()
+
+    store.showDialog({
+      key: 'reka-section-classes',
+      title: 'Section classes',
+      component: Body,
+      dialogComponentProps: {
+        renderer: 'reka',
+        headerClass: 'p-2',
+        bodyClass: 'p-0'
+      }
+    })
+
+    await screen.findByRole('dialog')
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const header = screen.getByText('Section classes').parentElement
+    expect(header?.classList.contains('p-2')).toBe(true)
+    // twMerge drops the default header padding in favor of headerClass
+    expect(header?.classList.contains('px-4')).toBe(false)
+
+    // eslint-disable-next-line testing-library/no-node-access
+    const body = screen.getByTestId('body').parentElement
+    expect(body?.classList.contains('p-0')).toBe(true)
+    expect(body?.classList.contains('px-4')).toBe(false)
+  })
+
+  it('maximize overrides custom dimension classes from contentClass', async () => {
+    mountDialog()
+    const store = useDialogStore()
+    const user = userEvent.setup()
+
+    store.showDialog({
+      key: 'reka-maximize-wins',
+      title: 'Maximize wins',
+      component: Body,
+      dialogComponentProps: {
+        renderer: 'reka',
+        maximizable: true,
+        contentClass:
+          'w-[80vw] max-w-[80vw] sm:max-w-[80vw] h-[80vh] max-h-[80vh]'
+      }
+    })
+
+    const dialog = await screen.findByRole('dialog')
+    expect(dialog.classList.contains('w-[80vw]')).toBe(true)
+
+    await user.click(screen.getByRole('button', { name: 'Maximize' }))
+
+    // Maximized dimensions win over the caller's fixed dimensions,
+    // mirroring PrimeVue's `.p-dialog-maximized` !important behavior.
+    expect(dialog.classList.contains('size-auto')).toBe(true)
+    expect(dialog.classList.contains('max-h-none')).toBe(true)
+    expect(dialog.classList.contains('w-[80vw]')).toBe(false)
+    expect(dialog.classList.contains('h-[80vh]')).toBe(false)
+    expect(dialog.classList.contains('max-h-[80vh]')).toBe(false)
+    expect(dialog.classList.contains('max-w-[80vw]')).toBe(false)
+    expect(dialog.classList.contains('sm:max-w-[80vw]')).toBe(false)
+  })
 })
 
 describe('shouldPreventRekaDismiss', () => {
@@ -238,6 +302,22 @@ describe('shouldPreventRekaDismiss', () => {
     expect(event.defaultPrevented).toBe(false)
   })
 
+  it('prevents dismiss when the dialog is not the top-most (stacked)', () => {
+    // A backgrounded dialog must never dismiss on an outside pointer — the
+    // pointer belongs to the dialog stacked above it (e.g. Edit Keybinding
+    // opening over Settings). Target is outside any overlay, so only the
+    // is-active gate can prevent it.
+    const event = makeEvent(document.body)
+    onRekaPointerDownOutside({ dismissableMask: undefined }, event, false)
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  it('allows the top-most dialog to dismiss on a true outside pointer', () => {
+    const event = makeEvent(document.body)
+    onRekaPointerDownOutside({ dismissableMask: undefined }, event, true)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
   it('prevents dismiss when dismissableMask is false even outside an overlay', () => {
     const event = makeEvent(document.body)
     onRekaPointerDownOutside({ dismissableMask: false }, event)

src/components/dialog/GlobalDialog.vue

@@ -18,13 +18,19 @@
           :maximized="!!item.dialogComponentProps.maximized"
           :class="item.dialogComponentProps.contentClass"
           :aria-labelledby="item.key"
+          @open-auto-focus="(e) => onRekaOpenAutoFocus(e, item.key)"
           @escape-key-down="
             (e) =>
               item.dialogComponentProps.closeOnEscape === false &&
               e.preventDefault()
           "
           @pointer-down-outside="
-            (e) => onRekaPointerDownOutside(item.dialogComponentProps, e)
+            (e) =>
+              onRekaPointerDownOutside(
+                item.dialogComponentProps,
+                e,
+                dialogStore.activeKey === item.key
+              )
           "
           @focus-outside="onRekaFocusOutside"
           @mousedown="() => dialogStore.riseDialog({ key: item.key })"
@@ -37,7 +43,7 @@
             />
           </template>
           <template v-else>
-            <DialogHeader>
+            <DialogHeader :class="item.dialogComponentProps.headerClass">
               <component
                 :is="item.headerComponent"
                 v-if="item.headerComponent"
@@ -58,14 +64,24 @@
                 />
               </div>
             </DialogHeader>
-            <div class="flex-1 overflow-auto px-4 py-2">
+            <div
+              :class="
+                cn(
+                  'flex-1 overflow-auto px-4 py-2',
+                  item.dialogComponentProps.bodyClass
+                )
+              "
+            >
               <component
                 :is="item.component"
                 v-bind="item.contentProps"
                 :maximized="item.dialogComponentProps.maximized"
               />
             </div>
-            <DialogFooter v-if="item.footerComponent">
+            <DialogFooter
+              v-if="item.footerComponent"
+              :class="item.dialogComponentProps.footerClass"
+            >
               <component :is="item.footerComponent" v-bind="item.footerProps" />
             </DialogFooter>
           </template>
@@ -109,6 +125,8 @@
 <script setup lang="ts">
 import PrimeDialog from 'primevue/dialog'
 
+import { cn } from '@comfyorg/tailwind-utils'
+
 import Dialog from '@/components/ui/dialog/Dialog.vue'
 import DialogClose from '@/components/ui/dialog/DialogClose.vue'
 import DialogContent from '@/components/ui/dialog/DialogContent.vue'
@@ -136,6 +154,22 @@ function onRekaOpenChange(key: string, open: boolean) {
   if (!open) dialogStore.closeDialog({ key })
 }
 
+// Reka's FocusScope focuses the first tabbable element on open (often a header
+// or footer button). Dialog content that marks an input with `autofocus` (e.g.
+// the keybinding capture input, the prompt input) relied on PrimeVue honoring
+// that attribute, so honor it here: focus the autofocus target and cancel
+// Reka's default auto-focus when one is present.
+function onRekaOpenAutoFocus(event: Event, key: string) {
+  const content = document.querySelector<HTMLElement>(
+    `[aria-labelledby="${CSS.escape(key)}"]`
+  )
+  const autofocusEl = content?.querySelector<HTMLElement>('[autofocus]')
+  if (autofocusEl) {
+    event.preventDefault()
+    autofocusEl.focus()
+  }
+}
+
 function toggleMaximize(item: DialogInstance) {
   item.dialogComponentProps.maximized = !item.dialogComponentProps.maximized
 }

src/components/dialog/content/ErrorDialogContent.vue

@@ -101,7 +101,8 @@ const reportOpen = ref(false)
  */
 const showReport = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'error_dialog_show_report_clicked'
+    button_id: 'error_dialog_show_report_clicked',
+    element_group: 'error_dialog'
   })
   reportOpen.value = true
 }

src/components/dialog/content/error/FindIssueButton.vue

@@ -25,7 +25,8 @@ const queryString = computed(() => props.errorMessage + ' is:issue')
 
 function openGitHubIssues() {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'error_dialog_find_existing_issues_clicked'
+    button_id: 'error_dialog_find_existing_issues_clicked',
+    element_group: 'error_dialog'
   })
   const query = encodeURIComponent(queryString.value)
   const url = `https://github.com/${props.repoOwner}/${props.repoName}/issues?q=${query}`

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.test.ts

@@ -1,7 +1,8 @@
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { render, screen, waitFor } from '@testing-library/vue'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 
@@ -44,23 +45,28 @@ const mockSubscription = vi.hoisted(() => ({
   value: null as { endDate: string | null } | null
 }))
 
+const mockCancelSubscription = vi.hoisted(() => vi.fn())
+const mockFetchStatus = vi.hoisted(() => vi.fn())
+const mockCloseDialog = vi.hoisted(() => vi.fn())
+const mockToastAdd = vi.hoisted(() => vi.fn())
+
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: vi.fn(() => ({
-    cancelSubscription: vi.fn(),
-    fetchStatus: vi.fn(),
+    cancelSubscription: mockCancelSubscription,
+    fetchStatus: mockFetchStatus,
     subscription: mockSubscription
   }))
 }))
 
 vi.mock('@/stores/dialogStore', () => ({
   useDialogStore: vi.fn(() => ({
-    closeDialog: vi.fn()
+    closeDialog: mockCloseDialog
   }))
 }))
 
 vi.mock('primevue/usetoast', () => ({
   useToast: vi.fn(() => ({
-    add: vi.fn()
+    add: mockToastAdd
   }))
 }))
 
@@ -86,6 +92,54 @@ function renderComponent(props: { cancelAt?: string } = {}) {
 }
 
 describe('CancelSubscriptionDialogContent', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('cancel flow', () => {
+    it('shows an error toast and keeps the dialog open when cancellation fails', async () => {
+      mockSubscription.value = null
+      mockCancelSubscription.mockRejectedValueOnce(
+        new Error('Subscription cancellation timed out')
+      )
+
+      renderComponent()
+      await userEvent.click(
+        screen.getByRole('button', { name: /^cancel subscription$/i })
+      )
+
+      await waitFor(() =>
+        expect(mockToastAdd).toHaveBeenCalledWith(
+          expect.objectContaining({
+            severity: 'error',
+            detail: 'Subscription cancellation timed out'
+          })
+        )
+      )
+      expect(mockCloseDialog).not.toHaveBeenCalled()
+    })
+
+    it('closes the dialog and shows a success toast when cancellation succeeds', async () => {
+      mockSubscription.value = null
+      mockCancelSubscription.mockResolvedValueOnce(undefined)
+
+      renderComponent()
+      await userEvent.click(
+        screen.getByRole('button', { name: /^cancel subscription$/i })
+      )
+
+      await waitFor(() =>
+        expect(mockCloseDialog).toHaveBeenCalledWith({
+          key: 'cancel-subscription'
+        })
+      )
+      expect(mockFetchStatus).toHaveBeenCalled()
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({ severity: 'success' })
+      )
+    })
+  })
+
   describe('formattedEndDate fallbacks', () => {
     it('uses the localized fallback when no cancel timestamp is available', () => {
       mockSubscription.value = { endDate: null }

src/components/dialog/rekaPrimeVueBridge.ts

@@ -27,8 +27,19 @@ function isInsideOverlay(target: EventTarget | null): boolean {
 
 export function onRekaPointerDownOutside(
   options: { dismissableMask?: boolean },
-  event: OutsideEvent
+  event: OutsideEvent,
+  isActive = true
 ) {
+  // Stacked dialogs each render an independent Reka `Dialog` root, so a lower
+  // dialog's DismissableLayer sees a pointer-down that opened (or landed on)
+  // the dialog above it as "outside" and would dismiss itself — including via
+  // the upper dialog's overlay, whose element matches none of the portal
+  // selectors below. Only the top-most dialog may dismiss on an outside
+  // pointer, mirroring the escape-key handling in `GlobalDialog`.
+  if (!isActive) {
+    event.preventDefault()
+    return
+  }
   if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
     return

src/components/graph/GraphCanvasMenu.vue

@@ -218,7 +218,8 @@ onMounted(() => {
  */
 const onMinimapToggleClick = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'graph_menu_minimap_toggle_clicked'
+    button_id: 'graph_menu_minimap_toggle_clicked',
+    element_group: 'graph_menu'
   })
   void commandStore.execute('Comfy.Canvas.ToggleMinimap')
 }
@@ -228,7 +229,8 @@ const onMinimapToggleClick = () => {
  */
 const onLinkVisibilityToggleClick = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'graph_menu_hide_links_toggle_clicked'
+    button_id: 'graph_menu_hide_links_toggle_clicked',
+    element_group: 'graph_menu'
   })
   void commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')
 }

src/components/graph/SelectionToolbox.vue

@@ -101,6 +101,7 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 
 const {
   hasAnySelection,
+  hasGroupedNodesSelection,
   hasMultipleSelection,
   isSingleNode,
   isSingleSubgraph,
@@ -118,7 +119,10 @@ const showSubgraphButtons = computed(() => isSingleSubgraph.value)
 
 const showBypass = computed(
   () =>
-    isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
+    isSingleNode.value ||
+    isSingleSubgraph.value ||
+    hasMultipleSelection.value ||
+    hasGroupedNodesSelection.value
 )
 const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
 const showMaskEditor = computed(() => isSingleImageNode.value)

src/components/graph/selectionToolbox/InfoButton.test.ts

@@ -65,7 +65,8 @@ describe('InfoButton', () => {
 
     expect(openNodeInfoMock).toHaveBeenCalled()
     expect(trackUiButtonClickedMock).toHaveBeenCalledWith({
-      button_id: 'selection_toolbox_node_info_opened'
+      button_id: 'selection_toolbox_node_info_opened',
+      element_group: 'selection_toolbox'
     })
   })
 

src/components/graph/selectionToolbox/InfoButton.vue

@@ -24,7 +24,8 @@ const onInfoClick = () => {
   if (!openNodeInfo()) return
 
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'selection_toolbox_node_info_opened'
+    button_id: 'selection_toolbox_node_info_opened',
+    element_group: 'selection_toolbox'
   })
 }
 </script>

src/components/load3d/Load3D.vue

@@ -27,6 +27,7 @@
         :can-use-background-image="canUseBackgroundImage"
         :material-modes="materialModes"
         :has-skeleton="hasSkeleton"
+        :source-format="sourceFormat"
         @update-background-image="handleBackgroundImageUpdate"
         @export-model="handleExportModel"
         @update-hdri-file="handleHDRIFileUpdate"
@@ -166,6 +167,7 @@ const {
   canExport,
   materialModes,
   hasSkeleton,
+  sourceFormat,
   hasRecording,
   recordingDuration,
   animations,

src/components/load3d/Load3DControls.vue

@@ -91,6 +91,7 @@
 
       <ExportControls
         v-if="showExportControls"
+        :source-format="sourceFormat"
         @export-model="handleExportModel"
       />
 
@@ -134,7 +135,8 @@ const {
   canUseHdri = true,
   canUseBackgroundImage = true,
   materialModes = ['original', 'normal', 'wireframe'],
-  hasSkeleton = false
+  hasSkeleton = false,
+  sourceFormat = null
 } = defineProps<{
   canUseGizmo?: boolean
   canUseLighting?: boolean
@@ -143,6 +145,7 @@ const {
   canUseBackgroundImage?: boolean
   materialModes?: readonly MaterialMode[]
   hasSkeleton?: boolean
+  sourceFormat?: string | null
 }>()
 
 const sceneConfig = defineModel<SceneConfig>('sceneConfig')

src/components/load3d/Load3dViewerContent.test.ts

@@ -59,6 +59,7 @@ function buildViewerStub() {
     canUseGizmo: ref(true),
     canUseLighting: ref(true),
     canExport: ref(true),
+    sourceFormat: ref<string | null>(null),
     materialModes: ref(['original', 'normal', 'wireframe']),
     animations: ref<Array<{ name: string; index: number }>>([]),
     playing: ref(false),

src/components/load3d/Load3dViewerContent.vue

@@ -82,7 +82,10 @@
           </div>
 
           <div v-if="viewer.canExport.value" class="space-y-4 p-2">
-            <ExportControls @export-model="viewer.exportModel" />
+            <ExportControls
+              :source-format="viewer.sourceFormat.value"
+              @export-model="viewer.exportModel"
+            />
           </div>
         </div>
       </div>

src/components/load3d/controls/ExportControls.test.ts

@@ -13,9 +13,12 @@ const i18n = createI18n({
   }
 })
 
-function renderComponent(onExportModel?: (format: string) => void) {
+function renderComponent(
+  onExportModel?: (format: string) => void,
+  sourceFormat: string | null = null
+) {
   const utils = render(ExportControls, {
-    props: { onExportModel },
+    props: { onExportModel, sourceFormat },
     global: {
       plugins: [i18n],
       directives: { tooltip: () => {} }
@@ -63,6 +66,23 @@ describe('ExportControls', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('offers only the source format for direct-export files (e.g. ply)', async () => {
+    const onExportModel = vi.fn()
+    const { user } = renderComponent(onExportModel, 'ply')
+
+    await user.click(screen.getByRole('button', { name: 'Export model' }))
+
+    expect(screen.getByRole('button', { name: 'PLY' })).toBeVisible()
+    for (const label of ['GLB', 'OBJ', 'STL', 'FBX']) {
+      expect(
+        screen.queryByRole('button', { name: label })
+      ).not.toBeInTheDocument()
+    }
+
+    await user.click(screen.getByRole('button', { name: 'PLY' }))
+    expect(onExportModel).toHaveBeenCalledWith('ply')
+  })
+
   it('hides the popup when a click happens outside the trigger', async () => {
     const { user } = renderComponent()
 

src/components/load3d/controls/ExportControls.vue

@@ -35,9 +35,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { getExportFormatOptions } from '@/extensions/core/load3d/constants'
+
+const { sourceFormat = null } = defineProps<{
+  sourceFormat?: string | null
+}>()
 
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
@@ -45,12 +50,7 @@ const emit = defineEmits<{
 
 const showExportFormats = ref(false)
 
-const exportFormats = [
-  { label: 'GLB', value: 'glb' },
-  { label: 'OBJ', value: 'obj' },
-  { label: 'STL', value: 'stl' },
-  { label: 'FBX', value: 'fbx' }
-]
+const exportFormats = computed(() => getExportFormatOptions(sourceFormat))
 
 function toggleExportFormats() {
   showExportFormats.value = !showExportFormats.value

src/components/load3d/controls/ViewerControls.vue

@@ -41,7 +41,9 @@ const openIn3DViewer = () => {
     component: Load3DViewerContent,
     props: props,
     dialogComponentProps: {
-      style: 'width: 80vw; height: 80vh;',
+      renderer: 'reka',
+      size: 'full',
+      contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
       maximizable: true,
       onClose: async () => {
         await useLoad3dService().handleViewerClose(props.node)

src/components/load3d/controls/viewer/ViewerExportControls.test.ts

@@ -72,9 +72,12 @@ const i18n = createI18n({
   messages: { en: { load3d: { export: 'Export' } } }
 })
 
-function renderComponent(onExportModel?: (format: string) => void) {
+function renderComponent(
+  onExportModel?: (format: string) => void,
+  sourceFormat: string | null = null
+) {
   const utils = render(ViewerExportControls, {
-    props: { onExportModel },
+    props: { onExportModel, sourceFormat },
     global: { plugins: [i18n] }
   })
   return { ...utils, user: userEvent.setup() }
@@ -114,4 +117,32 @@ describe('ViewerExportControls', () => {
 
     expect(onExportModel).toHaveBeenCalledWith('glb')
   })
+
+  it('offers only the source format for direct-export files (e.g. spz)', async () => {
+    const onExportModel = vi.fn()
+    const { user } = renderComponent(onExportModel, 'spz')
+    const select = screen.getByRole('combobox') as HTMLSelectElement
+
+    expect(Array.from(select.options).map((o) => o.value)).toEqual(['spz'])
+
+    await user.click(screen.getByRole('button', { name: 'Export' }))
+
+    expect(onExportModel).toHaveBeenCalledWith('spz')
+  })
+
+  it('repairs the selected format when sourceFormat switches to a direct-export type', async () => {
+    const onExportModel = vi.fn()
+    const { user, rerender } = renderComponent(onExportModel, null)
+    const select = screen.getByRole('combobox') as HTMLSelectElement
+
+    expect(select.value).toBe('obj')
+
+    await rerender({ onExportModel, sourceFormat: 'ply' })
+
+    expect(Array.from(select.options).map((o) => o.value)).toEqual(['ply'])
+
+    await user.click(screen.getByRole('button', { name: 'Export' }))
+
+    expect(onExportModel).toHaveBeenCalledWith('ply')
+  })
 })

src/components/load3d/controls/viewer/ViewerExportControls.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import Select from '@/components/ui/select/Select.vue'
@@ -34,20 +34,30 @@ import SelectContent from '@/components/ui/select/SelectContent.vue'
 import SelectItem from '@/components/ui/select/SelectItem.vue'
 import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
 import SelectValue from '@/components/ui/select/SelectValue.vue'
+import { getExportFormatOptions } from '@/extensions/core/load3d/constants'
+
+const { sourceFormat = null } = defineProps<{
+  sourceFormat?: string | null
+}>()
 
 const emit = defineEmits<{
   (e: 'exportModel', format: string): void
 }>()
 
-const exportFormats = [
-  { label: 'GLB', value: 'glb' },
-  { label: 'OBJ', value: 'obj' },
-  { label: 'STL', value: 'stl' },
-  { label: 'FBX', value: 'fbx' }
-]
+const exportFormats = computed(() => getExportFormatOptions(sourceFormat))
 
 const exportFormat = ref('obj')
 
+watch(
+  exportFormats,
+  (formats) => {
+    if (!formats.some((fmt) => fmt.value === exportFormat.value)) {
+      exportFormat.value = formats[0]?.value ?? ''
+    }
+  },
+  { immediate: true }
+)
+
 const exportModel = (format: string) => {
   emit('exportModel', format)
 }

src/components/rightSidePanel/RightSidePanel.vue

@@ -14,6 +14,7 @@ import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { useTelemetry } from '@/platform/telemetry'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
@@ -106,6 +107,10 @@ const isSingleSubgraphNode = computed(() => {
 })
 
 function closePanel() {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'right_side_panel_closed',
+    element_group: 'right_side_panel'
+  })
   rightSidePanelStore.closePanel()
 }
 

src/components/rightSidePanel/errors/ErrorCardSection.vue

@@ -0,0 +1,71 @@
+<template>
+  <section :class="cn('group flex min-w-0 flex-col py-2', className)">
+    <div class="flex min-h-8 w-full items-center gap-2 px-3">
+      <button
+        type="button"
+        class="focus-visible:ring-ring flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-sm border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-1"
+        :aria-expanded="!collapse"
+        :aria-controls="bodyId"
+        @click="collapse = !collapse"
+      >
+        <span
+          class="flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-destructive-background-hover px-1 text-2xs/none font-semibold text-white tabular-nums"
+        >
+          {{ count }}
+        </span>
+        <span class="min-w-0 flex-1 truncate text-sm text-base-foreground">
+          {{ title }}
+        </span>
+      </button>
+      <slot name="actions" />
+      <button
+        type="button"
+        class="focus-visible:ring-ring flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 outline-none focus-visible:ring-1"
+        :aria-expanded="!collapse"
+        :aria-controls="bodyId"
+        :aria-label="
+          collapse ? t('rightSidePanel.expand') : t('rightSidePanel.collapse')
+        "
+        @click="collapse = !collapse"
+      >
+        <i
+          aria-hidden="true"
+          :class="
+            cn(
+              'icon-[lucide--chevron-up] size-4 text-muted-foreground transition-transform group-hover:text-base-foreground',
+              collapse && '-rotate-180'
+            )
+          "
+        />
+      </button>
+    </div>
+    <TransitionCollapse>
+      <div v-if="!collapse" :id="bodyId">
+        <slot />
+      </div>
+    </TransitionCollapse>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
+
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+
+const {
+  title,
+  count,
+  class: className
+} = defineProps<{
+  title: string
+  count: number
+  class?: string
+}>()
+
+const collapse = defineModel<boolean>('collapse', { default: false })
+
+const bodyId = useId()
+const { t } = useI18n()
+</script>

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -1,29 +1,31 @@
 <template>
-  <div class="flex min-h-0 flex-1 flex-col overflow-hidden">
+  <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
     <div
       v-if="card.nodeId && !compact"
-      class="flex flex-wrap items-center gap-2 py-2"
+      class="flex min-h-8 flex-wrap items-center gap-2"
     >
-      <button
-        v-if="hasRuntimeError && (card.nodeTitle || card.title)"
-        type="button"
-        class="m-0 min-w-0 flex-1 cursor-pointer appearance-none truncate border-0 bg-transparent p-0 text-left text-sm font-medium text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
-        @click="handleLocateNode"
-      >
-        {{ card.nodeTitle || card.title }}
-      </button>
-      <span
-        v-else-if="card.nodeTitle || card.title"
-        class="flex-1 truncate text-sm font-medium text-muted-foreground"
-      >
-        {{ card.nodeTitle || card.title }}
+      <span class="flex min-w-0 flex-1">
+        <button
+          v-if="hasRuntimeError && (card.nodeTitle || card.title)"
+          type="button"
+          class="focus-visible:ring-ring m-0 max-w-full min-w-0 cursor-pointer appearance-none truncate rounded-sm border-0 bg-transparent p-0 text-left text-xs font-normal text-base-foreground outline-none focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
+          @click="handleLocateNode"
+        >
+          {{ card.nodeTitle || card.title }}
+        </button>
+        <span
+          v-else-if="card.nodeTitle || card.title"
+          class="max-w-full min-w-0 truncate text-xs font-normal text-base-foreground"
+        >
+          {{ card.nodeTitle || card.title }}
+        </span>
       </span>
       <div class="flex shrink-0 items-center">
         <Button
           v-if="card.isSubgraphNode"
           variant="secondary"
           size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
           @click.stop="handleEnterSubgraph"
         >
           {{ t('rightSidePanel.enterSubgraph') }}
@@ -34,7 +36,7 @@
           size="icon-sm"
           :class="
             cn(
-              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground',
+              'size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset',
               runtimeDetailsExpanded &&
                 'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
             )
@@ -49,7 +51,7 @@
         <Button
           variant="textonly"
           size="icon-sm"
-          class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+          class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
           :aria-label="t('rightSidePanel.locateNode')"
           @click.stop="handleLocateNode"
         >
@@ -59,29 +61,29 @@
     </div>
 
     <div
-      class="flex min-h-0 flex-1 flex-col space-y-4 divide-y divide-interface-stroke/20"
+      class="flex min-h-0 flex-1 flex-col space-y-2 divide-y divide-interface-stroke/20"
     >
       <div
         v-for="(error, idx) in card.errors"
         :key="idx"
-        class="flex min-h-0 flex-col gap-3"
+        class="flex min-h-0 flex-col gap-1"
       >
         <p
           v-if="getInlineMessage(error)"
-          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
+          class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-xs/relaxed wrap-break-word whitespace-pre-wrap"
         >
           {{ getInlineMessage(error) }}
         </p>
 
         <ul
           v-if="getInlineItemLabel(error)"
-          class="m-0 list-disc space-y-1 pl-5 text-sm/relaxed text-muted-foreground marker:text-muted-foreground"
+          class="m-0 list-disc space-y-1 pl-5 text-xs/relaxed text-muted-foreground marker:text-muted-foreground"
         >
           <li class="min-w-0 wrap-break-word">
             <button
               v-if="card.nodeId"
               type="button"
-              class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
+              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
               @click="handleLocateNode"
             >
               {{ getInlineItemLabel(error) }}
@@ -96,13 +98,13 @@
           v-if="!error.isRuntimeError && getInlineDetails(error, idx)"
           :class="
             cn(
-              'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background p-2.5',
+              'overflow-y-auto rounded-lg bg-base-foreground/5 p-3',
               'max-h-[6lh]'
             )
           "
         >
           <p
-            class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+            class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
           >
             {{ getInlineDetails(error, idx) }}
           </p>
@@ -115,60 +117,61 @@
             role="region"
             data-testid="runtime-error-panel"
             :aria-label="t('rightSidePanel.errorLog')"
-            class="flex min-h-0 flex-col gap-3"
+            class="flex min-h-0 flex-col gap-1"
           >
             <div
               v-if="getInlineDetails(error, idx)"
-              class="overflow-hidden rounded-lg border border-interface-stroke/30 bg-secondary-background"
+              class="flex flex-col gap-3 rounded-lg bg-base-foreground/5 p-3"
             >
-              <div
-                class="flex items-center justify-between gap-2 px-3 pt-3 pb-2"
-              >
-                <span
-                  class="text-xs font-semibold tracking-wide text-base-foreground uppercase"
-                >
-                  {{ t('rightSidePanel.errorLog') }}
-                </span>
-                <Button
-                  variant="textonly"
-                  size="icon-sm"
-                  class="size-7 shrink-0 text-muted-foreground hover:text-base-foreground"
-                  :aria-label="t('g.copy')"
-                  data-testid="error-card-copy"
-                  @click="handleCopyError(idx)"
-                >
-                  <i class="icon-[lucide--copy] size-4" />
-                </Button>
-              </div>
-              <div class="max-h-[15lh] overflow-y-auto px-3 pb-3">
-                <p
-                  class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
-                >
-                  {{ getInlineDetails(error, idx) }}
-                </p>
+              <div class="flex flex-col gap-2">
+                <div class="flex items-center justify-between gap-1 py-1">
+                  <span
+                    class="text-xs font-semibold text-base-foreground uppercase"
+                  >
+                    {{ t('rightSidePanel.errorLog') }}
+                  </span>
+                  <Button
+                    variant="textonly"
+                    size="icon-sm"
+                    class="size-7 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
+                    :aria-label="t('g.copy')"
+                    data-testid="error-card-copy"
+                    @click="handleCopyError(idx)"
+                  >
+                    <i class="icon-[lucide--copy] size-4" />
+                  </Button>
+                </div>
+                <div class="max-h-[15lh] overflow-y-auto">
+                  <p
+                    class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
+                  >
+                    {{ getInlineDetails(error, idx) }}
+                  </p>
+                </div>
               </div>
 
-              <div class="mx-3 mt-1 h-px bg-base-foreground/20" />
-              <div class="mx-3 flex items-center justify-between gap-2 py-2">
+              <div aria-hidden="true" class="h-px w-full bg-interface-stroke" />
+
+              <div class="flex items-center justify-between gap-2">
                 <Button
                   v-tooltip.top="t('rightSidePanel.getHelpTooltip')"
                   variant="textonly"
                   size="sm"
-                  class="h-8 justify-start gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
+                  class="justify-start gap-1 px-0 text-xs hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
                   @click="handleGetHelp"
                 >
-                  <i class="icon-[lucide--external-link] size-3.5" />
+                  <i class="icon-[lucide--external-link] size-4" />
                   {{ t('g.getHelpAction') }}
                 </Button>
                 <Button
                   v-tooltip.top="t('rightSidePanel.findOnGithubTooltip')"
                   variant="textonly"
                   size="sm"
-                  class="h-8 justify-end gap-1 rounded-lg px-0 text-sm hover:bg-transparent hover:text-base-foreground"
+                  class="justify-end gap-1 px-0 text-xs hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
                   data-testid="error-card-find-on-github"
                   @click="handleCheckGithub(error)"
                 >
-                  <i class="icon-[lucide--github] size-3.5" />
+                  <i class="icon-[lucide--github] size-4" />
                   {{ t('g.findOnGithub') }}
                 </Button>
               </div>

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-testid="missing-node-card" class="px-4 pb-2">
+  <div data-testid="missing-node-card" class="px-3">
     <!-- Core node version warning (OSS only) -->
     <div
       v-if="!isCloud && hasMissingCoreNodes"
@@ -56,7 +56,7 @@
         >
       </template>
     </i18n-t>
-    <div class="flex flex-col gap-1 overflow-hidden py-2">
+    <div class="flex flex-col gap-1 overflow-hidden">
       <MissingPackGroupRow
         v-for="group in missingPackGroups"
         :key="group.packId ?? '__unknown__'"
@@ -75,7 +75,7 @@
       variant="secondary"
       size="sm"
       :disabled="isRestarting"
-      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
+      class="mt-2 h-8 w-full min-w-0 rounded-md text-xs"
       @click="applyChanges()"
     >
       <DotSpinner v-if="isRestarting" duration="1s" :size="12" />

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -12,17 +12,17 @@
             : t('rightSidePanel.missingNodePacks.expand')
         "
         :aria-expanded="expanded"
-        :class="
-          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
-          )
-        "
+        class="h-8 w-4 shrink-0 p-0 hover:bg-transparent focus-visible:ring-inset"
         @click="toggleExpand"
       >
         <i
           aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          :class="
+            cn(
+              'icon-[lucide--chevron-right] size-4 text-muted-foreground transition-transform duration-200',
+              expanded && 'rotate-90'
+            )
+          "
         />
       </Button>
       <i
@@ -64,7 +64,7 @@
           </button>
           <span
             v-else
-            class="min-w-0 truncate text-sm/relaxed font-normal"
+            class="min-w-0 truncate text-xs/relaxed font-normal"
             :class="
               isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
             "
@@ -80,7 +80,7 @@
             v-if="showInfoButton && group.packId !== null"
             variant="textonly"
             size="icon-sm"
-            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            class="size-6 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground focus-visible:ring-inset"
             :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
             @click="emit('openManagerInfo', group.packId ?? '')"
           >
@@ -89,7 +89,7 @@
           <span
             v-if="showNodeCount"
             data-testid="missing-node-pack-count"
-            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+            class="flex h-4 min-w-4 shrink-0 items-center justify-center rounded-sm bg-secondary-background-hover px-1 text-2xs font-semibold text-base-foreground"
           >
             {{ group.nodeTypes.length }}
           </span>
@@ -99,7 +99,7 @@
         <Button
           variant="secondary"
           size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
           :disabled="isPackInstalled || isInstalling"
           @click="handlePackInstallClick"
         >
@@ -122,10 +122,10 @@
       </div>
       <div
         v-else-if="showLoadingAction"
-        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
+        class="ml-auto flex h-6 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-sm bg-secondary-background px-2 py-1 text-xs opacity-60 select-none"
       >
         <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
-        <span class="text-foreground min-w-0 truncate text-sm">
+        <span class="text-foreground min-w-0 truncate text-xs">
           {{ t('g.loading') }}
         </span>
       </div>
@@ -133,7 +133,7 @@
         <Button
           variant="secondary"
           size="sm"
-          class="h-8 shrink-0 rounded-lg text-sm"
+          class="shrink-0 focus-visible:ring-inset"
           @click="
             openManager({
               initialTab: ManagerTab.All,
@@ -150,7 +150,7 @@
         v-if="primaryLocatableNodeType"
         variant="textonly"
         size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
         :aria-label="t('rightSidePanel.locateNode')"
         @click="handleLocateNode(primaryLocatableNodeType)"
       >
@@ -163,7 +163,7 @@
         v-if="showNodeTypeList"
         :class="
           cn(
-            'm-0 list-none space-y-1 p-0',
+            'm-0 list-none p-0',
             (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
           )
         "
@@ -190,7 +190,7 @@
               </button>
               <span
                 v-else
-                class="text-sm/relaxed wrap-break-word text-muted-foreground"
+                class="text-xs/relaxed wrap-break-word text-muted-foreground"
               >
                 {{ getLabel(nodeType) }}
               </span>
@@ -199,7 +199,7 @@
               v-if="isLocatableNodeType(nodeType)"
               variant="textonly"
               size="icon-sm"
-              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
               :aria-label="t('rightSidePanel.locateNode')"
               @click="handleLocateNode(nodeType)"
             >
@@ -241,7 +241,7 @@ const { t } = useI18n()
 const expandedOverride = ref<boolean | null>(null)
 
 const packTextButtonClass =
-  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'
+  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word outline-none focus:outline-none rounded-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none'
 
 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -78,6 +78,10 @@ describe('TabErrors.vue', () => {
           rightSidePanel: {
             noErrors: 'No errors',
             noneSearchDesc: 'No results found',
+            errorsDetected: 'Error detected | Errors detected',
+            resolveBeforeRun: 'Resolve before running the workflow',
+            expand: 'Expand',
+            collapse: 'Collapse',
             errorHelp: 'Error help',
             errorLog: 'Error log',
             findOnGithubTooltip: 'Search GitHub issues',
@@ -118,9 +122,6 @@ describe('TabErrors.vue', () => {
             template:
               '<input @input="$emit(\'update:modelValue\', $event.target.value)" />'
           },
-          PropertiesAccordionItem: {
-            template: '<div><slot name="label" /><slot /></div>'
-          },
           Button: {
             template: '<button v-bind="$attrs"><slot /></button>'
           }
@@ -211,7 +212,13 @@ describe('TabErrors.vue', () => {
     })
 
     expect(screen.getByText('Missing connection')).toBeInTheDocument()
-    expect(screen.getByText('(3)')).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('error-group-execution')).getByText('3')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('3')
+    ).toBeInTheDocument()
+    expect(screen.getByText('Errors detected')).toBeInTheDocument()
     expect(
       screen.getAllByText(
         'Required input slots have no connection feeding them.'
@@ -404,7 +411,7 @@ describe('TabErrors.vue', () => {
     })
     const missingModelStore = useMissingModelStore()
 
-    expect(screen.getByText('Missing Models (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Models')).toBeInTheDocument()
     expect(
       screen.queryByTestId('missing-model-actions')
     ).not.toBeInTheDocument()
@@ -414,6 +421,40 @@ describe('TabErrors.vue', () => {
     expect(missingModelStore.refreshMissingModels).toHaveBeenCalled()
   })
 
+  it('counts missing models per file when several share one directory', () => {
+    renderComponent({
+      missingModel: {
+        missingModelCandidates: [
+          {
+            nodeId: '1',
+            nodeType: 'CheckpointLoaderSimple',
+            widgetName: 'ckpt_name',
+            name: 'model-a.safetensors',
+            directory: 'checkpoints',
+            isMissing: true,
+            isAssetSupported: true
+          },
+          {
+            nodeId: '2',
+            nodeType: 'CheckpointLoaderSimple',
+            widgetName: 'ckpt_name',
+            name: 'model-b.safetensors',
+            directory: 'checkpoints',
+            isMissing: true,
+            isAssetSupported: true
+          }
+        ] satisfies MissingModelCandidate[]
+      }
+    })
+
+    expect(
+      within(screen.getByTestId('error-group-missing-model')).getByText('2')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('2')
+    ).toBeInTheDocument()
+  })
+
   it('renders missing model display message below the section title', () => {
     const missingModel = {
       nodeId: '1',
@@ -431,7 +472,7 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(screen.getByText('Missing Models (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Models')).toBeInTheDocument()
     expect(
       screen.getByText('Download a model, or open the node to replace it.')
     ).toBeInTheDocument()
@@ -453,7 +494,7 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(screen.getByText('Missing Inputs (1)')).toBeInTheDocument()
+    expect(screen.getByText('Missing Inputs')).toBeInTheDocument()
     expect(
       screen.getByText('A required media input has no file selected.')
     ).toBeInTheDocument()
@@ -495,6 +536,12 @@ describe('TabErrors.vue', () => {
     })
 
     expect(screen.getAllByTestId('missing-media-row')).toHaveLength(2)
+    expect(
+      within(screen.getByTestId('error-group-missing-media')).getByText('2')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('2')
+    ).toBeInTheDocument()
 
     await user.click(
       screen.getByRole('button', { name: 'Second Loader - image' })
@@ -526,18 +573,20 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(screen.getByText('Swap Nodes (1)')).toBeInTheDocument()
+    expect(screen.getByText('Swap Nodes')).toBeInTheDocument()
     expect(
       screen.getByText('Some nodes can be replaced with alternatives')
     ).toBeInTheDocument()
-    expect(screen.getByText('OldSampler (1)')).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'OldSampler' })
+    ).toBeInTheDocument()
     expect(screen.getByText('KSampler')).toBeInTheDocument()
     expect(
       screen.getByRole('button', { name: /Replace Node/ })
     ).toBeInTheDocument()
   })
 
-  it('keeps missing model Refresh in the card actions when models are downloadable', () => {
+  it('renders missing model Refresh in the header and Download all in the card when models are downloadable', () => {
     const missingModel = {
       nodeId: '1',
       nodeType: 'CheckpointLoaderSimple',
@@ -555,11 +604,8 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(
-      screen.queryByTestId('missing-model-header-refresh')
-    ).not.toBeInTheDocument()
+    expect(screen.getByTestId('missing-model-header-refresh')).toBeVisible()
     expect(screen.getByTestId('missing-model-actions')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /Download all/ })).toBeVisible()
-    expect(screen.getByRole('button', { name: 'Refresh' })).toBeVisible()
   })
 })

src/components/rightSidePanel/errors/TabErrors.vue

@@ -11,49 +11,62 @@
       />
     </div>
 
-    <div class="min-w-0 flex-1 overflow-y-auto" aria-live="polite">
-      <TransitionGroup tag="div" name="list-scale" class="relative">
+    <div
+      class="min-w-0 flex-1 overflow-y-auto bg-interface-panel-surface p-3"
+      aria-live="polite"
+    >
+      <div
+        v-if="filteredGroups.length === 0"
+        class="px-1 pt-5 pb-15 text-center text-sm text-muted-foreground"
+      >
+        {{
+          searchQuery.trim()
+            ? t('rightSidePanel.noneSearchDesc')
+            : t('rightSidePanel.noErrors')
+        }}
+      </div>
+
+      <div
+        v-else
+        class="overflow-hidden rounded-lg border border-secondary-background"
+      >
+        <!-- Errors summary hero -->
         <div
-          v-if="filteredGroups.length === 0"
-          key="empty"
-          class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
+          data-testid="errors-summary-hero"
+          class="flex items-center gap-2 bg-base-foreground/5 p-2"
         >
-          {{
-            searchQuery.trim()
-              ? t('rightSidePanel.noneSearchDesc')
-              : t('rightSidePanel.noErrors')
-          }}
+          <span
+            class="flex h-12 min-w-9 shrink-0 items-center justify-center px-1 text-[2rem]/none font-extrabold text-destructive-background-hover tabular-nums"
+          >
+            {{ totalErrorCount }}
+          </span>
+          <span
+            aria-hidden="true"
+            class="h-9 w-px shrink-0 bg-interface-stroke"
+          />
+          <div class="flex min-w-0 flex-1 flex-col gap-1 px-2">
+            <span class="text-xs/tight font-semibold text-base-foreground">
+              {{ t('rightSidePanel.errorsDetected', totalErrorCount) }}
+            </span>
+            <span class="text-xs/tight text-muted-foreground">
+              {{ t('rightSidePanel.resolveBeforeRun') }}
+            </span>
+          </div>
         </div>
 
         <!-- Group by Class Type -->
-        <PropertiesAccordionItem
-          v-for="group in filteredGroups"
-          :key="group.groupKey"
-          :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
-          :collapse="isSectionCollapsed(group.groupKey) && !isSearching"
-          class="border-b border-interface-stroke"
-          :size="getGroupSize(group)"
-          @update:collapse="setSectionCollapsed(group.groupKey, $event)"
-        >
-          <template #label>
-            <div class="flex min-w-0 flex-1 items-center gap-2">
-              <span class="flex min-w-0 flex-1 items-center gap-2">
-                <i
-                  class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
-                />
-                <span class="truncate text-destructive-background-hover">
-                  {{ group.displayTitle }}
-                </span>
-                <span
-                  v-if="
-                    group.type === 'execution' &&
-                    getExecutionGroupCount(group) > 1
-                  "
-                  class="text-destructive-background-hover"
-                >
-                  ({{ getExecutionGroupCount(group) }})
-                </span>
-              </span>
+        <TransitionGroup tag="div" name="list-scale" class="relative">
+          <ErrorCardSection
+            v-for="group in filteredGroups"
+            :key="group.groupKey"
+            :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
+            :title="group.displayTitle"
+            :count="getGroupCount(group)"
+            :collapse="isSectionCollapsed(group.groupKey) && !isSearching"
+            class="border-t border-secondary-background first:border-t-0"
+            @update:collapse="setSectionCollapsed(group.groupKey, $event)"
+          >
+            <template #actions>
               <Button
                 v-if="
                   group.type === 'missing_node' &&
@@ -62,7 +75,7 @@
                 "
                 variant="secondary"
                 size="sm"
-                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
+                class="shrink-0"
                 :disabled="isInstallingAll"
                 @click.stop="installAll"
               >
@@ -83,7 +96,7 @@
                 "
                 variant="secondary"
                 size="sm"
-                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
+                class="shrink-0"
                 @click.stop="handleReplaceAll()"
               >
                 {{ t('nodeReplacement.replaceAll', 'Replace All') }}
@@ -94,9 +107,10 @@
                   showMissingModelHeaderRefresh
                 "
                 data-testid="missing-model-header-refresh"
-                variant="secondary"
-                size="sm"
-                class="mr-2 h-8 shrink-0 rounded-lg text-sm"
+                variant="muted-textonly"
+                size="icon"
+                class="shrink-0 rounded-lg hover:bg-transparent hover:text-base-foreground"
+                :aria-label="t('rightSidePanel.missingModels.refresh')"
                 :aria-busy="missingModelStore.isRefreshingMissingModels"
                 :aria-disabled="missingModelStore.isRefreshingMissingModels"
                 @click.stop="handleMissingModelRefresh"
@@ -112,7 +126,6 @@
                   aria-hidden="true"
                   class="icon-[lucide--refresh-cw] size-4 shrink-0"
                 />
-                {{ t('rightSidePanel.missingModels.refresh') }}
               </Button>
               <span
                 v-if="
@@ -129,142 +142,142 @@
                     : ''
                 }}
               </span>
-            </div>
-          </template>
+            </template>
 
-          <div
-            v-if="group.displayMessage"
-            data-testid="error-group-display-message"
-            class="px-4 pt-1 pb-3"
-          >
-            <p
-              class="m-0 text-sm/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+            <div
+              v-if="group.displayMessage"
+              data-testid="error-group-display-message"
+              class="px-3 py-1"
             >
-              {{ group.displayMessage }}
-            </p>
-          </div>
-
-          <!-- Missing Node Packs -->
-          <MissingNodeCard
-            v-if="group.type === 'missing_node'"
-            :show-info-button="shouldShowManagerButtons"
-            :missing-pack-groups="missingPackGroups"
-            @locate-node="handleLocateMissingNode"
-            @open-manager-info="handleOpenManagerInfo"
-          />
-
-          <!-- Swap Nodes -->
-          <SwapNodesCard
-            v-if="group.type === 'swap_nodes'"
-            :swap-node-groups="swapNodeGroups"
-            :show-node-id-badge="showNodeIdBadge"
-            @locate-node="handleLocateMissingNode"
-            @replace="handleReplaceGroup"
-          />
-
-          <!-- Execution Errors -->
-          <div v-if="isExecutionItemListGroup(group)" class="px-4">
-            <ul class="m-0 list-none space-y-1 p-0">
-              <li
-                v-for="item in getExecutionItemList(group)"
-                :key="item.key"
-                class="min-w-0"
+              <p
+                class="m-0 text-xs/normal wrap-break-word whitespace-pre-wrap text-base-foreground/50"
               >
-                <div class="flex min-w-0 items-center gap-2">
-                  <span class="flex min-w-0 flex-1 items-center gap-1">
-                    <button
-                      v-tooltip.top="{
-                        value: item.displayDetails || undefined,
-                        showDelay: 300
-                      }"
-                      type="button"
-                      class="m-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none"
-                      @click="handleLocateNode(item.nodeId)"
-                    >
-                      {{ item.label }}
-                    </button>
+                {{ group.displayMessage }}
+              </p>
+            </div>
+
+            <!-- Missing Node Packs -->
+            <MissingNodeCard
+              v-if="group.type === 'missing_node'"
+              :show-info-button="shouldShowManagerButtons"
+              :missing-pack-groups="missingPackGroups"
+              @locate-node="handleLocateMissingNode"
+              @open-manager-info="handleOpenManagerInfo"
+            />
+
+            <!-- Swap Nodes -->
+            <SwapNodesCard
+              v-if="group.type === 'swap_nodes'"
+              :swap-node-groups="swapNodeGroups"
+              @locate-node="handleLocateMissingNode"
+              @replace="handleReplaceGroup"
+            />
+
+            <!-- Execution Errors -->
+            <div v-if="isExecutionItemListGroup(group)" class="px-3">
+              <ul class="m-0 list-none space-y-1 p-0">
+                <li
+                  v-for="item in getExecutionItemList(group)"
+                  :key="item.key"
+                  class="min-w-0"
+                >
+                  <div class="flex min-w-0 items-center gap-2">
+                    <span class="flex min-w-0 flex-1 items-center gap-1">
+                      <button
+                        v-tooltip.top="{
+                          value: item.displayDetails || undefined,
+                          showDelay: 300
+                        }"
+                        type="button"
+                        class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-xs/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset"
+                        @click="handleLocateNode(item.nodeId)"
+                      >
+                        {{ item.label }}
+                      </button>
+                      <Button
+                        v-if="item.displayDetails"
+                        variant="textonly"
+                        size="icon-sm"
+                        :class="
+                          cn(
+                            'size-6 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset',
+                            isExecutionItemDetailExpanded(item.key) &&
+                              'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
+                          )
+                        "
+                        :aria-label="
+                          t('rightSidePanel.infoFor', { item: item.label })
+                        "
+                        :aria-controls="getExecutionItemDetailId(item.key)"
+                        :aria-expanded="isExecutionItemDetailExpanded(item.key)"
+                        @click.stop="toggleExecutionItemDetail(item.key)"
+                      >
+                        <i class="icon-[lucide--info] size-3.5" />
+                      </Button>
+                    </span>
                     <Button
-                      v-if="item.displayDetails"
                       variant="textonly"
                       size="icon-sm"
-                      :class="
-                        cn(
-                          'size-6 shrink-0 text-muted-foreground hover:text-base-foreground',
-                          isExecutionItemDetailExpanded(item.key) &&
-                            'bg-secondary-background-selected text-base-foreground hover:bg-secondary-background-selected'
-                        )
-                      "
+                      class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground focus-visible:ring-inset"
                       :aria-label="
-                        t('rightSidePanel.infoFor', { item: item.label })
+                        t('rightSidePanel.locateNodeFor', { item: item.label })
                       "
-                      :aria-controls="getExecutionItemDetailId(item.key)"
-                      :aria-expanded="isExecutionItemDetailExpanded(item.key)"
-                      @click.stop="toggleExecutionItemDetail(item.key)"
+                      @click.stop="handleLocateNode(item.nodeId)"
                     >
-                      <i class="icon-[lucide--info] size-3.5" />
+                      <i class="icon-[lucide--locate] size-4" />
                     </Button>
-                  </span>
-                  <Button
-                    variant="textonly"
-                    size="icon-sm"
-                    class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-                    :aria-label="
-                      t('rightSidePanel.locateNodeFor', { item: item.label })
-                    "
-                    @click.stop="handleLocateNode(item.nodeId)"
-                  >
-                    <i class="icon-[lucide--locate] size-4" />
-                  </Button>
-                </div>
-                <TransitionCollapse>
-                  <p
-                    v-if="
-                      item.displayDetails &&
-                      isExecutionItemDetailExpanded(item.key)
-                    "
-                    :id="getExecutionItemDetailId(item.key)"
-                    class="m-0 mt-0.5 pr-10 text-2xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
-                  >
-                    {{ item.displayDetails }}
-                  </p>
-                </TransitionCollapse>
-              </li>
-            </ul>
-          </div>
-          <div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
-            <ErrorNodeCard
-              v-for="card in group.cards"
-              :key="card.id"
-              :card="card"
-              :compact="isSingleNodeSelected"
-              @locate-node="handleLocateNode"
-              @enter-subgraph="handleEnterSubgraph"
-              @copy-to-clipboard="copyToClipboard"
+                  </div>
+                  <TransitionCollapse>
+                    <p
+                      v-if="
+                        item.displayDetails &&
+                        isExecutionItemDetailExpanded(item.key)
+                      "
+                      :id="getExecutionItemDetailId(item.key)"
+                      class="m-0 mt-0.5 pr-10 text-2xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
+                    >
+                      {{ item.displayDetails }}
+                    </p>
+                  </TransitionCollapse>
+                </li>
+              </ul>
+            </div>
+            <div v-else-if="group.type === 'execution'" class="space-y-3 px-3">
+              <ErrorNodeCard
+                v-for="card in group.cards"
+                :key="card.id"
+                :card="card"
+                :compact="isSingleNodeSelected"
+                @locate-node="handleLocateNode"
+                @enter-subgraph="handleEnterSubgraph"
+                @copy-to-clipboard="copyToClipboard"
+              />
+            </div>
+
+            <!-- Missing Models -->
+            <MissingModelCard
+              v-if="group.type === 'missing_model'"
+              :missing-model-groups="missingModelGroups"
+              @locate-model="handleLocateAssetNode"
             />
-          </div>
 
-          <!-- Missing Models -->
-          <MissingModelCard
-            v-if="group.type === 'missing_model'"
-            :missing-model-groups="missingModelGroups"
-            :show-node-id-badge="showNodeIdBadge"
-            @locate-model="handleLocateAssetNode"
-          />
-
-          <!-- Missing Media -->
-          <MissingMediaCard
-            v-if="group.type === 'missing_media'"
-            :missing-media-groups="missingMediaGroups"
-            @locate-node="handleLocateAssetNode"
-          />
-        </PropertiesAccordionItem>
-      </TransitionGroup>
+            <!-- Missing Media -->
+            <MissingMediaCard
+              v-if="group.type === 'missing_media'"
+              :missing-media-groups="missingMediaGroups"
+              @locate-node="handleLocateAssetNode"
+            />
+          </ErrorCardSection>
+        </TransitionGroup>
+      </div>
     </div>
 
     <ErrorPanelSurveyCta v-if="ErrorPanelSurveyCta" />
 
     <!-- Fixed Footer: Help Links -->
-    <div class="min-w-0 shrink-0 border-t border-interface-stroke p-4">
+    <div
+      class="min-w-0 shrink-0 border-t border-interface-stroke bg-interface-panel-surface p-4"
+    >
       <i18n-t
         keypath="rightSidePanel.errorHelp"
         tag="p"
@@ -302,25 +315,23 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-import { NodeBadgeMode } from '@/types/nodeSource'
 
-import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import CollapseToggleButton from '../layout/CollapseToggleButton.vue'
 import TransitionCollapse from '../layout/TransitionCollapse.vue'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
+import ErrorCardSection from './ErrorCardSection.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
 import MissingModelCard from '@/platform/missingModel/components/MissingModelCard.vue'
 import MissingMediaCard from '@/platform/missingMedia/components/MissingMediaCard.vue'
+import { countMissingMediaReferences } from '@/platform/missingMedia/missingMediaGrouping'
 import { isCloud, isDesktop, isNightly } from '@/platform/distribution/types'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
-import { getDownloadableModels } from '@/platform/missingModel/missingModelViewUtils'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -348,7 +359,6 @@ const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
 const { focusNode, enterSubgraph } = useFocusNode()
 const { openGitHubIssues, contactSupport } = useErrorActions()
-const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const missingModelStore = useMissingModelStore()
 const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
@@ -362,22 +372,6 @@ const searchQuery = ref('')
 const expandedExecutionItemDetailKeys = ref(new Set<string>())
 const isSearching = computed(() => searchQuery.value.trim() !== '')
 
-const fullSizeGroupTypes = new Set([
-  'missing_node',
-  'swap_nodes',
-  'missing_model',
-  'missing_media'
-])
-function getGroupSize(group: ErrorGroup) {
-  return fullSizeGroupTypes.has(group.type) ? 'lg' : 'default'
-}
-
-const showNodeIdBadge = computed(
-  () =>
-    (settingStore.get('Comfy.NodeBadge.NodeIdBadgeMode') as NodeBadgeMode) !==
-    NodeBadgeMode.None
-)
-
 function isExecutionItemListGroup(group: ErrorGroup) {
   return (
     group.type === 'execution' &&
@@ -464,20 +458,35 @@ const {
   swapNodeGroups
 } = useErrorGroups(searchQuery)
 
-const missingModelDownloadableModels = computed(() => {
-  if (isCloud) return []
+function getGroupCount(group: ErrorGroup): number {
+  switch (group.type) {
+    case 'execution':
+      return getExecutionGroupCount(group)
+    case 'missing_node':
+      return missingPackGroups.value.length
+    case 'swap_nodes':
+      return swapNodeGroups.value.length
+    case 'missing_model':
+      return missingModelGroups.value.reduce(
+        (total, modelGroup) => total + modelGroup.models.length,
+        0
+      )
+    case 'missing_media':
+      return countMissingMediaReferences(missingMediaGroups.value)
+  }
+}
 
-  return getDownloadableModels(missingModelGroups.value)
-})
+const totalErrorCount = computed(() =>
+  filteredGroups.value.reduce((sum, group) => sum + getGroupCount(group), 0)
+)
 
 const showMissingModelHeaderRefresh = computed(
-  () =>
-    !isCloud &&
-    missingModelGroups.value.length > 0 &&
-    missingModelDownloadableModels.value.length === 0
+  () => !isCloud && missingModelGroups.value.length > 0
 )
 
 function handleMissingModelRefresh() {
+  if (missingModelStore.isRefreshingMissingModels) return
+
   void missingModelStore.refreshMissingModels()
 }
 

src/components/rightSidePanel/errors/useErrorActions.test.ts

@@ -58,7 +58,8 @@ describe('useErrorActions', () => {
       openGitHubIssues()
 
       expect(mocks.trackUiButtonClicked).toHaveBeenCalledWith({
-        button_id: 'error_tab_github_issues_clicked'
+        button_id: 'error_tab_github_issues_clicked',
+        element_group: 'errors_panel'
       })
       expect(windowOpenSpy).toHaveBeenCalledWith(
         mocks.staticUrls.githubIssues,
@@ -123,7 +124,8 @@ describe('useErrorActions', () => {
       findOnGitHub('CUDA out of memory')
 
       expect(mocks.trackUiButtonClicked).toHaveBeenCalledWith({
-        button_id: 'error_tab_find_existing_issues_clicked'
+        button_id: 'error_tab_find_existing_issues_clicked',
+        element_group: 'errors_panel'
       })
       const expectedQuery = encodeURIComponent('CUDA out of memory is:issue')
       expect(windowOpenSpy).toHaveBeenCalledWith(

src/components/rightSidePanel/errors/useErrorActions.ts

@@ -9,7 +9,8 @@ export function useErrorActions() {
 
   function openGitHubIssues() {
     telemetry?.trackUiButtonClicked({
-      button_id: 'error_tab_github_issues_clicked'
+      button_id: 'error_tab_github_issues_clicked',
+      element_group: 'errors_panel'
     })
     window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
   }
@@ -25,7 +26,8 @@ export function useErrorActions() {
 
   function findOnGitHub(errorMessage: string) {
     telemetry?.trackUiButtonClicked({
-      button_id: 'error_tab_find_existing_issues_clicked'
+      button_id: 'error_tab_find_existing_issues_clicked',
+      element_group: 'errors_panel'
     })
     const query = encodeURIComponent(errorMessage + ' is:issue')
     window.open(

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -334,7 +334,7 @@ describe('useErrorGroups', () => {
       )
       expect(missingGroup).toBeDefined()
       expect(missingGroup?.groupKey).toBe('missing_node')
-      expect(missingGroup?.displayTitle).toBe('Missing Node Packs (1)')
+      expect(missingGroup?.displayTitle).toBe('Missing Node Packs')
       expect(missingGroup?.displayMessage).toBe(
         'Install missing packs to use this workflow.'
       )
@@ -982,7 +982,7 @@ describe('useErrorGroups', () => {
       )
       expect(modelGroup).toBeDefined()
       expect(modelGroup?.groupKey).toBe('missing_model')
-      expect(modelGroup?.displayTitle).toBe('Missing Models (1)')
+      expect(modelGroup?.displayTitle).toBe('Missing Models')
     })
   })
 
@@ -1098,7 +1098,7 @@ describe('useErrorGroups', () => {
       const missingMediaGroup = groups.allErrorGroups.value.find(
         (group) => group.type === 'missing_media'
       )
-      expect(missingMediaGroup?.displayTitle).toBe('Missing Inputs (2)')
+      expect(missingMediaGroup?.displayTitle).toBe('Missing Inputs')
     })
   })
 

src/components/searchbox/NodeSearchBoxPopover.test.ts

@@ -5,12 +5,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, defineComponent, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { Settings } from '@/schemas/apiSchema'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBoxPopover from './NodeSearchBoxPopover.vue'
@@ -74,8 +71,7 @@ describe('NodeSearchBoxPopover', () => {
     const NodeSearchContentStub = defineComponent({
       name: 'NodeSearchContent',
       props: {
-        filters: { type: Array, default: () => [] },
-        defaultRootFilter: { type: String, default: null }
+        filters: { type: Array, default: () => [] }
       },
       emits: ['addFilter', 'removeFilter', 'addNode', 'hoverNode'],
       setup(_, { emit }) {
@@ -83,8 +79,7 @@ describe('NodeSearchBoxPopover', () => {
           emit('addNode', nodeDef, dragEvent)
         return {}
       },
-      template:
-        '<div data-testid="search-content-v2" :data-default-root-filter="defaultRootFilter"></div>'
+      template: '<div data-testid="search-content-v2"></div>'
     })
 
     const pinia = createTestingPinia({
@@ -281,75 +276,4 @@ describe('NodeSearchBoxPopover', () => {
       )
     })
   })
-
-  describe('defaultRootFilter on dialog open', () => {
-    function setGraphNodes(nodes: unknown[]) {
-      const canvasStore = useCanvasStore()
-      canvasStore.canvas = {
-        graph: { nodes },
-        allow_searchbox: false,
-        setDirty: vi.fn(),
-        linkConnector: {
-          events: new EventTarget(),
-          reset: vi.fn(),
-          disconnectLinks: vi.fn()
-        }
-      } as unknown as ReturnType<typeof useCanvasStore>['canvas']
-    }
-
-    async function openSearch() {
-      useSearchBoxStore().visible = true
-      await nextTick()
-    }
-
-    it('defaults to Essentials when the graph is empty', async () => {
-      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
-      setGraphNodes([])
-      await openSearch()
-
-      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
-        'data-default-root-filter',
-        RootCategory.Essentials
-      )
-    })
-
-    it('defaults to Essentials when the canvas is not yet available', async () => {
-      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
-      await openSearch()
-
-      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
-        'data-default-root-filter',
-        RootCategory.Essentials
-      )
-    })
-
-    it('defaults to null when the graph has nodes', async () => {
-      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
-      setGraphNodes([{ id: 1 }])
-      await openSearch()
-
-      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
-        'data-default-root-filter'
-      )
-    })
-
-    it('re-evaluates each time the dialog opens', async () => {
-      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
-
-      setGraphNodes([])
-      await openSearch()
-      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
-        'data-default-root-filter',
-        RootCategory.Essentials
-      )
-
-      useSearchBoxStore().visible = false
-      await nextTick()
-      setGraphNodes([{ id: 1 }])
-      await openSearch()
-      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
-        'data-default-root-filter'
-      )
-    })
-  })
 })

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -27,7 +27,6 @@
         <div v-if="useSearchBoxV2" role="search" class="relative">
           <NodeSearchContent
             :filters="nodeFilters"
-            :default-root-filter="defaultRootFilter"
             @add-filter="addFilter"
             @remove-filter="removeFilter"
             @add-node="addNode"
@@ -78,8 +77,6 @@ import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
-import { RootCategory } from '@/components/searchbox/v2/rootCategories'
-import type { RootCategoryId } from '@/components/searchbox/v2/rootCategories'
 
 import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
@@ -91,7 +88,6 @@ let disconnectOnReset = false
 const settingStore = useSettingStore()
 const searchBoxStore = useSearchBoxStore()
 const litegraphService = useLitegraphService()
-const canvasStore = useCanvasStore()
 const { trackFeatureUsed } = useSurveyFeatureTracking('node-search')
 
 const { visible, newSearchBoxEnabled, useSearchBoxV2 } =
@@ -107,13 +103,6 @@ const enableNodePreview = computed(
     settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview') &&
     windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
 )
-const defaultRootFilter = ref<RootCategoryId | null>(null)
-watch(visible, (isVisible) => {
-  if (!isVisible) return
-  defaultRootFilter.value = !canvasStore.canvas?.graph?.nodes?.length
-    ? RootCategory.Essentials
-    : null
-})
 function getNewNodeLocation(): Point {
   return triggerEvent
     ? [triggerEvent.canvasX, triggerEvent.canvasY]
@@ -138,6 +127,7 @@ function clearFilters() {
 function closeDialog() {
   visible.value = false
 }
+const canvasStore = useCanvasStore()
 
 function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
   const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')

src/components/searchbox/v2/NodeSearchContent.test.ts

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import NodeSearchContent from '@/components/searchbox/v2/NodeSearchContent.vue'
-import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import {
   createMockNodeDef,
   setViewport,
@@ -231,48 +230,6 @@ describe('NodeSearchContent', () => {
       })
     })
 
-    it('should apply defaultRootFilter when provided and category is available', async () => {
-      useNodeDefStore().updateNodeDefs([
-        createMockNodeDef({
-          name: 'EssentialNode',
-          display_name: 'Essential Node',
-          essentials_category: 'basic'
-        }),
-        createMockNodeDef({
-          name: 'RegularNode',
-          display_name: 'Regular Node'
-        })
-      ])
-
-      renderComponent({ defaultRootFilter: RootCategory.Essentials })
-
-      await waitFor(() => {
-        const items = screen.getAllByTestId('node-item')
-        expect(items).toHaveLength(1)
-        expect(items[0]).toHaveTextContent('Essential Node')
-      })
-    })
-
-    it('should ignore defaultRootFilter of Essentials when no essentials exist', async () => {
-      useNodeDefStore().updateNodeDefs([
-        createMockNodeDef({
-          name: 'FrequentNode',
-          display_name: 'Frequent Node'
-        })
-      ])
-      vi.spyOn(useNodeFrequencyStore(), 'topNodeDefs', 'get').mockReturnValue([
-        useNodeDefStore().nodeDefsByName['FrequentNode']
-      ])
-
-      renderComponent({ defaultRootFilter: RootCategory.Essentials })
-
-      await waitFor(() => {
-        const items = screen.getAllByTestId('node-item')
-        expect(items).toHaveLength(1)
-        expect(items[0]).toHaveTextContent('Frequent Node')
-      })
-    })
-
     it('should show only API nodes when Partner Nodes filter is active', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({

src/components/searchbox/v2/NodeSearchContent.vue

@@ -142,9 +142,8 @@ const sourceCategoryFilters: Record<string, (n: ComfyNodeDefImpl) => boolean> =
     [RootCategory.Custom]: isCustomNode
   }
 
-const { filters, defaultRootFilter = null } = defineProps<{
+const { filters } = defineProps<{
   filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
-  defaultRootFilter?: RootCategoryId | null
 }>()
 
 const emit = defineEmits<{
@@ -195,12 +194,8 @@ function onSearchFocus() {
   if (isMobile.value) isSidebarOpen.value = false
 }
 
-const rootFilter = ref<RootCategoryId | null>(
-  defaultRootFilter === RootCategory.Essentials &&
-    !nodeAvailability.value.essential
-    ? null
-    : defaultRootFilter
-)
+// Root filter from filter bar category buttons (radio toggle)
+const rootFilter = ref<RootCategoryId | null>(null)
 
 const rootFilterLabel = computed(() => {
   switch (rootFilter.value) {

src/components/sidebar/ComfyMenuButton.vue

@@ -150,7 +150,8 @@ const telemetry = useTelemetry()
 
 function onLogoMenuClick(event: MouseEvent) {
   telemetry?.trackUiButtonClicked({
-    button_id: 'sidebar_comfy_menu_opened'
+    button_id: 'sidebar_comfy_menu_opened',
+    element_group: 'sidebar'
   })
   menuRef.value?.toggle(event)
 }
@@ -217,7 +218,8 @@ const extraMenuItems = computed(() => [
     icon: 'icon-[lucide--settings]',
     command: () => {
       telemetry?.trackUiButtonClicked({
-        button_id: 'sidebar_settings_menu_opened'
+        button_id: 'sidebar_settings_menu_opened',
+        element_group: 'sidebar'
       })
       showSettings()
     }
@@ -329,7 +331,8 @@ const handleNodes2ToggleClick = () => {
 const onNodes2ToggleChange = async (value: boolean) => {
   await settingStore.set('Comfy.VueNodes.Enabled', value)
   telemetry?.trackUiButtonClicked({
-    button_id: `menu_nodes_2.0_toggle_${value ? 'enabled' : 'disabled'}`
+    button_id: `menu_nodes_2.0_toggle_${value ? 'enabled' : 'disabled'}`,
+    element_group: 'sidebar'
   })
 }
 </script>

src/components/sidebar/SideToolbar.vue

@@ -138,19 +138,23 @@ const onTabClick = async (item: SidebarTabExtension) => {
 
   if (isNodeLibraryTab)
     telemetry?.trackUiButtonClicked({
-      button_id: 'sidebar_tab_node_library_selected'
+      button_id: 'sidebar_tab_node_library_selected',
+      element_group: 'sidebar'
     })
   else if (isModelLibraryTab)
     telemetry?.trackUiButtonClicked({
-      button_id: 'sidebar_tab_model_library_selected'
+      button_id: 'sidebar_tab_model_library_selected',
+      element_group: 'sidebar'
     })
   else if (isWorkflowsTab)
     telemetry?.trackUiButtonClicked({
-      button_id: 'sidebar_tab_workflows_selected'
+      button_id: 'sidebar_tab_workflows_selected',
+      element_group: 'sidebar'
     })
   else if (isAssetsTab)
     telemetry?.trackUiButtonClicked({
-      button_id: 'sidebar_tab_assets_media_selected'
+      button_id: 'sidebar_tab_assets_media_selected',
+      element_group: 'sidebar'
     })
 
   await commandStore.commands

src/components/sidebar/SidebarBottomPanelToggleButton.vue

@@ -21,7 +21,8 @@ const bottomPanelStore = useBottomPanelStore()
  */
 const toggleConsole = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'sidebar_bottom_panel_console_toggled'
+    button_id: 'sidebar_bottom_panel_console_toggled',
+    element_group: 'sidebar'
   })
   bottomPanelStore.toggleBottomPanel()
 }

src/components/sidebar/SidebarSettingsButton.vue

@@ -30,7 +30,8 @@ const tooltipText = computed(
 const showSettingsDialog = () => {
   command.function()
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'sidebar_settings_button_clicked'
+    button_id: 'sidebar_settings_button_clicked',
+    element_group: 'sidebar'
   })
 }
 </script>

src/components/sidebar/SidebarShortcutsToggleButton.vue

@@ -37,7 +37,8 @@ const tooltipText = computed(
  */
 const toggleShortcutsPanel = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'sidebar_shortcuts_panel_toggled'
+    button_id: 'sidebar_shortcuts_panel_toggled',
+    element_group: 'sidebar'
   })
   bottomPanelStore.togglePanel('shortcuts')
 }

src/components/sidebar/SidebarTemplatesButton.vue

@@ -29,7 +29,8 @@ const isSmall = computed(
  */
 const openTemplates = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'sidebar_templates_dialog_opened'
+    button_id: 'sidebar_templates_dialog_opened',
+    element_group: 'sidebar'
   })
   useWorkflowTemplateSelectorDialog().show('sidebar')
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -586,7 +586,9 @@ const handleZoomClick = (asset: AssetItem) => {
         modelUrl: asset.preview_url || getAssetUrl(asset)
       },
       dialogComponentProps: {
-        style: 'width: 80vw; height: 80vh;',
+        renderer: 'reka',
+        size: 'full',
+        contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
         maximizable: true
       }
     })

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -189,7 +189,9 @@ const onViewItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
         modelUrl: previewOutput.url || ''
       },
       dialogComponentProps: {
-        style: 'width: 80vw; height: 80vh;',
+        renderer: 'reka',
+        size: 'full',
+        contentClass: 'w-[80vw] h-[80vh] max-h-[80vh]',
         maximizable: true
       }
     })

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -118,7 +118,8 @@ const toggleBookmark = async () => {
 
 const onHelpClick = () => {
   useTelemetry()?.trackUiButtonClicked({
-    button_id: 'node_library_help_button'
+    button_id: 'node_library_help_button',
+    element_group: 'node_library'
   })
   props.openNodeHelp(nodeDef.value)
 }

src/components/ui/dialog/DialogContent.vue

@@ -28,7 +28,15 @@ const forwarded = useForwardPropsEmits(restProps, emits)
 <template>
   <DialogContent
     v-bind="forwarded"
-    :class="cn(dialogContentVariants({ size, maximized }), customClass)"
+    :class="
+      cn(
+        dialogContentVariants({ size, maximized }),
+        customClass,
+        // Custom dimension classes must yield to maximize, mirroring the
+        // PrimeVue `.p-dialog-maximized` !important behavior.
+        maximized && 'size-auto max-h-none max-w-none sm:max-w-none'
+      )
+    "
   >
     <slot />
   </DialogContent>