fix(website): keep nav label in bare span for exact-text matching

Removing the label wrapper made badged nav items (Products, Community)
render the label as bare text beside the NEW badge, so the flex row's text
became "Products NEW" and getByText(label, { exact: true }) no longer
matched. Restore a bare <span> around the label, matching the other
load-bearing wrappers retained in this PR.

.fallowrc.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
-  "entry": ["src/main.ts", "index.html"],
-  "duplicates": {
-    "minOccurrences": 3,
-    "ignore": ["**/*.generated.*", "**/generatedManagerTypes.ts"]
-  },
-  "rules": {}
-}

.gitignore

@@ -16,7 +16,6 @@ yarn.lock
 .eslintcache
 .prettiercache
 .stylelintcache
-.fallow/
 
 node_modules
 .pnpm-store

.storybook/main.ts

@@ -88,11 +88,6 @@ const config: StorybookConfig = {
             replacement:
               process.cwd() + '/src/storybook/mocks/useFeatureFlags.ts'
           },
-          {
-            find: '@/platform/workspace/composables/useWorkspaceUI',
-            replacement:
-              process.cwd() + '/src/storybook/mocks/useWorkspaceUI.ts'
-          },
           {
             find: '@/platform/workspace/stores/teamWorkspaceStore',
             replacement:

apps/website/astro.config.ts

@@ -10,13 +10,11 @@ const PAYMENT_STATUSES = ['success', 'failed'] as const
 const LOCALE_PREFIXES = LOCALES.map((locale) =>
   locale === DEFAULT_LOCALE ? '' : `/${locale}`
 )
-const SITEMAP_EXCLUDED_PATHNAMES = new Set([
-  ...LOCALE_PREFIXES.flatMap((prefix) =>
+const SITEMAP_EXCLUDED_PATHNAMES = new Set(
+  LOCALE_PREFIXES.flatMap((prefix) =>
     PAYMENT_STATUSES.map((status) => `${prefix}/payment/${status}`)
-  ),
-  ...LOCALE_PREFIXES.map((prefix) => `${prefix}/individual-submission`),
-  ...LOCALE_PREFIXES.map((prefix) => `${prefix}/booking-confirmation`)
-])
+  )
+)
 
 function isExcludedFromSitemap(page: string): boolean {
   const pathname = new URL(page).pathname.replace(/\/$/, '')

apps/website/e2e/mcp.spec.ts

@@ -1,20 +1,9 @@
-import type { Locator } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import { test } from './fixtures/blockExternalMedia'
 
 const MCP_ENDPOINT = 'https://cloud.comfy.org/mcp'
 
-// The setup island hydrates on visibility; clicks before hydration are
-// no-ops, so retry until the tab actually activates.
-async function selectClientTab(setup: Locator, name: string) {
-  const tab = setup.getByRole('tab', { name })
-  await expect(async () => {
-    await tab.click()
-    await expect(tab).toHaveAttribute('data-state', 'active', { timeout: 500 })
-  }).toPass()
-}
-
 test.describe('MCP page @smoke', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/mcp')
@@ -30,72 +19,46 @@ test.describe('MCP page @smoke', () => {
     }
   })
 
-  test('Claude Desktop is the default tab and shows only the connector card', async ({
-    page
-  }) => {
+  test('setup section shows both install options', async ({ page }) => {
     const setup = page.locator('#setup')
     await setup.scrollIntoViewIfNeeded()
-    await expect(
-      setup.getByRole('tab', { name: 'Claude Desktop' })
-    ).toHaveAttribute('data-state', 'active')
-    await expect(
-      setup.getByRole('heading', { name: 'Add Custom Connector' })
-    ).toBeVisible()
-    await expect(setup.getByText(MCP_ENDPOINT, { exact: true })).toBeVisible()
     await expect(
       setup.getByRole('heading', {
         name: 'Ask your agent to install Comfy MCP'
       })
-    ).toHaveCount(0)
-    await expect(setup.locator('video')).toBeVisible()
-  })
-
-  test('client tabs swap install instructions and agent-card visibility', async ({
-    page
-  }) => {
-    const setup = page.locator('#setup')
-    await setup.scrollIntoViewIfNeeded()
-    const activePanel = setup.locator('[role="tabpanel"][data-state="active"]')
-    const agentHeading = setup.getByRole('heading', {
-      name: 'Ask your agent to install Comfy MCP'
-    })
-
-    await expect(activePanel).toContainText('Add custom connector')
-
-    // First interaction retries until the island hydrates; later switches
-    // assert synchronously so steady-state click regressions fail.
-    await selectClientTab(setup, 'Claude Code Terminal')
-    await expect(activePanel).toContainText(
-      `claude mcp add --transport http comfy-cloud ${MCP_ENDPOINT}`
-    )
+    ).toBeVisible()
     await expect(
       setup.getByRole('heading', { name: 'Install manually' })
     ).toBeVisible()
-    await expect(agentHeading).toBeVisible()
+    await expect(setup.getByText(MCP_ENDPOINT, { exact: true })).toBeVisible()
+  })
 
-    await setup.getByRole('tab', { name: 'Codex' }).click()
+  test('client tabs swap install instructions', async ({ page }) => {
+    const setup = page.locator('#setup')
+    await setup.scrollIntoViewIfNeeded()
+    const activePanel = setup.locator('[role="tabpanel"][data-state="active"]')
+
+    // Claude Code is the default tab and carries the CLI command
+    await expect(
+      setup.getByRole('tab', { name: 'Claude Code' })
+    ).toHaveAttribute('data-state', 'active')
     await expect(activePanel).toContainText(
-      `codex mcp add comfy-cloud --url ${MCP_ENDPOINT}`
+      `claude mcp add --transport http comfy-cloud ${MCP_ENDPOINT}`
     )
-    await expect(agentHeading).toHaveCount(0)
-    await expect(setup.locator('video')).toBeVisible()
+
+    await setup.getByRole('tab', { name: 'Claude Desktop' }).click()
+    await expect(activePanel).toContainText('Add custom connector')
 
     await setup.getByRole('tab', { name: 'Cursor' }).click()
     await expect(activePanel).toContainText('X-API-Key')
     await expect(
       activePanel.getByRole('link', { name: 'platform.comfy.org' })
     ).toHaveAttribute('href', 'https://platform.comfy.org/profile/api-keys')
-    await expect(agentHeading).toBeVisible()
 
-    await setup.getByRole('tab', { name: 'OpenClaw' }).click()
+    await setup.getByRole('tab', { name: 'Codex' }).click()
     await expect(activePanel).toContainText(
-      'openclaw skills install @comfy-org/comfy'
+      `codex mcp add comfy-cloud --url ${MCP_ENDPOINT}`
     )
-    await expect(agentHeading).toBeVisible()
-
-    await setup.getByRole('tab', { name: 'Others' }).click()
-    await expect(activePanel).toContainText('remote MCP server')
-    await expect(agentHeading).toBeVisible()
   })
 
   test('skills plugin link lives in the agent option card', async ({
@@ -103,7 +66,6 @@ test.describe('MCP page @smoke', () => {
   }) => {
     const setup = page.locator('#setup')
     await setup.scrollIntoViewIfNeeded()
-    await selectClientTab(setup, 'Claude Code Terminal')
     await expect(
       setup.getByRole('link', { name: 'View on GitHub' })
     ).toHaveAttribute('href', 'https://github.com/Comfy-Org/comfy-skills')
@@ -143,10 +105,7 @@ test.describe('MCP page zh-CN @smoke', () => {
     await page.goto('/zh-CN/mcp')
     const setup = page.locator('#setup')
     await setup.scrollIntoViewIfNeeded()
-    await expect(
-      setup.getByRole('heading', { name: '添加自定义连接器' })
-    ).toBeVisible()
-    await selectClientTab(setup, 'Claude Code Terminal')
+    await expect(setup.getByText('方式一')).toBeVisible()
     await expect(setup.getByRole('heading', { name: '手动安装' })).toBeVisible()
     await expect(setup.getByText(MCP_ENDPOINT, { exact: true })).toBeVisible()
   })

apps/website/src/components/booking-confirmation/ResourceList.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-const { resources } = defineProps<{
-  resources: { label: string; href: string; display: string }[]
-}>()
-</script>
-
-<template>
-  <ul class="flex flex-col gap-3 text-base font-light lg:text-lg">
-    <li v-for="resource in resources" :key="resource.href">
-      <span class="text-primary-comfy-canvas">{{ resource.label }}</span>
-      <span class="text-primary-warm-gray"> — </span>
-      <a
-        :href="resource.href"
-        class="text-primary-comfy-yellow underline underline-offset-4 hover:no-underline"
-      >
-        {{ resource.display }}
-      </a>
-    </li>
-  </ul>
-</template>

apps/website/src/components/common/BrandButton.vue

@@ -35,8 +35,6 @@ const resolvedRel = computed(() =>
       )
     "
   >
-    <span class="ppformula-text-center">
-      <slot />
-    </span>
+    <slot />
   </component>
 </template>

apps/website/src/components/common/CategoryNav.vue

@@ -38,7 +38,7 @@ const emit = defineEmits<{
     >
       <span v-if="modelValue === category.value" class="relative inline-block">
         <span
-          class="bg-primary-comfy-yellow ppformula-text-center inline-flex items-center rounded-lg px-4 py-2"
+          class="bg-primary-comfy-yellow inline-flex items-center rounded-lg px-4 py-2"
         >
           {{ category.label }}
         </span>
@@ -50,7 +50,7 @@ const emit = defineEmits<{
       </span>
       <span
         v-else
-        class="bg-transparency-white-t4 ppformula-text-center inline-flex items-center rounded-lg px-4 py-2"
+        class="bg-transparency-white-t4 inline-flex items-center rounded-lg px-4 py-2"
       >
         {{ category.label }}
       </span>

apps/website/src/components/common/ContentSection.vue

@@ -259,7 +259,7 @@ function scrollToSection(id: string) {
         <!-- Read more CTA -->
         <div v-if="readMoreHref" class="mt-8 flex justify-center">
           <BrandButton :href="readMoreHref" variant="solid" size="lg">
-            <span class="ppformula-text-center flex items-center gap-2">
+            <span class="flex items-center gap-2">
               {{ t('customers.story.readMore' as TranslationKey, locale) }}
               <span class="text-base">↗</span>
             </span>

apps/website/src/components/common/HeaderMain/HeaderMainDesktop.vue

@@ -44,7 +44,7 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
             :active="isNavItemActive(navItem, currentPath)"
           >
             <span class="inline-flex items-center gap-1">
-              <span class="ppformula-text-center">{{ navItem.label }}</span>
+              <span>{{ navItem.label }}</span>
               <NewBadge v-if="navItem.badge" :locale="locale" size="xxs" />
             </span>
           </NavigationMenuTrigger>
@@ -70,9 +70,7 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
           :active="isNavItemActive(navItem, currentPath)"
           :class="navigationMenuTriggerStyle()"
         >
-          <a :href="navItem.href" class="ppformula-text-center">{{
-            navItem.label
-          }}</a>
+          <a :href="navItem.href">{{ navItem.label }}</a>
         </NavigationMenuLink>
       </NavigationMenuItem>
     </NavigationMenuList>

apps/website/src/components/common/HeaderMain/HeaderMainMobile.vue

@@ -97,7 +97,7 @@ onUnmounted(() => {
                   :href="item.columns ? undefined : item.href"
                   @click="item.columns && (activeSection = item.label)"
                 >
-                  <span class="ppformula-text-center">{{ item.label }}</span>
+                  <span>{{ item.label }}</span>
                   <NewBadge v-if="item.badge" :locale="locale" size="xxs" />
                   <template #append>
                     <ChevronRight class="size-7" />

apps/website/src/components/common/HeaderMain/NavLinkContent.vue

@@ -10,7 +10,7 @@ defineProps<{ item: NavColumnItem; locale: Locale }>()
 
 <template>
   <span class="flex items-center gap-2">
-    <span class="ppformula-text-center">{{ item.label }}</span>
+    <span>{{ item.label }}</span>
     <NewBadge v-if="item.badge" :locale="locale" size="xs" />
     <ArrowUpRight
       v-if="item.external"

apps/website/src/components/common/VideoPlayer.vue

@@ -33,7 +33,6 @@ const {
   minimal = false,
   hideControls = false,
   fit = 'cover',
-  ariaLabel,
   class: className
 } = defineProps<{
   locale?: Locale
@@ -45,7 +44,6 @@ const {
   minimal?: boolean
   hideControls?: boolean
   fit?: 'cover' | 'contain'
-  ariaLabel?: string
   class?: HTMLAttributes['class']
 }>()
 
@@ -95,28 +93,6 @@ watch(videoEl, syncNativeDuration)
 useEventListener(videoEl, 'loadedmetadata', syncNativeDuration)
 useEventListener(videoEl, 'durationchange', syncNativeDuration)
 
-// The muted attribute only sets defaultMuted, so SSR-rendered autoplay
-// videos count as unmuted and get blocked; force the property and kick
-// playback. Scoped to hideControls (decorative) clips so chrome-visible
-// consumers keep native semantics. flush: 'post' guarantees this runs
-// after useMediaControls' internal muted watcher on the same source.
-watch(
-  [videoEl, () => src],
-  ([el]) => {
-    if (!el || !autoplay || !hideControls) return
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-      el.pause()
-      return
-    }
-    el.muted = true
-    el.play().catch((error: unknown) => {
-      if (error instanceof Error && error.name === 'AbortError') return
-      console.warn('VideoPlayer autoplay failed', error)
-    })
-  },
-  { flush: 'post' }
-)
-
 const effectiveDuration = computed(() => duration.value || nativeDuration.value)
 
 // Scrubber (modeled after VueUse demo Scrubber.vue)
@@ -231,7 +207,6 @@ function toggleFullscreen() {
     <video
       v-if="src"
       ref="videoEl"
-      :aria-label="ariaLabel"
       :class="
         cn('size-full', fit === 'contain' ? 'object-contain' : 'object-cover')
       "

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

@@ -46,7 +46,7 @@ const {
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
+            class="text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('customers.story.viewArticle' as TranslationKey, locale) }}
           </span>

apps/website/src/components/demos/DemoNavSection.vue

@@ -48,7 +48,7 @@ const nextHref = localizeHref(`/demos/${nextSlug}`, locale)
             <span class="text-lg font-bold">›</span>
           </span>
           <span
-            class="ppformula-text-center text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
+            class="text-sm font-semibold tracking-wider text-primary-comfy-canvas uppercase"
           >
             {{ t('demos.nav.viewDemo' as TranslationKey, locale) }}
           </span>

apps/website/src/components/individual-submission/PlansPricingCta.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Button from '../ui/button/Button.vue'
-
-const { href, label } = defineProps<{
-  href: string
-  label: string
-}>()
-</script>
-
-<template>
-  <div class="mt-2 flex justify-center">
-    <Button as="a" :href variant="default" size="lg">
-      {{ label }}
-    </Button>
-  </div>
-</template>

apps/website/src/components/legal/HeroSection.vue

@@ -1,25 +1,12 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { title, class: className } = defineProps<{
-  title: string
-  class?: HTMLAttributes['class']
-}>()
+const { title } = defineProps<{ title: string }>()
 </script>
 
 <template>
   <section
     class="flex items-center justify-center px-6 pt-20 pb-16 lg:pt-32 lg:pb-24"
   >
-    <h1
-      :class="
-        cn(
-          'text-4xl font-light text-primary-comfy-canvas lg:text-6xl',
-          className
-        )
-      "
-    >
+    <h1 class="text-primary-comfy-canvas text-4xl font-light lg:text-6xl">
       {{ title }}
     </h1>
   </section>

apps/website/src/components/pricing/PriceSection.vue

@@ -159,9 +159,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
             <span
               class="bg-primary-comfy-yellow font-formula-narrow flex items-center px-2 text-sm font-bold tracking-wider text-primary-comfy-ink"
             >
-              <span class="ppformula-text-center">
-                {{ t('pricing.badge.popular', locale) }}
-              </span>
+              {{ t('pricing.badge.popular', locale) }}
             </span>
             <img
               src="/icons/node-right.svg"
@@ -265,9 +263,7 @@ const enterprisePlan = plans.find((p) => p.isEnterprise)!
               <span
                 class="bg-primary-comfy-yellow flex items-center px-2 text-[10px] font-bold tracking-wider text-primary-comfy-ink"
               >
-                <span class="ppformula-text-center">
-                  {{ t('pricing.badge.popular', locale) }}
-                </span>
+                {{ t('pricing.badge.popular', locale) }}
               </span>
               <img
                 src="/icons/node-right.svg"

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

@@ -76,12 +76,8 @@ const buttons = computed<ButtonSpec[]>(() => {
     @click="captureDownloadClick(btn.key)"
   >
     <span class="inline-flex items-center gap-2">
-      <img
-        :src="btn.icon"
-        alt=""
-        class="ppformula-text-center size-5 -translate-y-0.75"
-      />
-      <span class="ppformula-text-center">{{ label }}</span>
+      <img :src="btn.icon" alt="" class="size-5 -translate-y-0.75" />
+      {{ label }}
     </span>
   </BrandButton>
 </template>

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

@@ -305,7 +305,7 @@ onUnmounted(() => {
           size="lg"
           class="lg:min-w-60 lg:p-4"
         >
-          <span class="ppformula-text-center inline-flex items-center gap-2">
+          <span class="inline-flex items-center gap-2">
             <i
               class="icon-mask size-5 -translate-y-px mask-[url('/icons/social/github.svg')]"
               aria-hidden="true"

apps/website/src/components/ui/badge/Badge.vue

@@ -30,7 +30,7 @@ const {
     <slot name="prepend">
       <component :is="prependIcon" v-if="prependIcon" />
     </slot>
-    <span class="ppformula-text-center">
+    <span>
       <slot />
     </span>
     <slot name="append">

apps/website/src/components/ui/button-mask/index.ts

@@ -78,7 +78,7 @@ export const buttonMaskBadgeVariants = cva({
 })
 
 export const BUTTON_MASK_LABEL_CLASS = [
-  'ppformula-text-center relative inline-block align-baseline',
+  'relative inline-block align-baseline',
   '[will-change:mask-size,-webkit-mask-size]',
   '[mask-image:linear-gradient(black,black)] [-webkit-mask-image:linear-gradient(black,black)]',
   'mask-no-repeat [-webkit-mask-repeat:no-repeat]',

apps/website/src/components/ui/button-pill/ButtonPill.vue

@@ -38,13 +38,7 @@ const {
     :disabled
     :class="cn(buttonPillVariants({ variant, size, iconPosition }), className)"
   >
-    <span
-      :class="
-        cn(
-          'ppformula-text-center relative leading-none transition-all duration-500'
-        )
-      "
-    >
+    <span class="relative leading-none transition-all duration-500">
       <slot />
     </span>
     <span

apps/website/src/components/ui/button/Button.vue

@@ -40,7 +40,7 @@ const {
     <slot name="prepend">
       <component :is="prependIcon" v-if="prependIcon" />
     </slot>
-    <span class="ppformula-text-center">
+    <span>
       <slot />
     </span>
     <slot name="append">

apps/website/src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -30,7 +30,7 @@ const forwardedProps = useForwardProps(computed(() => ({ ...restProps })))
     :data-active="active ? '' : undefined"
     :class="cn(navigationMenuTriggerStyle(), 'group', className)"
   >
-    <span class="ppformula-text-center">
+    <span>
       <slot />
     </span>
     <ChevronDown

apps/website/src/i18n/translations.ts

@@ -1919,48 +1919,42 @@ const translations = {
     'zh-CN': '配置 Comfy MCP'
   },
   'mcp.setup.subtitle': {
-    en: 'Two ways to connect: add the server yourself, or ask your agent to install it. Sign in once, and the full ComfyUI toolset is available right in your chat.',
+    en: 'Two ways to connect: ask your agent to install it, or add the server yourself. Sign in once, and the full ComfyUI toolset is available right in your chat.',
     'zh-CN':
-      '两种接入方式：自行添加服务器，或让你的智能体自动安装。登录一次，ComfyUI 全套工具即可直接在对话中使用。'
+      '两种接入方式：让你的智能体自动安装，或自行添加服务器。登录一次，ComfyUI 全套工具即可直接在对话中使用。'
   },
-  'mcp.setup.manual.title': {
-    en: 'Install manually',
-    'zh-CN': '手动安装'
-  },
-  'mcp.setup.manual.description': {
-    en: 'Add this URL as a custom connector or remote MCP server in your client, then sign in when prompted.',
-    'zh-CN':
-      '将此 URL 添加为客户端的自定义连接器或远程 MCP 服务器，然后按提示登录。'
-  },
-  'mcp.setup.manual.tabsLabel': {
-    en: 'Pick your client',
-    'zh-CN': '选择你的客户端'
-  },
-  'mcp.setup.agent.title': {
+  'mcp.setup.option1.label': { en: 'OPTION 1', 'zh-CN': '方式一' },
+  'mcp.setup.option1.title': {
     en: 'Ask your agent to install Comfy MCP',
     'zh-CN': '让你的智能体安装 Comfy MCP'
   },
-  'mcp.setup.agent.command': {
+  'mcp.setup.option1.command': {
     en: 'Help me install Comfy MCP.\nFollow the setup guide at {url}',
     'zh-CN': '帮我安装 Comfy MCP。\n请按照 {url} 上的设置指南操作。'
   },
-  'mcp.setup.agent.description': {
-    en: 'Prefer to let your agent do it? Paste this into Claude, Cursor, Codex, or any MCP-compatible agent. It reads the docs and adds the connector for you.',
+  'mcp.setup.option1.description': {
+    en: 'Paste this into Claude, Cursor, Codex, or any MCP-compatible agent. It reads the docs and adds the connector for you.',
     'zh-CN':
-      '想让智能体代劳？将它粘贴到 Claude、Cursor、Codex 或任意兼容 MCP 的智能体中。它会读取文档并为你添加连接器。'
+      '将它粘贴到 Claude、Cursor、Codex 或任意兼容 MCP 的智能体中。它会读取文档并为你添加连接器。'
+  },
+  'mcp.setup.option2.label': { en: 'OPTION 2', 'zh-CN': '方式二' },
+  'mcp.setup.option2.title': {
+    en: 'Install manually',
+    'zh-CN': '手动安装'
+  },
+  'mcp.setup.option2.description': {
+    en: 'Prefer manual setup? Add this URL as a custom connector or remote MCP server in your client, then sign in when prompted.',
+    'zh-CN':
+      '想手动配置？将此 URL 添加为客户端的自定义连接器或远程 MCP 服务器，然后按提示登录。'
+  },
+  'mcp.setup.option2.tabsLabel': {
+    en: 'Pick your client',
+    'zh-CN': '选择你的客户端'
   },
   'mcp.setup.clients.claudeCode.step': {
     en: 'Run this in your terminal, then use /mcp to pick comfy-cloud and authenticate.',
     'zh-CN': '在终端运行以下命令，然后通过 /mcp 选择 comfy-cloud 并完成认证。'
   },
-  'mcp.setup.walkthroughAlt': {
-    en: '{client} setup walkthrough',
-    'zh-CN': '{client} 设置演示'
-  },
-  'mcp.setup.clients.claudeDesktop.manualTitle': {
-    en: 'Add Custom Connector',
-    'zh-CN': '添加自定义连接器'
-  },
   'mcp.setup.clients.claudeDesktop.step': {
     en: 'Click Customize in the sidebar, open Connectors, choose Add custom connector, paste the URL above, and sign in.',
     'zh-CN':
@@ -1979,13 +1973,9 @@ const translations = {
     en: 'Run this in your terminal, then codex mcp login comfy-cloud to sign in.',
     'zh-CN': '在终端运行以下命令，然后执行 codex mcp login comfy-cloud 登录。'
   },
-  'mcp.setup.clients.openclaw.step': {
-    en: 'Run these in your terminal, then openclaw mcp login comfy to sign in.',
-    'zh-CN': '在终端运行以下命令，然后执行 openclaw mcp login comfy 登录。'
-  },
   'mcp.setup.clients.other.name': {
-    en: 'Others',
-    'zh-CN': '其他'
+    en: 'Other clients',
+    'zh-CN': '其他客户端'
   },
   'mcp.setup.clients.other.step': {
     en: 'Add the URL above as a remote MCP server. No OAuth in your client? Use an X-API-Key header instead. Full walkthroughs live in the ',
@@ -2200,9 +2190,9 @@ const translations = {
     'zh-CN': '我需要 API 密钥吗？'
   },
   'mcp.faq.3.a': {
-    en: 'Not for Claude Code, Claude Desktop, Codex, or OpenClaw. You need a Comfy API key for Cursor and Hermes for now. Just copy https://docs.comfy.org/agent-tools/cloud and your agent will figure out the installation for you.',
+    en: 'Not for Claude Code, Claude Desktop, or Codex. You need a Comfy API key for Cursor, Hermes, and OpenClaw for now. Just copy https://docs.comfy.org/agent-tools/cloud and your agent will figure out the installation for you.',
     'zh-CN':
-      'Claude Code、Claude Desktop、Codex 和 OpenClaw 不需要。Cursor 和 Hermes 目前需要 Comfy API 密钥。只需复制 https://docs.comfy.org/agent-tools/cloud，你的智能体就会为你完成安装。'
+      'Claude Code、Claude Desktop 和 Codex 不需要。Cursor、Hermes 和 OpenClaw 目前需要 Comfy API 密钥。只需复制 https://docs.comfy.org/agent-tools/cloud，你的智能体就会为你完成安装。'
   },
   'mcp.faq.4.q': {
     en: 'Does it cost anything?',

apps/website/src/pages/booking-confirmation.astro

@@ -1,54 +0,0 @@
----
-import BaseLayout from '../layouts/BaseLayout.astro'
-import ResourceList from '../components/booking-confirmation/ResourceList.vue'
-import HeroSection from '../components/legal/HeroSection.vue'
-import { externalLinks, getRoutes } from '../config/routes'
-
-const routes = getRoutes('en')
-
-const resources = [
-  {
-    label: 'Learning Center',
-    href: routes.learning,
-    display: 'comfy.org/learning'
-  },
-  {
-    label: 'Workflow templates',
-    href: externalLinks.workflows,
-    display: 'comfy.org/workflows'
-  },
-  {
-    label: 'Customer stories',
-    href: routes.customers,
-    display: 'comfy.org/customers'
-  },
-  {
-    label: 'Docs',
-    href: externalLinks.docs,
-    display: 'docs.comfy.org'
-  }
-]
----
-
-<BaseLayout
-  title="You're booked - Comfy"
-  description="Your meeting is booked. Check your email for the calendar invite and meeting link."
-  noindex
->
-  <HeroSection title="You're booked." class="text-center" />
-
-  <section class="-mt-8 px-6 pb-24 lg:-mt-12 lg:pb-40">
-    <div
-      class="text-primary-comfy-canvas mx-auto flex max-w-2xl flex-col gap-10 text-center text-base font-light lg:text-lg"
-    >
-      <p>Check your email for the calendar invite and meeting link!</p>
-
-      <div class="flex flex-col gap-4">
-        <h2 class="text-primary-comfy-yellow text-xl font-semibold italic lg:text-2xl">
-          Resources while you wait
-        </h2>
-        <ResourceList resources={resources} />
-      </div>
-    </div>
-  </section>
-</BaseLayout>

apps/website/src/pages/individual-submission.astro

@@ -1,60 +0,0 @@
----
-import BaseLayout from '../layouts/BaseLayout.astro'
-import PlansPricingCta from '../components/individual-submission/PlansPricingCta.vue'
-import HeroSection from '../components/legal/HeroSection.vue'
-import { getRoutes } from '../config/routes'
-
-const routes = getRoutes('en')
----
-
-<BaseLayout
-  title="Thanks for reaching out - Comfy"
-  description="Thanks for reaching out. Based on what you shared, one of our self-serve plans is probably a better fit."
-  noindex
->
-  <HeroSection title="Thanks for reaching out." class="text-center" />
-
-  <section class="-mt-8 px-6 pb-24 lg:-mt-12 lg:pb-40">
-    <div
-      class="text-primary-comfy-canvas mx-auto flex max-w-2xl flex-col gap-6 text-center text-base font-light lg:text-lg"
-    >
-      <p>
-        Based on what you shared, one of our self-serve plans is probably a
-        better fit.
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Standard</strong
-        >,
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Creator</strong
-        >, and
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Pro</strong
-        > for individual creators, plus our new
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Teams</strong
-        > plan for multiple users under shared billing.
-      </p>
-
-      <PlansPricingCta
-        href={routes.cloudPricing}
-        label="See plans and pricing →"
-      />
-
-      <p class="text-primary-warm-gray mt-8 text-sm">
-        Still think you have an enterprise need?<br /> We're happy to assist. Email: <a
-          href="mailto:gtm-team@comfy.org"
-          class="text-primary-comfy-yellow whitespace-nowrap underline underline-offset-4 hover:no-underline"
-          >gtm-team@comfy.org</a
-        >
-      </p>
-
-      <p class="text-primary-warm-gray text-sm">
-        Need help with something else? Email: <a
-          href="mailto:support@comfy.org"
-          class="text-primary-comfy-yellow whitespace-nowrap underline underline-offset-4 hover:no-underline"
-          >support@comfy.org</a
-        >
-      </p>
-    </div>
-  </section>
-</BaseLayout>

apps/website/src/pages/zh-CN/booking-confirmation.astro

@@ -1,54 +0,0 @@
----
-import BaseLayout from '../../layouts/BaseLayout.astro'
-import ResourceList from '../../components/booking-confirmation/ResourceList.vue'
-import HeroSection from '../../components/legal/HeroSection.vue'
-import { externalLinks, getRoutes } from '../../config/routes'
-
-const routes = getRoutes('zh-CN')
-
-const resources = [
-  {
-    label: '学习中心',
-    href: routes.learning,
-    display: 'comfy.org/learning'
-  },
-  {
-    label: '工作流模板',
-    href: externalLinks.workflows,
-    display: 'comfy.org/workflows'
-  },
-  {
-    label: '客户案例',
-    href: routes.customers,
-    display: 'comfy.org/customers'
-  },
-  {
-    label: '文档',
-    href: externalLinks.docs,
-    display: 'docs.comfy.org'
-  }
-]
----
-
-<BaseLayout
-  title="预约成功 - Comfy"
-  description="您的会议已预约成功。请查收邮件中的日历邀请和会议链接。"
-  noindex
->
-  <HeroSection title="预约成功。" class="text-center" />
-
-  <section class="-mt-8 px-6 pb-24 lg:-mt-12 lg:pb-40">
-    <div
-      class="text-primary-comfy-canvas mx-auto flex max-w-2xl flex-col gap-10 text-center text-base font-light lg:text-lg"
-    >
-      <p>请查收邮件中的日历邀请和会议链接！</p>
-
-      <div class="flex flex-col gap-4">
-        <h2 class="text-primary-comfy-yellow text-xl font-semibold italic lg:text-2xl">
-          等待期间的资源
-        </h2>
-        <ResourceList resources={resources} />
-      </div>
-    </div>
-  </section>
-</BaseLayout>

apps/website/src/pages/zh-CN/individual-submission.astro

@@ -1,57 +0,0 @@
----
-import BaseLayout from '../../layouts/BaseLayout.astro'
-import PlansPricingCta from '../../components/individual-submission/PlansPricingCta.vue'
-import HeroSection from '../../components/legal/HeroSection.vue'
-import { getRoutes } from '../../config/routes'
-
-const routes = getRoutes('zh-CN')
----
-
-<BaseLayout
-  title="感谢您的联系 - Comfy"
-  description="感谢您的联系。根据您提供的信息，我们的自助服务套餐之一可能更适合您。"
-  noindex
->
-  <HeroSection title="感谢您的联系。" class="text-center" />
-
-  <section class="-mt-8 px-6 pb-24 lg:-mt-12 lg:pb-40">
-    <div
-      class="text-primary-comfy-canvas mx-auto flex max-w-2xl flex-col gap-6 text-center text-base font-light lg:text-lg"
-    >
-      <p>
-        根据您提供的信息，我们的自助服务套餐之一可能更适合您。面向个人创作者的
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Standard</strong
-        >、
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Creator</strong
-        >
-        和
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Pro</strong
-        >，以及我们全新的
-        <strong class="text-primary-comfy-yellow font-semibold italic">
-          Teams</strong
-        > 套餐，可让多位用户共享账单。
-      </p>
-
-      <PlansPricingCta href={routes.cloudPricing} label="查看套餐与价格 →" />
-
-      <p class="text-primary-warm-gray mt-8 text-sm">
-        仍然认为您有企业级需求？我们很乐意为您提供帮助。邮箱：<a
-          href="mailto:gtm-team@comfy.org"
-          class="text-primary-comfy-yellow whitespace-nowrap underline underline-offset-4 hover:no-underline"
-          >gtm-team@comfy.org</a
-        >
-      </p>
-
-      <p class="text-primary-warm-gray text-sm">
-        需要其他方面的帮助？邮箱：<a
-          href="mailto:support@comfy.org"
-          class="text-primary-comfy-yellow whitespace-nowrap underline underline-offset-4 hover:no-underline"
-          >support@comfy.org</a
-        >
-      </p>
-    </div>
-  </section>
-</BaseLayout>

apps/website/src/scripts/posthog.test.ts

@@ -78,28 +78,3 @@ describe('captureDownloadClick', () => {
     expect(hoisted.mockCapture).not.toHaveBeenCalled()
   })
 })
-
-describe('captureMcpClientTabClick', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.resetModules()
-  })
-
-  it('captures the tab click with the client id', async () => {
-    const { initPostHog, captureMcpClientTabClick } = await import('./posthog')
-    initPostHog()
-    captureMcpClientTabClick('claude-code')
-
-    expect(hoisted.mockCapture).toHaveBeenCalledWith(
-      'website:mcp_client_tab_clicked',
-      { client: 'claude-code' }
-    )
-  })
-
-  it('does not capture before PostHog is initialized', async () => {
-    const { captureMcpClientTabClick } = await import('./posthog')
-    captureMcpClientTabClick('cursor')
-
-    expect(hoisted.mockCapture).not.toHaveBeenCalled()
-  })
-})

apps/website/src/scripts/posthog.ts

@@ -49,12 +49,3 @@ export function captureDownloadClick(platform: Platform) {
     console.error('PostHog download click capture failed', error)
   }
 }
-
-export function captureMcpClientTabClick(client: string) {
-  if (!initialized) return
-  try {
-    posthog.capture('website:mcp_client_tab_clicked', { client })
-  } catch (error) {
-    console.error('PostHog MCP client tab capture failed', error)
-  }
-}

apps/website/src/styles/global.css

@@ -251,15 +251,6 @@
   mask-position: center;
 }
 
-/* PP Formula has asymmetric vertical metrics
-   Shifting visually with `top` corrects the appearance without changing the
-   inline-block's bounding box, so button/badge sizes are unaffected. */
-@utility ppformula-text-center {
-  display: inline-block;
-  position: relative;
-  top: 0.1em;
-}
-
 /* Hide native play-button overlay iOS Safari shows when autoplay is blocked
    (e.g. Low Power Mode). These are decorative background videos. */
 video::-webkit-media-controls-start-playback-button,

apps/website/src/templates/drops/AnnouncementBanner.vue

@@ -39,9 +39,7 @@ const { isVisible, close, persistHidden } = useBannerDismissal(version)
           "
         >
           <div class="flex flex-wrap items-center gap-x-8 gap-y-2">
-            <p
-              class="text-primary-warm-white ppformula-text-center text-sm md:text-base/6"
-            >
+            <p class="text-primary-warm-white text-sm md:text-base/6">
               {{ data.title }}
               <span v-if="data.description" class="text-primary-warm-white/80">
                 {{ data.description }}

apps/website/src/templates/mcp/ComfyMcpDemo.vue

@@ -179,9 +179,7 @@ onUnmounted(() => {
             v-if="card.tag"
             class="font-formula relative isolate inline-flex h-8 shrink-0 items-center justify-center overflow-visible bg-transparent px-5 text-sm font-extrabold tracking-[0.7px] text-white/60 uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm before:bg-white/20"
           >
-            <span class="ppformula-text-center">
-              {{ card.tag }}
-            </span>
+            {{ card.tag }}
           </span>
 
           <Check

apps/website/src/templates/mcp/SetupSection.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
-import { computed, ref } from 'vue'
 
 import SectionHeader from '../../components/common/SectionHeader.vue'
-import VideoPlayer from '../../components/common/VideoPlayer.vue'
+import SectionLabel from '../../components/common/SectionLabel.vue'
 import CopyableField from '../../components/ui/copyable-field/CopyableField.vue'
 import { externalLinks } from '../../config/routes'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
-import { captureMcpClientTabClick } from '../../scripts/posthog'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const agentCommand = t('mcp.setup.agent.command', locale).replace(
+const agentCommand = t('mcp.setup.option1.command', locale).replace(
   '{url}',
   externalLinks.docsMcp
 )
@@ -23,35 +21,19 @@ interface McpClient {
   step: string
   command?: string
   link?: { label: string; href: string }
-  manualTitle?: string
-  showAgentCard: boolean
-  // Walkthrough clip shown in place of the agent card (source: docs.comfy.org/agent-tools/mcp)
-  video?: string
 }
 
 const clients: McpClient[] = [
+  {
+    id: 'claude-code',
+    name: 'Claude Code',
+    step: t('mcp.setup.clients.claudeCode.step', locale),
+    command: `claude mcp add --transport http comfy-cloud ${externalLinks.mcpEndpoint}`
+  },
   {
     id: 'claude-desktop',
     name: 'Claude Desktop',
-    step: t('mcp.setup.clients.claudeDesktop.step', locale),
-    manualTitle: t('mcp.setup.clients.claudeDesktop.manualTitle', locale),
-    showAgentCard: false,
-    video: '/videos/mcp/setup-claude-desktop-v1.mp4'
-  },
-  {
-    id: 'claude-code',
-    name: 'Claude Code Terminal',
-    step: t('mcp.setup.clients.claudeCode.step', locale),
-    command: `claude mcp add --transport http comfy-cloud ${externalLinks.mcpEndpoint}`,
-    showAgentCard: true
-  },
-  {
-    id: 'codex',
-    name: 'Codex',
-    step: t('mcp.setup.clients.codex.step', locale),
-    command: `codex mcp add comfy-cloud --url ${externalLinks.mcpEndpoint}`,
-    showAgentCard: false,
-    video: '/videos/mcp/setup-codex-oauth-v1.mp4'
+    step: t('mcp.setup.clients.claudeDesktop.step', locale)
   },
   {
     id: 'cursor',
@@ -60,15 +42,13 @@ const clients: McpClient[] = [
     link: {
       label: t('mcp.setup.clients.cursor.linkLabel', locale),
       href: externalLinks.apiKeys
-    },
-    showAgentCard: true
+    }
   },
   {
-    id: 'openclaw',
-    name: 'OpenClaw',
-    step: t('mcp.setup.clients.openclaw.step', locale),
-    command: `openclaw skills install @comfy-org/comfy\nopenclaw mcp set comfy '{"url":"${externalLinks.mcpEndpoint}","transport":"streamable-http","auth":"oauth"}'`,
-    showAgentCard: true
+    id: 'codex',
+    name: 'Codex',
+    step: t('mcp.setup.clients.codex.step', locale),
+    command: `codex mcp add comfy-cloud --url ${externalLinks.mcpEndpoint}`
   },
   {
     id: 'other',
@@ -77,38 +57,10 @@ const clients: McpClient[] = [
     link: {
       label: t('mcp.setup.clients.other.linkLabel', locale),
       href: externalLinks.docsMcp
-    },
-    showAgentCard: true
+    }
   }
 ]
 
-const activeClientId = ref(clients[0].id)
-const activeClient = computed(
-  () =>
-    clients.find((client) => client.id === activeClientId.value) ?? clients[0]
-)
-const manualTitle = computed(
-  () => activeClient.value.manualTitle ?? t('mcp.setup.manual.title', locale)
-)
-
-// reka-ui re-emits update:modelValue even when the value is unchanged
-// (re-clicking the active tab), so dedupe before capturing.
-let lastTrackedClientId: string | undefined
-function onClientTabChange(value: string | number | undefined) {
-  if (!value) return
-  const id = String(value)
-  if (id === lastTrackedClientId) return
-  lastTrackedClientId = id
-  captureMcpClientTabClick(id)
-}
-
-const walkthroughLabel = computed(() =>
-  t('mcp.setup.walkthroughAlt', locale).replace(
-    '{client}',
-    activeClient.value.name
-  )
-)
-
 const copyLabel = t('ui.copy', locale)
 const copiedLabel = t('ui.copied', locale)
 </script>
@@ -131,48 +83,77 @@ const copiedLabel = t('ui.copied', locale)
       </template>
     </SectionHeader>
 
-    <TabsRoot
-      v-model="activeClientId"
-      activation-mode="manual"
-      class="mt-10 block"
-      @update:model-value="onClientTabChange"
-    >
-      <TabsList
-        :aria-label="t('mcp.setup.manual.tabsLabel', locale)"
-        class="grid grid-cols-1 gap-px rounded-2xl border border-white/15 bg-primary-comfy-ink p-1 min-[360px]:grid-cols-2 lg:inline-flex lg:flex-nowrap"
+    <div class="mt-16 grid grid-cols-1 gap-6 lg:grid-cols-2">
+      <div
+        class="bg-transparency-white-t4 flex flex-col rounded-3xl p-6 lg:p-8"
       >
-        <TabsTrigger
-          v-for="client in clients"
-          :key="client.id"
-          :value="client.id"
-          class="focus-visible:ring-primary-comfy-yellow/50 data-[state=active]:bg-primary-comfy-yellow shrink-0 cursor-pointer rounded-lg bg-white/8 px-2 py-2.5 text-[10px] font-bold tracking-wider whitespace-nowrap text-smoke-700 uppercase transition-colors hover:text-primary-comfy-canvas focus-visible:ring-2 focus-visible:outline-none data-[state=active]:text-primary-comfy-ink lg:rounded-none lg:px-6 lg:text-xs lg:first:rounded-l-xl lg:last:rounded-r-xl"
+        <SectionLabel>{{ t('mcp.setup.option1.label', locale) }}</SectionLabel>
+        <h3
+          class="mt-3 text-xl font-light text-primary-comfy-canvas lg:text-2xl"
         >
-          {{ client.name }}
-        </TabsTrigger>
-      </TabsList>
+          {{ t('mcp.setup.option1.title', locale) }}
+        </h3>
+        <p class="mt-3 text-sm text-smoke-700">
+          {{ t('mcp.setup.option1.description', locale) }}
+        </p>
+        <div class="mt-6">
+          <CopyableField
+            :value="agentCommand"
+            :copy-label="copyLabel"
+            :copied-label="copiedLabel"
+          />
+        </div>
+        <p class="mt-auto pt-6 text-sm text-smoke-700">
+          {{ t('mcp.setup.skillsNote', locale)
+          }}<a
+            :href="externalLinks.mcpSkills"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="focus-visible:ring-primary-comfy-yellow/50 rounded-sm text-primary-comfy-canvas underline underline-offset-4 focus-visible:ring-2 focus-visible:outline-none"
+            >{{ t('mcp.setup.skillsLink', locale) }}</a
+          >
+        </p>
+      </div>
 
-      <div class="mt-10 grid grid-cols-1 gap-6 lg:grid-cols-2">
-        <div
-          class="bg-transparency-white-t4 flex flex-col rounded-3xl p-6 lg:p-8"
+      <div
+        class="bg-transparency-white-t4 flex flex-col rounded-3xl p-6 lg:p-8"
+      >
+        <SectionLabel>{{ t('mcp.setup.option2.label', locale) }}</SectionLabel>
+        <h3
+          class="mt-3 text-xl font-light text-primary-comfy-canvas lg:text-2xl"
         >
-          <h3 class="text-xl font-light text-primary-comfy-canvas lg:text-2xl">
-            {{ manualTitle }}
-          </h3>
-          <p class="mt-3 text-sm text-smoke-700">
-            {{ t('mcp.setup.manual.description', locale) }}
-          </p>
-          <div class="mt-6">
-            <CopyableField
-              :value="externalLinks.mcpEndpoint"
-              :copy-label="copyLabel"
-              :copied-label="copiedLabel"
-            />
-          </div>
+          {{ t('mcp.setup.option2.title', locale) }}
+        </h3>
+        <p class="mt-3 text-sm text-smoke-700">
+          {{ t('mcp.setup.option2.description', locale) }}
+        </p>
+        <div class="mt-6">
+          <CopyableField
+            :value="externalLinks.mcpEndpoint"
+            :copy-label="copyLabel"
+            :copied-label="copiedLabel"
+          />
+        </div>
+
+        <TabsRoot default-value="claude-code" class="mt-6">
+          <TabsList
+            :aria-label="t('mcp.setup.option2.tabsLabel', locale)"
+            class="flex flex-wrap gap-2"
+          >
+            <TabsTrigger
+              v-for="client in clients"
+              :key="client.id"
+              :value="client.id"
+              class="bg-transparency-white-t4 focus-visible:ring-primary-comfy-yellow/50 data-[state=active]:bg-primary-comfy-yellow cursor-pointer rounded-full px-4 py-2 text-xs font-bold tracking-wider text-smoke-700 uppercase transition-colors hover:text-primary-comfy-canvas focus-visible:ring-2 focus-visible:outline-none data-[state=active]:text-primary-comfy-ink"
+            >
+              {{ client.name }}
+            </TabsTrigger>
+          </TabsList>
           <TabsContent
             v-for="client in clients"
             :key="client.id"
             :value="client.id"
-            class="mt-6 flex min-h-36 flex-col gap-3"
+            class="mt-4 flex min-h-24 flex-col gap-3"
           >
             <p class="text-sm text-smoke-700">
               {{ client.step
@@ -192,57 +173,8 @@ const copiedLabel = t('ui.copied', locale)
               :copied-label="copiedLabel"
             />
           </TabsContent>
-        </div>
-
-        <div
-          class="bg-transparency-white-t4 flex flex-col rounded-3xl"
-          :class="
-            activeClient.showAgentCard
-              ? 'p-6 lg:p-8'
-              : 'relative overflow-hidden max-lg:aspect-video'
-          "
-        >
-          <template v-if="activeClient.showAgentCard">
-            <h3
-              class="text-xl font-light text-primary-comfy-canvas lg:text-2xl"
-            >
-              {{ t('mcp.setup.agent.title', locale) }}
-            </h3>
-            <p class="mt-3 text-sm text-smoke-700">
-              {{ t('mcp.setup.agent.description', locale) }}
-            </p>
-            <div class="mt-6">
-              <CopyableField
-                :value="agentCommand"
-                :copy-label="copyLabel"
-                :copied-label="copiedLabel"
-              />
-            </div>
-            <p class="mt-6 text-sm text-smoke-700">
-              {{ t('mcp.setup.skillsNote', locale)
-              }}<a
-                :href="externalLinks.mcpSkills"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="focus-visible:ring-primary-comfy-yellow/50 rounded-sm text-primary-comfy-canvas underline underline-offset-4 focus-visible:ring-2 focus-visible:outline-none"
-                >{{ t('mcp.setup.skillsLink', locale) }}</a
-              >
-            </p>
-          </template>
-          <VideoPlayer
-            v-else-if="activeClient.video"
-            :key="activeClient.id"
-            :locale="locale"
-            :aria-label="walkthroughLabel"
-            :src="activeClient.video"
-            autoplay
-            loop
-            hide-controls
-            fit="contain"
-            class="absolute inset-0 size-full bg-transparent"
-          />
-        </div>
+        </TabsRoot>
       </div>
-    </TabsRoot>
+    </div>
   </section>
 </template>

apps/website/vercel.json

@@ -54,11 +54,6 @@
       "source": "/press",
       "destination": "/about",
       "permanent": true
-    },
-    {
-      "source": "/login",
-      "destination": "https://cloud.comfy.org/login",
-      "permanent": false
     }
   ]
 }

browser_tests/fixtures/components/Actionbar.ts

@@ -8,13 +8,11 @@ export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
   public readonly propertiesButton: Locator
-  public readonly dragHandle: Locator
 
   constructor(public readonly page: Page) {
     this.root = page.locator('.actionbar-container')
     this.queueButton = new ComfyQueueButton(this)
     this.propertiesButton = this.root.getByLabel('Toggle properties panel')
-    this.dragHandle = this.root.locator('.drag-handle')
   }
 
   async isDocked() {

browser_tests/fixtures/components/FreeTierQuota.ts

@@ -1,21 +0,0 @@
-import type { Locator } from '@playwright/test'
-
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-export class FreeTierQuota {
-  readonly root: Locator
-
-  constructor(comfyPage: ComfyPage) {
-    this.root = comfyPage.page.getByTestId(TestIds.topbar.freeTierQuota)
-  }
-
-  async getMax() {
-    const text = await this.root.textContent()
-    return text?.match(/(\d+) \/ (\d+)/)?.[2]
-  }
-  async getAvailable() {
-    const text = await this.root.textContent()
-    return text?.match(/(\d+) \/ (\d+)/)?.[1]
-  }
-}

browser_tests/fixtures/helpers/MaskEditorHelper.ts

@@ -58,17 +58,6 @@ class MaskEditorHelper {
     return dialog
   }
 
-  async reopenDialog(): Promise<Locator> {
-    const imagePreview = this.page.locator('.image-preview').first()
-    await imagePreview.getByRole('region').hover()
-    await this.page.getByLabel('Edit or mask image').click()
-
-    const dialog = this.page.locator('.mask-editor-dialog')
-    await expect(dialog).toBeVisible()
-
-    return dialog
-  }
-
   async drawStrokeOnPointerZone(dialog: Locator) {
     const pointerZone = dialog.getByTestId('pointer-zone')
     await expect(pointerZone).toBeVisible()

browser_tests/fixtures/selectors.ts

@@ -103,8 +103,7 @@ export const TestIds = {
     loginButtonPopoverLearnMore: 'login-button-popover-learn-more',
     workflowTabs: 'topbar-workflow-tabs',
     integratedTabBarActions: 'integrated-tab-bar-actions',
-    actionBarButtons: 'action-bar-buttons',
-    freeTierQuota: 'free-tier-quota'
+    actionBarButtons: 'action-bar-buttons'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'

browser_tests/tests/dialogs/pricingTableDeepLink.spec.ts

@@ -28,11 +28,11 @@ 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'
 
-// billing_control_enabled routes personal workspaces to the unified pricing
-// table asserted here; without it they fall back to the legacy table.
+// 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,
-  billing_control_enabled: true
+  consolidated_billing_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

browser_tests/tests/freeTierQuota.spec.ts

@@ -1,63 +0,0 @@
-import { expect, mergeTests } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
-import { FreeTierQuota } from '@e2e/fixtures/components/FreeTierQuota'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-
-const wstest = mergeTests(test, webSocketFixture)
-
-test.describe('Free Tier Quota', { tag: ['@cloud', '@vue-nodes'] }, () => {
-  test.beforeEach(async ({ page }) => {
-    const features = {
-      free_tier_job_allowance_enabled: true,
-      free_tier_balance: { allowance: 5, remaining: 3, used: 0 }
-    }
-    await page.route('**/api/features', (r) => r.fulfill(jsonRoute(features)))
-  })
-
-  wstest('Free Tier Quota', async ({ comfyPage, comfyMouse, getWebSocket }) => {
-    const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-    const freeTierQuota = new FreeTierQuota(comfyPage)
-
-    await test.step('Populates initial state from config', async () => {
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe('3')
-      expect(await freeTierQuota.getMax()).toBe('5')
-    })
-
-    await test.step('available decrements on run', async () => {
-      await execution.run()
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
-    })
-
-    await test.step('connects to detached run button', async () => {
-      const handle = comfyPage.actionbar.dragHandle
-      await comfyMouse.dragElementBy(handle, { x: -100, y: 100 })
-      await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(false)
-      expect(await freeTierQuota.getAvailable()).toBe('2')
-      await comfyMouse.dragElementBy(handle, { x: 100, y: -100 })
-      await expect.poll(() => comfyPage.actionbar.isDocked()).toBe(true)
-    })
-
-    await test.step('Detects workflows with Partner nodes', async () => {
-      await comfyPage.searchBoxV2.addNode('Node With Price Badge')
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Price Badge')
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
-      await node.delete()
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe('2')
-    })
-
-    await test.step('Does not decrease past 0', async () => {
-      await execution.run()
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe('1')
-      await execution.run()
-      await expect.poll(() => freeTierQuota.getAvailable()).toBe(undefined)
-      await execution.run()
-      await execution.run()
-      await execution.run()
-      await comfyPage.nextFrame()
-      expect(await freeTierQuota.getAvailable()).toBe(undefined)
-    })
-  })
-})

browser_tests/tests/maskEditorLoadSave.spec.ts

@@ -67,22 +67,6 @@ test.describe('Mask Editor load/save', { tag: '@vue-nodes' }, () => {
     await expect(dialog).toBeVisible()
   })
 
-  test('Reopening the editor after save restores the drawn mask', async ({
-    maskEditor
-  }) => {
-    const dialog = await maskEditor.openDialog()
-    await maskEditor.drawStrokeAndExpectPixels(dialog)
-    const savedMask = await maskEditor.getCanvasSnapshot(MASK_CANVAS_INDEX)
-
-    await dialog.getByRole('button', { name: 'Save' }).click()
-    await expect(dialog).toBeHidden()
-
-    await maskEditor.reopenDialog()
-    await expect
-      .poll(() => maskEditor.getCanvasSnapshot(MASK_CANVAS_INDEX))
-      .toBe(savedMask)
-  })
-
   test('Save failure keeps dialog open', async ({ comfyPage, maskEditor }) => {
     const dialog = await maskEditor.openDialog()
     await maskEditor.drawStrokeAndExpectPixels(dialog)

package.json

@@ -29,8 +29,6 @@
     "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",
-    "fallow": "fallow",
-    "fallow:audit": "fallow audit",
     "format:check": "oxfmt --check",
     "format": "oxfmt --write",
     "json-schema": "tsx scripts/generate-json-schema.ts",
@@ -174,7 +172,6 @@
     "eslint-plugin-testing-library": "catalog:",
     "eslint-plugin-unused-imports": "catalog:",
     "eslint-plugin-vue": "catalog:",
-    "fallow": "catalog:",
     "fast-check": "catalog:",
     "fs-extra": "^11.2.0",
     "globals": "catalog:",

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

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import {
   appendWorkflowJsonExt,
   ensureWorkflowSuffix,
+  escapeVueI18nMessageSyntax,
   formatLocalizedMediumDate,
   formatLocalizedNumber,
   getFilePathSeparatorVariants,
@@ -477,4 +478,49 @@ describe('formatUtil', () => {
       expect(formatLocalizedMediumDate('not a date', 'en')).toBe('—')
     })
   })
+
+  describe('escapeVueI18nMessageSyntax', () => {
+    it('escapes a literal @ that would break linked-message compilation', () => {
+      expect(
+        escapeVueI18nMessageSyntax('clips (tagged @Audio1-3 in the prompt)')
+      ).toBe("clips (tagged {'@'}Audio1-3 in the prompt)")
+    })
+
+    it('escapes @ in an email address', () => {
+      expect(escapeVueI18nMessageSyntax('support@comfy.org')).toBe(
+        "support{'@'}comfy.org"
+      )
+    })
+
+    it('escapes interpolation braces', () => {
+      expect(escapeVueI18nMessageSyntax('size {w}x{h}')).toBe(
+        "size {'{'}w{'}'}x{'{'}h{'}'}"
+      )
+    })
+
+    it('escapes the plural pipe separator', () => {
+      expect(escapeVueI18nMessageSyntax('foreground | background')).toBe(
+        "foreground {'|'} background"
+      )
+    })
+
+    it('escapes the modulo percent so it cannot re-form %{', () => {
+      expect(escapeVueI18nMessageSyntax('50%{done}')).toBe(
+        "50{'%'}{'{'}done{'}'}"
+      )
+    })
+
+    it('escapes every occurrence in a single pass', () => {
+      expect(escapeVueI18nMessageSyntax('@a @b @c')).toBe(
+        "{'@'}a {'@'}b {'@'}c"
+      )
+    })
+
+    it('leaves strings without syntax characters unchanged', () => {
+      expect(escapeVueI18nMessageSyntax('no special chars here')).toBe(
+        'no special chars here'
+      )
+      expect(escapeVueI18nMessageSyntax('')).toBe('')
+    })
+  })
 })

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

@@ -178,6 +178,40 @@ export function normalizeI18nKey(key: string) {
   return typeof key === 'string' ? key.replace(/\./g, '_') : ''
 }
 
+/**
+ * Characters that vue-i18n's message compiler treats as syntax in message text,
+ * so plain text has to escape them to render verbatim through `t()`/`st()`:
+ *
+ * - `@` starts a linked-message reference (`@:key`); malformed usage throws
+ *   `Invalid linked format`.
+ * - `{` / `}` delimit interpolation (`{name}`, `{'literal'}`); an unbalanced
+ *   brace throws `Unterminated/Unbalanced closing brace`.
+ * - `|` separates plural branches, so `a | b` silently renders as one branch.
+ * - `%` forms modulo interpolation when immediately followed by `{` (`%{name}`);
+ *   it must be escaped too, otherwise escaping a following `{` re-forms `%{`.
+ *
+ * The set is a build-inlined `const enum` (`TokenChars`) in
+ * `@intlify/message-compiler` and is not exported, so it is hardcoded here.
+ *
+ * @see https://vue-i18n.intlify.dev/guide/essentials/syntax (Special Characters, Literal interpolation)
+ * @see https://vue-i18n.intlify.dev/guide/essentials/pluralization
+ */
+const VUE_I18N_SYNTAX_CHARS = /[@{}|%]/g
+
+/**
+ * Escapes vue-i18n message-syntax characters as literal interpolations (`{'x'}`)
+ * so arbitrary text renders verbatim instead of being parsed as syntax. This is
+ * the only escape vue-i18n supports; see {@link VUE_I18N_SYNTAX_CHARS}.
+ *
+ * Only apply to values read through the compiler (`t()`/`st()`). Values read raw
+ * via `tm()`/`stRaw()` (e.g. node tooltips) must be left untouched, or the
+ * literal `{'x'}` would surface to users. Apply exactly once to raw text: the
+ * escape output itself contains `{`/`}`, so it is not idempotent.
+ */
+export function escapeVueI18nMessageSyntax(text: string): string {
+  return text.replace(VUE_I18N_SYNTAX_CHARS, (char) => `{'${char}'}`)
+}
+
 /**
  * Takes a dynamic prompt in the format {opt1|opt2|{optA|optB}|} and randomly replaces groups. Supports C style comments.
  * @param input The dynamic prompt to process

pnpm-lock.yaml

@@ -240,9 +240,6 @@ catalogs:
     eslint-plugin-vue:
       specifier: ^10.9.1
       version: 10.9.1
-    fallow:
-      specifier: ^2.102.0
-      version: 2.102.0
     fast-check:
       specifier: ^4.5.3
       version: 4.5.3
@@ -766,9 +763,6 @@ importers:
       eslint-plugin-vue:
         specifier: 'catalog:'
         version: 10.9.1(@typescript-eslint/parser@8.60.0(eslint@10.4.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.4.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.4.0(jiti@2.6.1)))
-      fallow:
-        specifier: 'catalog:'
-        version: 2.102.0
       fast-check:
         specifier: 'catalog:'
         version: 4.5.3
@@ -1914,46 +1908,6 @@ packages:
       '@exodus/crypto':
         optional: true
 
-  '@fallow-cli/darwin-arm64@2.102.0':
-    resolution: {integrity: sha512-B8wzfzJgoX6h5Gv2xQ9ZidO5Jb8/PWdssAxYbWs1pb5oJHZ6S5PLwXuUdINmNSIaRGQwTk4DC9/tIMFHFvd9uw==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@fallow-cli/darwin-x64@2.102.0':
-    resolution: {integrity: sha512-aLbTWWzQnleKdi56obAPXMJm7YA3qAnkIX9T3eocRHiagYqp8nsf4cslM0rZKvu2WwK34NaBm8x886gl4cl+zg==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@fallow-cli/linux-arm64-gnu@2.102.0':
-    resolution: {integrity: sha512-8nYeOSLSewqcKH/KUcKZaCq5QII5VTRX62l60B6UM1iKe/0jcmlQ2mOtx4rkHpeq3LL5emvT/ph4NNgGmWKSBg==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@fallow-cli/linux-arm64-musl@2.102.0':
-    resolution: {integrity: sha512-2Zi33PXzZxD7HU5sPVwyElZGP7zyEdGo4hK0ewy6gMYgQ9BDfLnFhgaSSOzN1J4paIhYtBmVsLmqakyDKy22Jw==}
-    cpu: [arm64]
-    os: [linux]
-
-  '@fallow-cli/linux-x64-gnu@2.102.0':
-    resolution: {integrity: sha512-7Hys4X6hKuR/lqUaGXwezRzDrwXwu9KfahUy85WTuiG1to+ZbzDCqdbZ04LtnI8kK8ufrPDcq+ZXdyt5ksOJHA==}
-    cpu: [x64]
-    os: [linux]
-
-  '@fallow-cli/linux-x64-musl@2.102.0':
-    resolution: {integrity: sha512-RuDY1jOEPgJOuHBgEpHVl6J7Xf2QLFklnNy6zO1nw8R1fLgWUAAKlFirn1Y93pb9bXzqpn5Gre3YlhgIZ3+LBA==}
-    cpu: [x64]
-    os: [linux]
-
-  '@fallow-cli/win32-arm64-msvc@2.102.0':
-    resolution: {integrity: sha512-wsvHjLzWFvsYmCqnQLm1doSEHb9Z038+sFp1RzMcffPUBC5tqS3vCr8J8nolcLlPk7o3QWHQMXAqb1xSJe+doA==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@fallow-cli/win32-x64-msvc@2.102.0':
-    resolution: {integrity: sha512-rH1hd0PD0mm6pCxh1pw5jubpJsvV6f5rjixMoD5AZLzWa6NPJBpPPuzruLGtH/9CYy8B0y7zPrGGTKRO2PCGzg==}
-    cpu: [x64]
-    os: [win32]
-
   '@firebase/analytics-compat@0.2.18':
     resolution: {integrity: sha512-Hw9mzsSMZaQu6wrTbi3kYYwGw9nBqOHr47pVLxfr5v8CalsdrG5gfs9XUlPOZjHRVISp3oQrh1j7d3E+ulHPjQ==}
     peerDependencies:
@@ -5728,11 +5682,6 @@ packages:
   extendable-media-recorder@9.2.27:
     resolution: {integrity: sha512-2X+Ixi1cxLek0Cj9x9atmhQ+apG+LwJpP2p3ypP8Pxau0poDnicrg7FTfPVQV5PW/3DHFm/eQ16vbgo5Yk3HGQ==}
 
-  fallow@2.102.0:
-    resolution: {integrity: sha512-bkOT58kPVCB12d2apQjIKBw/qSdsGRPQFrN5ff9Yl5WzXRqlDTbT/MVdMXld4sJD5JQW1ftw2bTxJWCINggh6g==}
-    engines: {node: '>=16'}
-    hasBin: true
-
   fast-check@4.5.3:
     resolution: {integrity: sha512-IE9csY7lnhxBnA8g/WI5eg/hygA6MGWJMSNfFRrBlXUciADEhS1EDB0SIsMSvzubzIlOBbVITSsypCsW717poA==}
     engines: {node: '>=12.17.0'}
@@ -10095,30 +10044,6 @@ snapshots:
 
   '@exodus/bytes@1.7.0': {}
 
-  '@fallow-cli/darwin-arm64@2.102.0':
-    optional: true
-
-  '@fallow-cli/darwin-x64@2.102.0':
-    optional: true
-
-  '@fallow-cli/linux-arm64-gnu@2.102.0':
-    optional: true
-
-  '@fallow-cli/linux-arm64-musl@2.102.0':
-    optional: true
-
-  '@fallow-cli/linux-x64-gnu@2.102.0':
-    optional: true
-
-  '@fallow-cli/linux-x64-musl@2.102.0':
-    optional: true
-
-  '@fallow-cli/win32-arm64-msvc@2.102.0':
-    optional: true
-
-  '@fallow-cli/win32-x64-msvc@2.102.0':
-    optional: true
-
   '@firebase/analytics-compat@0.2.18(@firebase/app-compat@0.2.53)(@firebase/app@0.11.4)':
     dependencies:
       '@firebase/analytics': 0.10.12(@firebase/app@0.11.4)
@@ -14170,19 +14095,6 @@ snapshots:
       subscribable-things: 2.1.53
       tslib: 2.8.1
 
-  fallow@2.102.0:
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      '@fallow-cli/darwin-arm64': 2.102.0
-      '@fallow-cli/darwin-x64': 2.102.0
-      '@fallow-cli/linux-arm64-gnu': 2.102.0
-      '@fallow-cli/linux-arm64-musl': 2.102.0
-      '@fallow-cli/linux-x64-gnu': 2.102.0
-      '@fallow-cli/linux-x64-musl': 2.102.0
-      '@fallow-cli/win32-arm64-msvc': 2.102.0
-      '@fallow-cli/win32-x64-msvc': 2.102.0
-
   fast-check@4.5.3:
     dependencies:
       pure-rand: 7.0.1

pnpm-workspace.yaml

@@ -89,7 +89,6 @@ catalog:
   eslint-plugin-testing-library: ^7.16.1
   eslint-plugin-unused-imports: ^4.4.1
   eslint-plugin-vue: ^10.9.1
-  fallow: ^2.102.0
   fast-check: ^4.5.3
   firebase: ^11.6.0
   glob: ^13.0.6

scripts/collect-i18n-node-defs.ts

@@ -3,9 +3,11 @@ import * as fs from 'fs'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
+import {
+  escapeVueI18nMessageSyntax,
+  normalizeI18nKey
+} from '@/utils/formatUtil'
 import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
-import type { WidgetLabels } from './nodeDefLocaleSerializer'
-import { serializeNodeDefLocales } from './nodeDefLocaleSerializer'
 
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'
@@ -15,6 +17,10 @@ interface WidgetInfo {
   label?: string
 }
 
+interface WidgetLabels {
+  [key: string]: Record<string, { name: string }>
+}
+
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
   await comfyPage.page.route('**/view**', async (route) => {
@@ -41,6 +47,26 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     }
   )
 
+  const allDataTypesLocale = Object.fromEntries(
+    nodeDefs
+      .flatMap((nodeDef) => {
+        const inputDataTypes = Object.values(nodeDef.inputs).map(
+          (inputSpec) => inputSpec.type
+        )
+        const outputDataTypes = nodeDef.outputs.map(
+          (outputSpec) => outputSpec.type
+        )
+        const allDataTypes = [...inputDataTypes, ...outputDataTypes].flatMap(
+          (type: string) => type.split(',')
+        )
+        return allDataTypes.map((dataType) => [
+          normalizeI18nKey(dataType),
+          escapeVueI18nMessageSyntax(dataType)
+        ])
+      })
+      .sort((a, b) => a[0].localeCompare(b[0]))
+  )
+
   async function extractWidgetLabels() {
     const nodeLabels: WidgetLabels = {}
 
@@ -69,10 +95,14 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
           [nodeDef.name, nodeDef.display_name, inputNames]
         )
 
+        // Format runtime widgets
         const runtimeWidgets = Object.fromEntries(
           Object.entries(widgetsMappings)
             .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([key, name]) => [key, { name }])
+            .map(([key, value]) => [
+              normalizeI18nKey(key),
+              { name: value ? escapeVueI18nMessageSyntax(value) : value }
+            ])
         )
 
         if (Object.keys(runtimeWidgets).length > 0) {
@@ -91,8 +121,97 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   }
 
   const nodeDefLabels = await extractWidgetLabels()
-  const { dataTypes, nodeCategories, nodeDefinitions } =
-    serializeNodeDefLocales(nodeDefs, nodeDefLabels)
+
+  function extractInputs(nodeDef: ComfyNodeDefImpl) {
+    const inputs = Object.fromEntries(
+      Object.values(nodeDef.inputs).flatMap((input) => {
+        const name =
+          input.name === undefined
+            ? undefined
+            : escapeVueI18nMessageSyntax(input.name)
+        const tooltip = input.tooltip
+
+        if (name === undefined && tooltip === undefined) {
+          return []
+        }
+
+        return [
+          [
+            normalizeI18nKey(input.name),
+            {
+              name,
+              tooltip
+            }
+          ]
+        ]
+      })
+    )
+    return Object.keys(inputs).length > 0 ? inputs : undefined
+  }
+
+  function extractOutputs(nodeDef: ComfyNodeDefImpl) {
+    const outputs = Object.fromEntries(
+      nodeDef.outputs.flatMap((output, i) => {
+        // Ignore data types if they are already translated in allDataTypesLocale.
+        const name =
+          output.name === undefined || output.name in allDataTypesLocale
+            ? undefined
+            : escapeVueI18nMessageSyntax(output.name)
+        const tooltip = output.tooltip
+
+        if (name === undefined && tooltip === undefined) {
+          return []
+        }
+
+        return [
+          [
+            i.toString(),
+            {
+              name,
+              tooltip
+            }
+          ]
+        ]
+      })
+    )
+    return Object.keys(outputs).length > 0 ? outputs : undefined
+  }
+
+  const allNodeDefsLocale = Object.fromEntries(
+    nodeDefs
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((nodeDef) => {
+        const inputs = {
+          ...extractInputs(nodeDef),
+          ...(nodeDefLabels[nodeDef.name] ?? {})
+        }
+
+        return [
+          normalizeI18nKey(nodeDef.name),
+          {
+            display_name: escapeVueI18nMessageSyntax(
+              nodeDef.display_name ?? nodeDef.name
+            ),
+            description: nodeDef.description
+              ? escapeVueI18nMessageSyntax(nodeDef.description)
+              : undefined,
+            inputs: Object.keys(inputs).length > 0 ? inputs : undefined,
+            outputs: extractOutputs(nodeDef)
+          }
+        ]
+      })
+  )
+
+  const allNodeCategoriesLocale = Object.fromEntries(
+    nodeDefs.flatMap((nodeDef) =>
+      nodeDef.category
+        .split('/')
+        .map((category) => [
+          normalizeI18nKey(category),
+          escapeVueI18nMessageSyntax(category)
+        ])
+    )
+  )
 
   const locale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
   fs.writeFileSync(
@@ -100,13 +219,13 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     JSON.stringify(
       {
         ...locale,
-        dataTypes,
-        nodeCategories
+        dataTypes: allDataTypesLocale,
+        nodeCategories: allNodeCategoriesLocale
       },
       null,
       2
     )
   )
 
-  fs.writeFileSync(nodeDefsPath, JSON.stringify(nodeDefinitions, null, 2))
+  fs.writeFileSync(nodeDefsPath, JSON.stringify(allNodeDefsLocale, null, 2))
 })

scripts/nodeDefLocaleSerializer.test.ts

@@ -1,130 +0,0 @@
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it } from 'vitest'
-
-import { serializeNodeDefLocales } from './nodeDefLocaleSerializer'
-
-function render(message: string): string {
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: { en: { value: message } }
-  })
-  return i18n.global.t('value')
-}
-
-describe('serializeNodeDefLocales', () => {
-  it('escapes compiled fields and preserves raw tooltips', () => {
-    const syntax = '@ $ {value} | 50%{done}'
-    const inputName = `Input ${syntax}`
-    const outputName = `Output ${syntax}`
-    const dataType = `TYPE ${syntax}`
-    const category = `Category ${syntax}`
-    const nodeDef = {
-      name: 'Test.Node',
-      display_name: `Display ${syntax}`,
-      description: `Description ${syntax}`,
-      category,
-      inputs: {
-        input: {
-          name: inputName,
-          type: dataType,
-          tooltip: `Input tooltip ${syntax}`
-        }
-      },
-      outputs: [
-        {
-          name: outputName,
-          type: 'OTHER',
-          tooltip: `Output tooltip ${syntax}`
-        }
-      ]
-    }
-
-    const { dataTypes, nodeCategories, nodeDefinitions } =
-      serializeNodeDefLocales([nodeDef], {
-        'Test.Node': {
-          'Runtime.Widget': { name: `Widget ${syntax}` }
-        }
-      })
-    const serializedNode = nodeDefinitions.Test_Node
-    const serializedInput =
-      serializedNode.inputs['Input @ $ {value} | 50%{done}']
-    const serializedOutput = serializedNode.outputs['0']
-
-    expect(render(serializedNode.display_name)).toBe(nodeDef.display_name)
-    expect(render(serializedNode.description)).toBe(nodeDef.description)
-    expect(render(serializedInput.name)).toBe(inputName)
-    expect(render(serializedOutput.name)).toBe(outputName)
-    expect(render(serializedNode.inputs.Runtime_Widget.name)).toBe(
-      `Widget ${syntax}`
-    )
-    expect(render(dataTypes[dataType])).toBe(dataType)
-    expect(render(nodeCategories[category])).toBe(category)
-    expect(serializedInput.tooltip).toBe(nodeDef.inputs.input.tooltip)
-    expect(serializedOutput.tooltip).toBe(nodeDef.outputs[0].tooltip)
-  })
-
-  it('preserves locale shapes and ordering', () => {
-    const { dataTypes, nodeCategories, nodeDefinitions } =
-      serializeNodeDefLocales(
-        [
-          {
-            name: 'Z.Node',
-            description: '',
-            category: 'group/sub.group',
-            inputs: {
-              omitted: { type: 'Z.TYPE' },
-              tooltipOnly: { type: 'A_TYPE', tooltip: 'raw @ tooltip' }
-            },
-            outputs: [
-              { name: 'A_TYPE', type: 'A_TYPE' },
-              { name: 'Custom.Output', type: 'Z.TYPE' },
-              { tooltip: 'raw output @ tooltip', type: 'Z.TYPE' }
-            ]
-          },
-          {
-            name: 'A.Node',
-            category: 'group',
-            inputs: {},
-            outputs: []
-          }
-        ],
-        {
-          'Z.Node': {
-            'Runtime.Widget': { name: 'Runtime.Label' }
-          }
-        }
-      )
-
-    expect(dataTypes).toEqual({
-      A_TYPE: 'A_TYPE',
-      Z_TYPE: 'Z.TYPE'
-    })
-    expect(nodeCategories).toEqual({
-      group: 'group',
-      sub_group: 'sub.group'
-    })
-    expect(nodeDefinitions).toEqual({
-      A_Node: {
-        display_name: 'A.Node',
-        description: undefined,
-        inputs: undefined,
-        outputs: undefined
-      },
-      Z_Node: {
-        display_name: 'Z.Node',
-        description: undefined,
-        inputs: {
-          '': { name: undefined, tooltip: 'raw @ tooltip' },
-          Runtime_Widget: { name: 'Runtime.Label' }
-        },
-        outputs: {
-          1: { name: 'Custom.Output', tooltip: undefined },
-          2: { name: undefined, tooltip: 'raw output @ tooltip' }
-        }
-      }
-    })
-    expect(Object.keys(dataTypes)).toEqual(['A_TYPE', 'Z_TYPE'])
-    expect(Object.keys(nodeDefinitions)).toEqual(['A_Node', 'Z_Node'])
-  })
-})

scripts/nodeDefLocaleSerializer.ts

@@ -1,127 +0,0 @@
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-interface LocalizableInput {
-  type: string
-  name?: string
-  tooltip?: string
-}
-
-interface LocalizableOutput {
-  type: string
-  name?: string
-  tooltip?: string
-}
-
-interface LocalizableNodeDef {
-  category: string
-  inputs: Record<string, LocalizableInput>
-  name: string
-  outputs: LocalizableOutput[]
-  description?: string
-  display_name?: string
-}
-
-export type WidgetLabels = Record<
-  string,
-  Record<string, { name: string | undefined }>
->
-
-const VUE_I18N_SYNTAX_CHARS = /[@${}|%]/g
-
-function escapeMessage(text: string): string {
-  return text.replace(VUE_I18N_SYNTAX_CHARS, (char) => `{'${char}'}`)
-}
-
-export function serializeNodeDefLocales(
-  nodeDefs: readonly LocalizableNodeDef[],
-  widgetLabels: WidgetLabels = {}
-) {
-  const dataTypes = Object.fromEntries(
-    nodeDefs
-      .flatMap((nodeDef) => [
-        ...Object.values(nodeDef.inputs).map(({ type }) => type),
-        ...nodeDef.outputs.map(({ type }) => type)
-      ])
-      .flatMap((type) => type.split(','))
-      .map((dataType) => [normalizeI18nKey(dataType), escapeMessage(dataType)])
-      .sort((a, b) => a[0].localeCompare(b[0]))
-  )
-
-  function serializeInputs(nodeDef: LocalizableNodeDef) {
-    const inputs = Object.fromEntries(
-      Object.values(nodeDef.inputs).flatMap(({ name, tooltip }) => {
-        if (name === undefined && tooltip === undefined) return []
-
-        return [
-          [
-            normalizeI18nKey(name ?? ''),
-            {
-              name: name === undefined ? undefined : escapeMessage(name),
-              tooltip
-            }
-          ]
-        ]
-      })
-    )
-    return Object.keys(inputs).length > 0 ? inputs : undefined
-  }
-
-  function serializeOutputs(nodeDef: LocalizableNodeDef) {
-    const outputs = Object.fromEntries(
-      nodeDef.outputs.flatMap(({ name, tooltip }, index) => {
-        const serializedName =
-          name === undefined || name in dataTypes
-            ? undefined
-            : escapeMessage(name)
-        if (serializedName === undefined && tooltip === undefined) return []
-
-        return [[index.toString(), { name: serializedName, tooltip }]]
-      })
-    )
-    return Object.keys(outputs).length > 0 ? outputs : undefined
-  }
-
-  function serializeWidgetLabels(nodeName: string) {
-    return Object.fromEntries(
-      Object.entries(widgetLabels[nodeName] ?? {}).map(([name, label]) => [
-        normalizeI18nKey(name),
-        {
-          name: label.name === undefined ? undefined : escapeMessage(label.name)
-        }
-      ])
-    )
-  }
-
-  const nodeDefinitions = Object.fromEntries(
-    [...nodeDefs]
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map((nodeDef) => {
-        const inputs = {
-          ...serializeInputs(nodeDef),
-          ...serializeWidgetLabels(nodeDef.name)
-        }
-
-        return [
-          normalizeI18nKey(nodeDef.name),
-          {
-            display_name: escapeMessage(nodeDef.display_name ?? nodeDef.name),
-            description: nodeDef.description
-              ? escapeMessage(nodeDef.description)
-              : undefined,
-            inputs: Object.keys(inputs).length > 0 ? inputs : undefined,
-            outputs: serializeOutputs(nodeDef)
-          }
-        ]
-      })
-  )
-
-  const nodeCategories = Object.fromEntries(
-    nodeDefs.flatMap(({ category }) =>
-      category
-        .split('/')
-        .map((part) => [normalizeI18nKey(part), escapeMessage(part)])
-    )
-  )
-
-  return { dataTypes, nodeCategories, nodeDefinitions }
-}

src/components/TopMenuSection.test.ts

@@ -629,7 +629,7 @@ describe('TopMenuSection', () => {
       await nextTick()
 
       expect(querySpy).toHaveBeenCalledTimes(1)
-      expect(actionbarContainer!.classList).not.toContain('w-0')
+      expect(actionbarContainer!.classList).toContain('px-2')
     } finally {
       unmount()
       vi.unstubAllGlobals()

src/components/TopMenuSection.vue

@@ -11,7 +11,7 @@
       </div>
 
       <div class="mx-1 flex flex-col items-end gap-1">
-        <div class="flex items-start gap-2">
+        <div class="flex items-center gap-2">
           <div
             v-if="managerState.shouldShowManagerButtons.value || isCloud"
             class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
@@ -34,75 +34,61 @@
             </Button>
           </div>
 
-          <div
-            class="pointer-events-auto z-1 flex flex-col rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 py-1.75 shadow-interface"
-          >
+          <div ref="actionbarContainerRef" :class="actionbarContainerClass">
+            <ActionBarButtons />
+            <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
             <div
-              ref="actionbarContainerRef"
-              :class="
-                cn(
-                  'actionbar-container relative flex items-center gap-2',
-                  isActionbarContainerEmpty &&
-                    '-ml-2 w-0 min-w-0 border-transparent shadow-none has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
-                )
-              "
-            >
-              <ActionBarButtons />
-              <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
-              <div
-                ref="legacyCommandsContainerRef"
-                data-testid="legacy-topbar-container"
-                class="[&:not(:has(*>*:not(:empty)))]:hidden"
-              ></div>
+              ref="legacyCommandsContainerRef"
+              data-testid="legacy-topbar-container"
+              class="[&:not(:has(*>*:not(:empty)))]:hidden"
+            ></div>
 
-              <ComfyActionbar
-                :top-menu-container="actionbarContainerRef"
-                :queue-overlay-expanded="isQueueOverlayExpanded"
-                @update:progress-target="updateProgressTarget"
-              />
-              <CurrentUserButton
-                v-if="isLoggedIn && !isIntegratedTabBar"
-                class="shrink-0"
-              />
-              <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+            <ComfyActionbar
+              :top-menu-container="actionbarContainerRef"
+              :queue-overlay-expanded="isQueueOverlayExpanded"
+              @update:progress-target="updateProgressTarget"
+            />
+            <CurrentUserButton
+              v-if="isLoggedIn && !isIntegratedTabBar"
+              class="shrink-0"
+            />
+            <LoginButton v-else-if="isDesktop && !isIntegratedTabBar" />
+            <Button
+              v-if="isCloud && flags.workflowSharingEnabled"
+              v-tooltip.bottom="shareTooltipConfig"
+              variant="secondary"
+              :aria-label="t('actionbar.shareTooltip')"
+              @click="() => openShareDialog().catch(toastErrorHandler)"
+              @pointerenter="prefetchShareDialog"
+            >
+              <i class="icon-[comfy--send] size-4" />
+              <span class="not-md:hidden">
+                {{ t('actionbar.share') }}
+              </span>
+            </Button>
+            <div v-if="!isRightSidePanelOpen" class="relative">
               <Button
-                v-if="isCloud && flags.workflowSharingEnabled"
-                v-tooltip.bottom="shareTooltipConfig"
+                v-tooltip.bottom="rightSidePanelTooltipConfig"
+                :class="
+                  cn(
+                    showErrorIndicatorOnPanelButton &&
+                      'outline-1 outline-destructive-background'
+                  )
+                "
                 variant="secondary"
-                :aria-label="t('actionbar.shareTooltip')"
-                @click="() => openShareDialog().catch(toastErrorHandler)"
-                @pointerenter="prefetchShareDialog"
+                size="icon"
+                :aria-label="t('rightSidePanel.togglePanel')"
+                @click="openRightSidePanel"
               >
-                <i class="icon-[comfy--send] size-4" />
-                <span class="not-md:hidden">
-                  {{ t('actionbar.share') }}
-                </span>
+                <i class="icon-[lucide--panel-right] size-4" />
               </Button>
-              <div v-if="!isRightSidePanelOpen" class="relative">
-                <Button
-                  v-tooltip.bottom="rightSidePanelTooltipConfig"
-                  :class="
-                    cn(
-                      showErrorIndicatorOnPanelButton &&
-                        'outline-1 outline-destructive-background'
-                    )
-                  "
-                  variant="secondary"
-                  size="icon"
-                  :aria-label="t('rightSidePanel.togglePanel')"
-                  @click="openRightSidePanel"
-                >
-                  <i class="icon-[lucide--panel-right] size-4" />
-                </Button>
-                <StatusBadge
-                  v-if="showErrorIndicatorOnPanelButton"
-                  variant="dot"
-                  severity="danger"
-                  class="absolute -top-1 -right-1"
-                />
-              </div>
+              <StatusBadge
+                v-if="showErrorIndicatorOnPanelButton"
+                variant="dot"
+                severity="danger"
+                class="absolute -top-1 -right-1"
+              />
             </div>
-            <FreeTierQuota v-if="!isActionbarFloating" />
           </div>
         </div>
         <ErrorOverlay />
@@ -161,7 +147,6 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { app } from '@/scripts/app'
@@ -224,6 +209,21 @@ const hasDockedButtons = computed(() => {
 const isActionbarContainerEmpty = computed(
   () => isActionbarFloating.value && !hasDockedButtons.value
 )
+const actionbarContainerClass = computed(() => {
+  const base =
+    'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg shadow-interface'
+
+  if (isActionbarContainerEmpty.value) {
+    return cn(
+      base,
+      '-ml-2 w-0 min-w-0 border-transparent shadow-none',
+      'has-[.border-dashed]:ml-0 has-[.border-dashed]:w-auto has-[.border-dashed]:min-w-auto',
+      'has-[.border-dashed]:border-interface-stroke has-[.border-dashed]:pl-2 has-[.border-dashed]:shadow-interface'
+    )
+  }
+
+  return cn(base, 'px-2', 'border-interface-stroke')
+})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') !== 'Legacy'
 )

src/components/actionbar/ComfyActionbar.vue

@@ -75,7 +75,6 @@
         </Button>
         <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
       </div>
-      <FreeTierQuota v-if="!isDocked" />
     </Panel>
 
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
@@ -110,7 +109,6 @@ import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import FreeTierQuota from '@/platform/cloud/subscription/components/FreeTierQuota.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.test.ts

@@ -4,11 +4,11 @@ import { nextTick, ref } from 'vue'
 
 import CloudRunButtonWrapper from './CloudRunButtonWrapper.vue'
 
-const mockCanRunWorkflows = ref(true)
+const mockIsActiveSubscription = ref(true)
 
 vi.mock('@/composables/billing/useBillingContext', () => ({
   useBillingContext: () => ({
-    canRunWorkflows: mockCanRunWorkflows
+    isActiveSubscription: mockIsActiveSubscription
   })
 }))
 
@@ -32,7 +32,7 @@ function renderWrapper() {
 
 describe('CloudRunButtonWrapper', () => {
   beforeEach(() => {
-    mockCanRunWorkflows.value = true
+    mockIsActiveSubscription.value = true
   })
 
   it('renders the runnable queue button when the subscription is active', () => {
@@ -45,7 +45,7 @@ describe('CloudRunButtonWrapper', () => {
   })
 
   it('locks the run button when the subscription is inactive', () => {
-    mockCanRunWorkflows.value = false
+    mockIsActiveSubscription.value = false
     renderWrapper()
 
     expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
@@ -53,12 +53,12 @@ describe('CloudRunButtonWrapper', () => {
   })
 
   it('unlocks the run button once the subscription becomes active again', async () => {
-    mockCanRunWorkflows.value = false
+    mockIsActiveSubscription.value = false
     renderWrapper()
 
     expect(screen.getByTestId('subscribe-to-run-button')).toBeInTheDocument()
 
-    mockCanRunWorkflows.value = true
+    mockIsActiveSubscription.value = true
     await nextTick()
 
     expect(screen.getByTestId('queue-button')).toBeInTheDocument()

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="currentButton"
-    :key="canRunWorkflows ? 'queue' : 'subscribe'"
+    :key="isActiveSubscription ? 'queue' : 'subscribe'"
   />
 </template>
 <script setup lang="ts">
@@ -11,9 +11,9 @@ import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueBu
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
 
-const { canRunWorkflows } = useBillingContext()
+const { isActiveSubscription } = useBillingContext()
 
 const currentButton = computed(() =>
-  canRunWorkflows.value ? ComfyQueueButton : SubscribeToRunButton
+  isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton
 )
 </script>

src/composables/billing/types.ts

@@ -112,13 +112,5 @@ export interface BillingContext extends BillingState, BillingActions {
    * (legacy) per-member tier plan, which keeps the old team pricing table.
    */
   isLegacyTeamPlan: ComputedRef<boolean>
-  /**
-   * True when the subscription is a team plan of either generation. Unlike
-   * `isLegacyTeamPlan` this does not require an active subscription: the spend
-   * gate folds billing_status into is_active, so a paused or payment-failed team
-   * plan reports is_active=false and must still read as a team plan.
-   */
-  isTeamPlan: ComputedRef<boolean>
   getMaxSeats: (tierKey: TierKey) => number
-  canRunWorkflows: ComputedRef<boolean>
 }

src/composables/billing/useBillingContext.test.ts

@@ -19,7 +19,7 @@ const DEFAULT_BILLING_STATUS: BillingStatusResponse = {
 
 const {
   mockTeamWorkspacesEnabled,
-  mockBillingControlEnabled,
+  mockConsolidatedBillingEnabled,
   mockIsPersonal,
   mockPlans,
   mockPurchaseCredits,
@@ -27,7 +27,7 @@ const {
   mockBillingStatus
 } = vi.hoisted(() => ({
   mockTeamWorkspacesEnabled: { value: false },
-  mockBillingControlEnabled: { value: false },
+  mockConsolidatedBillingEnabled: { value: false },
   mockIsPersonal: { value: true },
   mockPlans: { value: [] as Plan[] },
   mockPurchaseCredits: vi.fn(),
@@ -59,11 +59,13 @@ vi.mock('@/composables/useFeatureFlags', async () => {
       teamWorkspacesEnabledRef.value = value
     }
   })
-  const billingControlEnabledRef = ref(mockBillingControlEnabled.value)
-  Object.defineProperty(mockBillingControlEnabled, 'value', {
-    get: () => billingControlEnabledRef.value,
+  const consolidatedBillingEnabledRef = ref(
+    mockConsolidatedBillingEnabled.value
+  )
+  Object.defineProperty(mockConsolidatedBillingEnabled, 'value', {
+    get: () => consolidatedBillingEnabledRef.value,
     set: (value: boolean) => {
-      billingControlEnabledRef.value = value
+      consolidatedBillingEnabledRef.value = value
     }
   })
   return {
@@ -72,8 +74,8 @@ vi.mock('@/composables/useFeatureFlags', async () => {
         get teamWorkspacesEnabled() {
           return mockTeamWorkspacesEnabled.value
         },
-        get billingControlEnabled() {
-          return mockBillingControlEnabled.value
+        get consolidatedBillingEnabled() {
+          return mockConsolidatedBillingEnabled.value
         }
       }
     })
@@ -163,7 +165,7 @@ describe('useBillingContext', () => {
     setActivePinia(createPinia())
     vi.clearAllMocks()
     mockTeamWorkspacesEnabled.value = false
-    mockBillingControlEnabled.value = false
+    mockConsolidatedBillingEnabled.value = false
     mockIsPersonal.value = true
     mockPlans.value = []
     mockBillingStatus.value = { ...DEFAULT_BILLING_STATUS }
@@ -175,27 +177,27 @@ describe('useBillingContext', () => {
     expect(type.value).toBe('legacy')
   })
 
-  it('keeps personal on legacy when billing control is disabled', () => {
+  it('keeps personal on legacy when consolidated billing is disabled', () => {
     mockTeamWorkspacesEnabled.value = true
-    mockBillingControlEnabled.value = false
+    mockConsolidatedBillingEnabled.value = false
     mockIsPersonal.value = true
 
     const { type } = useBillingContext()
     expect(type.value).toBe('legacy')
   })
 
-  it('selects workspace type for personal when billing control is enabled', () => {
+  it('selects workspace type for personal when consolidated billing is enabled', () => {
     mockTeamWorkspacesEnabled.value = true
-    mockBillingControlEnabled.value = true
+    mockConsolidatedBillingEnabled.value = true
     mockIsPersonal.value = true
 
     const { type } = useBillingContext()
     expect(type.value).toBe('workspace')
   })
 
-  it('selects workspace type for team regardless of billing control', () => {
+  it('selects workspace type for team regardless of consolidated billing', () => {
     mockTeamWorkspacesEnabled.value = true
-    mockBillingControlEnabled.value = false
+    mockConsolidatedBillingEnabled.value = false
     mockIsPersonal.value = false
 
     const { type } = useBillingContext()
@@ -296,7 +298,7 @@ describe('useBillingContext', () => {
     expect(workspaceApi.getBillingStatus).not.toHaveBeenCalled()
 
     // Authenticated remote config resolves the flag on for the same workspace
-    mockBillingControlEnabled.value = true
+    mockConsolidatedBillingEnabled.value = true
     mockTeamWorkspacesEnabled.value = true
 
     await vi.waitFor(() => {
@@ -305,16 +307,16 @@ describe('useBillingContext', () => {
     })
   })
 
-  it('moves a personal workspace to workspace billing when billing control flips on', async () => {
+  it('moves a personal workspace to workspace billing when consolidated billing flips on', async () => {
     mockTeamWorkspacesEnabled.value = true
-    mockBillingControlEnabled.value = false
+    mockConsolidatedBillingEnabled.value = false
     mockIsPersonal.value = true
 
     const { type } = useBillingContext()
     await nextTick()
     expect(type.value).toBe('legacy')
 
-    mockBillingControlEnabled.value = true
+    mockConsolidatedBillingEnabled.value = true
 
     await vi.waitFor(() => {
       expect(type.value).toBe('workspace')
@@ -323,9 +325,9 @@ describe('useBillingContext', () => {
   })
 
   describe('subscription mirror to workspace store', () => {
-    it('mirrors subscription for personal workspaces on the billing control flow', async () => {
+    it('mirrors subscription for personal workspaces on the consolidated billing flow', async () => {
       mockTeamWorkspacesEnabled.value = true
-      mockBillingControlEnabled.value = true
+      mockConsolidatedBillingEnabled.value = true
       mockIsPersonal.value = true
 
       const { initialize } = useBillingContext()
@@ -553,110 +555,4 @@ describe('useBillingContext', () => {
       expect(isLegacyTeamPlan.value).toBe(true)
     })
   })
-
-  describe('isTeamPlan', () => {
-    it('is false for a personal workspace', () => {
-      const { isTeamPlan } = useBillingContext()
-      expect(isTeamPlan.value).toBe(false)
-    })
-
-    // subscription_tier is omitted throughout: the backend sends 'TEAM' here, but
-    // the FE's SubscriptionTier resolves to the registry spec, which has no TEAM
-    // (tierPricing.ts imports comfyRegistryTypes for what is an ingest field).
-    // isTeamPlan reads the credit stop and the slug, never the tier — which is
-    // what keeps it working despite that divergence.
-    it('is true for a credit-slider team sub, which carries a credit stop', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsPersonal.value = false
-      mockBillingStatus.value = {
-        is_active: true,
-        has_funds: true,
-        plan_slug: 'team_per_credit_monthly',
-        team_credit_stop: {
-          id: 'team_700',
-          credits_monthly: 700,
-          stop_usd: 332
-        }
-      }
-
-      const { initialize, isTeamPlan } = useBillingContext()
-      await initialize()
-
-      expect(isTeamPlan.value).toBe(true)
-    })
-
-    it('is true for a legacy team sub, identified by slug rather than credit stop', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsPersonal.value = false
-      mockBillingStatus.value = {
-        is_active: true,
-        has_funds: true,
-        subscription_tier: 'STANDARD',
-        plan_slug: 'team-standard-annual'
-      }
-
-      const { initialize, isTeamPlan } = useBillingContext()
-      await initialize()
-
-      expect(isTeamPlan.value).toBe(true)
-    })
-
-    // The banner states that need isTeamPlan most — paused and payment_failed —
-    // are exactly the ones the backend reports with is_active=false, because the
-    // spend gate folds billing_status into it. Coupling isTeamPlan to an active
-    // subscription would blank the banner precisely when it is needed.
-    it('stays true for a paused team plan, which the backend reports inactive', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsPersonal.value = false
-      mockBillingStatus.value = {
-        is_active: false,
-        has_funds: true,
-        billing_status: 'paused',
-        plan_slug: 'team_per_credit_monthly',
-        team_credit_stop: {
-          id: 'team_700',
-          credits_monthly: 700,
-          stop_usd: 332
-        }
-      }
-
-      const { initialize, isTeamPlan } = useBillingContext()
-      await initialize()
-
-      expect(isTeamPlan.value).toBe(true)
-    })
-
-    it('stays true for a legacy team plan whose payment failed', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsPersonal.value = false
-      mockBillingStatus.value = {
-        is_active: false,
-        has_funds: true,
-        billing_status: 'payment_failed',
-        subscription_tier: 'STANDARD',
-        plan_slug: 'team-standard-annual'
-      }
-
-      const { initialize, isTeamPlan } = useBillingContext()
-      await initialize()
-
-      expect(isTeamPlan.value).toBe(true)
-    })
-
-    it('is false for a team workspace on a personal-tier plan', async () => {
-      mockTeamWorkspacesEnabled.value = true
-      mockIsPersonal.value = false
-      mockBillingStatus.value = {
-        is_active: true,
-        has_funds: true,
-        subscription_tier: 'PRO',
-        plan_slug: 'pro-monthly'
-      }
-
-      const { initialize, isTeamPlan } = useBillingContext()
-      await initialize()
-
-      expect(isTeamPlan.value).toBe(false)
-    })
-  })
 })

src/composables/billing/useBillingContext.ts

@@ -6,7 +6,6 @@ import {
   getTierFeatures
 } from '@/platform/cloud/subscription/constants/tierPricing'
 import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
-import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
 import type { SubscriptionDialogOptions } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import type {
   PreviewSubscribeOptions,
@@ -36,8 +35,8 @@ const LEGACY_TEAM_PLAN_SLUG_PREFIX = 'team-'
  *
  * - Team workspaces disabled (OSS/Desktop): legacy billing via /customers/*
  * - Team workspaces enabled: workspace billing via /api/billing/* for team
- *   workspaces, and for personal workspaces once billing control is enabled;
- *   personal workspaces otherwise stay on legacy billing
+ *   workspaces, and for personal workspaces once consolidated billing is
+ *   enabled; personal workspaces otherwise stay on legacy billing
  *
  * The context automatically initializes when the workspace changes and provides
  * a unified interface for subscription status, balance, and billing actions.
@@ -130,16 +129,6 @@ function useBillingContextInternal(): BillingContext {
 
   const isFreeTier = computed(() => subscription.value?.tier === 'FREE')
 
-  const freeTierQuota = useFreeTierQuota()
-
-  const canRunWorkflows = computed(
-    () =>
-      isActiveSubscription.value &&
-      (!isFreeTier.value ||
-        !freeTierQuota.quotaEnabled.value ||
-        freeTierQuota.freeTierExecutionPermitted.value)
-  )
-
   const isLegacyTeamPlan = computed(
     () =>
       type.value === 'workspace' &&
@@ -152,21 +141,6 @@ function useBillingContextInternal(): BillingContext {
         false)
   )
 
-  // Plan identity, independent of subscription health: the per-credit Team plan
-  // carries a credit stop, the retired seat-based ones a `team-` slug. Kept off
-  // isActiveSubscription on purpose — paused and payment_failed both force
-  // is_active=false, which is exactly when callers still need to know this is a
-  // team plan.
-  const isTeamPlan = computed(
-    () =>
-      type.value === 'workspace' &&
-      (currentTeamCreditStop.value !== null ||
-        (currentPlanSlug.value
-          ?.toLowerCase()
-          .startsWith(LEGACY_TEAM_PLAN_SLUG_PREFIX) ??
-          false))
-  )
-
   const billingStatus = computed(() =>
     toValue(activeContext.value.billingStatus)
   )
@@ -217,9 +191,9 @@ function useBillingContextInternal(): BillingContext {
     error.value = null
   }
 
-  // type flips when the team-workspaces or billing-control flag resolves from
-  // authenticated config, swapping the active backend. Reset then reinit on
-  // every workspace-id or type change.
+  // type flips when the team-workspaces or consolidated-billing flag resolves
+  // from authenticated config, swapping the active backend. Reset then reinit
+  // on every workspace-id or type change.
   watch(
     [() => store.activeWorkspace?.id, () => type.value],
     async ([newWorkspaceId]) => {
@@ -323,10 +297,8 @@ function useBillingContextInternal(): BillingContext {
     isLoading,
     error,
     isActiveSubscription,
-    canRunWorkflows,
     isFreeTier,
     isLegacyTeamPlan,
-    isTeamPlan,
     billingStatus,
     subscriptionStatus,
     tier,

src/composables/billing/useBillingRouting.test.ts

@@ -5,7 +5,7 @@ import { useBillingRouting } from './useBillingRouting'
 const { mockFlags, mockActiveWorkspace } = vi.hoisted(() => ({
   mockFlags: {
     teamWorkspacesEnabled: false,
-    billingControlEnabled: false
+    consolidatedBillingEnabled: false
   },
   mockActiveWorkspace: {
     value: null as { id: string; type: 'personal' | 'team' } | null
@@ -30,7 +30,7 @@ const team = { id: 'w-team', type: 'team' as const }
 describe('useBillingRouting', () => {
   beforeEach(() => {
     mockFlags.teamWorkspacesEnabled = false
-    mockFlags.billingControlEnabled = false
+    mockFlags.consolidatedBillingEnabled = false
     mockActiveWorkspace.value = personal
   })
 
@@ -44,9 +44,9 @@ describe('useBillingRouting', () => {
     expect(shouldUseWorkspaceBilling.value).toBe(false)
   })
 
-  it('keeps personal on legacy when billing control is disabled', () => {
+  it('keeps personal on legacy when consolidated billing is disabled', () => {
     mockFlags.teamWorkspacesEnabled = true
-    mockFlags.billingControlEnabled = false
+    mockFlags.consolidatedBillingEnabled = false
     mockActiveWorkspace.value = personal
 
     const { type } = useBillingRouting()
@@ -54,9 +54,9 @@ describe('useBillingRouting', () => {
     expect(type.value).toBe('legacy')
   })
 
-  it('moves personal to workspace billing when billing control is enabled', () => {
+  it('moves personal to workspace billing when consolidated billing is enabled', () => {
     mockFlags.teamWorkspacesEnabled = true
-    mockFlags.billingControlEnabled = true
+    mockFlags.consolidatedBillingEnabled = true
     mockActiveWorkspace.value = personal
 
     const { type, shouldUseWorkspaceBilling } = useBillingRouting()
@@ -65,9 +65,9 @@ describe('useBillingRouting', () => {
     expect(shouldUseWorkspaceBilling.value).toBe(true)
   })
 
-  it('uses workspace billing for team workspaces regardless of billing control', () => {
+  it('uses workspace billing for team workspaces regardless of consolidated billing', () => {
     mockFlags.teamWorkspacesEnabled = true
-    mockFlags.billingControlEnabled = false
+    mockFlags.consolidatedBillingEnabled = false
     mockActiveWorkspace.value = team
 
     const { type, shouldUseWorkspaceBilling } = useBillingRouting()
@@ -76,9 +76,9 @@ describe('useBillingRouting', () => {
     expect(shouldUseWorkspaceBilling.value).toBe(true)
   })
 
-  it('uses workspace billing for team workspaces with billing control enabled', () => {
+  it('uses workspace billing for team workspaces with consolidated billing enabled', () => {
     mockFlags.teamWorkspacesEnabled = true
-    mockFlags.billingControlEnabled = true
+    mockFlags.consolidatedBillingEnabled = true
     mockActiveWorkspace.value = team
 
     const { type, shouldUseWorkspaceBilling } = useBillingRouting()
@@ -89,7 +89,7 @@ describe('useBillingRouting', () => {
 
   it('defaults to legacy while the workspace has not loaded', () => {
     mockFlags.teamWorkspacesEnabled = true
-    mockFlags.billingControlEnabled = true
+    mockFlags.consolidatedBillingEnabled = true
     mockActiveWorkspace.value = null
 
     const { type } = useBillingRouting()

src/composables/billing/useBillingRouting.ts

@@ -8,7 +8,7 @@ import type { BillingType } from './types'
 /**
  * Selects the billing backend for the active workspace: legacy user-scoped
  * (`/customers/*`) or workspace-scoped (`/api/billing/*`). Personal workspaces
- * stay legacy until `billingControlEnabled`; team workspaces are always
+ * stay legacy until `consolidatedBillingEnabled`; team workspaces are always
  * workspace-scoped. The routing matrix is covered in useBillingRouting.test.ts.
  */
 export function useBillingRouting() {
@@ -23,7 +23,7 @@ export function useBillingRouting() {
     const workspaceType = workspaceStore.activeWorkspace?.type
     if (!workspaceType) return 'legacy'
 
-    if (workspaceType === 'personal' && !flags.billingControlEnabled) {
+    if (workspaceType === 'personal' && !flags.consolidatedBillingEnabled) {
       return 'legacy'
     }
 

src/composables/maskeditor/useMaskEditorLoader.test.ts

@@ -1,193 +0,0 @@
-import { fromAny } from '@total-typescript/shoehorn'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { api } from '@/scripts/api'
-import { useMaskEditorLoader } from './useMaskEditorLoader'
-
-// ---- Module Mocks ----
-
-const mockDataStore: Record<string, unknown> = {
-  inputData: null,
-  sourceNode: null,
-  setLoading: vi.fn()
-}
-
-vi.mock('@/stores/maskEditorDataStore', () => ({
-  useMaskEditorDataStore: vi.fn(() => mockDataStore)
-}))
-
-vi.mock('@/stores/nodeOutputStore', () => ({
-  useNodeOutputStore: vi.fn(() => ({
-    getNodeOutputs: vi.fn(() => undefined)
-  }))
-}))
-
-const distribution = vi.hoisted(() => ({ isCloud: false }))
-
-vi.mock('@/platform/distribution/types', () => ({
-  get isCloud() {
-    return distribution.isCloud
-  }
-}))
-
-vi.mock('@/scripts/api', () => ({
-  api: {
-    fetchApi: vi.fn(),
-    apiURL: vi.fn((route: string) => `http://localhost:8188/api${route}`)
-  }
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    getPreviewFormatParam: vi.fn(() => ''),
-    getRandParam: vi.fn(() => '')
-  }
-}))
-
-// Mock Image constructor so the loader's image fetches resolve without a
-// network. Records every requested URL; URLs matching failUrlPattern reject
-// like a 404 would (reset per test in beforeEach).
-const requestedUrls: string[] = []
-let failUrlPattern: RegExp | null = null
-
-class MockImage {
-  crossOrigin = ''
-  onload: ((ev: Event) => void) | null = null
-  onerror: ((ev: unknown) => void) | null = null
-  private _src = ''
-  get src() {
-    return this._src
-  }
-  set src(value: string) {
-    this._src = value
-    requestedUrls.push(value)
-    queueMicrotask(() => {
-      if (failUrlPattern?.test(value)) this.onerror?.(new Event('error'))
-      else this.onload?.(new Event('load'))
-    })
-  }
-}
-
-function createLoadImageNode(widgetValue: string): LGraphNode {
-  return fromAny<LGraphNode, unknown>({
-    id: 7,
-    type: 'LoadImage',
-    imgs: [{ src: 'http://localhost:8188/api/view?filename=whatever.png' }],
-    images: undefined,
-    widgets: [{ name: 'image', value: widgetValue }]
-  })
-}
-
-function subfolderOf(url: string): string | null {
-  return new URL(url).searchParams.get('subfolder')
-}
-
-function requestedLayerUrls(layerFilename: string): string[] {
-  return requestedUrls.filter((url) => url.includes(layerFilename))
-}
-
-describe('useMaskEditorLoader', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    requestedUrls.length = 0
-    failUrlPattern = null
-    distribution.isCloud = false
-    mockDataStore.inputData = null
-    mockDataStore.sourceNode = null
-    vi.stubGlobal('Image', MockImage)
-  })
-
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('loads layer files from the input root for saves without a subfolder prefix', async () => {
-    const node = createLoadImageNode('clipspace-painted-masked-123.png [input]')
-
-    await useMaskEditorLoader().loadFromNode(node)
-
-    for (const layerFilename of [
-      'clipspace-mask-123.png',
-      'clipspace-paint-123.png'
-    ]) {
-      const layerUrls = requestedLayerUrls(layerFilename)
-      expect(layerUrls.length).toBeGreaterThan(0)
-      for (const url of layerUrls) {
-        expect(subfolderOf(url)).toBeNull()
-      }
-    }
-    expect(mockDataStore.inputData).toMatchObject({
-      sourceRef: { filename: 'clipspace-mask-123.png', type: 'input' },
-      nodeId: 7
-    })
-  })
-
-  it('loads layer files from the clipspace subfolder for legacy saves', async () => {
-    const node = createLoadImageNode(
-      'clipspace/clipspace-painted-masked-123.png [input]'
-    )
-
-    await useMaskEditorLoader().loadFromNode(node)
-
-    for (const layerFilename of [
-      'clipspace-mask-123.png',
-      'clipspace-paint-123.png'
-    ]) {
-      const layerUrls = requestedLayerUrls(layerFilename)
-      expect(layerUrls.length).toBeGreaterThan(0)
-      for (const url of layerUrls) {
-        expect(subfolderOf(url)).toBe('clipspace')
-      }
-    }
-  })
-
-  it('keeps the clipspace subfolder for cloud-resolved layer files', async () => {
-    distribution.isCloud = true
-    vi.mocked(api.fetchApi).mockResolvedValue({
-      ok: true,
-      json: () =>
-        Promise.resolve({
-          painted_masked: 'hash-painted-masked.png',
-          painted: 'hash-painted.png',
-          paint: 'hash-paint.png',
-          mask: 'hash-mask.png'
-        })
-    } as Response)
-    const node = createLoadImageNode('clipspace-painted-masked-123.png [input]')
-
-    await useMaskEditorLoader().loadFromNode(node)
-
-    for (const layerFilename of ['hash-painted-masked.png', 'hash-paint.png']) {
-      const layerUrls = requestedLayerUrls(layerFilename)
-      expect(layerUrls.length).toBeGreaterThan(0)
-      for (const url of layerUrls) {
-        expect(subfolderOf(url)).toBe('clipspace')
-      }
-    }
-  })
-
-  it('falls back to the node image when layer files are missing', async () => {
-    failUrlPattern = /clipspace-(mask|paint)-123\.png/
-    const node = createLoadImageNode('clipspace-painted-masked-123.png [input]')
-
-    await useMaskEditorLoader().loadFromNode(node)
-
-    expect(mockDataStore.inputData).toMatchObject({
-      sourceRef: { filename: 'clipspace-painted-masked-123.png' },
-      paintLayer: undefined,
-      nodeId: 7
-    })
-  })
-
-  it('still fails when the node image itself cannot be loaded', async () => {
-    failUrlPattern = /./
-    const node = createLoadImageNode('some-regular-image.png [input]')
-
-    await expect(useMaskEditorLoader().loadFromNode(node)).rejects.toThrow()
-    expect(mockDataStore.setLoading).toHaveBeenLastCalledWith(
-      false,
-      expect.any(String)
-    )
-  })
-})

src/composables/maskeditor/useMaskEditorLoader.ts

@@ -53,10 +53,10 @@ function imageLayerFilenamesIfApplicable(
   }
 }
 
-function toRef(filename: string, subfolder: string): ImageRef {
+function toRef(filename: string): ImageRef {
   return {
     filename,
-    subfolder,
+    subfolder: 'clipspace',
     type: 'input'
   }
 }
@@ -150,72 +150,34 @@ export function useMaskEditorLoader() {
         }
       }
 
-      // Pattern-matched layer files live next to the painted-masked image the
-      // widget points at: the input root for saves under the unified upload
-      // contract (#12318), or the clipspace subfolder for saves made before
-      // it. Cloud resolves the hash filenames from its mask-layers API
-      // server-side, so its refs keep the subfolder they always used.
-      const layerSubfolder = maskLayersFromApi
-        ? 'clipspace'
-        : (nodeImageRef.subfolder ?? '')
+      const baseImageUrl = imageLayerFilenames?.maskedImage
+        ? mkFileUrl({ ref: toRef(imageLayerFilenames.maskedImage) })
+        : nodeImageUrl
 
-      const layeredBaseUrl = imageLayerFilenames?.maskedImage
-        ? mkFileUrl({
-            ref: toRef(imageLayerFilenames.maskedImage, layerSubfolder)
-          })
-        : undefined
-      const baseImageUrl = layeredBaseUrl ?? nodeImageUrl
+      const sourceRef = imageLayerFilenames?.maskedImage
+        ? parseImageRef(baseImageUrl)
+        : nodeImageRef
 
       let paintLayerUrl: string | null = null
       if (maskLayersFromApi?.paint) {
-        paintLayerUrl = mkFileUrl({
-          ref: toRef(maskLayersFromApi.paint, layerSubfolder)
-        })
+        paintLayerUrl = mkFileUrl({ ref: toRef(maskLayersFromApi.paint) })
       } else if (imageLayerFilenames?.paint) {
-        paintLayerUrl = mkFileUrl({
-          ref: toRef(imageLayerFilenames.paint, layerSubfolder)
-        })
+        paintLayerUrl = mkFileUrl({ ref: toRef(imageLayerFilenames.paint) })
       }
 
-      const loadLayers = (baseUrl: string, paintUrl: string | null) =>
-        Promise.all([
-          loadImageLayer(baseUrl, 'rgb'),
-          loadImageLayer(baseUrl, 'a'),
-          paintUrl ? loadPaintLayer(paintUrl) : Promise.resolve(undefined)
-        ])
-
-      const loadInputData = async () => {
-        try {
-          const [baseLayer, maskLayer, paintLayer] = await loadLayers(
-            baseImageUrl,
-            paintLayerUrl
-          )
-          return {
-            baseLayer,
-            maskLayer,
-            paintLayer,
-            sourceRef: layeredBaseUrl
-              ? parseImageRef(baseImageUrl)
-              : nodeImageRef
-          }
-        } catch (error) {
-          if (!layeredBaseUrl) throw error
-          console.warn(
-            '[MaskEditorLoader] Failed to load editor layer files, falling back to the node image',
-            error
-          )
-          const [baseLayer, maskLayer] = await loadLayers(nodeImageUrl, null)
-          return {
-            baseLayer,
-            maskLayer,
-            paintLayer: undefined,
-            sourceRef: nodeImageRef
-          }
-        }
-      }
+      const [baseLayer, maskLayer, paintLayer] = await Promise.all([
+        loadImageLayer(baseImageUrl, 'rgb'),
+        loadImageLayer(baseImageUrl, 'a'),
+        paintLayerUrl
+          ? loadPaintLayer(paintLayerUrl)
+          : Promise.resolve(undefined)
+      ])
 
       dataStore.inputData = {
-        ...(await loadInputData()),
+        baseLayer,
+        maskLayer,
+        paintLayer,
+        sourceRef,
         nodeId: node.id
       }
 

src/composables/node/usePriceBadge.ts

@@ -1,19 +1,12 @@
-import { createSharedComposable } from '@vueuse/core'
-import { computed, toValue } from 'vue'
-
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
 
-import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodePricing } from '@/composables/node/useNodePricing'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
-import { trackNodePrice } from '@/renderer/extensions/vueNodes/composables/usePartitionedBadges'
-import { app } from '@/scripts/app'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
-import { mapAllNodes } from '@/utils/graphTraversalUtil'
+import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 type LinkedWidgetInput = INodeInputSlot & {
   _subgraphSlot?: SubgraphInput
@@ -157,20 +150,3 @@ export const usePriceBadge = () => {
     updateSubgraphCredits
   }
 }
-export const useCreditsBadgesInGraph = createSharedComposable(() => {
-  const { isCreditsBadge } = usePriceBadge()
-  const vueNodeLifecycle = useVueNodeLifecycle()
-  return computed(() => {
-    void vueNodeLifecycle.nodeManager.value?.vueNodeData.size
-    if (!app.graph) return []
-    return mapAllNodes(app.graph, (node) => {
-      if (node.isSubgraphNode()) return
-
-      const priceBadge = node.badges.find(isCreditsBadge)
-      if (!priceBadge) return
-
-      trackNodePrice(node)
-      return [node.title, toValue(priceBadge).text, node.id] as const
-    })
-  })
-})

src/composables/useFeatureFlags.test.ts

@@ -7,7 +7,7 @@ import {
 } from '@/composables/useFeatureFlags'
 import * as distributionTypes from '@/platform/distribution/types'
 import {
-  cachedBillingControlEnabled,
+  cachedConsolidatedBillingEnabled,
   cachedTeamWorkspacesEnabled,
   remoteConfig,
   remoteConfigState
@@ -182,30 +182,6 @@ describe('useFeatureFlags', () => {
     })
   })
 
-  describe('partnerNodeGovernanceEnabled', () => {
-    afterEach(() => {
-      remoteConfig.value = {}
-    })
-
-    it('uses the workspace eligibility flag', () => {
-      remoteConfig.value = { partner_node_governance_enabled: true }
-
-      const { flags } = useFeatureFlags()
-
-      expect(flags.partnerNodeGovernanceEnabled).toBe(true)
-    })
-
-    it('defaults to false when the remote flag is unset', () => {
-      vi.mocked(api.getServerFeature).mockImplementation(
-        (_path, defaultValue) => defaultValue
-      )
-
-      const { flags } = useFeatureFlags()
-
-      expect(flags.partnerNodeGovernanceEnabled).toBe(false)
-    })
-  })
-
   describe('dev override via localStorage', () => {
     afterEach(() => {
       localStorage.clear()
@@ -250,19 +226,19 @@ describe('useFeatureFlags', () => {
       expect(flags.teamWorkspacesEnabled).toBe(true)
     })
 
-    it('billingControlEnabled override bypasses isCloud and isAuthenticatedConfigLoaded guards', () => {
+    it('consolidatedBillingEnabled override bypasses isCloud and isAuthenticatedConfigLoaded guards', () => {
       vi.mocked(distributionTypes).isCloud = false
-      localStorage.setItem('ff:billing_control_enabled', 'true')
+      localStorage.setItem('ff:consolidated_billing_enabled', 'true')
 
       const { flags } = useFeatureFlags()
-      expect(flags.billingControlEnabled).toBe(true)
+      expect(flags.consolidatedBillingEnabled).toBe(true)
     })
 
-    it('billingControlEnabled is false off-cloud even without an override', () => {
+    it('consolidatedBillingEnabled is false off-cloud even without an override', () => {
       vi.mocked(distributionTypes).isCloud = false
 
       const { flags } = useFeatureFlags()
-      expect(flags.billingControlEnabled).toBe(false)
+      expect(flags.consolidatedBillingEnabled).toBe(false)
     })
   })
 
@@ -272,7 +248,7 @@ describe('useFeatureFlags', () => {
       remoteConfigState.value = 'unloaded'
       remoteConfig.value = {}
       cachedTeamWorkspacesEnabled.value = undefined
-      cachedBillingControlEnabled.value = undefined
+      cachedConsolidatedBillingEnabled.value = undefined
       localStorage.clear()
     })
 
@@ -281,36 +257,36 @@ describe('useFeatureFlags', () => {
       remoteConfigState.value = 'unloaded'
       remoteConfig.value = {}
       cachedTeamWorkspacesEnabled.value = undefined
-      cachedBillingControlEnabled.value = undefined
+      cachedConsolidatedBillingEnabled.value = undefined
       localStorage.clear()
     })
 
     it('returns the cached session value during the auth window', () => {
       cachedTeamWorkspacesEnabled.value = false
-      cachedBillingControlEnabled.value = true
+      cachedConsolidatedBillingEnabled.value = true
 
       const { flags } = useFeatureFlags()
       expect(flags.teamWorkspacesEnabled).toBe(false)
-      expect(flags.billingControlEnabled).toBe(true)
+      expect(flags.consolidatedBillingEnabled).toBe(true)
     })
 
     it('defaults to false during the auth window when nothing is cached', () => {
       const { flags } = useFeatureFlags()
       expect(flags.teamWorkspacesEnabled).toBe(false)
-      expect(flags.billingControlEnabled).toBe(false)
+      expect(flags.consolidatedBillingEnabled).toBe(false)
     })
 
     it('prefers authenticated remoteConfig over the server feature fallback', () => {
       remoteConfigState.value = 'authenticated'
       remoteConfig.value = {
         team_workspaces_enabled: true,
-        billing_control_enabled: true
+        consolidated_billing_enabled: true
       }
       vi.mocked(api.getServerFeature).mockReturnValue(false)
 
       const { flags } = useFeatureFlags()
       expect(flags.teamWorkspacesEnabled).toBe(true)
-      expect(flags.billingControlEnabled).toBe(true)
+      expect(flags.consolidatedBillingEnabled).toBe(true)
     })
 
     it('falls back to api.getServerFeature when authenticated config omits the flag', () => {
@@ -319,14 +295,15 @@ describe('useFeatureFlags', () => {
       vi.mocked(api.getServerFeature).mockImplementation(
         (path, defaultValue) => {
           if (path === ServerFeatureFlag.TEAM_WORKSPACES_ENABLED) return true
-          if (path === ServerFeatureFlag.BILLING_CONTROL_ENABLED) return true
+          if (path === ServerFeatureFlag.CONSOLIDATED_BILLING_ENABLED)
+            return true
           return defaultValue
         }
       )
 
       const { flags } = useFeatureFlags()
       expect(flags.teamWorkspacesEnabled).toBe(true)
-      expect(flags.billingControlEnabled).toBe(true)
+      expect(flags.consolidatedBillingEnabled).toBe(true)
     })
   })
 

src/composables/useFeatureFlags.ts

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 
 import { isCloud, isNightly } from '@/platform/distribution/types'
 import {
-  cachedBillingControlEnabled,
+  cachedConsolidatedBillingEnabled,
   cachedTeamWorkspacesEnabled,
   isAuthenticatedConfigLoaded,
   remoteConfig
@@ -24,7 +24,6 @@ export enum ServerFeatureFlag {
   ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
   LINEAR_TOGGLE_ENABLED = 'linear_toggle_enabled',
   TEAM_WORKSPACES_ENABLED = 'team_workspaces_enabled',
-  PARTNER_NODE_GOVERNANCE_ENABLED = 'partner_node_governance_enabled',
   USER_SECRETS_ENABLED = 'user_secrets_enabled',
   NODE_REPLACEMENTS = 'node_replacements',
   NODE_LIBRARY_ESSENTIALS_ENABLED = 'node_library_essentials_enabled',
@@ -33,8 +32,7 @@ export enum ServerFeatureFlag {
   COMFYHUB_PROFILE_GATE_ENABLED = 'comfyhub_profile_gate_enabled',
   SHOW_SIGNIN_BUTTON = 'show_signin_button',
   UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
-  BILLING_CONTROL_ENABLED = 'billing_control_enabled',
-  FREE_TIER_JOB_ALLOWANCE_ENABLED = 'free_tier_job_allowance_enabled',
+  CONSOLIDATED_BILLING_ENABLED = 'consolidated_billing_enabled',
   SIGNUP_TURNSTILE = 'signup_turnstile'
 }
 
@@ -135,13 +133,6 @@ export function useFeatureFlags() {
         cachedTeamWorkspacesEnabled
       )
     },
-    get partnerNodeGovernanceEnabled() {
-      return resolveFlag(
-        ServerFeatureFlag.PARTNER_NODE_GOVERNANCE_ENABLED,
-        remoteConfig.value.partner_node_governance_enabled,
-        false
-      )
-    },
     get userSecretsEnabled() {
       return resolveFlag(
         ServerFeatureFlag.USER_SECRETS_ENABLED,
@@ -200,25 +191,15 @@ export function useFeatureFlags() {
       )
     },
     /**
-     * Whether personal workspaces use the workspace-scoped billing flow. While
-     * false (default), personal workspaces stay on the legacy per-user billing
-     * flow; team workspaces are unaffected.
+     * Whether personal workspaces use the consolidated (workspace-scoped)
+     * billing flow. While false (default), personal workspaces stay on the
+     * legacy per-user billing flow; team workspaces are unaffected.
      */
-    get billingControlEnabled() {
+    get consolidatedBillingEnabled() {
       return resolveAuthGatedFlag(
-        ServerFeatureFlag.BILLING_CONTROL_ENABLED,
-        remoteConfig.value.billing_control_enabled,
-        cachedBillingControlEnabled
-      )
-    },
-    get freeTierJobAllowanceEnabled() {
-      const config = remoteConfig.value as typeof remoteConfig.value & {
-        free_tier_job_allowance_enabled?: boolean
-      }
-      return resolveFlag(
-        ServerFeatureFlag.FREE_TIER_JOB_ALLOWANCE_ENABLED,
-        config.free_tier_job_allowance_enabled,
-        false
+        ServerFeatureFlag.CONSOLIDATED_BILLING_ENABLED,
+        remoteConfig.value.consolidated_billing_enabled,
+        cachedConsolidatedBillingEnabled
       )
     },
     get signupTurnstileMode() {

src/locales/en/main.json

@@ -2473,11 +2473,6 @@
   },
   "credits": {
     "activity": "Activity",
-    "insufficient": {
-      "memberTitle": "This workspace is out of credits",
-      "memberDescription": "Your team has used all its credits. Your workspace admins need to add more credits to run workflows.",
-      "memberCta": "Ok, got it"
-    },
     "credits": "Credits",
     "yourCreditBalance": "Your credit balance",
     "purchaseCredits": "Purchase Credits",
@@ -2887,32 +2882,6 @@
     "updatePassword": "Update Password"
   },
   "workspacePanel": {
-    "billingStatus": {
-      "warning": {
-        "title": "Payment declined",
-        "body": "Your last payment didn't go through. Your subscription will pause on {date} unless payment is updated.",
-        "bodyNoDate": "Your last payment didn't go through. Update payment to avoid a pause."
-      },
-      "paused": {
-        "title": "Subscription paused",
-        "body": "This workspace's subscription is paused. Update payment to resume.",
-        "memberBody": "This workspace's subscription is paused. Your workspace admins need to update the payment method."
-      },
-      "outOfCredits": {
-        "title": "Out of credits",
-        "body": "Your team has used all its credits. Add more credits to continue generating or wait until credits refill on {date}.",
-        "bodyNoDate": "Your team has used all its credits. Add more credits to continue generating.",
-        "memberBody": "Your team has used all its credits. Your workspace admins need to add more credits to continue generating.",
-        "addCredits": "Add credits",
-        "dismiss": "Dismiss"
-      },
-      "ending": {
-        "title": "Your team plan ends on {date}",
-        "body": "Members keep full access until then. Reactivate to keep your shared credits and seats.",
-        "reactivate": "Reactivate plan"
-      },
-      "updatePayment": "Update payment"
-    },
     "invite": "Invite",
     "inviteMember": "Invite member",
     "inviteLimitReached": "You've reached the maximum of {count} members",
@@ -3587,9 +3556,6 @@
     "dockToTop": "Dock to top",
     "feedback": "Feedback",
     "feedbackTooltip": "Feedback",
-    "freeTierRuns": "{available} / {MAX_AVAILABLE} runs left",
-    "freeTierRunsExhausted": "No runs left",
-    "freeTierPartner": "Partner nodes need a paid plan",
     "share": "Share",
     "shareTooltip": "Share workflow"
   },

src/locales/escapeNodeDefI18n.test.ts

@@ -0,0 +1,35 @@
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it } from 'vitest'
+
+import { escapeVueI18nMessageSyntax } from '@comfyorg/shared-frontend-utils/formatUtil'
+
+/**
+ * Node descriptions are compiled by vue-i18n via `t()`/`st()`, which parses
+ * `@ { } | %` as message syntax — a literal `@` even crashes the compiler with
+ * `Invalid linked format` (this broke the whole app after the 1.47.7 locale
+ * sync). `collect-i18n-node-defs.ts` escapes such values with
+ * `escapeVueI18nMessageSyntax` before writing them; this guards that the escaped
+ * output actually compiles and renders the original literal text.
+ */
+describe('escapeVueI18nMessageSyntax output is compiled safely by vue-i18n', () => {
+  const compile = (message: string) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: { value: message } }
+    })
+    return i18n.global.t('value')
+  }
+
+  it.for([
+    'clips (tagged @Audio1-3 in the prompt)',
+    'support@comfy.org',
+    'resolution {width}x{height}',
+    'foreground | background',
+    '50%{done}',
+    'all of @ { } | % together',
+    'no special chars here'
+  ])('renders %s as the original literal text', (raw) => {
+    expect(compile(escapeVueI18nMessageSyntax(raw))).toBe(raw)
+  })
+})

src/platform/cloud/subscription/components/FreeTierQuota.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { cn } from '@comfyorg/tailwind-utils'
-import { useBillingContext } from '@/composables/billing/useBillingContext'
-import { useFreeTierQuota } from '@/platform/cloud/subscription/composables/useFreeTierQuota'
-
-const DOT_COLORS = [
-  'bg-destructive-background',
-  'bg-warning-background',
-  'bg-success-background'
-]
-
-const { showSubscriptionDialog } = useBillingContext()
-const { t } = useI18n()
-const { available, hasInvalidNodes, maxAvailable, quotaEnabled } =
-  useFreeTierQuota()
-
-const dotColor = computed(() => {
-  const ratio = maxAvailable.value ? available.value / maxAvailable.value : 0
-  return DOT_COLORS[
-    Math.min(Math.floor(ratio * DOT_COLORS.length), DOT_COLORS.length - 1)
-  ]
-})
-const label = computed(() =>
-  available.value === 0
-    ? t('actionbar.freeTierRunsExhausted')
-    : t('actionbar.freeTierRuns', {
-        available: available.value,
-        MAX_AVAILABLE: maxAvailable.value
-      })
-)
-</script>
-<template>
-  <div
-    v-if="quotaEnabled"
-    class="mt-2 w-full cursor-pointer border-t border-border-subtle bg-comfy-menu-bg px-4 pt-2 select-none"
-    data-testid="free-tier-quota"
-    @click="showSubscriptionDialog({ reason: 'free_tier_quota' })"
-  >
-    <div
-      v-if="hasInvalidNodes"
-      class="flex w-full items-center justify-center gap-2"
-    >
-      <i class="icon-[comfy--credits] bg-amber-400" />
-      {{ t('actionbar.freeTierPartner') }}
-    </div>
-    <div v-else class="flex w-full items-center justify-between">
-      <div class="flex gap-2" :aria-label="label" role="img">
-        <div
-          v-for="index in maxAvailable"
-          :key="index"
-          :class="
-            cn(
-              'size-1.5 rounded-full',
-              index > available ? 'bg-secondary-background-selected' : dotColor
-            )
-          "
-        />
-      </div>
-      <div v-text="label" />
-    </div>
-  </div>
-</template>

src/platform/cloud/subscription/composables/useAccountPreconditionDialog.test.ts

@@ -8,19 +8,10 @@ const mockDialogService = {
   showTopUpCreditsDialog: vi.fn()
 }
 
-const mockBilling = {
-  fetchStatus: vi.fn(),
-  fetchBalance: vi.fn()
-}
-
 vi.mock('@/services/dialogService', () => ({
   useDialogService: vi.fn(() => mockDialogService)
 }))
 
-vi.mock('@/composables/billing/useBillingContext', () => ({
-  useBillingContext: vi.fn(() => mockBilling)
-}))
-
 describe('useAccountPreconditionDialog', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -64,18 +55,4 @@ describe('useAccountPreconditionDialog', () => {
       mockDialogService.showSubscriptionRequiredDialog
     ).not.toHaveBeenCalled()
   })
-
-  it('refreshes the billing snapshot on a credit precondition so exhausted-state surfaces converge', () => {
-    useAccountPreconditionDialog().open('credits')
-
-    expect(mockBilling.fetchStatus).toHaveBeenCalledTimes(1)
-    expect(mockBilling.fetchBalance).toHaveBeenCalledTimes(1)
-  })
-
-  it('does not touch billing state for non-credit preconditions', () => {
-    useAccountPreconditionDialog().open('subscription')
-
-    expect(mockBilling.fetchStatus).not.toHaveBeenCalled()
-    expect(mockBilling.fetchBalance).not.toHaveBeenCalled()
-  })
 })

src/platform/cloud/subscription/composables/useAccountPreconditionDialog.ts

@@ -1,4 +1,3 @@
-import { useBillingContext } from '@/composables/billing/useBillingContext'
 import type { AccountPrecondition } from '@/platform/errorCatalog/accountPreconditionRouting'
 import { useDialogService } from '@/services/dialogService'
 
@@ -29,19 +28,11 @@ export function useAccountPreconditionDialog() {
           reason: 'subscription_required'
         })
         return
-      case 'credits': {
-        // The server just declared the balance exhausted; there is no push or
-        // polling for billing state, so refresh it here to converge
-        // hasFunds-keyed surfaces such as the credits-exhausted banner. The
-        // refresh is best-effort: allSettled keeps a flaky billing API from
-        // surfacing as unhandled rejections.
-        const { fetchStatus, fetchBalance } = useBillingContext()
-        void Promise.allSettled([fetchStatus(), fetchBalance()])
+      case 'credits':
         void dialogService.showTopUpCreditsDialog({
           isInsufficientCredits: true
         })
         return
-      }
     }
   }
 

src/platform/cloud/subscription/composables/useFreeTierQuota.ts

@@ -1,45 +0,0 @@
-import { createSharedComposable } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-
-import { useCreditsBadgesInGraph } from '@/composables/node/usePriceBadge'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
-
-export const useFreeTierQuota = createSharedComposable(function () {
-  const { flags } = useFeatureFlags()
-  const creditsBadges = useCreditsBadgesInGraph()
-
-  const available = ref(0)
-  const maxAvailable = ref(0)
-  watch(
-    () => remoteConfig.value.free_tier_balance?.remaining,
-    (val) => (available.value = val ?? 0),
-    { immediate: true }
-  )
-  watch(
-    () => remoteConfig.value.free_tier_balance?.allowance,
-    (val) => (maxAvailable.value = val ?? 0),
-    { immediate: true }
-  )
-
-  const quotaEnabled = computed(
-    () => flags.freeTierJobAllowanceEnabled && maxAvailable.value > 0
-  )
-  const hasInvalidNodes = computed(() => creditsBadges.value.length > 0)
-  const freeTierExecutionPermitted = computed(
-    () => !hasInvalidNodes.value && quotaEnabled.value && available.value > 0
-  )
-
-  function trackRun() {
-    if (available.value > 0) available.value--
-  }
-
-  return {
-    available,
-    freeTierExecutionPermitted,
-    hasInvalidNodes,
-    maxAvailable,
-    quotaEnabled,
-    trackRun
-  }
-})

src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts

@@ -266,21 +266,6 @@ describe('useSubscriptionDialog', () => {
       expect(mockTrackSubscription).not.toHaveBeenCalled()
     })
 
-    it('shows the read-only member dialog for out-of-credits too, not the pricing table', () => {
-      mockShouldUseWorkspaceBilling.value = true
-      mockIsInPersonalWorkspace.value = false
-      mockCanManageSubscription.value = false
-      const { showPricingTable } = useSubscriptionDialog()
-
-      showPricingTable({ reason: 'out_of_credits' })
-
-      expect(mockShowLayoutDialog).toHaveBeenCalledTimes(1)
-      const props = mockShowLayoutDialog.mock.calls[0][0].props
-      expect(props).toHaveProperty('onClose')
-      expect(props).not.toHaveProperty('reason')
-      expect(props).not.toHaveProperty('initialPlanMode')
-    })
-
     it('does not track on non-cloud', () => {
       mockIsCloud.value = false
       const { showPricingTable } = useSubscriptionDialog()