[backport cloud/1.46] feat(auth): Cloudflare Turnstile on email signup (origin-gated) (#13161)

Backport of #12924 to `cloud/1.46`.

The automated backport hit a cherry-pick conflict in
`src/stores/authStore.ts`: the squashed commit on `main` routed
`createCustomer` through `fetchWithUnifiedRemint`, but that helper
(`platform/auth/unified/remintRetry.ts`) does not exist on `cloud/1.46`.
Resolved by keeping `cloud/1.46`'s plain `fetch` and adding only the
Turnstile change — the optional `turnstile_token` request body. No other
behavioral change; the unified-remint wrapper is intentionally not
backported.

Validation (local, against the `cloud/1.46` baseline): 145 affected unit
tests pass (authStore, useFeatureFlags, turnstile config, auth
composables, loadExternalScript, signin components); `vue-tsc` typecheck
clean.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>

.github/actions/setup-frontend/action.yaml

@@ -29,3 +29,5 @@ runs:
       if: ${{ inputs.include_build_step == 'true' }}
       shell: bash
       run: pnpm build
+      env:
+        VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'

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

@@ -109,3 +109,48 @@ 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'
+
+      - name: Scan dist for Cloudflare Turnstile sitekey references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Cloudflare Turnstile sitekeys...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '0x4AAAAAADnYZPVOpFCL_zeo' \
+            -e '0x4AAAAAADnYY4_Q0qxHZ5a7' \
+            -e '1x00000000000000000000AA' \
+            dist; then
+            echo '❌ ERROR: Cloudflare Turnstile sitekey found in dist assets!'
+            echo 'The per-env Turnstile sitekeys are cloud-only and must be tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Gate sitekey selection on the __DISTRIBUTION__ build define, not the runtime isCloud const'
+            echo '2. See getTurnstileSiteKey() in src/config/turnstile.ts'
+            exit 1
+          fi
+          echo '✅ No Turnstile sitekey references found'

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

@@ -47,6 +47,8 @@ jobs:
 
       - name: Build cloud frontend
         run: pnpm build:cloud
+        env:
+          VITE_USE_LEGACY_DEFAULT_GRAPH: 'true'
 
       - name: Upload cloud frontend
         uses: actions/upload-artifact@v6

.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 }) => {

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/fixtures/VueNodeHelpers.ts

@@ -59,7 +59,7 @@ export class VueNodeHelpers {
    * Matches against the actual title element, not the full node body.
    * Use `.first()` for unique titles, `.nth(n)` for duplicates.
    */
-  getNodeByTitle(title: string): Locator {
+  getNodeByTitle(title: string | RegExp): Locator {
     return this.page.locator('[data-node-id]').filter({
       has: this.page.getByTestId('node-title').filter({ hasText: title })
     })
@@ -145,7 +145,7 @@ export class VueNodeHelpers {
   /**
    * Resolve the data-node-id of the first rendered node matching the title.
    */
-  async getNodeIdByTitle(title: string): Promise<string> {
+  async getNodeIdByTitle(title: string | RegExp): Promise<string> {
     const node = this.getNodeByTitle(title).first()
     await node.waitFor({ state: 'visible' })
 
@@ -163,7 +163,7 @@ export class VueNodeHelpers {
    * Return a DOM-focused VueNodeFixture for the first node matching the title.
    * Resolves the node id up front so subsequent interactions survive title changes.
    */
-  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+  async getFixtureByTitle(title: string | RegExp): Promise<VueNodeFixture> {
     const nodeId = await this.getNodeIdByTitle(title)
     return new VueNodeFixture(this.getNodeLocator(nodeId))
   }

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/helpers/TemplateHelper.ts

@@ -69,6 +69,24 @@ export class TemplateHelper {
   }
 
   async mockIndex(): Promise<void> {
+    const customTemplatesHandler = async (route: Route) => {
+      const customTemplates: Record<string, string[]> = {}
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(customTemplates),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const customTemplatesPattern = '**/api/workflow_templates'
+    this.routeHandlers.push({
+      pattern: customTemplatesPattern,
+      handler: customTemplatesHandler
+    })
+    await this.page.route(customTemplatesPattern, customTemplatesHandler)
+
     const indexHandler = async (route: Route) => {
       const payload = this.index ?? mockTemplateIndex(this.templates)
       await route.fulfill({

browser_tests/fixtures/selectors.ts

@@ -60,14 +60,16 @@ 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',
@@ -137,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/fixtures/utils/flashDetector.ts

@@ -0,0 +1,45 @@
+import type { Page } from '@playwright/test'
+
+function flagAttributeFor(testId: string) {
+  const encoded = Array.from(testId, (ch) =>
+    ch.charCodeAt(0).toString(16)
+  ).join('')
+  return `data-flashed-${encoded}`
+}
+
+/**
+ * Flags the first time an element matching `[data-testid="<testId>"]` is
+ * present and rendered, sampled every frame via `requestAnimationFrame` from
+ * page load. Catches a dialog that mounts and unmounts within a few frames,
+ * which `toBeHidden()` (final state only) cannot.
+ *
+ * Must be called before navigation (e.g. before `comfyPage.setup()`).
+ */
+export async function trackElementFlash(
+  page: Page,
+  testId: string
+): Promise<{ hasFlashed: () => Promise<boolean> }> {
+  const flagAttribute = flagAttributeFor(testId)
+
+  await page.addInitScript(
+    ({ id, attribute }: { id: string; attribute: string }) => {
+      const sample = () => {
+        const el = document.querySelector(`[data-testid="${CSS.escape(id)}"]`)
+        if (el instanceof HTMLElement) {
+          const rect = el.getBoundingClientRect()
+          if (rect.width > 0 && rect.height > 0) {
+            document.documentElement.setAttribute(attribute, 'true')
+          }
+        }
+        requestAnimationFrame(sample)
+      }
+      requestAnimationFrame(sample)
+    },
+    { id: testId, attribute: flagAttribute }
+  )
+
+  return {
+    hasFlashed: async () =>
+      (await page.locator('html').getAttribute(flagAttribute)) === 'true'
+  }
+}

browser_tests/tests/cloudSurveyGate.spec.ts

@@ -0,0 +1,135 @@
+import { expect } from '@playwright/test'
+import type { Page } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
+import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
+
+/**
+ * getSurveyCompletedStatus fails safe: a transient 401 on `/` must not bounce a
+ * working user to /cloud/survey, while a genuine 404 (survey never submitted)
+ * must still route a not-completed user there. Drives a raw `page` so the cloud
+ * app boots against fully mocked endpoints (`comfyPage` would reach the OSS
+ * devtools backend during setup).
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+function jsonRoute(body: unknown) {
+  return {
+    status: 200,
+    contentType: 'application/json',
+    body: JSON.stringify(body)
+  }
+}
+
+async function mockCloudBoot(page: Page) {
+  // `/api/features` is the remote-config source: production builds resolve
+  // `onboardingSurveyEnabled` from it (the `ff:` localStorage override is
+  // dev-only). Enable the survey so the gate is actually live.
+  await page.route('**/api/features', (r) =>
+    r.fulfill(
+      jsonRoute({ onboarding_survey_enabled: true } satisfies RemoteConfig)
+    )
+  )
+  await page.route('**/api/system_stats', (r) =>
+    r.fulfill(jsonRoute(mockSystemStats))
+  )
+  await page.route('**/api/users', (r) =>
+    r.fulfill(
+      jsonRoute({
+        storage: 'server',
+        migrated: true,
+        users: { 'test-user-e2e': 'E2E Test User' }
+      })
+    )
+  )
+  // Cloud user status (getUserCloudStatus) — an active account so the gate
+  // proceeds to the survey check instead of bouncing back to login.
+  await page.route('**/api/user', (r) =>
+    r.fulfill(jsonRoute({ status: 'active' }))
+  )
+  await page.route('**/api/settings', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/userdata**', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/extensions', (r) => r.fulfill(jsonRoute([])))
+  await page.route('**/api/object_info', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/global_subgraphs', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/i18n', (r) => r.fulfill(jsonRoute({})))
+  await page.route('**/api/auth/session', (r) =>
+    r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+  )
+  await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
+}
+
+// Genuine "not completed": the cloud backend returns 404 for a survey key that
+// was never stored. This is the response that must still route to the survey.
+async function mockSurveyNotCompleted(page: Page) {
+  await page.route('**/api/settings/onboarding_survey', (r) =>
+    r.fulfill({
+      status: 404,
+      contentType: 'application/json',
+      body: JSON.stringify({ code: 'NOT_FOUND', message: 'Setting not found' })
+    })
+  )
+}
+
+// Transient auth failure: a stale workspace token makes the authenticated
+// survey check 401 — the hiccup that used to bounce working users.
+async function mockSurveyTransient401(page: Page) {
+  await page.route('**/api/settings/onboarding_survey', (r) =>
+    r.fulfill({
+      status: 401,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        code: 'UNAUTHORIZED',
+        message: 'User authentication required'
+      })
+    })
+  )
+}
+
+async function bootCloud(page: Page) {
+  const auth = new CloudAuthHelper(page)
+  await auth.mockAuth()
+  // Pre-select the mock user to skip the user-select screen.
+  await page.addInitScript(() => {
+    localStorage.setItem('Comfy.userId', 'test-user-e2e')
+  })
+}
+
+test.describe('Cloud onboarding survey gate', { tag: '@cloud' }, () => {
+  test('a transient 401 on the survey check does not bounce a working user to the survey', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page)
+    await mockSurveyTransient401(page)
+    await bootCloud(page)
+
+    await page.goto(APP_URL)
+
+    // The full app boots — CloudSurveyView is a standalone onboarding view, so
+    // reaching the extension manager proves we landed on the working app and
+    // the transient 401 was treated as "completed", not a bounce.
+    await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+      timeout: 45_000
+    })
+    await expect(page).not.toHaveURL(/\/cloud\/survey/)
+  })
+
+  test('a not-completed (404) user landing on / is routed to the survey', async ({
+    page
+  }) => {
+    test.setTimeout(60_000)
+
+    await mockCloudBoot(page)
+    await mockSurveyNotCompleted(page)
+    await bootCloud(page)
+
+    await page.goto(APP_URL)
+
+    await expect(page).toHaveURL(/\/cloud\/survey/, { timeout: 45_000 })
+  })
+})

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/nodeHelp.spec.ts

@@ -4,7 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
-import type { WorkspaceStore } from '@e2e/types/globals'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 // TODO: there might be a better solution for this
@@ -35,56 +34,6 @@ async function openSelectionToolboxHelp(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId('properties-panel')
 }
 
-async function setLocaleAndWaitForWorkflowReload(
-  comfyPage: ComfyPage,
-  locale: string
-) {
-  await comfyPage.page.evaluate(async (targetLocale) => {
-    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-      .activeWorkflow
-
-    if (!workflow) {
-      throw new Error('No active workflow while waiting for locale reload')
-    }
-
-    const changeTracker = workflow.changeTracker.constructor as unknown as {
-      isLoadingGraph: boolean
-    }
-
-    let sawLoading = false
-    const waitForReload = new Promise<void>((resolve, reject) => {
-      const timeoutAt = performance.now() + 5000
-
-      const tick = () => {
-        if (changeTracker.isLoadingGraph) {
-          sawLoading = true
-        }
-
-        if (sawLoading && !changeTracker.isLoadingGraph) {
-          resolve()
-          return
-        }
-
-        if (performance.now() > timeoutAt) {
-          reject(
-            new Error(
-              `Timed out waiting for workflow reload after setting locale to ${targetLocale}`
-            )
-          )
-          return
-        }
-
-        requestAnimationFrame(tick)
-      }
-
-      tick()
-    })
-
-    await window.app!.extensionManager.setting.set('Comfy.Locale', targetLocale)
-    await waitForReload
-  }, locale)
-}
-
 test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -447,34 +396,33 @@ This is documentation for a custom node.
       await expect(helpPage.locator('img[alt="Safe Image"]')).toBeVisible()
     })
 
-    test('Should handle locale-specific documentation', async ({
-      comfyPage
-    }) => {
-      // Mock different responses for different locales
-      await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSamplerノード
+    test.describe('Locale-specific documentation', () => {
+      test.use({ initialSettings: { 'Comfy.Locale': 'ja' } })
+
+      test('Should handle locale-specific documentation', async ({
+        comfyPage
+      }) => {
+        // Mock different responses for different locales
+        await comfyPage.page.route('**/docs/KSampler/ja.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSamplerノード
 
 これは日本語のドキュメントです。
 `
+          })
         })
-      })
 
-      await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: `# KSampler Node
+        await comfyPage.page.route('**/docs/KSampler/en.md', async (route) => {
+          await route.fulfill({
+            status: 200,
+            body: `# KSampler Node
 
 This is English documentation.
 `
+          })
         })
-      })
 
-      // Set locale to Japanese
-      await setLocaleAndWaitForWorkflowReload(comfyPage, 'ja')
-
-      try {
         await comfyPage.workflow.loadWorkflow('default')
         const ksamplerNodes =
           await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -483,9 +431,7 @@ This is English documentation.
         const helpPage = await openSelectionToolboxHelp(comfyPage)
         await expect(helpPage).toContainText('KSamplerノード')
         await expect(helpPage).toContainText('これは日本語のドキュメントです')
-      } finally {
-        await setLocaleAndWaitForWorkflowReload(comfyPage, 'en')
-      }
+      })
     })
 
     test('Should handle network errors gracefully', async ({ comfyPage }) => {

browser_tests/tests/nodeReplacement.spec.ts

@@ -131,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 ({

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 ({
@@ -129,7 +143,7 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const objectInfo = await response.json()
         const ckptName =
           objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
-        ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
+        ckptName[0] = [...ckptName[0], FAKE_MODEL_NAME]
         await route.fulfill({ response, json: objectInfo })
       })
 
@@ -137,21 +151,11 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         const url = new URL(response.url())
         return url.pathname.endsWith('/object_info') && response.ok()
       })
-      const modelFoldersResponse = comfyPage.page.waitForResponse(
-        (response) => {
-          const url = new URL(response.url())
-          return url.pathname.endsWith('/experiment/models') && response.ok()
-        }
-      )
       const refreshButton = comfyPage.page.getByTestId(
         TestIds.dialogs.missingModelRefresh
       )
 
-      await Promise.all([
-        objectInfoResponse,
-        modelFoldersResponse,
-        refreshButton.click()
-      ])
+      await Promise.all([objectInfoResponse, refreshButton.click()])
       await expect(
         comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
       ).toBeHidden()

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/propertiesPanel/nodeSelection.spec.ts

@@ -34,6 +34,22 @@ test.describe('Properties panel - Node selection', () => {
       await expect(panel.contentArea.getByText('seed')).toBeVisible()
       await expect(panel.contentArea.getByText('steps')).toBeVisible()
     })
+
+    test(
+      'a linked widget is disabled',
+      { tag: '@vue-nodes' },
+      async ({ comfyPage }) => {
+        const seed = panel.contentArea.getByLabel('seed').locator('input')
+        await comfyPage.searchBoxV2.addNode('Int')
+        const intNode = await comfyPage.vueNodes.getFixtureByTitle(/Int/)
+        const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+        await ksampler.select()
+        await expect(seed).toBeEnabled()
+        await intNode.getSlot('INT').dragTo(ksampler.getSlot('seed'))
+        await expect(seed).toBeDisabled()
+      }
+    )
   })
 
   test.describe('Multi-node', () => {

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/sidebar/assets-filter.spec.ts

@@ -15,6 +15,10 @@ import { createMixedMediaJobs } from '@e2e/fixtures/helpers/AssetsHelper'
 // fixtures — Playwright runs auto fixtures before the `comfyPage` fixture's
 // internal `setup()`, so the page first-loads with mocks already in place.
 // See cloud-asset-default.spec.ts for the same pattern.
+//
+// Use `waitForAssets()` not `waitForAssets(MIXED_JOBS.length)`: VirtualGrid can
+// virtualize the 3D card out of the initial render (#11635). Filtering reads the
+// full store, so the per-filter count assertions still cover the behavior.
 
 const MIXED_JOBS = createMixedMediaJobs(['images', 'video', 'audio', '3D'])
 
@@ -113,7 +117,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
 
@@ -136,7 +140,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('image')
@@ -153,7 +157,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('video')
@@ -167,7 +171,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('audio')
@@ -179,7 +183,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   test('Selecting only "3D" hides non-3D assets', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('3d')
@@ -193,7 +197,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('image')
@@ -211,7 +215,7 @@ test.describe('Assets sidebar - media type filter', { tag: '@cloud' }, () => {
   }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
-    await tab.waitForAssets(MIXED_JOBS.length)
+    await tab.waitForAssets()
 
     await tab.openFilterMenu()
     await tab.toggleMediaTypeFilter('image')

browser_tests/tests/sidebar/assets.spec.ts

@@ -1105,3 +1105,56 @@ test.describe('Assets sidebar - drag and drop', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe('test.png [temp]')
   })
 })
+
+test('Insert as node', { tag: '@vue-nodes' }, async ({ comfyPage }) => {
+  await comfyPage.assets.mockOutputHistory([
+    createMockJob({
+      id: 'job1',
+      preview_output: {
+        filename: `1.png`,
+        type: 'temp',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'job2',
+      preview_output: {
+        filename: `2.png`,
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'job2',
+      preview_output: {
+        filename: `3.png`,
+        type: 'input',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    })
+  ])
+  const { assetsTab } = comfyPage.menu
+  await assetsTab.open()
+  await assetsTab.waitForAssets()
+  await expect(assetsTab.assetCards).toHaveCount(3)
+  for (const [index, expectedName] of [
+    [0, '1.png [temp]'],
+    [1, '2.png [output]'],
+    [2, '3.png']
+  ] as const) {
+    await comfyPage.nodeOps.clearGraph()
+    await assetsTab.assetCards.nth(index).scrollIntoViewIfNeeded()
+    await assetsTab.assetCards.nth(index).click({ button: 'right' })
+
+    await expect(comfyPage.contextMenu.primeVueMenu).toBeVisible()
+    await comfyPage.contextMenu.primeVueMenu.getByText('Insert as node').click()
+
+    await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
+    const nodes = await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    const fileWidget = await nodes[0].getWidget(0)
+    await expect.poll(() => fileWidget.getValue()).toBe(expectedName)
+  }
+})

browser_tests/tests/templateFilteringCount.spec.ts

@@ -1,13 +1,13 @@
 import { expect, mergeTests } from '@playwright/test'
 
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
 import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
 import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
 
-const test = mergeTests(comfyPageFixture, templateApiFixture)
+const test = mergeTests(createCloudAssetsFixture([]), templateApiFixture)
 
 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop

browser_tests/tests/templates.spec.ts

@@ -5,6 +5,7 @@ import type { WorkflowTemplates } from '@/platform/workflow/templates/types/temp
 import { getWav } from '@e2e/fixtures/components/AudioPreview'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { trackElementFlash } from '@e2e/fixtures/utils/flashDetector'
 
 async function checkTemplateFileExists(
   page: Page,
@@ -505,3 +506,32 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     expect(popup.url()).toEqual(tutorialUrl)
   })
 })
+
+test.describe(
+  'Templates deeplink (new user)',
+  { tag: ['@slow', '@workflow'] },
+  () => {
+    test('templates dialog never flashes when first-time user opens a template link', async ({
+      comfyPage
+    }) => {
+      const templatesFlash = await trackElementFlash(
+        comfyPage.page,
+        TestIds.templates.content
+      )
+
+      await comfyPage.settings.setSetting('Comfy.TutorialCompleted', false)
+
+      await comfyPage.setup({
+        clearStorage: true,
+        url: '/?template=default'
+      })
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBeGreaterThan(0)
+
+      expect(await templatesFlash.hasFlashed()).toBe(false)
+      await expect(comfyPage.templates.content).toBeHidden()
+    })
+  }
+)

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/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.13",
+  "version": "1.46.14",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -23,6 +23,7 @@
     "dev:desktop": "pnpm --filter @comfyorg/desktop-ui run dev",
     "dev:electron": "cross-env DISTRIBUTION=desktop vite --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true vite --config vite.config.mts",
+    "dev:test": "cross-env VITE_USE_LEGACY_DEFAULT_GRAPH=true vite --config vite.config.mts",
     "dev": "vite --config vite.config.mts",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check": "oxfmt --check",
@@ -66,6 +67,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:",

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/CloudRunButtonWrapper.test.ts

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
+
+const mockIsActiveSubscription = ref(true)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({
+    isActiveSubscription: mockIsActiveSubscription
+  })
+}))
+
+vi.mock('@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue', () => ({
+  default: {
+    name: 'ComfyQueueButton',
+    template: '<div data-testid="queue-button" />'
+  }
+}))
+
+vi.mock('@/platform/cloud/subscription/components/SubscribeToRun.vue', () => ({
+  default: {
+    name: 'SubscribeToRun',
+    template: '<div data-testid="subscribe-to-run-button" />'
+  }
+}))
+
+function renderWrapper() {
+  return render(CloudRunButtonWrapper)
+}
+
+describe('CloudRunButtonWrapper', () => {
+  beforeEach(() => {
+    mockIsActiveSubscription.value = true
+  })
+
+  it('renders the runnable queue button when the subscription is active', () => {
+    renderWrapper()
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+
+  it('locks the run button when the subscription is inactive', () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('queue-button')).not.toBeInTheDocument()
+  })
+
+  it('unlocks the run button once the subscription becomes active again', async () => {
+    mockIsActiveSubscription.value = false
+    renderWrapper()
+
+    expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
+
+    mockIsActiveSubscription.value = true
+    await nextTick()
+
+    expect(screen.getByTestId('queue-button')).toBeInTheDocument()
+    expect(
+      screen.queryByTestId('subscribe-to-run-button')
+    ).not.toBeInTheDocument()
+  })
+})

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/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/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/SignInContent.vue

@@ -37,7 +37,7 @@
         <Message v-if="userIsInChina" severity="warn" class="mb-4">
           {{ t('auth.signup.regionRestrictionChina') }}
         </Message>
-        <SignUpForm v-else @submit="signUpWithEmail" />
+        <SignUpForm v-else ref="signUpForm" @submit="signUpWithEmail" />
       </template>
 
       <!-- Divider -->
@@ -206,9 +206,21 @@ const signInWithEmail = async (values: SignInData) => {
   }
 }
 
-const signUpWithEmail = async (values: SignUpData) => {
-  if (await authActions.signUpWithEmail(values.email, values.password)) {
+const signUpForm = ref<InstanceType<typeof SignUpForm> | null>(null)
+
+const signUpWithEmail = async (values: SignUpData, turnstileToken?: string) => {
+  if (
+    await authActions.signUpWithEmail(
+      values.email,
+      values.password,
+      turnstileToken
+    )
+  ) {
     onSuccess()
+  } else {
+    // Signup failed while the form is still mounted: re-arm the single-use
+    // Turnstile token so the next attempt sends a fresh one.
+    signUpForm.value?.resetTurnstile()
   }
 }
 

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/signin/SignUpForm.test.ts

@@ -1,12 +1,13 @@
 import { Form, FormField } from '@primevue/forms'
+import userEvent from '@testing-library/user-event'
 import { render, screen } from '@testing-library/vue'
 import Button from '@/components/ui/button/Button.vue'
-import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
+import PrimeVue from 'primevue/config'
 import ProgressSpinner from 'primevue/progressspinner'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
@@ -36,34 +37,116 @@ vi.mock('@/stores/authStore', () => ({
   }))
 }))
 
