test: cover queue models and execution-store slices

.claude/settings.json

@@ -0,0 +1,86 @@
+{
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "Bash",
+        "hooks": [
+          {
+            "type": "command",
+            "if": "Bash(tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(vue-tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running vue-tsc directly.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via npx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of running tsc via pnpx.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpm exec tsc *)",
+            "command": "echo 'Use `pnpm typecheck` instead of `pnpm exec tsc`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx vitest *)",
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of npx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx eslint *)",
+            "command": "echo 'Use `pnpm lint` or `pnpm lint:fix` instead of pnpx eslint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx prettier *)",
+            "command": "echo 'This project uses oxfmt, not prettier. Use `pnpm format` or `pnpm format:check`.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx oxlint *)",
+            "command": "echo 'Use `pnpm oxlint` instead of npx oxlint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx stylelint *)",
+            "command": "echo 'Use `pnpm stylelint` instead of npx stylelint.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(npx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of npx knip.' >&2 && exit 2"
+          },
+          {
+            "type": "command",
+            "if": "Bash(pnpx knip *)",
+            "command": "echo 'Use `pnpm knip` instead of pnpx knip.' >&2 && exit 2"
+          }
+        ]
+      }
+    ]
+  }
+}

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

@@ -134,27 +134,6 @@ jobs:
           fi
           echo '✅ No Customer.io references found'
 
-      - name: Scan dist for Syft telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Syft references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e '(?i)syft' \
-            -e '(?i)sy-d\.io' \
-            dist; then
-            echo '❌ ERROR: Syft references found in dist assets!'
-            echo 'Syft 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 Syft references found'
-
       - name: Scan dist for Cloudflare Turnstile sitekey references
         run: |
           set -euo pipefail

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

@@ -121,7 +121,7 @@ jobs:
             --title "ComfyUI E2E Coverage" \
             --no-function-coverage \
             --precision 1 \
-            --ignore-errors source,unmapped \
+            --ignore-errors source,unmapped,range \
             --synthesize-missing
 
       - name: Upload HTML report artifact

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