+const mockTurnstileEnabled = ref(false)
+const mockTurnstileEnforced = ref(false)
+const mockReset = vi.fn()
+let emitTurnstileToken: ((token: string) => void) | undefined
+
+vi.mock('@/composables/auth/useTurnstile', () => ({
+  useTurnstile: () => ({
+    enabled: mockTurnstileEnabled,
+    enforced: mockTurnstileEnforced
+  })
+}))
+
+// Stub the real widget (which loads the external Turnstile script) with one that
+// exposes a spyable reset() and lets a test drive the v-model token the way a
+// solved challenge would.
+vi.mock('./TurnstileWidget.vue', async () => {
+  const { defineComponent: defineMock } = await import('vue')
+  return {
+    default: defineMock({
+      name: 'TurnstileWidget',
+      emits: ['update:token'],
+      setup(_, { expose, emit }) {
+        expose({ reset: mockReset })
+        emitTurnstileToken = (token: string) => emit('update:token', token)
+        return () => null
+      }
+    })
+  }
+})
+
+const signUpButton = enMessages.auth.signup.signUpButton
+
+function globalOptions() {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: { en: enMessages }
+  })
+  return {
+    plugins: [PrimeVue, i18n],
+    components: {
+      Form,
+      FormField,
+      Button,
+      InputText,
+      Password,
+      ProgressSpinner
+    }
+  }
+}
+
 describe('SignUpForm', () => {
   beforeEach(() => {
     mockLoadingRef.value = false
+    mockTurnstileEnabled.value = false
+    mockTurnstileEnforced.value = false
+    mockReset.mockClear()
+    emitTurnstileToken = undefined
   })
 
   afterEach(() => {
     vi.restoreAllMocks()
   })
 
-  function renderComponent() {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: enMessages }
-    })
-    return render(SignUpForm, {
-      global: {
-        plugins: [PrimeVue, i18n],
-        components: {
-          Form,
-          FormField,
-          Button,
-          InputText,
-          Password,
-          ProgressSpinner
-        }
+  function renderComponent(props: Record<string, unknown> = {}) {
+    const user = userEvent.setup()
+    const utils = render(SignUpForm, { global: globalOptions(), props })
+    return { ...utils, user }
+  }
+
+  /** Render through a host that keeps a ref, so the parent-facing exposed
+   * `resetTurnstile()` can be invoked the way SignInContent would. */
+  function renderWithRef() {
+    const formRef = ref<{ resetTurnstile: () => void } | null>(null)
+    const Host = defineComponent({
+      setup() {
+        return () => h(SignUpForm, { ref: formRef })
       }
     })
+    const utils = render(Host, { global: globalOptions() })
+    return {
+      ...utils,
+      form: () => {
+        if (!formRef.value) throw new Error('form not mounted')
+        return formRef.value
+      }
+    }
+  }
+
+  const expectedValues = {
+    email: 'new@example.com',
+    password: 'Password1!',
+    confirmPassword: 'Password1!'
+  }
+
+  async function fillValidSignup(user: ReturnType<typeof userEvent.setup>) {
+    await user.type(
+      screen.getByPlaceholderText(enMessages.auth.signup.emailPlaceholder),
+      expectedValues.email
+    )
+    await user.type(
+      screen.getByPlaceholderText(enMessages.auth.signup.passwordPlaceholder),
+      expectedValues.password
+    )
+    await user.type(
+      screen.getByPlaceholderText(
+        enMessages.auth.login.confirmPasswordPlaceholder
+      ),
+      expectedValues.confirmPassword
+    )
   }
 
   describe('Password manager autofill attributes', () => {
@@ -107,4 +190,97 @@ describe('SignUpForm', () => {
       )
     })
   })
+
+  describe('Turnstile single-use token reset', () => {
+    it('exposes resetTurnstile() that resets the rendered widget', async () => {
+      mockTurnstileEnabled.value = true
+      const { form } = renderWithRef()
+      await nextTick()
+
+      form().resetTurnstile()
+
+      expect(mockReset).toHaveBeenCalledOnce()
+    })
+
+    it('does not reset the widget on the initial render', async () => {
+      mockTurnstileEnabled.value = true
+      renderWithRef()
+      await nextTick()
+
+      expect(mockReset).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Turnstile token hygiene', () => {
+    it('clears the stale token when Turnstile becomes disabled', async () => {
+      mockTurnstileEnabled.value = true
+      mockTurnstileEnforced.value = true
+      const { user } = renderComponent()
+      await fillValidSignup(user)
+
+      emitTurnstileToken!('stale-token')
+      await nextTick()
+      expect(
+        screen.getByRole('button', { name: signUpButton })
+      ).not.toBeDisabled()
+
+      mockTurnstileEnabled.value = false
+      await nextTick()
+
+      // re-enable: the stale token must have been cleared so submit is blocked again
+      mockTurnstileEnabled.value = true
+      await nextTick()
+
+      expect(screen.getByRole('button', { name: signUpButton })).toBeDisabled()
+    })
+  })
+
+  describe('Turnstile submit gating', () => {
+    it('disables the submit button in enforce mode until a token is present', async () => {
+      mockTurnstileEnabled.value = true
+      mockTurnstileEnforced.value = true
+      renderComponent()
+      await nextTick()
+
+      expect(screen.getByRole('button', { name: signUpButton })).toBeDisabled()
+    })
+
+    it('does not emit submit in enforce mode while the token is empty', async () => {
+      mockTurnstileEnabled.value = true
+      mockTurnstileEnforced.value = true
+      const onSubmit = vi.fn()
+      const { user } = renderComponent({ onSubmit })
+      await fillValidSignup(user)
+
+      await user.click(screen.getByRole('button', { name: signUpButton }))
+
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
+
+    it('emits submit with the token in enforce mode once the challenge is solved', async () => {
+      mockTurnstileEnabled.value = true
+      mockTurnstileEnforced.value = true
+      const onSubmit = vi.fn()
+      const { user } = renderComponent({ onSubmit })
+      await fillValidSignup(user)
+
+      emitTurnstileToken!('token-xyz')
+      await nextTick()
+      await user.click(screen.getByRole('button', { name: signUpButton }))
+
+      expect(onSubmit).toHaveBeenCalledWith(expectedValues, 'token-xyz')
+    })
+
+    it('emits submit without a token in shadow mode (never blocks)', async () => {
+      mockTurnstileEnabled.value = true
+      mockTurnstileEnforced.value = false
+      const onSubmit = vi.fn()
+      const { user } = renderComponent({ onSubmit })
+      await fillValidSignup(user)
+
+      await user.click(screen.getByRole('button', { name: signUpButton }))
+
+      expect(onSubmit).toHaveBeenCalledWith(expectedValues, undefined)
+    })
+  })
 })

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

@@ -29,13 +29,34 @@
 
     <PasswordFields />
 
+    <TurnstileWidget
+      v-if="turnstileEnabled"
+      ref="turnstileWidget"
+      v-model:token="turnstileToken"
+    />
+
+    <small
+      v-show="submitBlockedByTurnstile"
+      id="comfy-org-sign-up-turnstile-hint"
+      role="status"
+      aria-live="polite"
+      class="opacity-80"
+    >
+      {{ t('auth.turnstile.submitBlockedHint') }}
+    </small>
+
     <!-- Submit Button -->
     <ProgressSpinner v-if="loading" class="mx-auto size-8" />
     <Button
       v-else
       type="submit"
       class="mt-4 h-10 font-medium"
-      :disabled="!$form.valid"
+      :disabled="!$form.valid || submitBlockedByTurnstile"
+      :aria-describedby="
+        submitBlockedByTurnstile
+          ? 'comfy-org-sign-up-turnstile-hint'
+          : undefined
+      "
     >
       {{ t('auth.signup.signUpButton') }}
     </Button>
@@ -49,27 +70,58 @@ import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useThrottleFn } from '@vueuse/core'
 import InputText from 'primevue/inputtext'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useTurnstile } from '@/composables/auth/useTurnstile'
 import { signUpSchema } from '@/schemas/signInSchema'
 import type { SignUpData } from '@/schemas/signInSchema'
 import { useAuthStore } from '@/stores/authStore'
 
 import PasswordFields from './PasswordFields.vue'
+import TurnstileWidget from './TurnstileWidget.vue'
 
 const { t } = useI18n()
 const authStore = useAuthStore()
 const loading = computed(() => authStore.loading)
 
+const { enabled: turnstileEnabled, enforced: turnstileEnforced } =
+  useTurnstile()
+const turnstileToken = ref('')
+const turnstileWidget =
+  useTemplateRef<InstanceType<typeof TurnstileWidget>>('turnstileWidget')
+const submitBlockedByTurnstile = computed(
+  () => turnstileEnforced.value && !turnstileToken.value
+)
+
+watch(turnstileEnabled, (on) => {
+  if (!on) turnstileToken.value = ''
+})
+
 const emit = defineEmits<{
-  submit: [values: SignUpData]
+  submit: [values: SignUpData, turnstileToken?: string]
 }>()
 
 const onSubmit = useThrottleFn((event: FormSubmitEvent) => {
-  if (event.valid) {
-    emit('submit', event.values as SignUpData)
+  if (event.valid && !submitBlockedByTurnstile.value) {
+    emit(
+      'submit',
+      event.values as SignUpData,
+      turnstileToken.value || undefined
+    )
   }
 }, 1_500)
+
+// Turnstile tokens are single-use. The parent calls this after a FAILED signup
+// (the form can't observe the submit outcome itself) to discard the spent token
+// and request a fresh challenge. Driving it from the actual result — instead of
+// watching the store-global loading flag — keeps an unrelated auth action from
+// wiping a freshly-solved token, and avoids resetting a widget that is about to
+// unmount on success.
+function resetTurnstile() {
+  turnstileWidget.value?.reset()
+}
+
+defineExpose({ resetTurnstile })
 </script>

src/components/dialog/content/signin/TurnstileWidget.test.ts

@@ -0,0 +1,264 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { render } from '@testing-library/vue'
+
+import type { TurnstileRenderOptions } from '@/composables/auth/turnstileScript'
+
+import TurnstileWidget from './TurnstileWidget.vue'
+
+const { mockLoadTurnstile, mockGetSiteKey, mockLightTheme } = vi.hoisted(
+  () => ({
+    mockLoadTurnstile: vi.fn(),
+    mockGetSiteKey: vi.fn(() => 'site-key'),
+    mockLightTheme: { value: true }
+  })
+)
+
+vi.mock('@/composables/auth/turnstileScript', () => ({
+  loadTurnstile: mockLoadTurnstile
+}))
+vi.mock('@/config/turnstile', () => ({
+  getTurnstileSiteKey: mockGetSiteKey
+}))
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: () => ({
+    completedActivePalette: {
+      get light_theme() {
+        return mockLightTheme.value
+      }
+    }
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      auth: {
+        turnstile: {
+          expired: 'Challenge expired',
+          failed: 'Verification failed'
+        }
+      }
+    }
+  }
+})
+
+/** A controllable Cloudflare Turnstile global whose render() captures options. */
+function fakeTurnstile() {
+  let captured: TurnstileRenderOptions | undefined
+  const api = {
+    render: vi.fn((_el: unknown, options: TurnstileRenderOptions) => {
+      captured = options
+      return 'widget-id'
+    }),
+    reset: vi.fn(),
+    remove: vi.fn()
+  }
+  return { api, options: () => captured }
+}
+
+/** Drain the onMounted async (loadTurnstile) plus any follow-up microtasks. */
+const flush = async () => {
+  await Promise.resolve()
+  await new Promise((resolve) => setTimeout(resolve))
+}
+
+const renderWidget = () =>
+  render(TurnstileWidget, { global: { plugins: [i18n] } })
+
+/**
+ * Render TurnstileWidget through a thin host that keeps a ref to it, so the
+ * exposed `reset()` method can be invoked the way a parent (SignUpForm) would.
+ */
+const renderWidgetWithExpose = () => {
+  const widgetRef = ref<{ reset: () => void } | null>(null)
+  const Host = defineComponent({
+    setup(_, { emit }) {
+      return () =>
+        h(TurnstileWidget, {
+          ref: widgetRef,
+          'onUpdate:token': (value: string) => emit('update:token', value)
+        })
+    }
+  })
+  const utils = render(Host, { global: { plugins: [i18n] } })
+  return {
+    ...utils,
+    getCurrentInstance: () => {
+      if (!widgetRef.value) throw new Error('widget not mounted')
+      return widgetRef.value
+    }
+  }
+}
+
+describe('TurnstileWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetSiteKey.mockReturnValue('site-key')
+    mockLightTheme.value = true
+    delete window.turnstile
+  })
+
+  afterEach(() => {
+    delete window.turnstile
+  })
+
+  it('renders the widget with the configured sitekey and light theme', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+
+    renderWidget()
+    await flush()
+
+    expect(mockLoadTurnstile).toHaveBeenCalledOnce()
+    expect(api.render).toHaveBeenCalledOnce()
+    expect(options()?.sitekey).toBe('site-key')
+    expect(options()?.theme).toBe('light')
+  })
+
+  it('uses the dark theme when the active palette is not light', async () => {
+    mockLightTheme.value = false
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+
+    renderWidget()
+    await flush()
+
+    expect(options()?.theme).toBe('dark')
+  })
+
+  it('emits the solved token via v-model and shows no error', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+
+    const { emitted, container } = renderWidget()
+    await flush()
+
+    options()!.callback!('token-abc')
+    await flush()
+
+    expect(emitted()['update:token'].at(-1)).toEqual(['token-abc'])
+    expect(container.textContent).not.toContain('Challenge expired')
+    expect(container.textContent).not.toContain('Verification failed')
+  })
+
+  it('clears the token and surfaces the expired message on expiry', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+
+    const { emitted, container } = renderWidget()
+    await flush()
+
+    options()!.callback!('token-abc')
+    options()!['expired-callback']!()
+    await flush()
+
+    expect(emitted()['update:token'].at(-1)).toEqual([''])
+    expect(container.textContent).toContain('Challenge expired')
+  })
+
+  it('clears the token and surfaces the failure message on widget error', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+
+    const { emitted, container } = renderWidget()
+    await flush()
+
+    options()!.callback!('token-abc')
+    options()!['error-callback']!()
+    await flush()
+
+    expect(emitted()['update:token'].at(-1)).toEqual([''])
+    expect(container.textContent).toContain('Verification failed')
+  })
+
+  it('resets the widget on a challenge error to fetch a fresh challenge', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+    window.turnstile = api as unknown as NonNullable<Window['turnstile']>
+
+    renderWidget()
+    await flush()
+
+    options()!['error-callback']!()
+    await flush()
+
+    expect(api.reset).toHaveBeenCalledWith('widget-id')
+  })
+
+  it('shows the failure message when the Turnstile script fails to load', async () => {
+    mockLoadTurnstile.mockRejectedValue(new Error('script failed'))
+
+    const { container } = renderWidget()
+    await flush()
+
+    expect(container.textContent).toContain('Verification failed')
+  })
+
+  it('reset() clears the token model and resets the rendered widget', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+    window.turnstile = api as unknown as NonNullable<Window['turnstile']>
+
+    const { emitted, getCurrentInstance } = renderWidgetWithExpose()
+    await flush()
+
+    options()!.callback!('token-abc')
+    await flush()
+    expect(emitted()['update:token'].at(-1)).toEqual(['token-abc'])
+
+    getCurrentInstance().reset()
+    await flush()
+
+    expect(api.reset).toHaveBeenCalledWith('widget-id')
+    expect(emitted()['update:token'].at(-1)).toEqual([''])
+  })
+
+  it('reset() clears a stale error so it does not linger over a fresh challenge', async () => {
+    const { api, options } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+    window.turnstile = api as unknown as NonNullable<Window['turnstile']>
+
+    const { container, getCurrentInstance } = renderWidgetWithExpose()
+    await flush()
+
+    options()!['error-callback']!()
+    await flush()
+    expect(container.textContent).toContain('Verification failed')
+
+    getCurrentInstance().reset()
+    await flush()
+    expect(container.textContent).not.toContain('Verification failed')
+  })
+
+  it('reset() clears the token even when the widget never rendered', async () => {
+    mockLoadTurnstile.mockRejectedValue(new Error('script failed'))
+
+    const { emitted, getCurrentInstance } = renderWidgetWithExpose()
+    await flush()
+
+    getCurrentInstance().reset()
+    await flush()
+
+    // No widget id was captured, so window.turnstile.reset is never called,
+    // but the token model is still cleared.
+    expect(emitted()['update:token']?.at(-1) ?? ['']).toEqual([''])
+  })
+
+  it('removes the widget on unmount when one was rendered', async () => {
+    const { api } = fakeTurnstile()
+    mockLoadTurnstile.mockResolvedValue(api)
+    window.turnstile = api as unknown as NonNullable<Window['turnstile']>
+
+    const { unmount } = renderWidget()
+    await flush()
+
+    unmount()
+
+    expect(api.remove).toHaveBeenCalledWith('widget-id')
+  })
+})

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div ref="containerRef"></div>
+    <small
+      v-if="errorMessage"
+      role="alert"
+      aria-live="assertive"
+      class="text-red-500"
+      >{{ errorMessage }}</small
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { loadTurnstile } from '@/composables/auth/turnstileScript'
+import { getTurnstileSiteKey } from '@/config/turnstile'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const token = defineModel<string>('token', { default: '' })
+
+const { t } = useI18n()
+const colorPaletteStore = useColorPaletteStore()
+
+const containerRef = ref<HTMLDivElement>()
+const errorMessage = ref('')
+let widgetId: string | undefined
+
+const clearToken = () => {
+  token.value = ''
+}
+
+/**
+ * Fetch a fresh challenge and clear the current token.
+ *
+ * Turnstile tokens are single-use, so after a token is consumed by a submit
+ * attempt that did not succeed, the spent token must be discarded and a new
+ * challenge requested. Clearing the model re-blocks submission until the user
+ * solves the fresh challenge; clearing the error drops any stale failure text
+ * so it can't linger over the new challenge.
+ */
+const reset = () => {
+  clearToken()
+  errorMessage.value = ''
+  if (widgetId && window.turnstile) {
+    window.turnstile.reset(widgetId)
+  }
+}
+
+defineExpose({ reset })
+
+onMounted(async () => {
+  try {
+    const turnstile = await loadTurnstile()
+    if (!containerRef.value) return
+
+    const theme = colorPaletteStore.completedActivePalette.light_theme
+      ? 'light'
+      : 'dark'
+
+    widgetId = turnstile.render(containerRef.value, {
+      sitekey: getTurnstileSiteKey(),
+      theme,
+      callback: (newToken: string) => {
+        errorMessage.value = ''
+        token.value = newToken
+      },
+      'expired-callback': () => {
+        clearToken()
+        errorMessage.value = t('auth.turnstile.expired')
+      },
+      'error-callback': () => {
+        clearToken()
+        console.warn('Turnstile challenge failed')
+        errorMessage.value = t('auth.turnstile.failed')
+        if (widgetId && window.turnstile) window.turnstile.reset(widgetId)
+      }
+    })
+  } catch (error) {
+    console.warn('Turnstile failed to load', error)
+    errorMessage.value = t('auth.turnstile.failed')
+  }
+})
+
+onBeforeUnmount(() => {
+  if (widgetId && window.turnstile) {
+    window.turnstile.remove(widgetId)
+  }
+})
+</script>

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/error/ErrorOverlay.test.ts

@@ -7,12 +7,26 @@ import { createI18n } from 'vue-i18n'
 import ErrorOverlay from './ErrorOverlay.vue'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { NodeError } from '@/schemas/apiSchema'
+import type {
+  MissingPackGroup,
+  SwapNodeGroup
+} from '@/components/rightSidePanel/errors/useErrorGroups'
 import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
+import type { MissingMediaGroup } from '@/platform/missingMedia/types'
+import type { MissingModelGroup } from '@/platform/missingModel/types'
 
-const mockAllErrorGroups = vi.hoisted(() => ({ value: [] as ErrorGroup[] }))
+const mockErrorGroups = vi.hoisted(() => ({
+  allErrorGroups: { value: [] as ErrorGroup[] },
+  missingPackGroups: { value: [] as MissingPackGroup[] },
+  missingModelGroups: { value: [] as MissingModelGroup[] },
+  missingMediaGroups: { value: [] as MissingMediaGroup[] },
+  swapNodeGroups: { value: [] as SwapNodeGroup[] }
+}))
+
+const mockAllErrorGroups = mockErrorGroups.allErrorGroups
 
 vi.mock('@/components/rightSidePanel/errors/useErrorGroups', () => ({
-  useErrorGroups: () => ({ allErrorGroups: mockAllErrorGroups })
+  useErrorGroups: () => mockErrorGroups
 }))
 
 vi.mock('@/composables/graph/useNodeErrorFlagSync', () => ({
@@ -62,7 +76,6 @@ function createTestI18n() {
           dismiss: 'Dismiss'
         },
         errorOverlay: {
-          errorCount: '{count} ERROR | {count} ERRORS',
           multipleErrorCount: '{count} error found | {count} errors found',
           multipleErrorsMessage: 'Resolve them before running the workflow.',
           viewDetails: 'View details'
@@ -108,6 +121,10 @@ function renderOverlay(props: { appMode?: boolean } = {}) {
 describe('ErrorOverlay', () => {
   beforeEach(() => {
     mockAllErrorGroups.value = []
+    mockErrorGroups.missingPackGroups.value = []
+    mockErrorGroups.missingModelGroups.value = []
+    mockErrorGroups.missingMediaGroups.value = []
+    mockErrorGroups.swapNodeGroups.value = []
     mockOpenPanel.mockClear()
     mockCanvasStore.linearMode = false
     mockCanvasStore.canvas = null
@@ -116,17 +133,12 @@ describe('ErrorOverlay', () => {
   })
 
   it('renders a single overlay message without list markup', async () => {
-    renderOverlay()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Execution failed',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -137,6 +149,12 @@ describe('ErrorOverlay', () => {
         ]
       }
     ]
+    renderOverlay()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastNodeErrors = {
+      '1': makeNodeError(['Only error'])
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -145,21 +163,19 @@ describe('ErrorOverlay', () => {
     expect(screen.getByTestId('error-overlay-see-errors')).toHaveTextContent(
       'View details'
     )
+    expect(screen.getByTestId('error-overlay-dismiss')).toHaveAccessibleName(
+      'Close'
+    )
     expect(screen.queryByRole('list')).not.toBeInTheDocument()
   })
 
   it('keeps the app mode button label', async () => {
-    renderOverlay({ appMode: true })
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Execution failed',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -170,6 +186,12 @@ describe('ErrorOverlay', () => {
         ]
       }
     ]
+    renderOverlay({ appMode: true })
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastNodeErrors = {
+      '1': makeNodeError(['Only error'])
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 

src/components/error/ErrorOverlay.vue

@@ -7,47 +7,35 @@
     <div v-if="isVisible" class="pointer-events-none flex w-full justify-end">
       <div
         role="status"
-        aria-live="polite"
         data-testid="error-overlay"
-        class="pointer-events-auto flex w-fit max-w-120 min-w-80 flex-col overflow-hidden rounded-lg border border-destructive-background bg-comfy-menu-bg shadow-interface transition-colors duration-200 ease-in-out"
+        class="pointer-events-auto relative flex w-fit max-w-120 min-w-80 flex-col gap-2 overflow-hidden rounded-lg border border-l-4 border-border-default border-l-destructive-background bg-base-background p-3 shadow-interface transition-colors duration-200 ease-in-out"
       >
-        <!-- Header -->
-        <div class="flex h-12 items-center gap-2 px-4">
-          <span class="flex-1 text-sm font-bold text-destructive-background">
+        <div class="flex w-full items-start gap-2 pr-8">
+          <i
+            class="mt-0.5 icon-[lucide--circle-x] size-4 shrink-0 text-destructive-background"
+          />
+          <span class="min-w-0 flex-1 truncate text-sm text-base-foreground">
             {{ overlayTitle }}
           </span>
-          <Button
-            variant="muted-textonly"
-            size="icon-sm"
-            :aria-label="t('g.close')"
-            @click="dismiss"
-          >
-            <i class="icon-[lucide--x] block size-5 leading-none" />
-          </Button>
         </div>
 
-        <!-- Body -->
-        <div class="px-4 pb-3" data-testid="error-overlay-messages">
+        <div
+          class="flex w-full items-start gap-2 pr-8"
+          data-testid="error-overlay-messages"
+        >
+          <span class="size-4 shrink-0" aria-hidden="true" />
           <p
-            class="m-0 line-clamp-3 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
+            class="m-0 line-clamp-3 min-w-0 flex-1 text-sm/snug wrap-break-word whitespace-pre-wrap text-muted-foreground"
           >
             {{ overlayMessage }}
           </p>
         </div>
 
-        <!-- Footer -->
-        <div class="flex items-center justify-end gap-4 px-4 py-3">
-          <Button
-            variant="muted-textonly"
-            size="unset"
-            data-testid="error-overlay-dismiss"
-            @click="dismiss"
-          >
-            {{ t('g.dismiss') }}
-          </Button>
+        <div class="flex w-full items-center justify-end pt-2">
           <Button
             variant="secondary"
-            size="lg"
+            size="unset"
+            class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
             data-testid="error-overlay-see-errors"
             @click="seeErrors"
           >
@@ -58,6 +46,17 @@
             }}
           </Button>
         </div>
+
+        <Button
+          variant="muted-textonly"
+          size="icon-sm"
+          class="absolute top-2 right-2 size-6 rounded-sm"
+          data-testid="error-overlay-dismiss"
+          :aria-label="t('g.close')"
+          @click="dismiss"
+        >
+          <i class="icon-[lucide--x] block size-4 leading-none" />
+        </Button>
       </div>
     </div>
   </Transition>

src/components/error/useErrorOverlayState.test.ts

@@ -8,12 +8,26 @@ import { useErrorOverlayState } from './useErrorOverlayState'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingMediaStore } from '@/platform/missingMedia/missingMediaStore'
 import type { NodeError } from '@/schemas/apiSchema'
+import type {
+  MissingPackGroup,
+  SwapNodeGroup
+} from '@/components/rightSidePanel/errors/useErrorGroups'
 import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
+import type { MissingMediaGroup } from '@/platform/missingMedia/types'
+import type { MissingModelGroup } from '@/platform/missingModel/types'
 
-const mockAllErrorGroups = vi.hoisted(() => ({ value: [] as ErrorGroup[] }))
+const mockErrorGroups = vi.hoisted(() => ({
+  allErrorGroups: { value: [] as ErrorGroup[] },
+  missingPackGroups: { value: [] as MissingPackGroup[] },
+  missingModelGroups: { value: [] as MissingModelGroup[] },
+  missingMediaGroups: { value: [] as MissingMediaGroup[] },
+  swapNodeGroups: { value: [] as SwapNodeGroup[] }
+}))
+
+const mockAllErrorGroups = mockErrorGroups.allErrorGroups
 
 vi.mock('@/components/rightSidePanel/errors/useErrorGroups', () => ({
-  useErrorGroups: () => ({ allErrorGroups: mockAllErrorGroups })
+  useErrorGroups: () => mockErrorGroups
 }))
 
 vi.mock('@/composables/graph/useNodeErrorFlagSync', () => ({
@@ -44,7 +58,6 @@ function createTestI18n() {
     messages: {
       en: {
         errorOverlay: {
-          errorCount: '{count} ERROR | {count} ERRORS',
           multipleErrorCount: '{count} error found | {count} errors found',
           multipleErrorsMessage: 'Resolve them before running the workflow.'
         }
@@ -92,20 +105,19 @@ function mountOverlayState() {
 describe('useErrorOverlayState', () => {
   beforeEach(() => {
     mockAllErrorGroups.value = []
+    mockErrorGroups.missingPackGroups.value = []
+    mockErrorGroups.missingModelGroups.value = []
+    mockErrorGroups.missingMediaGroups.value = []
+    mockErrorGroups.swapNodeGroups.value = []
   })
 
   it('uses the raw message for a single uncataloged execution error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Only error'])
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Execution failed',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -116,6 +128,12 @@ describe('useErrorOverlayState', () => {
         ]
       }
     ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastNodeErrors = {
+      '1': makeNodeError(['Only error'])
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -125,17 +143,12 @@ describe('useErrorOverlayState', () => {
   })
 
   it('uses toast copy for a single validation error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Required input is missing'])
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Required input is missing',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -152,6 +165,12 @@ describe('useErrorOverlayState', () => {
         ]
       }
     ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastNodeErrors = {
+      '1': makeNodeError(['Required input is missing'])
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -164,17 +183,12 @@ describe('useErrorOverlayState', () => {
   })
 
   it('uses display copy before raw copy when toast copy is absent', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError(['Raw validation error'])
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Friendly validation title',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -190,6 +204,12 @@ describe('useErrorOverlayState', () => {
         ]
       }
     ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastNodeErrors = {
+      '1': makeNodeError(['Raw validation error'])
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -202,24 +222,12 @@ describe('useErrorOverlayState', () => {
   })
 
   it('uses toast copy for a single runtime error', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastExecutionError = {
-      prompt_id: 'prompt',
-      node_id: 1,
-      node_type: 'KSampler',
-      executed: [],
-      exception_message: 'CUDA out of memory',
-      exception_type: 'torch.OutOfMemoryError',
-      traceback: [],
-      timestamp: Date.now()
-    }
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Generation failed',
+        count: 1,
         priority: 0,
         cards: [
           {
@@ -237,6 +245,19 @@ describe('useErrorOverlayState', () => {
         ]
       }
     ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.lastExecutionError = {
+      prompt_id: 'prompt',
+      node_id: 1,
+      node_type: 'KSampler',
+      executed: [],
+      exception_message: 'CUDA out of memory',
+      exception_type: 'torch.OutOfMemoryError',
+      traceback: [],
+      timestamp: Date.now()
+    }
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -247,6 +268,44 @@ describe('useErrorOverlayState', () => {
   })
 
   it('uses group toast copy for a single missing media error', async () => {
+    mockErrorGroups.missingMediaGroups.value = [
+      {
+        mediaType: 'image',
+        items: [
+          {
+            name: 'image.png',
+            mediaType: 'image',
+            representative: {
+              nodeId: '1',
+              nodeType: 'LoadImage',
+              widgetName: 'image',
+              mediaType: 'image',
+              name: 'image.png',
+              isMissing: true
+            },
+            referencingNodes: [
+              {
+                nodeId: '1',
+                nodeType: 'LoadImage',
+                widgetName: 'image'
+              }
+            ]
+          }
+        ]
+      }
+    ]
+    mockAllErrorGroups.value = [
+      {
+        type: 'missing_media',
+        groupKey: 'missing_media',
+        displayTitle: 'Media input missing',
+        displayMessage: 'A required media input has no file selected.',
+        toastTitle: 'Media input missing',
+        toastMessage: 'Load Image is missing a required media file.',
+        count: 1,
+        priority: 3
+      }
+    ]
     mountOverlayState()
 
     const executionErrorStore = useExecutionErrorStore()
@@ -261,17 +320,6 @@ describe('useErrorOverlayState', () => {
         isMissing: true
       }
     ])
-    mockAllErrorGroups.value = [
-      {
-        type: 'missing_media',
-        groupKey: 'missing_media',
-        displayTitle: 'Media input missing',
-        displayMessage: 'A required media input has no file selected.',
-        toastTitle: 'Media input missing',
-        toastMessage: 'Load Image is missing a required media file.',
-        priority: 3
-      }
-    ]
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
@@ -281,6 +329,147 @@ describe('useErrorOverlayState', () => {
     )
   })
 
+  it('uses group copy for one missing model referenced by multiple nodes', async () => {
+    mockErrorGroups.missingModelGroups.value = [
+      {
+        directory: 'checkpoints',
+        isAssetSupported: true,
+        models: [
+          {
+            name: 'missing.safetensors',
+            representative: {
+              nodeId: '1',
+              nodeType: 'CheckpointLoaderSimple',
+              widgetName: 'ckpt_name',
+              name: 'missing.safetensors',
+              directory: 'checkpoints',
+              isAssetSupported: true,
+              isMissing: true
+            },
+            referencingNodes: [
+              { nodeId: '1', widgetName: 'ckpt_name' },
+              { nodeId: '2', widgetName: 'ckpt_name' }
+            ]
+          }
+        ]
+      }
+    ]
+    mockAllErrorGroups.value = [
+      {
+        type: 'missing_model',
+        groupKey: 'missing_model',
+        displayTitle: 'Missing Models',
+        displayMessage: 'Import a model, or open the node to replace it.',
+        toastTitle: 'Model missing',
+        toastMessage: 'CheckpointLoaderSimple is missing missing.safetensors.',
+        count: 1,
+        priority: 2
+      }
+    ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.showErrorOverlay()
+    await nextTick()
+
+    expect(screen.getByTestId('title')).toHaveTextContent('Missing Models')
+    expect(screen.getByTestId('message')).toHaveTextContent(
+      'Import a model, or open the node to replace it.'
+    )
+  })
+
+  it('uses group copy for one execution group with multiple errors', async () => {
+    mockAllErrorGroups.value = [
+      {
+        type: 'execution',
+        groupKey: 'execution:required_input_missing',
+        displayTitle: 'Missing connection',
+        displayMessage: 'Required input slots have no connection feeding them.',
+        count: 2,
+        priority: 1,
+        cards: [
+          {
+            id: '1',
+            title: 'KSampler',
+            errors: [
+              { message: 'KSampler is missing model' },
+              { message: 'KSampler is missing positive' }
+            ]
+          }
+        ]
+      }
+    ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.showErrorOverlay()
+    await nextTick()
+
+    expect(screen.getByTestId('title')).toHaveTextContent('Missing connection')
+    expect(screen.getByTestId('message')).toHaveTextContent(
+      'Required input slots have no connection feeding them.'
+    )
+  })
+
+  it('uses aggregate copy for one missing model group with multiple rows', async () => {
+    mockErrorGroups.missingModelGroups.value = [
+      {
+        directory: 'checkpoints',
+        isAssetSupported: true,
+        models: [
+          {
+            name: 'first.safetensors',
+            representative: {
+              nodeId: '1',
+              nodeType: 'CheckpointLoaderSimple',
+              widgetName: 'ckpt_name',
+              name: 'first.safetensors',
+              directory: 'checkpoints',
+              isAssetSupported: true,
+              isMissing: true
+            },
+            referencingNodes: [{ nodeId: '1', widgetName: 'ckpt_name' }]
+          },
+          {
+            name: 'second.safetensors',
+            representative: {
+              nodeId: '2',
+              nodeType: 'CheckpointLoaderSimple',
+              widgetName: 'ckpt_name',
+              name: 'second.safetensors',
+              directory: 'checkpoints',
+              isAssetSupported: true,
+              isMissing: true
+            },
+            referencingNodes: [{ nodeId: '2', widgetName: 'ckpt_name' }]
+          }
+        ]
+      }
+    ]
+    mockAllErrorGroups.value = [
+      {
+        type: 'missing_model',
+        groupKey: 'missing_model',
+        displayTitle: 'Missing Models',
+        displayMessage: 'Import a model, or open the node to replace it.',
+        toastTitle: 'Missing models',
+        toastMessage: '2 model files are missing.',
+        count: 2,
+        priority: 2
+      }
+    ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.showErrorOverlay()
+    await nextTick()
+
+    expect(screen.getByTestId('title')).toHaveTextContent('2 errors found')
+    expect(screen.getByTestId('message')).toHaveTextContent(
+      'Resolve them before running the workflow.'
+    )
+  })
+
   it('does not show when a raw error has no resolved overlay message', async () => {
     mountOverlayState()
 
@@ -295,26 +484,14 @@ describe('useErrorOverlayState', () => {
     expect(screen.getByTestId('message')).toBeEmptyDOMElement()
   })
 
-  it('uses aggregate copy for multiple errors', async () => {
-    mountOverlayState()
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.lastNodeErrors = {
-      '1': makeNodeError([
-        'First error',
-        'Second error',
-        'Third error',
-        'Fourth error',
-        'Fifth error',
-        'Sixth error',
-        'Seventh error'
-      ])
-    }
+  it('uses grouped error counts for aggregate copy', async () => {
     mockAllErrorGroups.value = [
       {
         type: 'execution',
         groupKey: 'execution:KSampler',
         displayTitle: 'Execution failed',
+        displayMessage: 'First group message',
+        count: 2,
         priority: 0,
         cards: [
           {
@@ -323,13 +500,31 @@ describe('useErrorOverlayState', () => {
             errors: [{ message: 'First error' }]
           }
         ]
+      },
+      {
+        type: 'execution',
+        groupKey: 'execution:CLIPTextEncode',
+        displayTitle: 'Invalid CLIP input',
+        displayMessage: 'Second group message',
+        count: 3,
+        priority: 1,
+        cards: [
+          {
+            id: '2',
+            title: 'CLIPTextEncode',
+            errors: [{ message: 'Second error' }]
+          }
+        ]
       }
     ]
+    mountOverlayState()
+
+    const executionErrorStore = useExecutionErrorStore()
     executionErrorStore.showErrorOverlay()
     await nextTick()
 
     expect(screen.getByTestId('visible')).toHaveTextContent('true')
-    expect(screen.getByTestId('title')).toHaveTextContent('7 errors found')
+    expect(screen.getByTestId('title')).toHaveTextContent('5 errors found')
     expect(screen.getByTestId('message')).toHaveTextContent(
       'Resolve them before running the workflow.'
     )

src/components/error/useErrorOverlayState.ts

@@ -4,11 +4,17 @@ import { storeToRefs } from 'pinia'
 
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
+import type {
+  MissingPackGroup,
+  SwapNodeGroup
+} from '@/components/rightSidePanel/errors/useErrorGroups'
 import type { ErrorGroup } from '@/components/rightSidePanel/errors/types'
+import type { MissingMediaGroup } from '@/platform/missingMedia/types'
+import type { MissingModelGroup } from '@/platform/missingModel/types'
 
-function resolveSingleOverlayCopy(
-  group: ErrorGroup
-): { title?: string; message: string } | undefined {
+type OverlayCopy = { title?: string; message: string }
+
+function resolveSingleOverlayCopy(group: ErrorGroup): OverlayCopy | undefined {
   if (group.type === 'execution') {
     const [card] = group.cards
     const [error] = card?.errors ?? []
@@ -37,27 +43,119 @@ function resolveSingleOverlayCopy(
   }
 }
 
+function resolveGroupOverlayCopy(group: ErrorGroup): OverlayCopy | undefined {
+  const message =
+    group.displayMessage ?? group.toastMessage ?? group.displayTitle
+  if (!message) return undefined
+
+  return {
+    title: group.displayTitle,
+    message
+  }
+}
+
+function countMissingNodeReferences(groups: MissingPackGroup[]): number {
+  return groups.reduce((count, group) => count + group.nodeTypes.length, 0)
+}
+
+function countSwapNodeReferences(groups: SwapNodeGroup[]): number {
+  return groups.reduce((count, group) => count + group.nodeTypes.length, 0)
+}
+
+function getMissingModelRows(groups: MissingModelGroup[]) {
+  return groups.flatMap((group) => group.models)
+}
+
+function getMissingMediaRows(groups: MissingMediaGroup[]) {
+  return groups.flatMap((group) => group.items)
+}
+
+function hasSingleRowWithAtMostOneReference(
+  rows: Array<{ referencingNodes: readonly unknown[] }>
+): boolean {
+  const row = rows[0]
+  return (
+    rows.length === 1 && row !== undefined && row.referencingNodes.length <= 1
+  )
+}
+
+interface OverlayGroupContext {
+  missingPackGroups: MissingPackGroup[]
+  missingModelGroups: MissingModelGroup[]
+  missingMediaGroups: MissingMediaGroup[]
+  swapNodeGroups: SwapNodeGroup[]
+}
+
+function isSingleLeafGroup(
+  group: ErrorGroup,
+  context: OverlayGroupContext
+): boolean {
+  if (group.type === 'execution') {
+    return group.cards.length === 1 && group.cards[0]?.errors.length === 1
+  }
+
+  if (group.type === 'missing_node') {
+    return (
+      context.missingPackGroups.length === 1 &&
+      countMissingNodeReferences(context.missingPackGroups) === 1
+    )
+  }
+
+  if (group.type === 'swap_nodes') {
+    return (
+      context.swapNodeGroups.length === 1 &&
+      countSwapNodeReferences(context.swapNodeGroups) === 1
+    )
+  }
+
+  if (group.type === 'missing_model') {
+    return hasSingleRowWithAtMostOneReference(
+      getMissingModelRows(context.missingModelGroups)
+    )
+  }
+
+  return hasSingleRowWithAtMostOneReference(
+    getMissingMediaRows(context.missingMediaGroups)
+  )
+}
+
+function shouldUseAggregateCopyForSingleGroup(
+  group: ErrorGroup,
+  context: OverlayGroupContext
+): boolean {
+  if (group.type === 'missing_node') {
+    return context.missingPackGroups.length > 1
+  }
+
+  if (group.type === 'swap_nodes') {
+    return context.swapNodeGroups.length > 1
+  }
+
+  if (group.type === 'missing_model') {
+    return getMissingModelRows(context.missingModelGroups).length > 1
+  }
+
+  if (group.type === 'missing_media') {
+    return getMissingMediaRows(context.missingMediaGroups).length > 1
+  }
+
+  return false
+}
+
 export function useErrorOverlayState() {
   const { t } = useI18n()
   const executionErrorStore = useExecutionErrorStore()
-  const { totalErrorCount, isErrorOverlayOpen } =
-    storeToRefs(executionErrorStore)
-  const { allErrorGroups } = useErrorGroups('')
+  const { isErrorOverlayOpen } = storeToRefs(executionErrorStore)
+  const {
+    allErrorGroups,
+    missingPackGroups,
+    missingModelGroups,
+    missingMediaGroups,
+    swapNodeGroups
+  } = useErrorGroups('')
 
-  const hasExactlyOneError = computed(() => totalErrorCount.value === 1)
-  const hasMultipleErrors = computed(() => totalErrorCount.value > 1)
-  const singleErrorGroup = computed(() =>
-    hasExactlyOneError.value && allErrorGroups.value.length === 1
-      ? allErrorGroups.value[0]
-      : undefined
-  )
-
-  const errorCountLabel = computed(() =>
-    t(
-      'errorOverlay.errorCount',
-      { count: totalErrorCount.value },
-      totalErrorCount.value
-    )
+  const totalErrorCount = computed(() =>
+    allErrorGroups.value.reduce((sum, group) => sum + group.count, 0)
   )
 
   const multipleErrorCountLabel = computed(() =>
@@ -68,25 +166,38 @@ export function useErrorOverlayState() {
     )
   )
 
-  const singleOverlayCopy = computed(() =>
-    singleErrorGroup.value
-      ? resolveSingleOverlayCopy(singleErrorGroup.value)
-      : undefined
-  )
+  const aggregateOverlayCopy = computed<OverlayCopy>(() => ({
+    title: multipleErrorCountLabel.value,
+    message: t('errorOverlay.multipleErrorsMessage')
+  }))
 
-  const overlayMessage = computed(() => {
-    if (hasMultipleErrors.value) {
-      return t('errorOverlay.multipleErrorsMessage')
+  const overlayCopy = computed<OverlayCopy | undefined>(() => {
+    const groups = allErrorGroups.value
+    if (groups.length === 0) return undefined
+    if (groups.length > 1) return aggregateOverlayCopy.value
+
+    const [group] = groups
+    const context = {
+      missingPackGroups: missingPackGroups.value,
+      missingModelGroups: missingModelGroups.value,
+      missingMediaGroups: missingMediaGroups.value,
+      swapNodeGroups: swapNodeGroups.value
     }
 
-    return singleOverlayCopy.value?.message ?? ''
+    if (shouldUseAggregateCopyForSingleGroup(group, context)) {
+      return aggregateOverlayCopy.value
+    }
+
+    if (isSingleLeafGroup(group, context)) {
+      return resolveSingleOverlayCopy(group) ?? resolveGroupOverlayCopy(group)
+    }
+
+    return resolveGroupOverlayCopy(group)
   })
 
-  const overlayTitle = computed(() =>
-    hasMultipleErrors.value
-      ? multipleErrorCountLabel.value
-      : (singleOverlayCopy.value?.title ?? errorCountLabel.value)
-  )
+  const overlayMessage = computed(() => overlayCopy.value?.message ?? '')
+
+  const overlayTitle = computed(() => overlayCopy.value?.title ?? '')
 
   const isVisible = computed(
     () =>

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/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.'
@@ -326,6 +333,9 @@ describe('TabErrors.vue', () => {
     expect(screen.getAllByText('CLIPTextEncode').length).toBeGreaterThanOrEqual(
       1
     )
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('1')
+    ).toBeInTheDocument()
     expect(screen.queryByText('KSampler')).not.toBeInTheDocument()
   })
 
@@ -404,7 +414,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 +424,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 +475,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 +497,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 +539,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' })
@@ -503,6 +553,73 @@ describe('TabErrors.vue', () => {
     expect(mockFocusNode.mock.calls.at(-1)?.[0]).toBe('4')
   })
 
+  it('sums the summary hero count across error types', async () => {
+    const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil')
+    vi.mocked(getNodeByExecutionId).mockReturnValue({
+      title: 'Node'
+    } as ReturnType<typeof getNodeByExecutionId>)
+
+    renderComponent({
+      executionError: {
+        lastNodeErrors: {
+          '1': {
+            class_type: 'KSampler',
+            errors: [
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: model',
+                extra_info: { input_name: 'model' }
+              },
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: positive',
+                extra_info: { input_name: 'positive' }
+              }
+            ]
+          },
+          '2': {
+            class_type: 'CLIPTextEncode',
+            errors: [
+              {
+                type: 'required_input_missing',
+                message: 'Required input is missing',
+                details: 'Input: clip',
+                extra_info: { input_name: 'clip' }
+              }
+            ]
+          }
+        }
+      },
+      missingMedia: {
+        missingMediaCandidates: [
+          {
+            nodeId: '3',
+            nodeType: 'LoadImage',
+            widgetName: 'image',
+            mediaType: 'image',
+            name: 'a.png',
+            isMissing: true
+          },
+          {
+            nodeId: '4',
+            nodeType: 'LoadImage',
+            widgetName: 'image',
+            mediaType: 'image',
+            name: 'b.png',
+            isMissing: true
+          }
+        ]
+      } satisfies { missingMediaCandidates: MissingMediaCandidate[] }
+    })
+
+    // 3 validation items + 2 missing media references
+    expect(
+      within(screen.getByTestId('errors-summary-hero')).getByText('5')
+    ).toBeInTheDocument()
+  })
+
   it('renders swap node rows below the section display message', () => {
     const swapNode = {
       type: 'OldSampler',
@@ -526,7 +643,7 @@ 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()
@@ -539,7 +656,7 @@ describe('TabErrors.vue', () => {
     ).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',
@@ -557,11 +674,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="group.count"
+            :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,141 +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"
-            @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"
@@ -301,16 +315,14 @@ 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'
@@ -319,7 +331,6 @@ import MissingMediaCard from '@/platform/missingMedia/components/MissingMediaCar
 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'
@@ -327,6 +338,7 @@ import { useErrorActions } from './useErrorActions'
 import { useErrorGroups } from './useErrorGroups'
 import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
+import { isExecutionItemListGroup } from './executionItemList'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 
 interface ExecutionItemListEntry {
@@ -347,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 } =
@@ -361,37 +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' &&
-    group.cards.length > 0 &&
-    group.cards.every(
-      (card) =>
-        card.nodeId &&
-        card.errors.length > 0 &&
-        card.errors.every(
-          (error) => !error.isRuntimeError && Boolean(error.displayItemLabel)
-        )
-    )
-  )
-}
-
 function getExecutionItemList(group: ErrorGroup): ExecutionItemListEntry[] {
   if (group.type !== 'execution') return []
 
@@ -423,14 +403,6 @@ function compareExecutionItemListEntry(
   )
 }
 
-function getExecutionGroupCount(group: ErrorGroup) {
-  if (group.type !== 'execution') return 0
-  if (isExecutionItemListGroup(group)) {
-    return group.cards.reduce((count, card) => count + card.errors.length, 0)
-  }
-  return group.cards.length
-}
-
 function isExecutionItemDetailExpanded(key: string) {
   return expandedExecutionItemDetailKeys.value.has(key)
 }
@@ -463,20 +435,17 @@ const {
   swapNodeGroups
 } = useErrorGroups(searchQuery)
 
-const missingModelDownloadableModels = computed(() => {
-  if (isCloud) return []
-
-  return getDownloadableModels(missingModelGroups.value)
-})
+const totalErrorCount = computed(() =>
+  filteredGroups.value.reduce((sum, group) => sum + group.count, 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/executionItemList.ts

@@ -0,0 +1,21 @@
+import type { ErrorCardData, ErrorGroup } from './types'
+
+export function shouldRenderExecutionItemList(cards: ErrorCardData[]): boolean {
+  return (
+    cards.length > 0 &&
+    cards.every(
+      (card) =>
+        card.nodeId &&
+        card.errors.length > 0 &&
+        card.errors.every(
+          (error) => !error.isRuntimeError && Boolean(error.displayItemLabel)
+        )
+    )
+  )
+}
+
+export function isExecutionItemListGroup(group: ErrorGroup): boolean {
+  return (
+    group.type === 'execution' && shouldRenderExecutionItemList(group.cards)
+  )
+}

src/components/rightSidePanel/errors/types.ts

@@ -24,6 +24,7 @@ interface ErrorGroupBase extends Omit<ResolvedErrorMessage, 'displayTitle'> {
   groupKey: string
   /** Human-friendly title resolved for UI display. */
   displayTitle: string
+  count: number
   priority: number
 }
 

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.'
       )
@@ -793,53 +793,6 @@ describe('useErrorGroups', () => {
     })
   })
 
-  describe('groupedErrorMessages', () => {
-    it('returns empty array when no errors', () => {
-      const { groups } = createErrorGroups()
-      expect(groups.groupedErrorMessages.value).toEqual([])
-    })
-
-    it('collects unique display messages from node errors', async () => {
-      const { store, groups } = createErrorGroups()
-      store.lastNodeErrors = {
-        '1': {
-          class_type: 'KSampler',
-          dependent_outputs: [],
-          errors: [
-            { type: 'err_a', message: 'Error A', details: '' },
-            { type: 'err_b', message: 'Error B', details: '' }
-          ]
-        },
-        '2': {
-          class_type: 'CLIPLoader',
-          dependent_outputs: [],
-          errors: [{ type: 'err_a', message: 'Error A', details: '' }]
-        }
-      }
-      await nextTick()
-
-      const messages = groups.groupedErrorMessages.value
-      expect(messages).toEqual([unknownValidationMessage])
-    })
-
-    it('includes missing node group display message', async () => {
-      const { groups } = createErrorGroups()
-      const missingNodesStore = useMissingNodesErrorStore()
-      missingNodesStore.setMissingNodeTypes([
-        makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
-      ])
-      await nextTick()
-
-      const missingGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'missing_node'
-      )
-      expect(missingGroup).toBeDefined()
-      expect(groups.groupedErrorMessages.value).toContain(
-        missingGroup!.displayMessage
-      )
-    })
-  })
-
   describe('missingModelGroups', () => {
     it('returns empty array when no missing models', () => {
       const { groups } = createErrorGroups()
@@ -982,7 +935,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 +1051,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/rightSidePanel/errors/useErrorGroups.ts

@@ -25,14 +25,15 @@ import { isGroupNode } from '@/utils/executableGroupNodeDto'
 import { st } from '@/i18n'
 import type { MissingNodeType } from '@/types/comfy'
 import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
+import { shouldRenderExecutionItemList } from './executionItemList'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import type {
-  MissingModelCandidate,
-  MissingModelGroup
-} from '@/platform/missingModel/types'
+import type { MissingModelGroup } from '@/platform/missingModel/types'
 import type { ResolvedCatalogErrorMessage } from '@/platform/errorCatalog/types'
 import type { MissingMediaGroup } from '@/platform/missingMedia/types'
-import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
+import {
+  countMissingModels,
+  groupMissingModelCandidates
+} from '@/platform/missingModel/missingModelGrouping'
 import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
 import { countMissingMediaReferences } from '@/platform/missingMedia/missingMediaGrouping'
 import {
@@ -49,9 +50,6 @@ const PROMPT_CARD_ID = '__prompt__'
 /** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
 const RESOLVING = '__RESOLVING__'
 
-/** Sentinel key for grouping non-asset-supported missing models. */
-const UNSUPPORTED = Symbol('unsupported')
-
 export interface MissingPackGroup {
   packId: string | null
   nodeTypes: MissingNodeType[]
@@ -152,16 +150,28 @@ function compareNodeId(a: ErrorCardData, b: ErrorCardData): number {
   return compareExecutionId(a.nodeId, b.nodeId)
 }
 
+function countExecutionCards(cards: ErrorCardData[]): number {
+  if (shouldRenderExecutionItemList(cards)) {
+    return cards.reduce((count, card) => count + card.errors.length, 0)
+  }
+
+  return cards.length
+}
+
 function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
   return Array.from(groupsMap.entries())
-    .map(([rawGroupKey, groupData]) => ({
-      type: 'execution' as const,
-      groupKey: `execution:${rawGroupKey}`,
-      displayTitle: groupData.displayTitle,
-      displayMessage: groupData.displayMessage,
-      cards: Array.from(groupData.cards.values()).sort(compareNodeId),
-      priority: groupData.priority
-    }))
+    .map(([rawGroupKey, groupData]) => {
+      const cards = Array.from(groupData.cards.values()).sort(compareNodeId)
+      return {
+        type: 'execution' as const,
+        groupKey: `execution:${rawGroupKey}`,
+        displayTitle: groupData.displayTitle,
+        displayMessage: groupData.displayMessage,
+        count: countExecutionCards(cards),
+        cards,
+        priority: groupData.priority
+      }
+    })
     .sort((a, b) => {
       if (a.priority !== b.priority) return a.priority - b.priority
       return a.displayTitle.localeCompare(b.displayTitle)
@@ -220,11 +230,13 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
   return groups
     .map((group, gi) => {
       if (group.type !== 'execution') return group
+      const cards = group.cards.filter((_: ErrorCardData, ci: number) =>
+        matchedCardKeys.has(`${gi}:${ci}`)
+      )
       return {
         ...group,
-        cards: group.cards.filter((_: ErrorCardData, ci: number) =>
-          matchedCardKeys.has(`${gi}:${ci}`)
-        )
+        cards,
+        count: countExecutionCards(cards)
       }
     })
     .filter((group) => group.type !== 'execution' || group.cards.length > 0)
@@ -591,6 +603,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       groups.push({
         type: 'swap_nodes' as const,
         groupKey: 'swap_nodes',
+        count: swapNodeGroups.value.length,
         priority: 0,
         ...resolveMissingErrorMessage({
           kind: 'swap_nodes',
@@ -605,6 +618,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       groups.push({
         type: 'missing_node' as const,
         groupKey: 'missing_node',
+        count: missingPackGroups.value.length,
         priority: 1,
         ...resolveMissingErrorMessage({
           kind: 'missing_node',
@@ -618,60 +632,21 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return groups.sort((a, b) => a.priority - b.priority)
   }
 
-  /** Groups missing models. Asset-supported models group by directory; others go into a separate group.
-   *  Within each group, candidates with the same model name are merged into a single view model. */
   const missingModelGroups = computed<MissingModelGroup[]>(() => {
-    const candidates = missingModelStore.missingModelCandidates
-    if (!candidates?.length) return []
-
-    type GroupKey = string | null | typeof UNSUPPORTED
-    const map = new Map<
-      GroupKey,
-      { candidates: MissingModelCandidate[]; isAssetSupported: boolean }
-    >()
-
-    for (const c of candidates) {
-      const groupKey: GroupKey =
-        c.isAssetSupported || !isCloud ? c.directory || null : UNSUPPORTED
-
-      const existing = map.get(groupKey)
-      if (existing) {
-        existing.candidates.push(c)
-      } else {
-        // All candidates in the same directory share the same isAssetSupported
-        // value in practice (a directory is either asset-supported or not).
-        map.set(groupKey, {
-          candidates: [c],
-          isAssetSupported: c.isAssetSupported
-        })
-      }
-    }
-
-    return Array.from(map.entries())
-      .sort(([dirA], [dirB]) => {
-        if (dirA === UNSUPPORTED) return 1
-        if (dirB === UNSUPPORTED) return -1
-        if (dirA === null) return 1
-        if (dirB === null) return -1
-        return dirA.localeCompare(dirB)
-      })
-      .map(([key, { candidates: groupCandidates, isAssetSupported }]) => ({
-        directory: typeof key === 'string' ? key : null,
-        models: groupCandidatesByName(groupCandidates),
-        isAssetSupported
-      }))
+    return groupMissingModelCandidates(
+      missingModelStore.missingModelCandidates,
+      isCloud
+    )
   })
 
   function buildMissingModelGroups(): ErrorGroup[] {
     if (!missingModelGroups.value.length) return []
-    const count = missingModelGroups.value.reduce(
-      (total, group) => total + group.models.length,
-      0
-    )
+    const count = countMissingModels(missingModelGroups.value)
     return [
       {
         type: 'missing_model' as const,
         groupKey: 'missing_model',
+        count,
         priority: 2,
         ...resolveMissingErrorMessage({
           kind: 'missing_model',
@@ -696,6 +671,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       {
         type: 'missing_media' as const,
         groupKey: 'missing_media',
+        count: totalRows,
         priority: 3,
         ...resolveMissingErrorMessage({
           kind: 'missing_media',
@@ -737,37 +713,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       (c) => c.nodeId != null && isAssetErrorInSelection(String(c.nodeId))
     )
     if (!filtered.length) return []
-
-    const map = new Map<
-      string | null | typeof UNSUPPORTED,
-      { candidates: MissingModelCandidate[]; isAssetSupported: boolean }
-    >()
-    for (const c of filtered) {
-      const groupKey =
-        c.isAssetSupported || !isCloud ? c.directory || null : UNSUPPORTED
-      const existing = map.get(groupKey)
-      if (existing) {
-        existing.candidates.push(c)
-      } else {
-        map.set(groupKey, {
-          candidates: [c],
-          isAssetSupported: c.isAssetSupported
-        })
-      }
-    }
-    return Array.from(map.entries())
-      .sort(([dirA], [dirB]) => {
-        if (dirA === UNSUPPORTED) return 1
-        if (dirB === UNSUPPORTED) return -1
-        if (dirA === null) return 1
-        if (dirB === null) return -1
-        return dirA.localeCompare(dirB)
-      })
-      .map(([key, { candidates: groupCandidates, isAssetSupported }]) => ({
-        directory: typeof key === 'string' ? key : null,
-        models: groupCandidatesByName(groupCandidates),
-        isAssetSupported
-      }))
+    return groupMissingModelCandidates(filtered, isCloud)
   })
 
   const filteredMissingMediaGroups = computed(() => {
@@ -783,14 +729,12 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
 
   function buildMissingModelGroupsFiltered(): ErrorGroup[] {
     if (!filteredMissingModelGroups.value.length) return []
-    const count = filteredMissingModelGroups.value.reduce(
-      (total, group) => total + group.models.length,
-      0
-    )
+    const count = countMissingModels(filteredMissingModelGroups.value)
     return [
       {
         type: 'missing_model' as const,
         groupKey: 'missing_model',
+        count,
         priority: 2,
         ...resolveMissingErrorMessage({
           kind: 'missing_model',
@@ -811,6 +755,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
       {
         type: 'missing_media' as const,
         groupKey: 'missing_media',
+        count: totalRows,
         priority: 3,
         ...resolveMissingErrorMessage({
           kind: 'missing_media',
@@ -865,22 +810,6 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     return searchErrorGroups(tabErrorGroups.value, query)
   })
 
-  const groupedErrorMessages = computed<string[]>(() => {
-    const messages = new Set<string>()
-    for (const group of allErrorGroups.value) {
-      if (group.type === 'execution') {
-        for (const card of group.cards) {
-          for (const err of card.errors) {
-            messages.add(err.displayMessage ?? err.message)
-          }
-        }
-      } else {
-        messages.add(group.displayMessage ?? group.displayTitle)
-      }
-    }
-    return Array.from(messages)
-  })
-
   return {
     allErrorGroups,
     tabErrorGroups,
@@ -889,7 +818,6 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     isSingleNodeSelected,
     errorNodeCache,
     missingNodeCache,
-    groupedErrorMessages,
     missingPackGroups,
     missingModelGroups,
     missingMediaGroups,

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { getControlWidget } from '@/composables/graph/useGraphNodeManager'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
 import { st } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -72,6 +73,15 @@ function resolveSourceWidget(): { node: LGraphNode; widget: IBaseWidget } {
   return source ?? { node, widget }
 }
 
+const isLinked = computed(() => {
+  const safeWidget = useVueNodeLifecycle()
+    .nodeManager.value?.vueNodeData.get(String(node.id))
+    ?.widgets?.find((w) => w.name === widget.name)
+  return safeWidget?.slotMetadata
+    ? !!safeWidget.slotMetadata.linked
+    : !!node.inputs?.find((inp) => inp.widget?.name === widget.name)?.link
+})
+
 const simplifiedWidget = computed((): SimplifiedWidget => {
   const { node: sourceNode, widget: sourceWidget } = resolveSourceWidget()
   const graphId = node.graph?.rootGraph?.id
@@ -80,12 +90,14 @@ const simplifiedWidget = computed((): SimplifiedWidget => {
     ? widgetValueStore.getWidget(graphId, bareNodeId, sourceWidget.name)
     : undefined
 
+  const baseOptions = widgetState?.options ?? widget.options
+  const disabled = isLinked.value || !!widget.disabled || undefined
   return {
     name: widget.name,
     type: widget.type,
     value: widgetState?.value ?? widget.value,
     label: widgetState?.label ?? widget.label,
-    options: widgetState?.options ?? widget.options,
+    options: { ...baseOptions, disabled },
     spec: nodeDefStore.getInputSpecForWidget(sourceNode, sourceWidget.name),
     controlWidget: getControlWidget(sourceWidget)
   }

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/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/composables/auth/turnstileScript.test.ts

@@ -0,0 +1,232 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { TurnstileApi } from '@/composables/auth/turnstileScript'
+
+const TURNSTILE_SRC =
+  'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'
+
+const fakeApi = (): TurnstileApi => ({
+  render: vi.fn(() => 'widget-id'),
+  reset: vi.fn(),
+  remove: vi.fn()
+})
+
+/**
+ * Controllable stand-in for the injected <script>. We never insert a real
+ * external script because jsdom would try (and fail) to fetch it and fire its
+ * own `error` event, making `load` impossible to simulate deterministically.
+ * Instead `createElement`/`querySelector`/`appendChild` are spied to route
+ * through this fake, so the test drives `load`/`error`/timeout itself.
+ */
+class FakeScript {
+  src = ''
+  async = false
+  private handlers: Record<string, Array<(e: Event) => void>> = {}
+
+  addEventListener(type: string, cb: (e: Event) => void) {
+    ;(this.handlers[type] ??= []).push(cb)
+  }
+
+  dispatchEvent(event: Event): boolean {
+    for (const cb of this.handlers[event.type] ?? []) cb(event)
+    return true
+  }
+
+  remove() {
+    const i = inserted.indexOf(this)
+    if (i >= 0) inserted.splice(i, 1)
+  }
+}
+
+let inserted: FakeScript[] = []
+
+const scriptEl = (): FakeScript | null =>
+  inserted.find((s) => s.src === TURNSTILE_SRC) ?? null
+
+const scriptCount = () => inserted.filter((s) => s.src === TURNSTILE_SRC).length
+
+/**
+ * The module keeps a private singleton promise, so each test imports a fresh
+ * copy after `vi.resetModules()`.
+ */
+async function freshLoadTurnstile() {
+  vi.resetModules()
+  const mod = await import('@/composables/auth/turnstileScript')
+  return mod.loadTurnstile
+}
+
+describe('loadTurnstile', () => {
+  beforeEach(() => {
+    inserted = []
+    delete window.turnstile
+
+    const realCreateElement = document.createElement.bind(document)
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) =>
+      tag === 'script'
+        ? (new FakeScript() as unknown as HTMLElement)
+        : realCreateElement(tag)
+    )
+    vi.spyOn(document, 'querySelector').mockImplementation((sel: string) =>
+      typeof sel === 'string' && sel.includes('challenges.cloudflare.com')
+        ? (scriptEl() as unknown as Element | null)
+        : null
+    )
+    vi.spyOn(document.head, 'appendChild').mockImplementation((node: Node) => {
+      inserted.push(node as unknown as FakeScript)
+      return node
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+  })
+
+  it('resolves immediately with the existing global and appends no script', async () => {
+    const api = fakeApi()
+    window.turnstile = api
+
+    const loadTurnstile = await freshLoadTurnstile()
+
+    await expect(loadTurnstile()).resolves.toBe(api)
+    expect(scriptEl()).toBeNull()
+  })
+
+  it('appends the script and resolves once it loads and exposes the global', async () => {
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const promise = loadTurnstile()
+    const el = scriptEl()
+    expect(el).not.toBeNull()
+    expect(el?.async).toBe(true)
+
+    const api = fakeApi()
+    window.turnstile = api
+    el!.dispatchEvent(new Event('load'))
+
+    await expect(promise).resolves.toBe(api)
+  })
+
+  it('caches the in-flight promise so concurrent callers share one load', async () => {
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const p1 = loadTurnstile()
+    const p2 = loadTurnstile()
+
+    expect(p1).toBe(p2)
+    expect(scriptCount()).toBe(1)
+  })
+
+  it('polls for the global when it is published asynchronously after the load event', async () => {
+    vi.useFakeTimers()
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const promise = loadTurnstile()
+    scriptEl()!.dispatchEvent(new Event('load'))
+    // global published shortly after load
+    const api = fakeApi()
+    window.turnstile = api
+    await vi.advanceTimersByTimeAsync(50)
+
+    await expect(promise).resolves.toBe(api)
+    // tag stays in place on success
+    expect(scriptEl()).not.toBeNull()
+  })
+
+  it('rejects and clears the cache when the global never appears after load (poll timeout)', async () => {
+    vi.useFakeTimers()
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const promise = loadTurnstile()
+    scriptEl()!.dispatchEvent(new Event('load'))
+    // global never published; deadline elapses
+    const assertion = expect(promise).rejects.toThrow(/timed out/i)
+    await vi.advanceTimersByTimeAsync(10_000)
+
+    await assertion
+    // dead tag is removed so a later retry starts clean
+    expect(scriptEl()).toBeNull()
+    // cache was reset → a later call starts a brand-new load
+    const retry = loadTurnstile()
+    expect(retry).not.toBe(promise)
+    // settle the throwaway retry so it doesn't leak a 10s timer
+    retry.catch(() => {})
+    scriptEl()!.dispatchEvent(new Event('error'))
+    await expect(retry).rejects.toThrow()
+  })
+
+  it('rejects, removes the self-appended script, and clears the cache on load error', async () => {
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const promise = loadTurnstile()
+    scriptEl()!.dispatchEvent(new Event('error'))
+
+    await expect(promise).rejects.toThrow(/failed to load/i)
+    expect(scriptEl()).toBeNull()
+    // cache was reset → a later call starts a brand-new load
+    const retry = loadTurnstile()
+    expect(retry).not.toBe(promise)
+    // settle the throwaway retry so it doesn't leak a 10s timer
+    retry.catch(() => {})
+    scriptEl()!.dispatchEvent(new Event('error'))
+    await expect(retry).rejects.toThrow()
+  })
+
+  it('rejects, removes the script, and clears the cache on timeout', async () => {
+    vi.useFakeTimers()
+    const loadTurnstile = await freshLoadTurnstile()
+
+    const promise = loadTurnstile()
+    const assertion = expect(promise).rejects.toThrow(/timed out/i)
+    vi.advanceTimersByTime(10_000)
+
+    await assertion
+    expect(scriptEl()).toBeNull()
+  })
+
+  it('reuses a pre-existing script tag and resolves promptly once the global appears (no duplicate, tag left in place)', async () => {
+    vi.useFakeTimers()
+    const existing = new FakeScript()
+    existing.src = TURNSTILE_SRC
+    inserted.push(existing)
+
+    const loadTurnstile = await freshLoadTurnstile()
+    const promise = loadTurnstile()
+
+    // no duplicate appended
+    expect(scriptCount()).toBe(1)
+
+    // The pre-existing tag's load event may have already fired before we
+    // attached listeners, so resolution must come from polling for the global
+    // rather than from a (dead) load event.
+    const api = fakeApi()
+    window.turnstile = api
+    await vi.advanceTimersByTimeAsync(50)
+
+    await expect(promise).resolves.toBe(api)
+    // a pre-existing tag is left alone (never removed by this loader)
+    expect(scriptEl()).not.toBeNull()
+  })
+
+  it('reuses a pre-existing script tag and times out (clearing the cache) if the global never appears, leaving the tag in place', async () => {
+    vi.useFakeTimers()
+    const existing = new FakeScript()
+    existing.src = TURNSTILE_SRC
+    inserted.push(existing)
+
+    const loadTurnstile = await freshLoadTurnstile()
+    const promise = loadTurnstile()
+    const assertion = expect(promise).rejects.toThrow(/timed out/i)
+    await vi.advanceTimersByTimeAsync(10_000)
+
+    await assertion
+    // pre-existing tag is never removed by the loader
+    expect(scriptEl()).not.toBeNull()
+    // cache was reset → a later call starts a brand-new load
+    const retry = loadTurnstile()
+    expect(retry).not.toBe(promise)
+    // drain the throwaway retry's timer/promise so nothing leaks
+    retry.catch(() => {})
+    await vi.advanceTimersByTimeAsync(10_000)
+  })
+})

src/composables/auth/turnstileScript.ts

@@ -0,0 +1,36 @@
+import { createScriptLoader } from '@/utils/loadExternalScript'
+
+const TURNSTILE_SRC =
+  'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'
+
+export interface TurnstileRenderOptions {
+  sitekey: string
+  theme?: 'light' | 'dark' | 'auto'
+  callback?: (token: string) => void
+  'expired-callback'?: () => void
+  'error-callback'?: () => void
+}
+
+export interface TurnstileApi {
+  render: (
+    container: string | HTMLElement,
+    options: TurnstileRenderOptions
+  ) => string
+  reset: (widgetId?: string) => void
+  remove: (widgetId: string) => void
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi
+  }
+}
+
+const loadTurnstileScript = createScriptLoader(
+  TURNSTILE_SRC,
+  () => window.turnstile ?? null
+)
+
+export function loadTurnstile(): Promise<TurnstileApi> {
+  return loadTurnstileScript()
+}

src/composables/auth/useAuthActions.ts

@@ -186,8 +186,8 @@ export const useAuthActions = () => {
   )
 
   const signUpWithEmail = wrapWithErrorHandlingAsync(
-    async (email: string, password: string) => {
-      return await authStore.register(email, password)
+    async (email: string, password: string, turnstileToken?: string) => {
+      return await authStore.register(email, password, turnstileToken)
     },
     reportError
   )

src/composables/auth/useTurnstile.test.ts

@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  isTurnstileEnabled,
+  normalizeTurnstileMode,
+  useTurnstile
+} from '@/composables/auth/useTurnstile'
+import { getTurnstileSiteKey } from '@/config/turnstile'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { api } from '@/scripts/api'
+import { getDevOverride } from '@/utils/devFeatureFlagOverride'
+
+vi.mock('@/platform/remoteConfig/remoteConfig', () => ({
+  remoteConfig: { value: {} }
+}))
+vi.mock('@/scripts/api', () => ({
+  api: { getServerFeature: vi.fn() }
+}))
+vi.mock('@/utils/devFeatureFlagOverride', () => ({
+  getDevOverride: vi.fn()
+}))
+vi.mock('@/config/turnstile', () => ({
+  getTurnstileSiteKey: vi.fn()
+}))
+
+const mockedDevOverride = vi.mocked(getDevOverride)
+const mockedGetServerFeature = vi.mocked(api.getServerFeature)
+const mockedSiteKey = vi.mocked(getTurnstileSiteKey)
+
+describe('normalizeTurnstileMode', () => {
+  it('passes through known modes', () => {
+    expect(normalizeTurnstileMode('off')).toBe('off')
+    expect(normalizeTurnstileMode('shadow')).toBe('shadow')
+    expect(normalizeTurnstileMode('enforce')).toBe('enforce')
+  })
+
+  it('clamps unknown or missing values to off', () => {
+    expect(normalizeTurnstileMode('enfroce')).toBe('off')
+    expect(normalizeTurnstileMode('')).toBe('off')
+    expect(normalizeTurnstileMode(undefined)).toBe('off')
+  })
+})
+
+describe('isTurnstileEnabled', () => {
+  it('renders when the flag is active and a sitekey is configured', () => {
+    expect(isTurnstileEnabled('shadow', 'site-key')).toBe(true)
+    expect(isTurnstileEnabled('enforce', 'site-key')).toBe(true)
+  })
+
+  it('does not render when the flag is off', () => {
+    expect(isTurnstileEnabled('off', 'site-key')).toBe(false)
+  })
+
+  it('does not render without a sitekey (OSS / local builds)', () => {
+    expect(isTurnstileEnabled('shadow', '')).toBe(false)
+    expect(isTurnstileEnabled('enforce', '')).toBe(false)
+  })
+})
+
+describe('useTurnstile', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    remoteConfig.value = {}
+    mockedDevOverride.mockReturnValue(undefined)
+    mockedGetServerFeature.mockReturnValue('off')
+    mockedSiteKey.mockReturnValue('site-key')
+  })
+
+  describe('mode precedence', () => {
+    it('prefers the dev override over remote config and the server feature', () => {
+      mockedDevOverride.mockReturnValue('enforce')
+      remoteConfig.value = { signup_turnstile: 'shadow' }
+      mockedGetServerFeature.mockReturnValue('off')
+
+      expect(useTurnstile().mode.value).toBe('enforce')
+    })
+
+    it('uses remote config when there is no dev override', () => {
+      remoteConfig.value = { signup_turnstile: 'shadow' }
+
+      expect(useTurnstile().mode.value).toBe('shadow')
+    })
+
+    it('falls back to the server feature flag (default off) when nothing else is set', () => {
+      mockedGetServerFeature.mockReturnValue('enforce')
+
+      expect(useTurnstile().mode.value).toBe('enforce')
+      expect(mockedGetServerFeature).toHaveBeenCalledWith(
+        'signup_turnstile',
+        'off'
+      )
+    })
+
+    it('clamps an unknown remote-config value to off', () => {
+      remoteConfig.value = {
+        signup_turnstile: 'bogus' as unknown as 'shadow'
+      }
+
+      expect(useTurnstile().mode.value).toBe('off')
+    })
+
+    it('resolves to off when every source is unset', () => {
+      expect(useTurnstile().mode.value).toBe('off')
+    })
+  })
+
+  describe('enabled / enforced', () => {
+    it('is enabled but not enforced in shadow with a sitekey', () => {
+      remoteConfig.value = { signup_turnstile: 'shadow' }
+
+      const { enabled, enforced } = useTurnstile()
+      expect(enabled.value).toBe(true)
+      expect(enforced.value).toBe(false)
+    })
+
+    it('is enabled and enforced in enforce with a sitekey', () => {
+      remoteConfig.value = { signup_turnstile: 'enforce' }
+
+      const { enabled, enforced } = useTurnstile()
+      expect(enabled.value).toBe(true)
+      expect(enforced.value).toBe(true)
+    })
+
+    it('is neither enabled nor enforced without a sitekey, even in enforce', () => {
+      remoteConfig.value = { signup_turnstile: 'enforce' }
+      mockedSiteKey.mockReturnValue('')
+
+      const { enabled, enforced } = useTurnstile()
+      expect(enabled.value).toBe(false)
+      expect(enforced.value).toBe(false)
+    })
+
+    it('is disabled when the mode is off', () => {
+      const { enabled, enforced } = useTurnstile()
+      expect(enabled.value).toBe(false)
+      expect(enforced.value).toBe(false)
+    })
+  })
+})

src/composables/auth/useTurnstile.ts

@@ -0,0 +1,44 @@
+import { computed } from 'vue'
+
+import { getTurnstileSiteKey } from '@/config/turnstile'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import type { TurnstileMode } from '@/platform/remoteConfig/types'
+
+/**
+ * Clamp an externally-sourced value to a known TurnstileMode. Unknown strings
+ * (typos, stale flag variants) resolve to 'off' so a bad value can never leave
+ * the widget rendered-but-unenforced — mirrors the server-side resolver.
+ */
+export function normalizeTurnstileMode(raw: string | undefined): TurnstileMode {
+  return raw === 'shadow' || raw === 'enforce' ? raw : 'off'
+}
+
+/**
+ * Whether the signup Turnstile widget should render. Purely config-driven: the
+ * flag must be shadow/enforce and a sitekey must be configured. OSS / local
+ * builds resolve no sitekey — the real per-env keys are tree-shaken out via the
+ * __DISTRIBUTION__ build define (see config/turnstile.ts) — so the widget never
+ * renders. The local-OSS exemption lives server-side (loopback-IP check in
+ * CreateCustomer).
+ */
+export function isTurnstileEnabled(
+  mode: TurnstileMode,
+  siteKey: string
+): boolean {
+  return mode !== 'off' && siteKey !== ''
+}
+
+/**
+ * Reactive Turnstile state for the signup form.
+ * - `enabled`: render the widget
+ * - `enforced`: block submit until the challenge is solved
+ */
+export function useTurnstile() {
+  const { flags } = useFeatureFlags()
+  const mode = computed(() => normalizeTurnstileMode(flags.signupTurnstileMode))
+  const siteKey = computed(getTurnstileSiteKey)
+  const enabled = computed(() => isTurnstileEnabled(mode.value, siteKey.value))
+  const enforced = computed(() => enabled.value && mode.value === 'enforce')
+
+  return { mode, siteKey, enabled, enforced }
+}

src/composables/billing/types.ts

@@ -2,6 +2,9 @@ import type { ComputedRef, Ref } from 'vue'
 
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
 import type {
+  BillingStatus,
+  BillingSubscriptionStatus,
+  CreateTopupResponse,
   Plan,
   PreviewSubscribeResponse,
   SubscribeResponse,
@@ -16,7 +19,9 @@ export interface SubscriptionInfo {
   tier: SubscriptionTier | null
   duration: SubscriptionDuration | null
   planSlug: string | null
+  /** ISO 8601 */
   renewalDate: string | null
+  /** ISO 8601 */
   endDate: string | null
   isCancelled: boolean
   hasFunds: boolean
@@ -44,6 +49,9 @@ export interface BillingActions {
   ) => Promise<PreviewSubscribeResponse | null>
   manageSubscription: () => Promise<void>
   cancelSubscription: () => Promise<void>
+  resubscribe: () => Promise<void>
+  /** `amountCents` must be a whole-dollar multiple of 100. */
+  topup: (amountCents: number) => Promise<CreateTopupResponse | void>
   fetchPlans: () => Promise<void>
   /**
    * Ensures billing is initialized and subscription is active.
@@ -65,16 +73,12 @@ export interface BillingState {
   currentPlanSlug: ComputedRef<string | null>
   isLoading: Ref<boolean>
   error: Ref<string | null>
-  /**
-   * Convenience computed for checking if subscription is active.
-   * Equivalent to `subscription.value?.isActive ?? false`
-   */
   isActiveSubscription: ComputedRef<boolean>
-  /**
-   * Whether the current billing context has a FREE tier subscription.
-   * Workspace-aware: reflects the active workspace's tier, not the user's personal tier.
-   */
   isFreeTier: ComputedRef<boolean>
+  billingStatus: ComputedRef<BillingStatus | null>
+  subscriptionStatus: ComputedRef<BillingSubscriptionStatus | null>
+  tier: ComputedRef<SubscriptionTier | null>
+  renewalDate: ComputedRef<string | null>
 }
 
 export interface BillingContext extends BillingState, BillingActions {

src/composables/billing/useBillingContext.test.ts

@@ -5,13 +5,17 @@ import type { Plan } from '@/platform/workspace/api/workspaceApi'
 
 import { useBillingContext } from './useBillingContext'
 
-const { mockTeamWorkspacesEnabled, mockIsPersonal, mockPlans } = vi.hoisted(
-  () => ({
-    mockTeamWorkspacesEnabled: { value: false },
-    mockIsPersonal: { value: true },
-    mockPlans: { value: [] as Plan[] }
-  })
-)
+const {
+  mockTeamWorkspacesEnabled,
+  mockIsPersonal,
+  mockPlans,
+  mockPurchaseCredits
+} = vi.hoisted(() => ({
+  mockTeamWorkspacesEnabled: { value: false },
+  mockIsPersonal: { value: true },
+  mockPlans: { value: [] as Plan[] },
+  mockPurchaseCredits: vi.fn()
+}))
 
 vi.mock('@vueuse/core', async (importOriginal) => {
   const original = await importOriginal()
@@ -50,8 +54,9 @@ vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
     isActiveSubscription: { value: true },
     subscriptionTier: { value: 'PRO' },
     subscriptionDuration: { value: 'MONTHLY' },
-    formattedRenewalDate: { value: 'Jan 1, 2025' },
-    formattedEndDate: { value: '' },
+    subscriptionStatus: {
+      value: { renewal_date: '2025-01-01T00:00:00Z', end_date: null }
+    },
     isCancelled: { value: false },
     fetchStatus: vi.fn().mockResolvedValue(undefined),
     manageSubscription: vi.fn().mockResolvedValue(undefined),
@@ -70,6 +75,12 @@ vi.mock(
   })
 )
 
+vi.mock('@/composables/auth/useAuthActions', () => ({
+  useAuthActions: () => ({
+    purchaseCredits: mockPurchaseCredits
+  })
+}))
+
 vi.mock('@/stores/authStore', () => ({
   useAuthStore: () => ({
     balance: { amount_micros: 5000000 },
@@ -129,7 +140,7 @@ describe('useBillingContext', () => {
       tier: 'PRO',
       duration: 'MONTHLY',
       planSlug: null,
-      renewalDate: 'Jan 1, 2025',
+      renewalDate: '2025-01-01T00:00:00Z',
       endDate: null,
       isCancelled: false,
       hasFunds: true
@@ -173,6 +184,13 @@ describe('useBillingContext', () => {
     await expect(manageSubscription()).resolves.toBeUndefined()
   })
 
+  it('converts topup cents to whole dollars for the legacy credit endpoint', async () => {
+    const { topup } = useBillingContext()
+    await topup(500)
+
+    expect(mockPurchaseCredits).toHaveBeenCalledWith(5)
+  })
+
   it('provides isActiveSubscription convenience computed', () => {
     const { isActiveSubscription } = useBillingContext()
     expect(isActiveSubscription.value).toBe(true)

src/composables/billing/useBillingContext.ts

@@ -122,6 +122,15 @@ function useBillingContextInternal(): BillingContext {
 
   const isFreeTier = computed(() => subscription.value?.tier === 'FREE')
 
+  const billingStatus = computed(() =>
+    toValue(activeContext.value.billingStatus)
+  )
+  const subscriptionStatus = computed(() =>
+    toValue(activeContext.value.subscriptionStatus)
+  )
+  const tier = computed(() => toValue(activeContext.value.tier))
+  const renewalDate = computed(() => toValue(activeContext.value.renewalDate))
+
   function getMaxSeats(tierKey: TierKey): number {
     if (type.value === 'legacy') return 1
 
@@ -218,6 +227,14 @@ function useBillingContextInternal(): BillingContext {
     return activeContext.value.cancelSubscription()
   }
 
+  async function resubscribe() {
+    return activeContext.value.resubscribe()
+  }
+
+  async function topup(amountCents: number) {
+    return activeContext.value.topup(amountCents)
+  }
+
   async function fetchPlans() {
     return activeContext.value.fetchPlans()
   }
@@ -241,6 +258,10 @@ function useBillingContextInternal(): BillingContext {
     error,
     isActiveSubscription,
     isFreeTier,
+    billingStatus,
+    subscriptionStatus,
+    tier,
+    renewalDate,
     getMaxSeats,
 
     initialize,
@@ -250,6 +271,8 @@ function useBillingContextInternal(): BillingContext {
     previewSubscribe,
     manageSubscription,
     cancelSubscription,
+    resubscribe,
+    topup,
     fetchPlans,
     requireActiveSubscription,
     showSubscriptionDialog

src/composables/billing/useLegacyBilling.ts

@@ -1,7 +1,10 @@
 import { computed, ref } from 'vue'
 
+import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import type {
+  BillingStatus,
+  BillingSubscriptionStatus,
   PreviewSubscribeResponse,
   SubscribeResponse
 } from '@/platform/workspace/api/workspaceApi'
@@ -24,8 +27,7 @@ export function useLegacyBilling(): BillingState & BillingActions {
     isActiveSubscription: legacyIsActiveSubscription,
     subscriptionTier,
     subscriptionDuration,
-    formattedRenewalDate,
-    formattedEndDate,
+    subscriptionStatus: legacySubscriptionStatus,
     isCancelled,
     fetchStatus: legacyFetchStatus,
     manageSubscription: legacyManageSubscription,
@@ -34,6 +36,7 @@ export function useLegacyBilling(): BillingState & BillingActions {
   } = useSubscription()
 
   const authStore = useAuthStore()
+  const authActions = useAuthActions()
 
   const isInitialized = ref(false)
   const isLoading = ref(false)
@@ -52,8 +55,8 @@ export function useLegacyBilling(): BillingState & BillingActions {
       tier: subscriptionTier.value,
       duration: subscriptionDuration.value,
       planSlug: null, // Legacy doesn't use plan slugs
-      renewalDate: formattedRenewalDate.value || null,
-      endDate: formattedEndDate.value || null,
+      renewalDate: legacySubscriptionStatus.value?.renewal_date ?? null,
+      endDate: legacySubscriptionStatus.value?.end_date ?? null,
       isCancelled: isCancelled.value,
       hasFunds: (authStore.balance?.amount_micros ?? 0) > 0
     }
@@ -75,6 +78,18 @@ export function useLegacyBilling(): BillingState & BillingActions {
     }
   })
 
+  // Legacy has no coarse billing_status concept (workspace-only).
+  const billingStatus = computed<BillingStatus | null>(() => null)
+  const subscriptionStatus = computed<BillingSubscriptionStatus | null>(() => {
+    if (isCancelled.value) return 'canceled'
+    if (legacyIsActiveSubscription.value) return 'active'
+    return null
+  })
+  const tier = computed(() => subscriptionTier.value)
+  const renewalDate = computed(
+    () => legacySubscriptionStatus.value?.renewal_date ?? null
+  )
+
   // Legacy billing doesn't have workspace-style plans
   const plans = computed(() => [])
   const currentPlanSlug = computed(() => null)
@@ -152,6 +167,16 @@ export function useLegacyBilling(): BillingState & BillingActions {
     await legacyManageSubscription()
   }
 
+  async function resubscribe(): Promise<void> {
+    // Legacy has no resubscribe endpoint; resubscribing is a fresh checkout.
+    await legacySubscribe()
+  }
+
+  async function topup(amountCents: number): Promise<void> {
+    // Facade standardizes on cents; legacy /customers/credit takes dollars.
+    await authActions.purchaseCredits(amountCents / 100)
+  }
+
   async function fetchPlans(): Promise<void> {
     // Legacy billing doesn't have workspace-style plans
     // Plans are hardcoded in the UI for legacy subscriptions
@@ -179,6 +204,10 @@ export function useLegacyBilling(): BillingState & BillingActions {
     error,
     isActiveSubscription,
     isFreeTier,
+    billingStatus,
+    subscriptionStatus,
+    tier,
+    renewalDate,
 
     // Actions
     initialize,
@@ -188,6 +217,8 @@ export function useLegacyBilling(): BillingState & BillingActions {
     previewSubscribe,
     manageSubscription,
     cancelSubscription,
+    resubscribe,
+    topup,
     fetchPlans,
     requireActiveSubscription,
     showSubscriptionDialog