@@ -95,7 +95,6 @@ jobs:
     if: |
       github.event_name == 'workflow_dispatch'
       || (github.event_name == 'pull_request'
-          && github.event.pull_request.head.repo.fork == false
           && startsWith(github.head_ref, 'version-bump-')
           && (needs.changes.outputs.storybook-changes == 'true'
               || needs.changes.outputs.app-frontend-changes == 'true'

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

@@ -55,3 +55,6 @@ jobs:
           flags: unit
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false
+
+      - name: Enforce critical coverage gate
+        run: pnpm test:coverage:critical

.github/workflows/ci-vercel-website-preview.yaml

@@ -30,7 +30,7 @@ concurrency:
 
 jobs:
   deploy-preview:
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     permissions:
       contents: read

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

@@ -67,15 +67,7 @@ jobs:
 
       - name: Deploy report to Cloudflare
         id: deploy
-        if: >-
-          ${{
-            always() &&
-            !cancelled() &&
-            (
-              github.event_name != 'pull_request' ||
-              github.event.pull_request.head.repo.fork == false
-            )
-          }}
+        if: always() && !cancelled()
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.github/workflows/cloud-dispatch-build.yaml

@@ -32,13 +32,12 @@ jobs:
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
       (github.event_name != 'pull_request' ||
-       (github.event.pull_request.head.repo.fork == false &&
-        ((github.event.action == 'labeled' &&
-          contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
-         (github.event.action == 'synchronize' &&
-          (contains(github.event.pull_request.labels.*.name, 'preview') ||
-           contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
-           contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))))
+       (github.event.action == 'labeled' &&
+        contains(fromJSON('["preview","preview-cpu","preview-gpu"]'), github.event.label.name)) ||
+       (github.event.action == 'synchronize' &&
+        (contains(github.event.pull_request.labels.*.name, 'preview') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||
+         contains(github.event.pull_request.labels.*.name, 'preview-gpu'))))
     runs-on: ubuntu-latest
     steps:
       - name: Build client payload

.github/workflows/cloud-dispatch-cleanup.yaml

@@ -21,7 +21,6 @@ jobs:
     # - Preview label specifically removed
     if: >
       github.repository == 'Comfy-Org/ComfyUI_frontend' &&
-      github.event.pull_request.head.repo.fork == false &&
       ((github.event.action == 'closed' &&
         (contains(github.event.pull_request.labels.*.name, 'preview') ||
          contains(github.event.pull_request.labels.*.name, 'preview-cpu') ||

apps/website/public/icons/node-link.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="var(--fill-0, #F2FF59)"/>
 </svg>

apps/website/src/components/blocks/FeatureGrid01.vue

@@ -56,7 +56,7 @@ const columnClass: Record<ColumnCount, string> = {
 
 <template>
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <SectionHeader max-width="xl" :label="eyebrow" align="start">
+    <SectionHeader :label="eyebrow" align="start">
       {{ heading }}
       <template v-if="subtitle" #subtitle>
         <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">

apps/website/src/components/contact/FormSection.vue

@@ -33,41 +33,36 @@ useHeroAnimation({
 </script>
 
 <template>
-  <section
-    ref="sectionRef"
-    class="px-4 py-20 lg:flex lg:gap-16 lg:px-20 lg:py-24"
-  >
+  <section ref="sectionRef" class="px-4 py-20 lg:flex lg:px-20 lg:py-24">
     <!-- Left column: intro + image -->
     <div class="lg:w-1/2">
-      <div class="lg:max-w-xl">
-        <SectionLabel ref="badgeRef">
-          {{ t(tk('badge'), locale) }}
-        </SectionLabel>
+      <SectionLabel ref="badgeRef">
+        {{ t(tk('badge'), locale) }}
+      </SectionLabel>
 
-        <h1
-          ref="headingRef"
-          class="mt-4 text-3xl font-light whitespace-pre-line text-primary-comfy-canvas lg:text-5xl"
-        >
-          {{ t(tk('heading'), locale) }}
-        </h1>
+      <h1
+        ref="headingRef"
+        class="text-primary-comfy-canvas mt-4 text-3xl font-light whitespace-pre-line lg:text-5xl"
+      >
+        {{ t(tk('heading'), locale) }}
+      </h1>
 
-        <div ref="descRef">
-          <p class="mt-4 text-sm text-primary-comfy-canvas">
-            {{ t(tk('description'), locale) }}
-          </p>
+      <div ref="descRef">
+        <p class="text-primary-comfy-canvas mt-4 text-sm">
+          {{ t(tk('description'), locale) }}
+        </p>
 
-          <p class="mt-4 text-sm text-primary-comfy-canvas">
-            {{ t(tk('supportLink'), locale) }}
-            <a
-              href="https://docs.comfy.org/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-primary-comfy-yellow underline"
-            >
-              {{ t(tk('supportLinkCta'), locale) }}
-            </a>
-          </p>
-        </div>
+        <p class="text-primary-comfy-canvas mt-4 text-sm">
+          {{ t(tk('supportLink'), locale) }}
+          <a
+            href="https://docs.comfy.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-primary-comfy-yellow underline"
+          >
+            {{ t(tk('supportLinkCta'), locale) }}
+          </a>
+        </p>
       </div>
 
       <div ref="imageRef" class="mt-8 overflow-hidden rounded-2xl lg:-ml-20">

apps/website/src/components/customers/ArticleNav.vue

@@ -15,7 +15,7 @@ const { categories } = defineProps<{
 
 const activeSection = ref(categories[0]?.value ?? '')
 
-const HEADER_OFFSET_PX = -144
+const HEADER_OFFSET = -144
 const BOTTOM_THRESHOLD_PX = 4
 const SCROLL_SAFETY_MS = 1500
 
@@ -52,7 +52,7 @@ function scrollToSection(id: string) {
   const el = document.getElementById(id)
   if (el) {
     scrollTo(el, {
-      offset: HEADER_OFFSET_PX,
+      offset: HEADER_OFFSET,
       duration: 0.8,
       immediate: prefersReducedMotion(),
       onComplete: clearScrollLock

apps/website/src/components/customers/content/ListItem.astro

@@ -1,5 +1,5 @@
 <li
-  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow"
+  class="flex items-start gap-2 text-primary-comfy-canvas before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-primary-comfy-yellow before:content-['']"
 >
   <slot />
 </li>

apps/website/src/data/mainNavigation.ts

@@ -40,13 +40,13 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     {
       label: t('nav.products', locale),
       featured: {
-        imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
+        imageSrc: 'https://media.comfy.org/website/nav/featured-model-card.jpg',
         imageAlt: t('nav.featuredProductsAlt', locale),
         title: t('nav.featuredProductsTitle', locale),
         cta: {
-          label: t('cta.getStarted', locale),
+          label: t('cta.tryWorkflow', locale),
           ariaLabel: t('nav.featuredProductsCtaAria', locale),
-          href: routes.mcp
+          href: 'https://comfy.org/workflows/api_seedance2_0_r2v-64f4db9e3e33/'
         }
       },
       columns: [

apps/website/src/i18n/translations.ts

@@ -26,10 +26,6 @@ const translations = {
     en: 'Try Workflow',
     'zh-CN': '试用工作流'
   },
-  'cta.getStarted': {
-    en: 'GET STARTED',
-    'zh-CN': '快速开始'
-  },
   'cta.watchNow': {
     en: 'Watch Now',
     'zh-CN': '立即观看'
@@ -2200,16 +2196,16 @@ const translations = {
   // Featured dropdown cards — keys are keyed by parent nav item, not card content,
   // so the copy can be swapped without renaming the key.
   'nav.featuredProductsTitle': {
-    en: 'NEW: COMFY MCP',
-    'zh-CN': '全新发布：Comfy MCP'
+    en: 'New Release: Seedance 2.0',
+    'zh-CN': '全新发布：Seedance 2.0'
   },
   'nav.featuredProductsAlt': {
-    en: 'Comfy MCP feature image',
-    'zh-CN': 'Comfy MCP 精选图片'
+    en: 'Seedance 2.0 release feature image',
+    'zh-CN': 'Seedance 2.0 发布精选图片'
   },
   'nav.featuredProductsCtaAria': {
-    en: 'Get started with Comfy MCP',
-    'zh-CN': '开始使用 Comfy MCP'
+    en: 'Try the Seedance 2.0 workflow',
+    'zh-CN': '试用 Seedance 2.0 工作流'
   },
   'nav.featuredCommunityTitle': {
     en: 'Sky Replacement',

browser_tests/assets/linear-validation-warning.json

@@ -1,45 +0,0 @@
-{
-  "last_node_id": 9,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 9,
-      "type": "SaveImage",
-      "pos": {
-        "0": 64,
-        "1": 104
-      },
-      "size": {
-        "0": 210,
-        "1": 58
-      },
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    },
-    "linearData": {
-      "inputs": [],
-      "outputs": ["9"]
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -537,6 +537,7 @@ export const comfyPageFixture = base.extend<{
         'Comfy.TutorialCompleted': true,
         'Comfy.Queue.MaxHistoryItems': 64,
         'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
+        'Comfy.VueNodes.AutoScaleLayout': false,
         // Disable toast warning about version compatibility, as they may or
         // may not appear - depending on upstream ComfyUI dependencies
         'Comfy.VersionCompatibility.DisableWarnings': true,

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -34,10 +34,6 @@ export class AppModeHelper {
   public readonly outputPlaceholder: Locator
   /** The linear-mode widget list container (visible in app mode). */
   public readonly linearWidgets: Locator
-  /** The validation warning shown above the app mode run button. */
-  public readonly validationWarning: Locator
-  /** The action that opens graph mode errors from the validation warning. */
-  public readonly viewErrorsInGraphButton: Locator
   /** The PrimeVue Popover for the image picker (renders with role="dialog"). */
   public readonly imagePickerPopover: Locator
   /** The Run button in the app mode footer. */
@@ -96,19 +92,13 @@ export class AppModeHelper {
     this.outputPlaceholder = this.page.getByTestId(
       TestIds.builder.outputPlaceholder
     )
-    this.linearWidgets = this.page.getByTestId(TestIds.linear.widgetContainer)
-    this.validationWarning = this.page.getByTestId(
-      TestIds.linear.validationWarning
-    )
-    this.viewErrorsInGraphButton = this.validationWarning.getByTestId(
-      TestIds.linear.viewErrorsInGraph
-    )
+    this.linearWidgets = this.page.getByTestId('linear-widgets')
     this.imagePickerPopover = this.page
       .getByRole('dialog')
       .filter({ has: this.page.getByRole('button', { name: 'All' }) })
       .first()
     this.runButton = this.page
-      .getByTestId(TestIds.linear.runButton)
+      .getByTestId('linear-run-button')
       .getByRole('button', { name: /run/i })
     this.welcome = this.page.getByTestId(TestIds.appMode.welcome)
     this.emptyWorkflowText = this.page.getByTestId(

browser_tests/fixtures/selectors.ts

@@ -172,9 +172,6 @@ export const TestIds = {
     mobileNavigation: 'linear-mobile-navigation',
     mobileWorkflows: 'linear-mobile-workflows',
     outputInfo: 'linear-output-info',
-    runButton: 'linear-run-button',
-    validationWarning: 'linear-validation-warning',
-    viewErrorsInGraph: 'linear-view-errors',
     widgetContainer: 'linear-widgets'
   },
   builder: {

browser_tests/tests/appModeValidationWarning.spec.ts

@@ -1,106 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '@e2e/fixtures/ComfyPage'
-import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { enableErrorsOverlay } from '@e2e/fixtures/helpers/ErrorsTabHelper'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-const SAVE_IMAGE_NODE_ID = '9'
-
-function buildSaveImageRequiredInputError(): NodeError {
-  return {
-    class_type: 'SaveImage',
-    dependent_outputs: [],
-    errors: [
-      {
-        type: 'required_input_missing',
-        message: 'Required input is missing: images',
-        details: '',
-        extra_info: { input_name: 'images' }
-      }
-    ]
-  }
-}
-
-test.describe(
-  'App mode validation warning',
-  { tag: ['@ui', '@workflow'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await enableErrorsOverlay(comfyPage)
-      await comfyPage.workflow.loadWorkflow('linear-validation-warning')
-      await comfyPage.appMode.toggleAppMode()
-      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-    })
-
-    test('opens graph errors from the app mode validation warning', async ({
-      comfyPage
-    }) => {
-      await expect(comfyPage.appMode.validationWarning).toBeHidden()
-
-      const exec = new ExecutionHelper(comfyPage)
-      await exec.mockValidationFailure({
-        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
-      })
-
-      await comfyPage.appMode.runButton.click()
-      const appModeOverlay = comfyPage.appMode.centerPanel.getByTestId(
-        TestIds.dialogs.errorOverlay
-      )
-      await expect(appModeOverlay).toBeHidden()
-
-      await expect(comfyPage.appMode.validationWarning).toBeVisible()
-      await expect(comfyPage.appMode.validationWarning).toContainText(
-        /Required input missing/i
-      )
-      await expect(comfyPage.appMode.viewErrorsInGraphButton).toBeVisible()
-
-      await comfyPage.appMode.viewErrorsInGraphButton.click()
-
-      await expect(comfyPage.appMode.linearWidgets).toBeHidden()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
-      ).toBeVisible()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.propertiesPanel.errorsTab)
-      ).toBeVisible()
-    })
-
-    test('keeps the app mode run button enabled when the warning is visible', async ({
-      comfyPage
-    }) => {
-      const exec = new ExecutionHelper(comfyPage)
-      await exec.mockValidationFailure({
-        [SAVE_IMAGE_NODE_ID]: buildSaveImageRequiredInputError()
-      })
-
-      await comfyPage.appMode.runButton.click()
-      await expect(comfyPage.appMode.validationWarning).toBeVisible()
-      await expect(comfyPage.appMode.runButton).toBeEnabled()
-
-      let promptQueued = false
-      const mockResponse: PromptResponse = {
-        prompt_id: 'test-id',
-        node_errors: {},
-        error: ''
-      }
-      await comfyPage.page.route(
-        '**/api/prompt',
-        async (route) => {
-          promptQueued = true
-          await route.fulfill({
-            status: 200,
-            body: JSON.stringify(mockResponse)
-          })
-        },
-        { times: 1 }
-      )
-
-      await comfyPage.appMode.runButton.click()
-
-      await expect.poll(() => promptQueued).toBe(true)
-    })
-  }
-)

browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts

@@ -28,12 +28,7 @@ const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
 // matches it against the members self-row.
 const SELF_EMAIL = 'e2e@test.comfy.org'
 
-// consolidated_billing_enabled routes personal workspaces to the unified
-// pricing table asserted here; without it they fall back to the legacy table.
-const BOOT_FEATURES = {
-  team_workspaces_enabled: true,
-  consolidated_billing_enabled: true
-} satisfies RemoteConfig
+const BOOT_FEATURES = { team_workspaces_enabled: true } satisfies RemoteConfig
 // Disable the experimental Asset API: with it on (cloud default) the unmocked
 // asset endpoints 403 and workflow restore throws uncaught, aborting the
 // GraphCanvas onMounted chain before the deep-link loader.

browser_tests/tests/graph.spec.ts

@@ -1,6 +1,5 @@
 import { expect } from '@playwright/test'
 
-import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
@@ -16,10 +15,9 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
     await comfyPage.workflow.loadWorkflow('inputs/input_order_swap')
     await expect
       .poll(() =>
-        comfyPage.page.evaluate(
-          (linkId) => window.app!.graph!.links.get(linkId)?.target_slot,
-          toLinkId(1)
-        )
+        comfyPage.page.evaluate(() => {
+          return window.app!.graph!.links.get(1)?.target_slot
+        })
       )
       .toBe(1)
   })

browser_tests/tests/linearMode.spec.ts

@@ -3,7 +3,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Displays linear controls when app mode active', async ({
@@ -17,9 +16,7 @@ test.describe('Linear Mode', { tag: '@ui' }, () => {
   test('Run button visible in linear mode', async ({ comfyPage }) => {
     await comfyPage.appMode.enterAppModeWithInputs([])
 
-    await expect(
-      comfyPage.page.getByTestId(TestIds.linear.runButton)
-    ).toBeVisible()
+    await expect(comfyPage.page.getByTestId('linear-run-button')).toBeVisible()
   })
 
   test('Workflow info section visible', async ({ comfyPage }) => {

browser_tests/tests/maskEditor.spec.ts

@@ -46,7 +46,6 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
-      await comfyPage.canvasOps.pan({ x: 0, y: 40 }, { x: 300, y: 300 })
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/subgraph/subgraphSlots.spec.ts

@@ -691,8 +691,7 @@ test(
       const emptySlotPos = await seedIOSlot.getOpenSlotPosition()
       await comfyPage.canvas.hover({ position: emptySlotPos })
       await comfyPage.page.mouse.down()
-      const { width, height } = (await stepsSlot.boundingBox())!
-      await stepsSlot.hover({ position: { x: (width * 3) / 4, y: height / 2 } })
+      await stepsSlot.hover()
       await expect.poll(hasSnap).toBe(true)
       await comfyPage.page.mouse.up()
 

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -1238,7 +1238,7 @@ test(
   { tag: '@vue-nodes' },
   async ({ comfyMouse, comfyPage }) => {
     async function performDisconnect(slot: Locator, isFast: boolean) {
-      await comfyMouse.dragElementBy(slot, { x: isFast ? -30 : -80 })
+      await comfyMouse.dragElementBy(slot, { x: isFast ? -25 : -80 })
 
       if (!isFast) {
         await expect(comfyPage.contextMenu.litegraphContextMenu).toBeVisible()
@@ -1251,7 +1251,7 @@ test(
 
     const ksamplerLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
     const ksampler = new VueNodeFixture(ksamplerLocator)
-    await comfyMouse.dragElementBy(ksampler.title, { x: 100 })
+    await comfyMouse.dragElementBy(ksamplerLocator, { x: 100 })
 
     await test.step('Disconnection with normal links', async () => {
       await performDisconnect(ksampler.getSlot('model'), true)

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

@@ -234,8 +234,7 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
       await comfyPage.page
         .context()
         .grantPermissions(['clipboard-read', 'clipboard-write'])
-      await comfyPage.nodeOps.clearGraph()
-      await comfyPage.searchBoxV2.addNode('Load Image')
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
       await comfyPage.vueNodes.waitForNodes(1)
       await comfyPage.page
         .locator('[data-node-id] img')

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

@@ -14,8 +14,7 @@ const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.nodeOps.clearGraph()
-    await comfyPage.searchBoxV2.addNode('Load Image')
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
 
     const loadImageNode = (
       await comfyPage.nodeOps.getNodeRefsByType('LoadImage')

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

@@ -12,14 +12,14 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
   const getHeaderPos = async (
     comfyPage: ComfyPage,
     title: string
-  ): Promise<{ x: number; y: number }> => {
+  ): Promise<{ x: number; y: number; width: number; height: number }> => {
     const box = await comfyPage.vueNodes
       .getNodeByTitle(title)
       .getByTestId('node-title')
       .first()
       .boundingBox()
     if (!box) throw new Error(`${title} header not found`)
-    return { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+    return box
   }
 
   const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
@@ -84,27 +84,29 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.idleFrames(2)
   }
 
-  test('should allow moving nodes by dragging', async ({
-    comfyPage,
-    comfyMouse
-  }) => {
-    const initialHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
-    await comfyMouse.dragElementBy(node.header, { x: 100, y: 100 })
+  test('should allow moving nodes by dragging', async ({ comfyPage }) => {
+    const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
+      x: 256,
+      y: 256
+    })
 
     const newHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
-    await expectPosChanged(initialHeaderPos, newHeaderPos)
+    await expectPosChanged(loadCheckpointHeaderPos, newHeaderPos)
   })
 
   test('should not move node when pointer moves less than drag threshold', async ({
-    comfyPage,
-    comfyMouse
+    comfyPage
   }) => {
     const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
 
     // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
-    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
-    await comfyMouse.dragElementBy(node.header, { x: 2, y: 1 })
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
     await comfyPage.nextFrame()
 
     const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
@@ -293,12 +295,14 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
       await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
 
       // Re-fetch drag source after clicks in case the header reflowed.
-      const headerPos = await getHeaderPos(comfyPage, 'Load Checkpoint')
+      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
+      const centerX = dragSrc.x + dragSrc.width / 2
+      const centerY = dragSrc.y + dragSrc.height / 2
 
-      await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+      await comfyPage.page.mouse.move(centerX, centerY)
       await comfyPage.page.mouse.down()
       await comfyPage.nextFrame()
-      await comfyPage.page.mouse.move(headerPos.x + dx, headerPos.y + dy, {
+      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
         steps: 20
       })
       await comfyPage.page.mouse.up()

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

@@ -42,10 +42,7 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await expect(pinIndicator2).toBeHidden()
   })
 
-  test('should not allow dragging pinned nodes', async ({
-    comfyMouse,
-    comfyPage
-  }) => {
+  test('should not allow dragging pinned nodes', async ({ comfyPage }) => {
     const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
@@ -53,7 +50,10 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     // Try to drag the node
     const headerPos = await checkpointNodeHeader.boundingBox()
     if (!headerPos) throw new Error('Failed to get header position')
-    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
+    await comfyPage.canvasOps.dragAndDrop(
+      { x: headerPos.x, y: headerPos.y },
+      { x: headerPos.x + 256, y: headerPos.y + 256 }
+    )
 
     // Verify the node is not dragged (same position before and after click-and-drag)
     await expect
@@ -64,7 +64,11 @@ test.describe('Vue Node Pin', { tag: '@vue-nodes' }, () => {
     await checkpointNodeHeader.click()
     await comfyPage.page.keyboard.press(PIN_HOTKEY)
 
-    await comfyMouse.dragElementBy(checkpointNodeHeader, { x: 256, y: 256 })
+    // Try to drag the node again
+    await comfyPage.canvasOps.dragAndDrop(
+      { x: headerPos.x, y: headerPos.y },
+      { x: headerPos.x + 256, y: headerPos.y + 256 }
+    )
 
     // Verify the node is dragged
     await expect

browser_tests/tests/widgetCopyButton.spec.ts

@@ -5,7 +5,12 @@ import {
 
 test.describe('Widget copy button', { tag: ['@ui', '@vue-nodes'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.searchBoxV2.addNode('Preview as Text')
+    // Add a PreviewAny node which has a read-only textarea with a copy button
+    await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('PreviewAny')
+      window.app!.graph.add(node)
+    })
+
     await comfyPage.vueNodes.waitForNodes()
   })
 

global.d.ts

@@ -41,29 +41,6 @@ interface GtagFunction {
   (...args: unknown[]): void
 }
 
-type SyftDataTraits = Record<string, string | number | null | undefined>
-
-interface SyftDataPendingFetch {
-  args: unknown[]
-  resolve: (value: unknown) => void
-  reject: (reason?: unknown) => void
-}
-
-interface SyftDataClient {
-  identify(email: string, traits?: SyftDataTraits): void
-  signup(email: string, traits?: SyftDataTraits): void
-  track(event: string, traits?: SyftDataTraits): void
-  page(...args: unknown[]): void
-  q?: unknown[][]
-  fi?: SyftDataPendingFetch[]
-  fetchID?: (...args: unknown[]) => Promise<unknown>
-}
-
-/** Installed by the Syft UMD instead of SyftDataClient when telemetry is opted out */
-interface SyftDisabledClient {
-  enable: () => void
-}
-
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
@@ -101,8 +78,6 @@ interface Window {
   }
   dataLayer?: Array<Record<string, unknown>>
   gtag?: GtagFunction
-  syft?: SyftDataClient | SyftDisabledClient
-  syftc?: { sourceId?: string; enabled?: boolean }
   ire_o?: string
   ire?: ImpactQueueFunction
   rewardful?: RewardfulQueueFunction

package.json

@@ -53,6 +53,7 @@
     "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
+    "test:coverage:critical": "cross-env COVERAGE_CRITICAL=true vitest run --coverage",
     "test:unit": "vitest run",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",

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

@@ -197,7 +197,7 @@
   --node-component-executing: var(--color-blue-500);
   --node-component-header: var(--fg-color);
   --node-component-header-icon: var(--color-ash-800);
-  --node-component-header-surface: var(--color-smoke-200);
+  --node-component-header-surface: var(--color-smoke-400);
   --node-component-outline: var(--color-black);
   --node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
   --node-component-slot-dot-outline-opacity-mult: 1;
@@ -343,7 +343,7 @@
   --node-component-border-executing: var(--color-blue-500);
   --node-component-border-selected: var(--color-charcoal-200);
   --node-component-header-icon: var(--color-smoke-800);
-  --node-component-header-surface: var(--color-charcoal-700);
+  --node-component-header-surface: var(--color-charcoal-800);
   --node-component-outline: var(--color-white);
   --node-component-ring: rgb(var(--color-smoke-500) / 20%);
   --node-component-slot-dot-outline-opacity: 10%;
@@ -727,14 +727,14 @@ body {
 /* Shared markdown content styling for consistent rendering across components */
 .comfy-markdown-content {
   /* Typography */
-  font-size: var(--comfy-textarea-font-size);
+  font-size: 0.875rem; /* text-sm */
   line-height: 1.6;
   word-wrap: break-word;
 }
 
 /* Headings */
 .comfy-markdown-content h1 {
-  font-size: calc(22 / 14 * var(--comfy-textarea-font-size));
+  font-size: 22px; /* text-[22px] */
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -745,7 +745,7 @@ body {
 }
 
 .comfy-markdown-content h2 {
-  font-size: calc(18 / 14 * var(--comfy-textarea-font-size));
+  font-size: 18px; /* text-[18px] */
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */
@@ -756,7 +756,7 @@ body {
 }
 
 .comfy-markdown-content h3 {
-  font-size: calc(16 / 14 * var(--comfy-textarea-font-size));
+  font-size: 16px; /* text-[16px] */
   font-weight: 700; /* font-bold */
   margin-top: 2rem; /* mt-8 */
   margin-bottom: 1rem; /* mb-4 */

src/components/builder/AppModeWidgetList.vue

@@ -22,7 +22,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { parseImageWidgetValue } from '@/utils/imageUtil'
 import { cn } from '@comfyorg/tailwind-utils'
-import { HideLayoutFieldKey, WidgetHeightKey } from '@/types/widgetTypes'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
 import { UNASSIGNED_NODE_ID } from '@/types/nodeId'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 
@@ -50,7 +50,6 @@ const { onPointerDown } = useAppModeWidgetResizing((widget, config) =>
 )
 
 provide(HideLayoutFieldKey, true)
-provide(WidgetHeightKey, mobile ? 'h-10' : 'h-7')
 
 const resolvedInputs = useResolvedSelectedInputs()
 
@@ -237,7 +236,7 @@ defineExpose({ handleDragDrop })
           :node-data
           :class="
             cn(
-              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1',
+              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
               nodeData.hasErrors && 'ring-2 ring-node-stroke-error ring-inset'
             )
           "

src/components/common/ScrubableNumberInput.vue

@@ -1,26 +1,20 @@
 <template>
   <div
     ref="container"
-    :class="
-      cn(
-        'flex overflow-hidden rounded-md bg-component-node-widget-background text-xs text-component-node-foreground',
-        useWidgetHeight()
-      )
-    "
+    class="flex h-7 rounded-lg bg-component-node-widget-background text-xs text-component-node-foreground"
   >
     <slot name="background" />
     <Button
       v-if="!hideButtons"
       :aria-label="t('g.decrement')"
       data-testid="decrement"
-      class="aspect-square h-full rounded-none p-0 hover:bg-component-node-widget-background-hovered disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
-      size="unset"
       :disabled="!canDecrement"
       tabindex="-1"
       @click="modelValue = clamp(modelValue - step)"
     >
-      <i class="icon-[lucide--minus]" />
+      <i class="pi pi-minus" />
     </Button>
     <div class="relative my-0.25 min-w-[4ch] flex-1 py-1.5">
       <input
@@ -30,7 +24,7 @@
         :disabled
         :class="
           cn(
-            'absolute inset-0 truncate border-0 bg-transparent p-1 text-xs focus:outline-0'
+            'absolute inset-0 truncate border-0 bg-transparent p-1 text-sm focus:outline-0'
           )
         "
         inputmode="decimal"
@@ -60,14 +54,13 @@
       v-if="!hideButtons"
       :aria-label="t('g.increment')"
       data-testid="increment"
-      class="aspect-square h-full rounded-none p-0 hover:bg-component-node-widget-background-hovered disabled:opacity-30"
+      class="aspect-8/7 h-full rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
-      size="unset"
       :disabled="!canIncrement"
       tabindex="-1"
       @click="modelValue = clamp(modelValue + step)"
     >
-      <i class="icon-[lucide--plus]" />
+      <i class="pi pi-plus" />
     </Button>
   </div>
 </template>
@@ -78,7 +71,6 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useWidgetHeight } from '@/types/widgetTypes'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const {

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -158,8 +158,8 @@ import { creditsToUsd, usdToCredits } from '@/base/credits/comfyCredits'
 import Button from '@/components/ui/button/Button.vue'
 import FormattedNumberStepper from '@/components/ui/stepper/FormattedNumberStepper.vue'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
-import { useBillingRouting } from '@/composables/billing/useBillingRouting'
 import { useExternalLink } from '@/composables/useExternalLink'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 import { clearTopupTracking } from '@/platform/telemetry/topupTracker'
@@ -178,7 +178,7 @@ const settingsDialog = useSettingsDialog()
 const telemetry = useTelemetry()
 const toast = useToast()
 const { buildDocsUrl, docsPaths } = useExternalLink()
-const { shouldUseWorkspaceBilling } = useBillingRouting()
+const { flags } = useFeatureFlags()
 
 const { isSubscriptionEnabled } = useSubscription()
 // Constants
@@ -260,9 +260,9 @@ async function handleBuy() {
     // Close top-up dialog (keep tracking) and open credits panel to show updated balance
     handleClose(false)
 
-    // On the consolidated (workspace) billing flow, show the workspace settings
-    // panel; otherwise show the legacy subscription/credits panel.
-    const settingsPanel = shouldUseWorkspaceBilling.value
+    // In workspace mode (personal workspace), show workspace settings panel
+    // Otherwise, show legacy subscription/credits panel
+    const settingsPanel = flags.teamWorkspacesEnabled
       ? 'workspace'
       : isSubscriptionEnabled()
         ? 'subscription'

src/components/dialog/content/setting/UsageLogsTable.test.ts

@@ -2,11 +2,12 @@ import { createTestingPinia } from '@pinia/testing'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import { render, screen, waitFor } from '@testing-library/vue'
 
+import type * as DistributionTypes from '@/platform/distribution/types'
 import type { AuditLog } from '@/services/customerEventsService'
 import { EventType } from '@/services/customerEventsService'
 
@@ -34,29 +35,19 @@ vi.mock('@/services/customerEventsService', () => ({
   }
 }))
 
-const mockTelemetry = vi.hoisted(() => ({
-  checkForCompletedTopup: vi.fn()
-}))
 vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => mockTelemetry
+  useTelemetry: () => null
 }))
 
-const mockBillingRouting = vi.hoisted(() => ({
-  shouldUseWorkspaceBilling: false
+const mockFlags = vi.hoisted(() => ({ teamWorkspacesEnabled: false }))
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({ flags: mockFlags })
+}))
+
+vi.mock('@/platform/distribution/types', async (importOriginal) => ({
+  ...(await importOriginal<typeof DistributionTypes>()),
+  isCloud: true
 }))
-vi.mock('@/composables/billing/useBillingRouting', async () => {
-  const { ref } = await import('vue')
-  const shouldUseWorkspaceBilling = ref(false)
-  Object.defineProperty(mockBillingRouting, 'shouldUseWorkspaceBilling', {
-    get: () => shouldUseWorkspaceBilling.value,
-    set: (value: boolean) => {
-      shouldUseWorkspaceBilling.value = value
-    }
-  })
-  return {
-    useBillingRouting: () => ({ shouldUseWorkspaceBilling })
-  }
-})
 
 const mockWorkspaceApi = vi.hoisted(() => ({
   getBillingEvents: vi.fn()
@@ -77,10 +68,7 @@ const i18n = createI18n({
         additionalInfo: 'Additional Info',
         added: 'Added',
         accountInitialized: 'Account initialized',
-        model: 'Model',
-        loadEventsError: 'Failed to load activity. Please try again.',
-        loadEventsUnknownError:
-          'Something went wrong while loading activity. Please refresh and try again.'
+        model: 'Model'
       }
     }
   }
@@ -107,11 +95,6 @@ const AutoRefreshWrapper = defineComponent({
   template: '<UsageLogsTable ref="tableRef" />'
 })
 
-async function flushMicrotasks() {
-  await new Promise((resolve) => setTimeout(resolve, 0))
-  await nextTick()
-}
-
 function makeEventsResponse(
   events: Partial<AuditLog>[],
   overrides: Record<string, unknown> = {}
@@ -154,7 +137,7 @@ describe('UsageLogsTable', () => {
 
     mockCustomerEventsService.getMyEvents.mockResolvedValue(mockEventsResponse)
     mockWorkspaceApi.getBillingEvents.mockResolvedValue(mockEventsResponse)
-    mockBillingRouting.shouldUseWorkspaceBilling = false
+    mockFlags.teamWorkspacesEnabled = false
     mockCustomerEventsService.formatEventType.mockImplementation(
       (type: string) => {
         switch (type) {
@@ -245,7 +228,7 @@ describe('UsageLogsTable', () => {
       })
     })
 
-    it('shows a localized fallback instead of a raw Error message', async () => {
+    it('shows error message when service throws', async () => {
       mockCustomerEventsService.getMyEvents.mockRejectedValue(
         new Error('Network error')
       )
@@ -253,25 +236,7 @@ describe('UsageLogsTable', () => {
       renderWithAutoRefresh()
 
       await waitFor(() => {
-        expect(
-          screen.getByText(
-            'Something went wrong while loading activity. Please refresh and try again.'
-          )
-        ).toBeInTheDocument()
-      })
-      expect(screen.queryByText('Network error')).not.toBeInTheDocument()
-    })
-
-    it('shows a localized fallback when the service reports no message', async () => {
-      mockCustomerEventsService.getMyEvents.mockResolvedValue(null)
-      mockCustomerEventsService.error.value = null
-
-      renderWithAutoRefresh()
-
-      await waitFor(() => {
-        expect(
-          screen.getByText('Failed to load activity. Please try again.')
-        ).toBeInTheDocument()
+        expect(screen.getByText('Network error')).toBeInTheDocument()
       })
     })
 
@@ -376,8 +341,8 @@ describe('UsageLogsTable', () => {
   })
 
   describe('billing events source', () => {
-    it('uses workspaceApi.getBillingEvents on the workspace billing flow', async () => {
-      mockBillingRouting.shouldUseWorkspaceBilling = true
+    it('uses workspaceApi.getBillingEvents when teamWorkspacesEnabled is on', async () => {
+      mockFlags.teamWorkspacesEnabled = true
 
       await renderLoaded()
 
@@ -387,90 +352,6 @@ describe('UsageLogsTable', () => {
       })
       expect(mockCustomerEventsService.getMyEvents).not.toHaveBeenCalled()
     })
-
-    it('discards a stale legacy response when routing flips mid-fetch', async () => {
-      let resolveLegacy!: (value: ReturnType<typeof makeEventsResponse>) => void
-      mockCustomerEventsService.getMyEvents.mockReturnValue(
-        new Promise((resolve) => {
-          resolveLegacy = resolve
-        })
-      )
-      mockWorkspaceApi.getBillingEvents.mockResolvedValue(
-        makeEventsResponse([
-          {
-            event_id: 'workspace-1',
-            event_type: EventType.API_USAGE_COMPLETED,
-            params: { api_name: 'WorkspaceAPI', model: 'workspace-model' },
-            createdAt: '2024-02-01T10:00:00Z'
-          }
-        ])
-      )
-
-      renderWithAutoRefresh()
-
-      mockBillingRouting.shouldUseWorkspaceBilling = true
-      await waitFor(() => {
-        expect(screen.getByText('WorkspaceAPI')).toBeInTheDocument()
-      })
-
-      resolveLegacy(
-        makeEventsResponse([
-          {
-            event_id: 'legacy-1',
-            event_type: EventType.API_USAGE_COMPLETED,
-            params: { api_name: 'LegacyAPI', model: 'legacy-model' },
-            createdAt: '2024-01-01T10:00:00Z'
-          }
-        ])
-      )
-
-      await flushMicrotasks()
-
-      expect(screen.getByText('WorkspaceAPI')).toBeInTheDocument()
-      expect(screen.queryByText('LegacyAPI')).not.toBeInTheDocument()
-    })
-
-    it('runs top-up completion telemetry for a superseded response', async () => {
-      let resolveLegacy!: (value: ReturnType<typeof makeEventsResponse>) => void
-      mockCustomerEventsService.getMyEvents.mockReturnValue(
-        new Promise((resolve) => {
-          resolveLegacy = resolve
-        })
-      )
-      mockWorkspaceApi.getBillingEvents.mockResolvedValue(
-        makeEventsResponse([
-          {
-            event_id: 'workspace-1',
-            event_type: EventType.API_USAGE_COMPLETED,
-            params: { api_name: 'WorkspaceAPI', model: 'workspace-model' },
-            createdAt: '2024-02-01T10:00:00Z'
-          }
-        ])
-      )
-
-      renderWithAutoRefresh()
-
-      mockBillingRouting.shouldUseWorkspaceBilling = true
-      await waitFor(() => {
-        expect(screen.getByText('WorkspaceAPI')).toBeInTheDocument()
-      })
-
-      const legacyResponse = makeEventsResponse([
-        {
-          event_id: 'legacy-1',
-          event_type: EventType.CREDIT_ADDED,
-          params: { amount: 1000 },
-          createdAt: '2024-01-01T10:00:00Z'
-        }
-      ])
-      resolveLegacy(legacyResponse)
-
-      await waitFor(() => {
-        expect(mockTelemetry.checkForCompletedTopup).toHaveBeenCalledWith(
-          legacyResponse.events
-        )
-      })
-    })
   })
 
   describe('EventType integration', () => {

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

@@ -96,11 +96,11 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useBillingRouting } from '@/composables/billing/useBillingRouting'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { workspaceApi } from '@/platform/workspace/api/workspaceApi'
 import type { AuditLog } from '@/services/customerEventsService'
@@ -109,15 +109,14 @@ import {
   useCustomerEventsService
 } from '@/services/customerEventsService'
 
-const { t } = useI18n()
-
 const events = ref<AuditLog[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 
 const customerEventService = useCustomerEventsService()
 
-const { shouldUseWorkspaceBilling } = useBillingRouting()
+const { flags } = useFeatureFlags()
+const useBillingApi = computed(() => isCloud && flags.teamWorkspacesEnabled)
 
 const pagination = ref({
   page: 1,
@@ -140,12 +139,7 @@ const tooltipContentMap = computed(() => {
   return map
 })
 
-// A billing-route flip can overlap two loads against different backends; only
-// the latest may mutate state, so a superseded response is discarded.
-let latestLoadToken = 0
-
 const loadEvents = async () => {
-  const loadToken = ++latestLoadToken
   loading.value = true
   error.value = null
 
@@ -154,17 +148,10 @@ const loadEvents = async () => {
       page: pagination.value.page,
       limit: pagination.value.limit
     }
-    const response = shouldUseWorkspaceBilling.value
+    const response = useBillingApi.value
       ? await workspaceApi.getBillingEvents(params)
       : await customerEventService.getMyEvents(params)
 
-    // Completion telemetry must run even when a mid-checkout route flip
-    // supersedes this load, since legacy and workspace backends emit different
-    // top-up events and the winning fetch may not carry the completion yet.
-    useTelemetry()?.checkForCompletedTopup(response?.events)
-
-    if (loadToken !== latestLoadToken) return
-
     if (response) {
       if (response.events) {
         events.value = response.events
@@ -178,25 +165,24 @@ const loadEvents = async () => {
         pagination.value.limit = response.limit
       }
 
-      if (response.total != null) {
+      if (response.total) {
         pagination.value.total = response.total
       }
 
-      if (response.totalPages != null) {
+      if (response.totalPages) {
         pagination.value.totalPages = response.totalPages
       }
+
+      // Check if a pending top-up has completed
+      useTelemetry()?.checkForCompletedTopup(response.events)
     } else {
-      const legacyError = shouldUseWorkspaceBilling.value
-        ? null
-        : customerEventService.error.value
-      error.value = legacyError || t('credits.loadEventsError')
+      error.value = customerEventService.error.value || 'Failed to load events'
     }
   } catch (err) {
-    if (loadToken !== latestLoadToken) return
-    error.value = t('credits.loadEventsUnknownError')
+    error.value = err instanceof Error ? err.message : 'Unknown error'
     console.error('Error loading events:', err)
   } finally {
-    if (loadToken === latestLoadToken) loading.value = false
+    loading.value = false
   }
 }
 
@@ -212,12 +198,6 @@ const refresh = async () => {
   await loadEvents()
 }
 
-watch(shouldUseWorkspaceBilling, () => {
-  refresh().catch((error) => {
-    console.error('Error loading events:', error)
-  })
-})
-
 defineExpose({
   refresh
 })

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

@@ -42,34 +42,22 @@ function withStrictMillisecondParser<T>(run: () => T): T {
 }
 
 const mockSubscription = vi.hoisted(() => ({
-  value: null as {
-    endDate: string | null
-    duration?: 'ANNUAL' | 'MONTHLY' | null
-  } | null
+  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())
-const mockTier = vi.hoisted(() => ({ value: 'STANDARD' as string | null }))
-const mockTrackCancellation = vi.hoisted(() => vi.fn())
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: vi.fn(() => ({
     cancelSubscription: mockCancelSubscription,
     fetchStatus: mockFetchStatus,
-    subscription: mockSubscription,
-    tier: mockTier
+    subscription: mockSubscription
   }))
 }))
 
-vi.mock('@/platform/telemetry', () => ({
-  useTelemetry: () => ({
-    trackSubscriptionCancellation: mockTrackCancellation
-  })
-}))
-
 vi.mock('@/stores/dialogStore', () => ({
   useDialogStore: vi.fn(() => ({
     closeDialog: mockCloseDialog
@@ -106,95 +94,6 @@ function renderComponent(props: { cancelAt?: string } = {}) {
 describe('CancelSubscriptionDialogContent', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTier.value = 'STANDARD'
-  })
-
-  describe('cancellation telemetry', () => {
-    it('tracks flow_opened with tier and end date when the dialog mounts', () => {
-      mockSubscription.value = { endDate: '2026-08-01T00:00:00.000Z' }
-
-      renderComponent()
-
-      expect(mockTrackCancellation).toHaveBeenCalledWith('flow_opened', {
-        source: 'cancel_plan_menu',
-        current_tier: 'standard',
-        end_date: '2026-08-01T00:00:00.000Z'
-      })
-    })
-
-    it('tracks confirmed before the cancel request and no abandoned on success', async () => {
-      mockSubscription.value = null
-      mockCancelSubscription.mockResolvedValueOnce(undefined)
-
-      const { unmount } = renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /^cancel subscription$/i })
-      )
-
-      await waitFor(() => expect(mockCloseDialog).toHaveBeenCalled())
-      unmount()
-      expect(mockTrackCancellation).toHaveBeenCalledWith(
-        'confirmed',
-        expect.objectContaining({ current_tier: 'standard' })
-      )
-      expect(mockTrackCancellation).not.toHaveBeenCalledWith(
-        'abandoned',
-        expect.anything()
-      )
-    })
-
-    it('tracks confirmed and failed with message-carrying rejection values', async () => {
-      mockSubscription.value = null
-      mockCancelSubscription.mockRejectedValueOnce({ message: 'timed out' })
-
-      renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /^cancel subscription$/i })
-      )
-
-      await waitFor(() =>
-        expect(mockTrackCancellation).toHaveBeenCalledWith(
-          'failed',
-          expect.objectContaining({ error_message: 'timed out' })
-        )
-      )
-      expect(mockTrackCancellation).toHaveBeenCalledWith(
-        'confirmed',
-        expect.anything()
-      )
-    })
-
-    it('tracks abandoned when the user keeps the subscription', async () => {
-      mockSubscription.value = null
-
-      const { unmount } = renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /keep subscription/i })
-      )
-
-      expect(mockCloseDialog).toHaveBeenCalledWith({
-        key: 'cancel-subscription'
-      })
-      unmount()
-      expect(mockTrackCancellation).toHaveBeenCalledWith(
-        'abandoned',
-        expect.objectContaining({ current_tier: 'standard' })
-      )
-      expect(mockCancelSubscription).not.toHaveBeenCalled()
-    })
-
-    it('tracks abandoned when the dialog is dismissed by the shell', () => {
-      mockSubscription.value = null
-
-      const { unmount } = renderComponent()
-      mockTrackCancellation.mockClear()
-      unmount()
-
-      expect(mockTrackCancellation).toHaveBeenCalledWith(
-        'abandoned',
-        expect.objectContaining({ current_tier: 'standard' })
-      )
-    })
   })
 
   describe('cancel flow', () => {
@@ -239,35 +138,6 @@ describe('CancelSubscriptionDialogContent', () => {
         expect.objectContaining({ severity: 'success' })
       )
     })
-
-    it('does not track cancellation failure when status refresh fails after cancellation succeeds', async () => {
-      mockSubscription.value = null
-      mockCancelSubscription.mockResolvedValueOnce(undefined)
-      mockFetchStatus.mockRejectedValueOnce(new Error('Refresh failed'))
-
-      const { unmount } = renderComponent()
-      await userEvent.click(
-        screen.getByRole('button', { name: /^cancel subscription$/i })
-      )
-
-      await waitFor(() =>
-        expect(mockToastAdd).toHaveBeenCalledWith(
-          expect.objectContaining({ severity: 'success' })
-        )
-      )
-      expect(mockCloseDialog).toHaveBeenCalledWith({
-        key: 'cancel-subscription'
-      })
-      expect(
-        mockTrackCancellation.mock.calls.some(([stage]) => stage === 'failed')
-      ).toBe(false)
-
-      unmount()
-      expect(mockTrackCancellation).not.toHaveBeenCalledWith(
-        'abandoned',
-        expect.anything()
-      )
-    })
   })
 
   describe('formattedEndDate fallbacks', () => {

src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue

@@ -45,16 +45,13 @@
 
 <script setup lang="ts">
 import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useTelemetry } from '@/platform/telemetry'
-import type { SubscriptionCancellationMetadata } from '@/platform/telemetry/types'
 import { useDialogStore } from '@/stores/dialogStore'
 import { parseIsoDateSafe } from '@/utils/dateTimeUtil'
-import { getErrorMessage } from '@/utils/errorUtil'
 
 const props = defineProps<{
   cancelAt?: string
@@ -63,41 +60,9 @@ const props = defineProps<{
 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const toast = useToast()
-const { cancelSubscription, fetchStatus, subscription, tier } =
-  useBillingContext()
-const telemetry = useTelemetry()
+const { cancelSubscription, fetchStatus, subscription } = useBillingContext()
 
 const isLoading = ref(false)
-const didCancelSucceed = ref(false)
-
-function cancellationMetadata(): SubscriptionCancellationMetadata {
-  const endDate = props.cancelAt ?? subscription.value?.endDate
-  return {
-    source: 'cancel_plan_menu' as const,
-    current_tier: tier.value?.toLowerCase(),
-    ...(subscription.value?.duration
-      ? {
-          cycle:
-            subscription.value.duration === 'ANNUAL'
-              ? ('yearly' as const)
-              : ('monthly' as const)
-        }
-      : {}),
-    ...(endDate ? { end_date: endDate } : {})
-  }
-}
-
-onMounted(() => {
-  telemetry?.trackSubscriptionCancellation(
-    'flow_opened',
-    cancellationMetadata()
-  )
-})
-
-onUnmounted(() => {
-  if (didCancelSucceed.value || isLoading.value) return
-  telemetry?.trackSubscriptionCancellation('abandoned', cancellationMetadata())
-})
 
 const formattedEndDate = computed(() => {
   const date = parseIsoDateSafe(props.cancelAt ?? subscription.value?.endDate)
@@ -119,37 +84,24 @@ function onClose() {
 }
 
 async function onConfirmCancel() {
-  telemetry?.trackSubscriptionCancellation('confirmed', cancellationMetadata())
   isLoading.value = true
   try {
     await cancelSubscription()
-  } catch (error) {
-    const errorMessage = getErrorMessage(error)
-    telemetry?.trackSubscriptionCancellation('failed', {
-      ...cancellationMetadata(),
-      error_message: errorMessage ?? String(error)
+    await fetchStatus()
+    dialogStore.closeDialog({ key: 'cancel-subscription' })
+    toast.add({
+      severity: 'success',
+      summary: t('subscription.cancelSuccess'),
+      life: 5000
     })
+  } catch (error) {
     toast.add({
       severity: 'error',
       summary: t('subscription.cancelDialog.failed'),
-      detail: errorMessage ?? t('g.unknownError')
+      detail: error instanceof Error ? error.message : t('g.unknownError')
     })
+  } finally {
     isLoading.value = false
-    return
   }
-
-  didCancelSucceed.value = true
-  try {
-    await fetchStatus()
-  } catch {
-    // Cancellation already succeeded; stale local subscription status should not report failure.
-  }
-  dialogStore.closeDialog({ key: 'cancel-subscription' })
-  toast.add({
-    severity: 'success',
-    summary: t('subscription.cancelSuccess'),
-    life: 5000
-  })
-  isLoading.value = false
 }
 </script>

src/components/error/ErrorOverlay.vue

@@ -37,7 +37,7 @@
             size="unset"
             class="min-h-8 rounded-lg px-3 py-2 text-xs font-normal"
             data-testid="error-overlay-see-errors"
-            @click="viewErrorsInGraph"
+            @click="seeErrors"
           >
             {{
               appMode
@@ -67,18 +67,31 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorOverlayState } from '@/components/error/useErrorOverlayState'
-import { useViewErrorsInGraph } from '@/composables/useViewErrorsInGraph'
 
 const { appMode = false } = defineProps<{ appMode?: boolean }>()
 
 const { t } = useI18n()
 const executionErrorStore = useExecutionErrorStore()
-const { viewErrorsInGraph } = useViewErrorsInGraph()
+const rightSidePanelStore = useRightSidePanelStore()
+const canvasStore = useCanvasStore()
 
 const { isVisible, overlayMessage, overlayTitle } = useErrorOverlayState()
 
 function dismiss() {
   executionErrorStore.dismissErrorOverlay()
 }
+
+function seeErrors() {
+  canvasStore.linearMode = false
+  if (canvasStore.canvas) {
+    canvasStore.canvas.deselectAll()
+    canvasStore.updateSelectedItems()
+  }
+
+  rightSidePanelStore.openPanel('errors')
+  executionErrorStore.dismissErrorOverlay()
+}
 </script>

src/components/graph/widgets/PromptEditor.vue

@@ -1,326 +0,0 @@
-<template>
-  <div class="relative size-full">
-    <div
-      ref="editorEl"
-      role="textbox"
-      aria-multiline="true"
-      :aria-label="$t('promptNode.editorLabel')"
-      :contenteditable="readonly ? 'false' : 'true'"
-      spellcheck="false"
-      data-testid="prompt-editor"
-      class="size-full overflow-auto rounded-sm border border-border-default bg-component-node-widget-background p-2 wrap-break-word whitespace-pre-wrap outline-none"
-      @input="syncFromEditor"
-      @keydown="onKeydown"
-      @paste="onPaste"
-      @blur="closeMenu"
-    />
-    <span
-      v-if="isEmpty && placeholder"
-      class="pointer-events-none absolute top-2 left-2 text-muted-foreground"
-    >
-      {{ placeholder }}
-    </span>
-
-    <Teleport to="body">
-      <div
-        v-if="menuOpen"
-        role="listbox"
-        class="fixed z-3000 max-h-60 w-56 overflow-y-auto rounded-lg border border-border-default bg-base-background p-1 text-xs shadow-lg"
-        :style="{ top: `${menuTop}px`, left: `${menuLeft}px` }"
-        @mousedown.prevent
-      >
-        <template v-if="menuItems.length">
-          <Button
-            v-for="(item, index) in menuItems"
-            :key="item.name"
-            role="option"
-            :aria-selected="index === highlighted"
-            variant="textonly"
-            size="sm"
-            :class="
-              cn(
-                'w-full justify-start',
-                index === highlighted && 'bg-secondary-background-hover'
-              )
-            "
-            @mouseenter="highlighted = index"
-            @click="selectItem(item)"
-          >
-            <span class="truncate">{{
-              item.create
-                ? $t('promptNode.createVariable', { name: item.name })
-                : item.name
-            }}</span>
-          </Button>
-        </template>
-        <div v-else class="px-2 py-1.5 text-muted-foreground">
-          {{ $t('promptNode.noMatches') }}
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-import { useEventListener } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
-
-import {
-  CHIP_SELECTOR,
-  createChipElement,
-  parseElementToTemplate,
-  renderTemplateToElement
-} from '@/components/graph/widgets/promptTemplateDom'
-import Button from '@/components/ui/button/Button.vue'
-import type { PromptTemplate } from '@/platform/prompts/promptTemplate'
-
-const {
-  variableNames = [],
-  connectedNames = [],
-  placeholder = '',
-  readonly = false
-} = defineProps<{
-  /** `@` variable references this editor may offer and resolve. */
-  variableNames?: string[]
-  /** Variables that are wired up, so their chips render as resolved. */
-  connectedNames?: string[]
-  placeholder?: string
-  readonly?: boolean
-}>()
-
-const modelValue = defineModel<PromptTemplate>({ default: () => [] })
-
-const editorEl = ref<HTMLElement>()
-const isEmpty = computed(() => (modelValue.value ?? []).length === 0)
-
-let lastSerialized = ''
-
-function renderFromModel() {
-  if (!editorEl.value) return
-  renderTemplateToElement(editorEl.value, modelValue.value ?? [])
-  refreshChipStates()
-}
-
-function syncFromEditor() {
-  if (!editorEl.value) return
-  const template = parseElementToTemplate(editorEl.value)
-  lastSerialized = JSON.stringify(template)
-  modelValue.value = template
-  refreshChipStates()
-}
-
-watch(modelValue, (value) => {
-  const serialized = JSON.stringify(value ?? [])
-  if (serialized === lastSerialized) return
-  lastSerialized = serialized
-  renderFromModel()
-})
-
-watch(() => connectedNames, refreshChipStates)
-
-onMounted(() => {
-  renderFromModel()
-  lastSerialized = JSON.stringify(modelValue.value ?? [])
-})
-
-function refreshChipStates() {
-  const host = editorEl.value
-  if (!host) return
-  const connected = new Set(connectedNames)
-  for (const chip of host.querySelectorAll<HTMLElement>(CHIP_SELECTOR)) {
-    const resolvable = connected.has(chip.getAttribute('data-chip-name') ?? '')
-    chip.classList.toggle('bg-primary-background/50', resolvable)
-    chip.classList.toggle('bg-destructive-background', !resolvable)
-  }
-}
-
-// --- @ mention autocomplete ----------------------------------------------
-interface MenuItem {
-  name: string
-  create?: boolean
-}
-
-const menuOpen = ref(false)
-const menuItems = ref<MenuItem[]>([])
-const highlighted = ref(0)
-const menuTop = ref(0)
-const menuLeft = ref(0)
-
-interface MentionAnchor {
-  node: Text
-  start: number
-  end: number
-}
-let mentionAnchor: MentionAnchor | null = null
-
-function closeMenu() {
-  menuOpen.value = false
-  mentionAnchor = null
-}
-
-function recomputeMenu(query: string) {
-  const lower = query.toLowerCase()
-  const vars: MenuItem[] = variableNames
-    .filter((name) => name.toLowerCase().includes(lower))
-    .map((name) => ({ name }))
-  const create: MenuItem[] =
-    query && !variableNames.some((name) => name.toLowerCase() === lower)
-      ? [{ name: query, create: true }]
-      : []
-  menuItems.value = [...vars, ...create]
-  highlighted.value = 0
-}
-
-// A single caret-position listener drives mention detection: typing, clicking,
-// and arrow keys all land here, while Escape (no caret move) does not — so a
-// dismissed menu stays closed.
-useEventListener(document, 'selectionchange', detectMention)
-
-function detectMention() {
-  const host = editorEl.value
-  const selection = window.getSelection()
-  if (
-    !host ||
-    !selection ||
-    !selection.isCollapsed ||
-    selection.rangeCount === 0
-  ) {
-    return closeMenu()
-  }
-
-  const node = selection.anchorNode
-  if (!node || node.nodeType !== Node.TEXT_NODE || !host.contains(node)) {
-    return closeMenu()
-  }
-
-  const textNode = node as Text
-  const offset = selection.anchorOffset
-  const before = (textNode.textContent ?? '').slice(0, offset)
-  const match = /(?:^|\s)@([^\s@]*)$/.exec(before)
-  if (!match) return closeMenu()
-
-  mentionAnchor = {
-    node: textNode,
-    start: offset - match[1].length - 1,
-    end: offset
-  }
-  recomputeMenu(match[1])
-  positionMenu()
-  menuOpen.value = true
-}
-
-function positionMenu() {
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return
-  const range = selection.getRangeAt(0).cloneRange()
-  range.collapse(true)
-  const rect = range.getBoundingClientRect()
-  // Keep the menu (w-56 / max-h-60) inside the viewport near window edges.
-  menuTop.value = Math.max(0, Math.min(rect.bottom + 4, innerHeight - 240))
-  menuLeft.value = Math.max(0, Math.min(rect.left, innerWidth - 224))
-}
-
-function selectItem(item: MenuItem) {
-  if (!mentionAnchor) return
-  const { node, start, end } = mentionAnchor
-  const parent = node.parentNode
-  if (!parent) return
-
-  const text = node.textContent ?? ''
-  node.textContent = text.slice(0, start)
-  const after = document.createTextNode(` ${text.slice(end)}`)
-  const chip = createChipElement(item.name)
-  parent.insertBefore(after, node.nextSibling)
-  parent.insertBefore(chip, after)
-  setCaret(after, 1)
-
-  closeMenu()
-  syncFromEditor()
-}
-
-function setCaret(node: Node, offset: number) {
-  const selection = window.getSelection()
-  if (!selection) return
-  const range = document.createRange()
-  range.setStart(node, Math.min(offset, node.textContent?.length ?? 0))
-  range.collapse(true)
-  selection.removeAllRanges()
-  selection.addRange(range)
-}
-
-function insertTextAtCaret(value: string) {
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return
-  const range = selection.getRangeAt(0)
-  range.deleteContents()
-  const node = document.createTextNode(value)
-  range.insertNode(node)
-  setCaret(node, value.length)
-}
-
-function insertLineBreak() {
-  const selection = window.getSelection()
-  if (!selection || selection.rangeCount === 0) return
-  const range = selection.getRangeAt(0)
-  range.deleteContents()
-  const br = document.createElement('br')
-  range.insertNode(br)
-  // A break at the end of the content has no line box for the caret to land
-  // in; pad it with a second break (stripped as padding when parsing).
-  if (!hasContentAfter(br)) br.after(document.createElement('br'))
-
-  // Anchor the caret in a text node — Chrome renders element-anchored caret
-  // positions (between two <br>s) unreliably.
-  let anchor = br.nextSibling
-  if (!anchor || anchor.nodeType !== Node.TEXT_NODE) {
-    anchor = document.createTextNode('')
-    br.after(anchor)
-  }
-  setCaret(anchor, 0)
-}
-
-function hasContentAfter(node: Node): boolean {
-  for (let next = node.nextSibling; next; next = next.nextSibling) {
-    if (next.nodeType !== Node.TEXT_NODE || next.textContent) return true
-  }
-  return false
-}
-
-function onKeydown(event: KeyboardEvent) {
-  event.stopPropagation()
-
-  if (menuOpen.value) {
-    const count = menuItems.value.length
-    if (event.key === 'ArrowDown' && count) {
-      event.preventDefault()
-      highlighted.value = (highlighted.value + 1) % count
-    } else if (event.key === 'ArrowUp' && count) {
-      event.preventDefault()
-      highlighted.value = (highlighted.value - 1 + count) % count
-    } else if (event.key === 'Enter' || event.key === 'Tab') {
-      event.preventDefault()
-      if (count) selectItem(menuItems.value[highlighted.value])
-    } else if (event.key === 'Escape') {
-      event.preventDefault()
-      closeMenu()
-    }
-    return
-  }
-
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    insertLineBreak()
-    syncFromEditor()
-  }
-}
-
-function onPaste(event: ClipboardEvent) {
-  event.preventDefault()
-  const text = event.clipboardData?.getData('text/plain') ?? ''
-  if (text) {
-    insertTextAtCaret(text)
-    syncFromEditor()
-  }
-}
-</script>

src/components/graph/widgets/PromptNodeWidget.test.ts

@@ -1,107 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/vue'
-import { shallowReactive } from 'vue'
-import { createI18n } from 'vue-i18n'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import PromptNodeWidget from '@/components/graph/widgets/PromptNodeWidget.vue'
-import type { PromptTemplate } from '@/platform/prompts/promptTemplate'
-
-const g = vi.hoisted(() => {
-  const promptNode = {
-    id: '1',
-    inputs: [] as { name?: string; link: number | null }[]
-  }
-  const graph = {
-    getNodeById: (id: string) => (id === '1' ? promptNode : undefined)
-  }
-  return { graph, promptNode }
-})
-
-// Mirror the real node manager, which exposes node.inputs as a reactive array,
-// so the widget's connection computeds update when sockets change.
-g.promptNode.inputs = shallowReactive(g.promptNode.inputs)
-
-/** Sets the node's connected variable input sockets by name (mutates in place). */
-function connectSockets(names: string[]) {
-  g.promptNode.inputs.splice(
-    0,
-    g.promptNode.inputs.length,
-    ...names.map((name, i) => ({ name, link: i + 1 }))
-  )
-}
-
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({ canvas: { graph: g.graph } })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      promptNode: {
-        editorPlaceholder:
-          "Write a prompt, or type {'@'} to reference a connected input",
-        editorLabel: 'Prompt editor',
-        noMatches: 'No matches',
-        createVariable: 'Create variable: {name}'
-      }
-    }
-  }
-})
-
-interface MountOptions {
-  template?: PromptTemplate
-  connected?: string[]
-}
-
-function renderWidget({ template = [], connected = [] }: MountOptions = {}) {
-  connectSockets(connected)
-  return render(PromptNodeWidget, {
-    props: { modelValue: template, nodeId: '1' },
-    global: { plugins: [i18n] }
-  })
-}
-
-beforeEach(() => {
-  vi.clearAllMocks()
-  g.promptNode.inputs.splice(0, g.promptNode.inputs.length)
-})
-
-describe('PromptNodeWidget', () => {
-  it('marks a variable chip unresolved when no socket with that name is connected', () => {
-    renderWidget({
-      template: [{ type: 'var', name: 'setting' }],
-      connected: []
-    })
-    expect(screen.getByText('@setting')).toHaveClass(
-      'bg-destructive-background'
-    )
-  })
-
-  it('resolves a variable chip when a socket with that name is connected', () => {
-    renderWidget({
-      template: [{ type: 'var', name: 'setting' }],
-      connected: ['setting']
-    })
-    expect(screen.getByText('@setting')).toHaveClass('bg-primary-background/50')
-  })
-
-  it('turns a variable chip blue when its socket becomes connected', async () => {
-    renderWidget({ template: [{ type: 'var', name: 'animal' }] })
-    const chip = screen.getByText('@animal')
-    expect(chip).toHaveClass('bg-destructive-background')
-
-    g.promptNode.inputs.push({ name: 'animal', link: 1 })
-
-    await waitFor(() => expect(chip).toHaveClass('bg-primary-background/50'))
-    expect(chip).not.toHaveClass('bg-destructive-background')
-  })
-
-  it('shows a placeholder with a literal @ when empty', () => {
-    renderWidget()
-    // Verifies the `@` in the message is escaped (`{'@'}`) so vue-i18n does not
-    // parse it as linked-message syntax and fail to compile.
-    expect(screen.getByText(/type @ to reference/)).toBeInTheDocument()
-  })
-})

src/components/graph/widgets/PromptNodeWidget.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    class="flex size-full min-h-[100px] flex-col text-xs"
-    @pointerdown.stop
-    @pointermove.stop
-    @pointerup.stop
-    @wheel.stop
-  >
-    <div class="min-h-0 flex-1">
-      <PromptEditor
-        v-model="modelValue"
-        :variable-names
-        :connected-names
-        :placeholder="$t('promptNode.editorPlaceholder')"
-        :readonly="isReadOnly"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import PromptEditor from '@/components/graph/widgets/PromptEditor.vue'
-import type { PromptTemplate } from '@/platform/prompts/promptTemplate'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { toNodeId } from '@/types/nodeId'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-const { widget, nodeId } = defineProps<{
-  widget?: SimplifiedWidget<PromptTemplate>
-  nodeId: string
-}>()
-
-const modelValue = defineModel<PromptTemplate>({ default: () => [] })
-
-const canvasStore = useCanvasStore()
-
-const isReadOnly = computed(() =>
-  Boolean(widget?.options?.read_only || widget?.options?.disabled)
-)
-
-const inputSockets = computed(
-  () => canvasStore.canvas?.graph?.getNodeById(toNodeId(nodeId))?.inputs ?? []
-)
-const variableNames = computed(() =>
-  inputSockets.value.flatMap((input) => (input.name ? [input.name] : []))
-)
-const connectedNames = computed(() =>
-  inputSockets.value.flatMap((input) =>
-    input.name && input.link != null ? [input.name] : []
-  )
-)
-</script>

src/components/graph/widgets/promptTemplateDom.test.ts

@@ -1,87 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  createChipElement,
-  parseElementToTemplate,
-  renderTemplateToElement
-} from '@/components/graph/widgets/promptTemplateDom'
-import type { PromptTemplate } from '@/platform/prompts/promptTemplate'
-
-function host(): HTMLElement {
-  return document.createElement('div')
-}
-
-describe('promptTemplateDom', () => {
-  it('renders chips with their variable name', () => {
-    const chip = createChipElement('setting')
-    expect(chip.getAttribute('data-chip-name')).toBe('setting')
-    expect(chip.textContent).toBe('@setting')
-    expect(chip.contentEditable).toBe('false')
-  })
-
-  it('round-trips text and variable segments', () => {
-    const template: PromptTemplate = [
-      { type: 'text', value: 'a portrait of ' },
-      { type: 'var', name: 'subject' },
-      { type: 'text', value: ', set in ' },
-      { type: 'var', name: 'setting' }
-    ]
-    const el = host()
-    renderTemplateToElement(el, template)
-    expect(parseElementToTemplate(el)).toEqual(template)
-  })
-
-  it('merges adjacent text nodes', () => {
-    const el = host()
-    el.append(document.createTextNode('foo'))
-    el.append(document.createTextNode('bar'))
-    expect(parseElementToTemplate(el)).toEqual([
-      { type: 'text', value: 'foobar' }
-    ])
-  })
-
-  it('treats <br> elements as newlines', () => {
-    const el = host()
-    el.append(document.createTextNode('line1'))
-    el.append(document.createElement('br'))
-    el.append(document.createTextNode('line2'))
-    expect(parseElementToTemplate(el)).toEqual([
-      { type: 'text', value: 'line1\nline2' }
-    ])
-  })
-
-  it('renders newlines as <br> elements', () => {
-    const el = host()
-    renderTemplateToElement(el, [{ type: 'text', value: 'line1\nline2' }])
-    expect(Array.from(el.childNodes).map((node) => node.nodeName)).toEqual([
-      '#text',
-      'BR',
-      '#text'
-    ])
-  })
-
-  it('round-trips a trailing newline through a padded break', () => {
-    const template: PromptTemplate = [{ type: 'text', value: 'line1\n' }]
-    const el = host()
-    renderTemplateToElement(el, template)
-    expect(Array.from(el.childNodes).map((node) => node.nodeName)).toEqual([
-      '#text',
-      'BR',
-      'BR'
-    ])
-    expect(parseElementToTemplate(el)).toEqual(template)
-  })
-
-  it('parses a lone <br> as an empty template', () => {
-    const el = host()
-    el.append(document.createElement('br'))
-    expect(parseElementToTemplate(el)).toEqual([])
-  })
-
-  it('ignores empty text nodes', () => {
-    const el = host()
-    el.append(document.createTextNode(''))
-    el.append(createChipElement('x'))
-    expect(parseElementToTemplate(el)).toEqual([{ type: 'var', name: 'x' }])
-  })
-})

src/components/graph/widgets/promptTemplateDom.ts

@@ -1,122 +0,0 @@
-import type {
-  PromptSegment,
-  PromptTemplate
-} from '@/platform/prompts/promptTemplate'
-
-export const CHIP_SELECTOR = '[data-chip-name]'
-
-const CHIP_CLASS =
-  'prompt-chip mx-0.5 inline-flex items-center rounded-sm px-1 align-baseline select-none cursor-default bg-primary-background/50 text-base-foreground'
-
-function isChipElement(node: Node): node is HTMLElement {
-  return (
-    node.nodeType === Node.ELEMENT_NODE &&
-    (node as HTMLElement).hasAttribute('data-chip-name')
-  )
-}
-
-export function createChipElement(name: string): HTMLSpanElement {
-  const el = document.createElement('span')
-  el.className = CHIP_CLASS
-  el.contentEditable = 'false'
-  el.setAttribute('data-chip-name', name)
-  el.textContent = `@${name}`
-  return el
-}
-
-/**
- * Builds a flat fragment of text nodes, `<br>` breaks, and chips. Newlines
- * render as `<br>` elements because a trailing `"\n"` text node produces no
- * line box, leaving the caret without a valid position. A break at the very
- * end gets a padding `<br>` so the empty last line renders.
- */
-function createTemplateFragment(template: PromptTemplate): DocumentFragment {
-  const fragment = document.createDocumentFragment()
-  for (const segment of template) {
-    if (segment.type === 'var') {
-      fragment.append(createChipElement(segment.name))
-      continue
-    }
-    const lines = segment.value.split('\n')
-    lines.forEach((line, index) => {
-      if (index > 0) fragment.append(document.createElement('br'))
-      if (line) fragment.append(document.createTextNode(line))
-    })
-  }
-  if (fragment.lastChild?.nodeName === 'BR') {
-    fragment.append(document.createElement('br'))
-  }
-  return fragment
-}
-
-/** Renders a template into a contenteditable host as flat text nodes + chips. */
-export function renderTemplateToElement(
-  host: HTMLElement,
-  template: PromptTemplate
-): void {
-  host.replaceChildren(createTemplateFragment(template))
-}
-
-/** Reconstructs a template from the contenteditable host's current DOM. */
-export function parseElementToTemplate(host: HTMLElement): PromptTemplate {
-  const segments: PromptSegment[] = []
-  appendNode(host, segments)
-  if (endsWithPaddingBreak(host)) stripTrailingNewline(segments)
-  return mergeText(segments)
-}
-
-/**
- * A `<br>` as the final rendered node is presentational padding (ours, or the
- * one browsers leave in an emptied contenteditable) — not a content newline.
- */
-function endsWithPaddingBreak(host: HTMLElement): boolean {
-  for (let node = host.lastChild; node; node = node.previousSibling) {
-    if (node.nodeType === Node.TEXT_NODE && !node.textContent) continue
-    return node.nodeName === 'BR'
-  }
-  return false
-}
-
-function stripTrailingNewline(segments: PromptSegment[]): void {
-  const last = segments.at(-1)
-  if (last?.type !== 'text' || !last.value.endsWith('\n')) return
-  last.value = last.value.slice(0, -1)
-  if (!last.value) segments.pop()
-}
-
-function appendNode(node: Node, segments: PromptSegment[]): void {
-  for (const child of Array.from(node.childNodes)) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      const value = child.textContent ?? ''
-      if (value) segments.push({ type: 'text', value })
-    } else if (isChipElement(child)) {
-      segments.push({
-        type: 'var',
-        name: child.getAttribute('data-chip-name') ?? ''
-      })
-    } else if (child.nodeName === 'BR') {
-      segments.push({ type: 'text', value: '\n' })
-    } else {
-      // Stray wrappers (e.g. from paste): treat block elements as line breaks.
-      if (isBlockElement(child)) segments.push({ type: 'text', value: '\n' })
-      appendNode(child, segments)
-    }
-  }
-}
-
-function isBlockElement(node: Node): boolean {
-  return node.nodeName === 'DIV' || node.nodeName === 'P'
-}
-
-function mergeText(segments: PromptSegment[]): PromptTemplate {
-  const merged: PromptSegment[] = []
-  for (const segment of segments) {
-    const previous = merged.at(-1)
-    if (segment.type === 'text' && previous?.type === 'text') {
-      previous.value += segment.value
-    } else {
-      merged.push(segment)
-    }
-  }
-  return merged
-}

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -31,7 +31,7 @@ import { getWidgetDefaultValue } from '@/utils/widgetUtil'
 import type { WidgetValue } from '@/utils/widgetUtil'
 
 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
-import { HideLayoutFieldKey, WidgetHeightKey } from '@/types/widgetTypes'
+import { HideLayoutFieldKey } from '@/types/widgetTypes'
 
 import { GetNodeParentGroupKey } from '../shared'
 import WidgetItem from './WidgetItem.vue'
@@ -135,7 +135,6 @@ watchDebounced(
 onBeforeUnmount(() => draggableList.value?.dispose())
 
 provide(HideLayoutFieldKey, true)
-provide(WidgetHeightKey, 'h-7')
 
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()