1.47.8 (#13663)

Patch version increment to 1.47.8

**Base branch:** `core/1.47`

Co-authored-by: comfy-pr-bot <172744619+comfy-pr-bot@users.noreply.github.com>

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

@@ -40,6 +40,3 @@ jobs:
           WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: pnpm --filter @comfyorg/website build
-
-      - name: Validate JSON-LD structured data
-        run: pnpm --filter @comfyorg/website validate:jsonld

apps/website/e2e/affiliates.spec.ts

@@ -76,14 +76,10 @@ test.describe('Affiliates landing — desktop interactions', () => {
       return match?.textContent ?? null
     })
     expect(faqJsonLd, 'FAQ JSON-LD script').not.toBeNull()
-    const graph = JSON.parse(faqJsonLd!)['@graph'] as {
-      '@type': string
-      mainEntity?: unknown[]
-    }[]
-    const faqPage = graph.find((node) => node['@type'] === 'FAQPage')
-    expect(faqPage, 'FAQPage node in @graph').toBeDefined()
-    expect(Array.isArray(faqPage!.mainEntity)).toBe(true)
-    expect(faqPage!.mainEntity!.length).toBe(FAQ_COUNT)
+    const parsed = JSON.parse(faqJsonLd!)
+    expect(parsed['@type']).toBe('FAQPage')
+    expect(Array.isArray(parsed.mainEntity)).toBe(true)
+    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
   })
 
   test('Apply Now CTA opens the application form in a new tab', async ({

apps/website/e2e/learning.spec.ts

@@ -1,158 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { learningTutorials } from '../src/data/learningTutorials'
-import { t } from '../src/i18n/translations'
-import { test } from './fixtures/blockExternalMedia'
-
-const tutorialButtonName = (title: string, locale: 'en' | 'zh-CN') =>
-  `${t('learning.tutorials.titlePrefix', locale)} ${title}`
-
-test.describe('Learning page @smoke', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/learning')
-  })
-
-  test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Learning — Comfy')
-  })
-
-  test('hero headline references ComfyUI', async ({ page }) => {
-    const heading = page.getByRole('heading', { level: 1 })
-    await expect(heading).toBeVisible()
-    await expect(heading).toContainText(t('learning.heroTitle.before', 'en'))
-    await expect(heading).toContainText('ComfyUI')
-    await expect(heading).toContainText(t('learning.heroTitle.line2', 'en'))
-  })
-
-  test('featured workflow section shows title and author', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', {
-        name: t('learning.featured.title', 'en'),
-        level: 2
-      })
-    ).toBeVisible()
-    await expect(
-      page.getByText(t('learning.featured.author', 'en'))
-    ).toBeVisible()
-  })
-
-  test('renders every tutorial from the data source', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', {
-        name: t('learning.tutorials.heading', 'en'),
-        level: 2
-      })
-    ).toBeVisible()
-
-    for (const tutorial of learningTutorials) {
-      await expect(
-        page.getByRole('button', {
-          name: tutorialButtonName(tutorial.title.en, 'en')
-        })
-      ).toBeVisible()
-    }
-  })
-
-  test('tutorials with a workflow link expose an external Try Workflow link', async ({
-    page
-  }) => {
-    const linkedTutorials = learningTutorials.filter(
-      (tutorial) => tutorial.href
-    )
-    const workflowLinks = page.getByRole('link', {
-      name: t('cta.tryWorkflow', 'en')
-    })
-    const hrefs = await workflowLinks.evaluateAll((links) =>
-      links.map((link) => link.getAttribute('href'))
-    )
-    for (const tutorial of linkedTutorials) {
-      expect(hrefs).toContain(tutorial.href)
-    }
-  })
-
-  test('call to action links to contact sales', async ({ page }) => {
-    await expect(
-      page.getByRole('heading', {
-        name: t('learning.cta.heading', 'en'),
-        level: 2
-      })
-    ).toBeVisible()
-    await expect(
-      page.getByRole('link', { name: t('learning.cta.contactSales', 'en') })
-    ).toHaveAttribute('href', '/contact')
-  })
-})
-
-test.describe('Learning tutorial dialog', () => {
-  test('opens a tutorial video and dismisses via the close button', async ({
-    page
-  }) => {
-    const [firstTutorial] = learningTutorials
-    await page.goto('/learning')
-
-    const openButton = page.getByRole('button', {
-      name: tutorialButtonName(firstTutorial.title.en, 'en')
-    })
-    await openButton.scrollIntoViewIfNeeded()
-
-    const dialog = page.getByRole('dialog', { name: firstTutorial.title.en })
-    // TutorialsSection is hydrated via `client:visible`; retry the click until
-    // Vue responds by opening the dialog.
-    await expect(async () => {
-      await openButton.click()
-      await expect(dialog).toBeVisible({ timeout: 1_000 })
-    }).toPass({ timeout: 10_000 })
-
-    await expect(
-      dialog.getByRole('heading', { level: 2, name: firstTutorial.title.en })
-    ).toBeVisible()
-
-    await dialog
-      .getByRole('button', { name: t('gallery.detail.close', 'en') })
-      .click()
-    await expect(dialog).toBeHidden()
-  })
-
-  test('dismisses the dialog with the Escape key', async ({ page }) => {
-    const [firstTutorial] = learningTutorials
-    await page.goto('/learning')
-
-    const openButton = page.getByRole('button', {
-      name: tutorialButtonName(firstTutorial.title.en, 'en')
-    })
-    await openButton.scrollIntoViewIfNeeded()
-
-    const dialog = page.getByRole('dialog', { name: firstTutorial.title.en })
-    await expect(async () => {
-      await openButton.click()
-      await expect(dialog).toBeVisible({ timeout: 1_000 })
-    }).toPass({ timeout: 10_000 })
-
-    await page.keyboard.press('Escape')
-    await expect(dialog).toBeHidden()
-  })
-})
-
-test.describe('Learning page (zh-CN) @smoke', () => {
-  test('renders localized title, headings, and tutorials', async ({ page }) => {
-    await page.goto('/zh-CN/learning')
-
-    await expect(page).toHaveTitle('学习 — Comfy')
-    await expect(page.getByRole('heading', { level: 1 })).toContainText(
-      /[一-鿿]/
-    )
-    await expect(
-      page.getByRole('heading', {
-        name: t('learning.tutorials.heading', 'zh-CN'),
-        level: 2
-      })
-    ).toBeVisible()
-
-    const [firstTutorial] = learningTutorials
-    await expect(
-      page.getByRole('button', {
-        name: tutorialButtonName(firstTutorial.title['zh-CN'], 'zh-CN')
-      })
-    ).toBeVisible()
-  })
-})

apps/website/package.json

@@ -17,8 +17,7 @@
     "test:visual:update": "playwright test --project visual --update-snapshots",
     "ashby:refresh-snapshot": "tsx ./scripts/refresh-ashby-snapshot.ts",
     "cloud-nodes:refresh-snapshot": "tsx ./scripts/refresh-cloud-nodes-snapshot.ts",
-    "generate:models": "tsx ./scripts/generate-models.ts",
-    "validate:jsonld": "tsx ./scripts/validate-jsonld.ts"
+    "generate:models": "tsx ./scripts/generate-models.ts"
   },
   "dependencies": {
     "@astrojs/sitemap": "catalog:",

apps/website/scripts/validate-jsonld.ts

@@ -1,129 +0,0 @@
-import { readFileSync, readdirSync } from 'node:fs'
-import { join } from 'node:path'
-
-import { collectGraphIds } from '../src/utils/jsonLd'
-
-const DIST_DIR = join(process.cwd(), 'dist')
-const JSON_LD_BLOCK =
-  /<script[^>]*type=["']application\/ld\+json["'][^>]*>([\s\S]*?)<\/script>/gi
-
-interface Violation {
-  file: string
-  message: string
-}
-
-function htmlFiles(dir: string): string[] {
-  return readdirSync(dir, { recursive: true })
-    .map(String)
-    .filter((entry) => entry.endsWith('.html'))
-    .map((entry) => join(dir, entry))
-}
-
-function typesOf(node: Record<string, unknown>): string[] {
-  const type = node['@type']
-  if (typeof type === 'string') return [type]
-  if (Array.isArray(type)) {
-    return type.filter((t): t is string => typeof t === 'string')
-  }
-  return []
-}
-
-function hasValidPrice(node: Record<string, unknown>): boolean {
-  const price = node.price
-  const priceStr = price == null ? '' : String(price).trim()
-  return priceStr !== '' && !Number.isNaN(Number(priceStr))
-}
-
-function checkHonesty(
-  value: unknown,
-  file: string,
-  violations: Violation[]
-): void {
-  const walk = (node: unknown): void => {
-    if (Array.isArray(node)) {
-      node.forEach(walk)
-      return
-    }
-    if (!node || typeof node !== 'object') return
-    const record = node as Record<string, unknown>
-    const types = typesOf(record)
-    if (types.includes('Review') || types.includes('AggregateRating')) {
-      violations.push({
-        file,
-        message: `dishonest node type ${types.join('/')}`
-      })
-    }
-    if ('aggregateRating' in record || 'review' in record) {
-      violations.push({
-        file,
-        message: 'node carries a review/aggregateRating'
-      })
-    }
-    if (
-      types.includes('Offer') &&
-      (!hasValidPrice(record) || !record.priceCurrency)
-    ) {
-      violations.push({
-        file,
-        message: 'Offer missing priceCurrency or a concrete price'
-      })
-    }
-    Object.values(record).forEach(walk)
-  }
-  walk(value)
-}
-
-function validateFile(file: string): Violation[] {
-  const html = readFileSync(file, 'utf8')
-  const violations: Violation[] = []
-  const definedIds = new Set<string>()
-  const referencedIds: string[] = []
-
-  for (const match of html.matchAll(JSON_LD_BLOCK)) {
-    let parsed: unknown
-    try {
-      parsed = JSON.parse(match[1])
-    } catch (error) {
-      violations.push({ file, message: `invalid JSON-LD: ${String(error)}` })
-      continue
-    }
-    checkHonesty(parsed, file, violations)
-    const { defined, references } = collectGraphIds(parsed)
-    defined.forEach((id) => definedIds.add(id))
-    referencedIds.push(...references)
-  }
-
-  for (const id of referencedIds) {
-    if (!definedIds.has(id)) {
-      violations.push({ file, message: `unresolved @id reference: ${id}` })
-    }
-  }
-
-  return violations
-}
-
-function main(): void {
-  const files = htmlFiles(DIST_DIR)
-
-  if (files.length === 0) {
-    console.error(
-      `JSON-LD validation found no HTML in ${DIST_DIR} — build first.`
-    )
-    process.exit(1)
-  }
-
-  const violations = files.flatMap(validateFile)
-  if (violations.length > 0) {
-    console.error(`JSON-LD validation failed (${violations.length} issue(s)):`)
-    for (const { file, message } of violations) {
-      console.error(`  ${file.replace(DIST_DIR, 'dist')}: ${message}`)
-    }
-    process.exit(1)
-  }
-
-  process.stdout.write(
-    `JSON-LD validation passed across ${files.length} page(s).\n`
-  )
-}
-
-main()

apps/website/src/components/blocks/HeroBackdrop01.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import HeroBackdrop01 from './HeroBackdrop01.vue'
-
-const sampleImage =
-  'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1600&q=80'
-
-const meta: Meta<typeof HeroBackdrop01> = {
-  title: 'Website/Blocks/HeroBackdrop01',
-  component: HeroBackdrop01,
-  tags: ['autodocs'],
-  args: {
-    backdrop: { type: 'image', src: sampleImage, alt: 'Abstract gradient' },
-    title: 'Build anything\nwith ComfyUI',
-    subtitle:
-      'A powerful, modular visual interface for building and running AI workflows.'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const WithBadge: Story = {
-  args: {
-    badgeText: 'New'
-  }
-}
-
-export const WithFootnote: Story = {
-  args: {
-    footnote: 'Available on Windows, macOS, and Linux.'
-  }
-}
-
-export const NoBackdrop: Story = {
-  args: {
-    backdrop: undefined
-  }
-}

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

@@ -1,193 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import { computed } from 'vue'
-import type { HTMLAttributes } from 'vue'
-
-import { prefersReducedMotion } from '../../composables/useReducedMotion'
-import ProductHeroBadge from '../common/ProductHeroBadge.vue'
-
-type Backdrop =
-  | { type: 'image'; src: string; alt?: string }
-  | { type: 'video'; src: string; poster?: string; alt?: string }
-
-const {
-  backdrop,
-  mobileBackdrop,
-  badgeText,
-  badgeLogoSrc,
-  badgeLogoAlt,
-  title,
-  subtitle,
-  footnote,
-  class: className
-} = defineProps<{
-  backdrop?: Backdrop
-  mobileBackdrop?: Backdrop
-  badgeText?: string
-  badgeLogoSrc?: string
-  badgeLogoAlt?: string
-  title: string
-  subtitle?: string
-  footnote?: string
-  class?: HTMLAttributes['class']
-}>()
-
-// Respect prefers-reduced-motion: don't autoplay the looping backdrop video
-// (WCAG 2.2.2). The paused video falls back to its poster/first frame.
-const reduceMotion = computed(() => prefersReducedMotion())
-
-// Removing the reactive `autoplay` attribute only suppresses the *initial*
-// play; it can't pause a video the browser has already started. That is
-// exactly the SSR case: the server renders `autoplay` (it can't read the
-// client's motion preference), the browser begins playback on parse, and the
-// post-hydration attribute removal is too late. Pause on mount so
-// reduced-motion users get the poster frame instead of a looping video.
-const pauseIfReduced = (el: unknown) => {
-  if (el instanceof HTMLVideoElement && reduceMotion.value) el.pause()
-}
-
-// On mobile the backdrop is an in-flow rounded card above the content; on
-// desktop it is the full-bleed background behind it. A single element serves
-// both roles via responsive classes — mobileBackdrop only swaps the source.
-const sharedBackdropClass =
-  'relative aspect-3/2 w-full rounded-3xl object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:size-full lg:rounded-none'
-
-// When both breakpoints use images, serve them from a single responsive <img>
-// so the browser fetches only the source matching the viewport. Two
-// `hidden`/`lg:hidden`-toggled <img> layers would each download (display:none
-// does not stop the fetch), doubling the high-priority load on an
-// LCP-critical hero. Videos or a mixed image/video pair can't collapse this
-// way and fall back to breakpoint-toggled layers below.
-const responsiveImage = computed(() => {
-  if (backdrop?.type !== 'image') return null
-  if (mobileBackdrop && mobileBackdrop.type !== 'image') return null
-  const base = mobileBackdrop ?? backdrop
-  return {
-    src: base.src,
-    alt: backdrop.alt ?? mobileBackdrop?.alt ?? '',
-    // Larger-viewport source; omitted when one image serves both breakpoints.
-    desktopSrc: mobileBackdrop ? backdrop.src : undefined
-  }
-})
-
-// Fallback for videos and mixed image/video pairs: toggle assets by breakpoint.
-const backdropLayers = computed(() => {
-  if (!backdrop) return []
-  if (mobileBackdrop) {
-    return [
-      {
-        backdrop: mobileBackdrop,
-        class: 'relative aspect-3/2 w-full rounded-3xl object-cover lg:hidden'
-      },
-      {
-        backdrop,
-        class: 'absolute inset-0 hidden size-full object-cover lg:block'
-      }
-    ]
-  }
-  return [{ backdrop, class: sharedBackdropClass }]
-})
-
-const scrimShape = 'farthest-side at 50% 50%'
-const scrimStyle = {
-  background: `radial-gradient(${scrimShape}, color-mix(in srgb, var(--color-primary-warm-white) 80%, transparent) 0%, transparent 80%)`,
-  maskImage: `radial-gradient(${scrimShape}, #000 45%, transparent 90%)`,
-  WebkitMaskImage: `radial-gradient(${scrimShape}, #000 45%, transparent 90%)`
-}
-</script>
-
-<template>
-  <section
-    :class="cn('max-w-9xl mx-auto px-4 pt-4 lg:px-6 lg:pt-6', className)"
-  >
-    <div class="relative overflow-hidden rounded-3xl">
-      <slot name="backdrop">
-        <picture v-if="responsiveImage" class="contents">
-          <source
-            v-if="responsiveImage.desktopSrc"
-            :srcset="responsiveImage.desktopSrc"
-            media="(min-width: 1024px)"
-          />
-          <img
-            :src="responsiveImage.src"
-            :alt="responsiveImage.alt"
-            fetchpriority="high"
-            decoding="async"
-            :class="sharedBackdropClass"
-          />
-        </picture>
-
-        <template v-else>
-          <template v-for="(layer, i) in backdropLayers" :key="i">
-            <video
-              v-if="layer.backdrop.type === 'video'"
-              :ref="pauseIfReduced"
-              :src="layer.backdrop.src"
-              :poster="layer.backdrop.poster"
-              :aria-label="layer.backdrop.alt"
-              :aria-hidden="layer.backdrop.alt ? undefined : true"
-              :autoplay="!reduceMotion"
-              loop
-              muted
-              playsinline
-              preload="metadata"
-              :class="layer.class"
-            />
-            <img
-              v-else
-              :src="layer.backdrop.src"
-              :alt="layer.backdrop.alt ?? ''"
-              fetchpriority="high"
-              decoding="async"
-              :class="layer.class"
-            />
-          </template>
-        </template>
-      </slot>
-
-      <div
-        class="relative flex flex-col justify-center px-0 pt-6 pb-8 lg:min-h-176 lg:px-16 lg:py-24"
-      >
-        <div class="relative w-full max-w-xl">
-          <div
-            aria-hidden="true"
-            class="pointer-events-none absolute -inset-12 hidden backdrop-blur-md lg:-inset-16 lg:block"
-            :style="scrimStyle"
-          />
-
-          <div class="relative">
-            <ProductHeroBadge
-              v-if="badgeText"
-              :text="badgeText"
-              :logo-src="badgeLogoSrc"
-              :logo-alt="badgeLogoAlt"
-            />
-
-            <h1
-              class="mt-10 text-4xl/tight font-light tracking-tight whitespace-pre-line text-primary-comfy-canvas lg:text-6xl/tight lg:text-primary-comfy-ink"
-            >
-              {{ title }}
-            </h1>
-
-            <p
-              v-if="subtitle"
-              class="mt-8 max-w-md text-base text-primary-comfy-canvas lg:text-lg lg:text-primary-comfy-ink"
-            >
-              {{ subtitle }}
-            </p>
-
-            <p
-              v-if="footnote"
-              class="mt-10 text-sm text-primary-comfy-canvas lg:text-primary-comfy-ink"
-            >
-              {{ footnote }}
-            </p>
-
-            <slot />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

apps/website/src/components/common/JsonLdGraph.astro

@@ -1,12 +0,0 @@
----
-import type { JsonLdGraph } from '../../utils/jsonLd'
-import { escapeJsonLd } from '../../utils/escapeJsonLd'
-
-interface Props {
-  graph: JsonLdGraph
-}
-
-const { graph } = Astro.props
----
-
-<script is:inline type="application/ld+json" set:html={escapeJsonLd(graph)} />

apps/website/src/config/pricing.ts

@@ -1,53 +0,0 @@
-import { t } from '../i18n/translations'
-import type { Locale, TranslationKey } from '../i18n/translations'
-import { externalLinks } from './routes'
-
-interface PricingTier {
-  slug: string
-  labelKey: TranslationKey
-  priceKey: TranslationKey
-}
-
-const tiers: PricingTier[] = [
-  {
-    slug: 'standard',
-    labelKey: 'pricing.plan.standard.label',
-    priceKey: 'pricing.plan.standard.price'
-  },
-  {
-    slug: 'creator',
-    labelKey: 'pricing.plan.creator.label',
-    priceKey: 'pricing.plan.creator.price'
-  },
-  {
-    slug: 'pro',
-    labelKey: 'pricing.plan.pro.label',
-    priceKey: 'pricing.plan.pro.price'
-  }
-]
-
-export interface PricingOffer {
-  name: string
-  price: string
-  url: string
-}
-
-export function pricingOffers(locale: Locale): PricingOffer[] {
-  return tiers.flatMap((tier) => {
-    const display = t(tier.priceKey, locale).trim()
-    const match = /^\$(\d+(?:\.\d+)?)$/.exec(display)
-    if (!match) {
-      console.warn(
-        `pricingOffers: skipping tier "${tier.slug}" (${locale}) — price "${display}" is not a plain USD amount`
-      )
-      return []
-    }
-    return [
-      {
-        name: t(tier.labelKey, locale),
-        price: match[1],
-        url: `${externalLinks.cloud}/cloud/subscribe?tier=${tier.slug}&cycle=monthly`
-      }
-    ]
-  })
-}

apps/website/src/config/routes.ts

@@ -82,19 +82,14 @@ export const externalLinks = {
   docsApi: 'https://docs.comfy.org/development/cloud/overview#quick-start',
   docsMcp: 'https://docs.comfy.org/agent-tools/cloud',
   docsSubscription: 'https://docs.comfy.org/support/subscription/subscribing',
-  g2ComfyUi: 'https://www.g2.com/products/comfyui',
   github: 'https://github.com/Comfy-Org/ComfyUI',
   githubInstall: 'https://github.com/Comfy-Org/ComfyUI#installing',
   instagram: 'https://www.instagram.com/comfyui/',
-  linkedin: 'https://www.linkedin.com/company/comfyui',
   mcpSkills: 'https://github.com/Comfy-Org/comfy-skills',
   platform: 'https://platform.comfy.org',
   platformUsage: 'https://platform.comfy.org/profile/usage',
   reddit: 'https://www.reddit.com/r/comfyui/',
   support: 'https://support.comfy.org/hc/en-us',
-  wikidataComfyOrg: 'https://www.wikidata.org/wiki/Q130598554',
-  wikidataComfyUi: 'https://www.wikidata.org/wiki/Q127798647',
-  wikipediaComfyUi: 'https://en.wikipedia.org/wiki/ComfyUI',
   workflows: 'https://comfy.org/workflows',
   x: 'https://x.com/ComfyUI',
   youtube: 'https://www.youtube.com/@ComfyOrg'

apps/website/src/i18n/translations.ts

@@ -2190,13 +2190,6 @@ const translations = {
   'nav.ctaCloudPrefix': { en: 'LAUNCH', 'zh-CN': '启动' },
   'nav.ctaCloudCore': { en: 'CLOUD', 'zh-CN': '云端' },
   'nav.home': { en: 'Comfy home', 'zh-CN': 'Comfy 首页' },
-  'breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
-  'breadcrumb.about': { en: 'About Us', 'zh-CN': '关于我们' },
-  'breadcrumb.contact': { en: 'Contact', 'zh-CN': '联系我们' },
-  'breadcrumb.download': { en: 'Download', 'zh-CN': '下载' },
-  'breadcrumb.careers': { en: 'Careers', 'zh-CN': '招聘' },
-  'breadcrumb.pricing': { en: 'Pricing', 'zh-CN': '定价' },
-  'breadcrumb.supportedNodes': { en: 'Supported Nodes', 'zh-CN': '支持的节点' },
   'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
   'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
   'nav.close': { en: 'Close', 'zh-CN': '关闭' },
@@ -4068,6 +4061,7 @@ const translations = {
     en: 'This page is being redesigned. Check back soon.',
     'zh-CN': '此页面正在重新设计中，请稍后再来。'
   },
+  'demos.breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
   'demos.breadcrumb.demos': { en: 'Demos', 'zh-CN': '演示' },
 
   'customers.story.whatsNext': {
@@ -4163,6 +4157,10 @@ const translations = {
     en: "Run the world's leading AI models in ComfyUI",
     'zh-CN': '在 ComfyUI 中运行世界领先的 AI 模型'
   },
+  'models.breadcrumb.home': {
+    en: 'Home',
+    'zh-CN': '首页'
+  },
   'models.breadcrumb.models': {
     en: 'Supported Models',
     'zh-CN': '支持的模型'

apps/website/src/layouts/BaseLayout.astro

@@ -14,10 +14,8 @@ import {
   createBannerVersion,
   evaluateBannerVisibility
 } from '../utils/banner'
+import { escapeJsonLd } from '../utils/escapeJsonLd'
 import { fetchGitHubStars, formatStarCount } from '../utils/github'
-import { buildPageGraph, pageContext } from '../utils/jsonLd'
-import type { Crumb, JsonLdNode, WebPageType } from '../utils/jsonLd'
-import JsonLdGraph from '../components/common/JsonLdGraph.astro'
 
 interface Props {
   title: string
@@ -25,10 +23,6 @@ interface Props {
   keywords?: string[]
   ogImage?: string
   noindex?: boolean
-  pageType?: WebPageType
-  breadcrumbs?: Crumb[]
-  mainEntityId?: string
-  extraJsonLd?: (JsonLdNode | null | undefined)[]
 }
 
 const {
@@ -37,21 +31,15 @@ const {
   keywords,
   ogImage = 'https://media.comfy.org/website/comfy.webp',
   noindex = false,
-  pageType,
-  breadcrumbs,
-  mainEntityId,
-  extraJsonLd,
 } = Astro.props
 
 const keywordsContent = keywords && keywords.length > 0 ? keywords.join(', ') : undefined
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const canonicalURL = new URL(url)
-const ogImageURL = new URL(ogImage, Astro.site ?? 'https://comfy.org')
+const siteBase = Astro.site ?? 'https://comfy.org'
+const canonicalURL = new URL(Astro.url.pathname, siteBase)
+const ogImageURL = new URL(ogImage, siteBase)
+const rawLocale = Astro.currentLocale ?? 'en'
+const locale: Locale = rawLocale === 'zh-CN' ? 'zh-CN' : 'en'
 const rawStars = await fetchGitHubStars('Comfy-Org', 'ComfyUI')
 const githubStars = rawStars ? formatStarCount(rawStars) : ''
 
@@ -70,21 +58,28 @@ const bannerVersion = createBannerVersion(bannerData, locale)
 const gtmId = 'GTM-NP9JM6K7'
 const gtmEnabled = import.meta.env.PROD
 
-const structuredData = noindex
-  ? undefined
-  : buildPageGraph(
-      { siteUrl, locale },
-      {
-        url,
-        name: title,
-        description,
-        imageUrl: ogImageURL.href,
-        type: pageType,
-        crumbs: breadcrumbs,
-        mainEntityId,
-      },
-      ...(extraJsonLd ?? []),
-    )
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'Comfy Org',
+  url: 'https://comfy.org',
+  logo: 'https://comfy.org/icons/logomark.svg',
+  sameAs: [
+    'https://github.com/comfyanonymous/ComfyUI',
+    'https://discord.gg/comfyorg',
+    'https://x.com/comaboratory',
+    'https://reddit.com/r/comfyui',
+    'https://linkedin.com/company/comfyorg',
+    'https://instagram.com/comfyorg',
+  ],
+}
+
+const websiteJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: 'Comfy',
+  url: 'https://comfy.org',
+}
 ---
 
 <!doctype html>
@@ -126,7 +121,10 @@ const structuredData = noindex
     <meta name="twitter:image" content={ogImageURL.href} />
 
     <!-- Structured Data -->
-    {structuredData && <JsonLdGraph graph={structuredData} />}
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(organizationJsonLd)} />
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(websiteJsonLd)} />
+    <slot name="head" />
+
     <slot name="head" />
 
     <!-- Google Tag Manager -->
@@ -146,6 +144,7 @@ const structuredData = noindex
     )}
 
     <ClientRouter />
+    <slot name="head" />
 
     <!-- Hide an already-dismissed announcement banner before first paint (no flash/shift). -->
     {bannerVisible && (

apps/website/src/pages/about.astro

@@ -5,25 +5,9 @@ import StorySection from '../components/about/StorySection.vue'
 import OurValuesSection from '../components/about/OurValuesSection.vue'
 import ValuesSection from '../components/about/ValuesSection.vue'
 import CareersSection from '../components/about/CareersSection.vue'
-import { t } from '../i18n/translations'
-import { absoluteUrl, organizationId, pageContext } from '../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
-<BaseLayout
-  title="About Us — Comfy"
-  pageType="AboutPage"
-  mainEntityId={organizationId(siteUrl)}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: t('breadcrumb.about', locale) },
-  ]}
->
+<BaseLayout title="About Us — Comfy">
   <HeroSection client:load />
   <StorySection />
   <OurValuesSection />

apps/website/src/pages/affiliates/index.astro

@@ -9,36 +9,34 @@ import HeroSection from '../../templates/affiliate/HeroSection.vue'
 import HowItWorksSection from '../../templates/affiliate/HowItWorksSection.vue'
 import { affiliateFaqs } from '../../data/affiliateFaq'
 import { t } from '../../i18n/translations'
-import type { JsonLdNode } from '../../utils/jsonLd'
-import { absoluteUrl, jsonLdId, pageContext } from '../../utils/jsonLd'
 
-const pageTitle = t('affiliate.page.title', 'en')
-const pageDescription = t('affiliate.page.description', 'en')
-const { locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const faqPage: JsonLdNode = {
+const locale = 'en' as const
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
   '@type': 'FAQPage',
-  '@id': jsonLdId(url, 'faq'),
   mainEntity: affiliateFaqs.map((faq) => ({
     '@type': 'Question',
     name: faq.question[locale],
-    acceptedAnswer: { '@type': 'Answer', text: faq.answer[locale] },
-  })),
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq.answer[locale]
+    }
+  }))
 }
 ---
 
 <BaseLayout
-  title={pageTitle}
-  description={pageDescription}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: pageTitle },
-  ]}
-  extraJsonLd={[faqPage]}
+  title={t('affiliate.page.title', locale)}
+  description={t('affiliate.page.description', locale)}
 >
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
 
   <HeroSection />
   <HowItWorksSection />

apps/website/src/pages/careers.astro

@@ -7,13 +7,6 @@ import TeamPhotosSection from '../components/careers/TeamPhotosSection.vue'
 import FAQSection from '../components/common/FAQSection.vue'
 import { fetchRolesForBuild } from '../utils/ashby'
 import { reportAshbyOutcome } from '../utils/ashby.ci'
-import { t } from '../i18n/translations'
-import {
-  absoluteUrl,
-  itemListNode,
-  jsonLdId,
-  pageContext,
-} from '../utils/jsonLd'
 
 const outcome = await fetchRolesForBuild()
 reportAshbyOutcome(outcome)
@@ -26,31 +19,11 @@ if (outcome.status === 'failed') {
 }
 
 const departments = outcome.snapshot.departments
-
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const roles = itemListNode(
-  url,
-  t('breadcrumb.careers', locale),
-  departments.flatMap((department) =>
-    department.roles.map((role) => ({ name: role.title, url: role.jobUrl })),
-  ),
-)
 ---
 
 <BaseLayout
   title="Careers — Comfy"
   description="Join the team building the operating system for generative AI. Open roles in engineering, design, marketing, and more."
-  pageType="CollectionPage"
-  mainEntityId={jsonLdId(url, 'itemlist')}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: t('breadcrumb.careers', locale) },
-  ]}
-  extraJsonLd={[roles]}
 >
   <HeroSection />
   <RolesSection departments={departments} client:visible />

apps/website/src/pages/cloud/pricing.astro

@@ -2,41 +2,9 @@
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import PriceSection from '../../components/pricing/PriceSection.vue'
 import WhatsIncludedSection from '../../components/pricing/WhatsIncludedSection.vue'
-import { pricingOffers } from '../../config/pricing'
-import { t } from '../../i18n/translations'
-import {
-  absoluteUrl,
-  jsonLdId,
-  pageContext,
-  productNode,
-} from '../../utils/jsonLd'
-
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const productId = jsonLdId(url, 'product')
 ---
 
-<BaseLayout
-  title="Pricing — Comfy Cloud"
-  mainEntityId={productId}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
-    { name: t('breadcrumb.pricing', locale) },
-  ]}
-  extraJsonLd={[
-    productNode({
-      siteUrl,
-      id: productId,
-      name: 'Comfy Cloud',
-      url,
-      offers: pricingOffers(locale),
-    }),
-  ]}
->
+<BaseLayout title="Pricing — Comfy Cloud">
   <PriceSection client:load />
   <WhatsIncludedSection />
 </BaseLayout>

apps/website/src/pages/cloud/supported-nodes.astro

@@ -4,44 +4,39 @@ import HeroSection from '../../components/cloud-nodes/HeroSection.vue'
 import PackGridSection from '../../components/cloud-nodes/PackGridSection.vue'
 import { t } from '../../i18n/translations'
 import { loadPacksForBuild } from '../../utils/cloudNodes.build'
-import {
-  absoluteUrl,
-  itemListNode,
-  jsonLdId,
-  pageContext,
-} from '../../utils/jsonLd'
+import { escapeJsonLd } from '../../utils/escapeJsonLd'
 
 const packs = await loadPacksForBuild()
 
-const title = t('cloudNodes.meta.title', 'en')
-const description = t('cloudNodes.meta.description', 'en')
-const { url, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const packList = itemListNode(
-  url,
-  title,
-  packs.map((pack) => ({
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL('/cloud/supported-nodes', siteBase).href
+
+const itemListJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  name: 'Custom-node packs supported on Comfy Cloud',
+  url: pageUrl,
+  numberOfItems: packs.length,
+  itemListElement: packs.map((pack, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    url: new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href,
     name: pack.displayName,
-    url: absoluteUrl(Astro.site, `/cloud/supported-nodes/${pack.id}`),
-  })),
-)
+    image: pack.bannerUrl || pack.iconUrl
+  }))
+}
 ---
 
 <BaseLayout
-  title={title}
-  description={description}
-  pageType="CollectionPage"
-  mainEntityId={jsonLdId(url, 'itemlist')}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
-    { name: t('breadcrumb.supportedNodes', locale) },
-  ]}
-  extraJsonLd={[packList]}
+  title={t('cloudNodes.meta.title', 'en')}
+  description={t('cloudNodes.meta.description', 'en')}
 >
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(itemListJsonLd)}
+  />
   <HeroSection client:visible />
   <PackGridSection packs={packs} client:visible />
 </BaseLayout>

apps/website/src/pages/cloud/supported-nodes/[pack].astro

@@ -7,12 +7,7 @@ import PackDetail from '../../../components/cloud-nodes/PackDetail.vue'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { t } from '../../../i18n/translations'
 import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
-import {
-  absoluteUrl,
-  jsonLdId,
-  pageContext,
-  softwareApplicationNode,
-} from '../../../utils/jsonLd'
+import { escapeJsonLd } from '../../../utils/escapeJsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -34,45 +29,35 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'en')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const softwareId = jsonLdId(url, 'software')
-const software = softwareApplicationNode({
-  siteUrl,
-  id: softwareId,
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href
+
+const softwareJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
   name: pack.displayName,
-  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  description: pack.description || undefined,
+  url: pageUrl,
+  description,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  authorName: pack.publisher?.name,
-  isFree: true,
-})
+  author: pack.publisher?.name
+    ? { '@type': 'Person', name: pack.publisher.name }
+    : undefined,
+  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
+}
 ---
 
-<BaseLayout
-  title={title}
-  description={metaDescription}
-  ogImage={pack.bannerUrl}
-  mainEntityId={softwareId}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
-    {
-      name: t('breadcrumb.supportedNodes', locale),
-      url: absoluteUrl(Astro.site, '/cloud/supported-nodes'),
-    },
-    { name: pack.displayName },
-  ]}
-  extraJsonLd={[software]}
->
+<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(softwareJsonLd)}
+  />
   <PackDetail pack={pack} />
 </BaseLayout>

apps/website/src/pages/contact.astro

@@ -2,25 +2,9 @@
 import BaseLayout from '../layouts/BaseLayout.astro'
 import FormSection from '../components/contact/FormSection.vue'
 import SocialProofBarSection from '../components/common/SocialProofBarSection.vue'
-import { t } from '../i18n/translations'
-import { absoluteUrl, organizationId, pageContext } from '../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
-<BaseLayout
-  title="Contact — Comfy"
-  pageType="ContactPage"
-  mainEntityId={organizationId(siteUrl)}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: t('breadcrumb.contact', locale) },
-  ]}
->
+<BaseLayout title="Contact — Comfy">
   <FormSection client:load />
   <SocialProofBarSection />
 </BaseLayout>

apps/website/src/pages/demos/[slug].astro

@@ -7,13 +7,6 @@ import DemoTranscript from '../../components/demos/DemoTranscript.vue'
 import DemoNavSection from '../../components/demos/DemoNavSection.vue'
 import { demos, getDemoBySlug, getNextDemo } from '../../config/demos'
 import { t } from '../../i18n/translations'
-import type { JsonLdNode } from '../../utils/jsonLd'
-import {
-  absoluteUrl,
-  jsonLdId,
-  organizationId,
-  pageContext,
-} from '../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return demos.map((demo) => ({
@@ -26,34 +19,68 @@ const demo = getDemoBySlug(slug as string)!
 const nextDemo = getNextDemo(slug as string)
 const title = t(demo.title)
 const description = t(demo.description)
+const canonicalURL = new URL(`/demos/${demo.slug}`, Astro.site)
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const educationalLevel =
-  demo.difficulty === 'beginner'
+const howToJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  image: new URL(demo.ogImage, Astro.site).href,
+  totalTime: demo.durationIso,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const learningResourceJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'LearningResource',
+  name: title,
+  description,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel: demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced'
-const learningId = jsonLdId(url, 'learning')
-const learningResource: JsonLdNode = {
-  '@type': 'LearningResource',
-  '@id': learningId,
-  name: title,
-  description,
-  url,
-  image: new URL(demo.ogImage, Astro.site).href,
-  learningResourceType: 'interactive tutorial',
-  interactivityType: 'active',
-  educationalLevel,
-  timeRequired: demo.durationIso,
+      : 'Advanced',
+  url: canonicalURL.href,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  isPartOf: { '@id': jsonLdId(url, 'webpage') },
-  author: { '@id': organizationId(siteUrl) },
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('demos.breadcrumb.home'),
+      item: 'https://comfy.org'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('demos.breadcrumb.demos'),
+      item: 'https://comfy.org/demos'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: title
+    }
+  ]
 }
 ---
 
@@ -61,20 +88,25 @@ const learningResource: JsonLdNode = {
   title={`${title} — Comfy`}
   description={description}
   ogImage={demo.ogImage}
-  mainEntityId={learningId}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    {
-      name: t('demos.breadcrumb.demos', locale),
-      url: absoluteUrl(Astro.site, '/demos'),
-    },
-    { name: title },
-  ]}
-  extraJsonLd={[learningResource]}
 >
   <Fragment slot="head">
     <meta property="article:published_time" content={demo.publishedDate} />
     <meta property="article:modified_time" content={demo.modifiedDate} />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(howToJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(learningResourceJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
     <link rel="preconnect" href="https://demo.arcade.software" />
   </Fragment>
 

apps/website/src/pages/download.astro

@@ -8,29 +8,11 @@ import EcoSystemSection from '../components/product/local/EcoSystemSection.vue'
 import ProductCardsSection from '../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../components/product/local/FAQSection.vue'
 import { t } from '../i18n/translations'
-import {
-  absoluteUrl,
-  comfyUiApplicationNode,
-  comfyUiSoftwareId,
-  pageContext,
-} from '../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
 <BaseLayout
   title="Download Comfy Desktop — Run AI on Your Hardware"
   description={t('download.hero.subtitle', 'en')}
-  mainEntityId={comfyUiSoftwareId(siteUrl)}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: t('breadcrumb.download', locale) },
-  ]}
-  extraJsonLd={[comfyUiApplicationNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui desktop app', 'comfyui desktop', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux']}
 >
   <CloudBannerSection />

apps/website/src/pages/index.astro

@@ -9,28 +9,11 @@ import CaseStudySpotlightSection from "../components/home/CaseStudySpotlightSect
 import GetStartedSection from "../components/home/GetStartedSection.vue";
 import BuildWhatSection from "../components/home/BuildWhatSection.vue";
 import { t } from "../i18n/translations";
-import {
-  comfyUiApplicationNode,
-  comfyUiSoftwareId,
-  comfyUiSourceCodeNode,
-  pageContext,
-} from "../utils/jsonLd";
-
-const { siteUrl } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-);
 ---
 
 <BaseLayout
   title="Comfy — Professional Control of Visual AI"
   description={t("hero.subtitle", "en")}
-  mainEntityId={comfyUiSoftwareId(siteUrl)}
-  extraJsonLd={[
-    comfyUiApplicationNode(siteUrl),
-    comfyUiSourceCodeNode(siteUrl),
-  ]}
   keywords={[
     "comfyui app",
     "comfyui web app",

apps/website/src/pages/p/supported-models/[slug].astro

@@ -4,13 +4,6 @@ import BaseLayout from '../../../layouts/BaseLayout.astro'
 import ModelHeroSection from '../../../components/models/ModelHeroSection.vue'
 import { models, getModelBySlug } from '../../../config/models'
 import { t } from '../../../i18n/translations'
-import type { JsonLdNode } from '../../../utils/jsonLd'
-import {
-  absoluteUrl,
-  jsonLdId,
-  pageContext,
-  softwareApplicationNode,
-} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return models.map((model) => ({
@@ -26,6 +19,7 @@ if (model.canonicalSlug) {
 }
 
 const { displayName } = model
+const canonicalURL = new URL(`/p/supported-models/${model.slug}`, Astro.site)
 
 const dirDescriptions: Record<string, string> = {
   diffusion_models: 'a diffusion model that generates images or video from text and image prompts',
@@ -46,31 +40,55 @@ const dirDescriptions: Record<string, string> = {
 const dirDesc = dirDescriptions[model.directory] ?? 'an AI model'
 const whatIsDescription = `${displayName} is ${dirDesc}. You can run it locally in ComfyUI with full control over every parameter, or access it through Comfy Cloud. ComfyUI's node-based workflow editor lets you connect ${displayName} with ControlNets, LoRAs, upscalers, and custom nodes to build any pipeline you need. There are ${model.workflowCount} community workflow templates using ${displayName} on Comfy Hub, ready to load and customize.`
 
-const pageTitle = `${displayName} in ComfyUI`
-const pageDescription = `Run ${displayName} in ComfyUI with full parameter control. ${model.workflowCount} community workflow templates, step-by-step tutorials, and free local inference.`
-
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const softwareId = jsonLdId(url, 'software')
-const software = softwareApplicationNode({
-  siteUrl,
-  id: softwareId,
+const softwareAppJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
   name: displayName,
-  url,
   applicationCategory: 'MultimediaApplication',
   operatingSystem: 'Any',
-})
-const faqPage: JsonLdNode = {
+  url: canonicalURL.href,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('models.breadcrumb.home'),
+      item: 'https://comfy.org'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('models.breadcrumb.models'),
+      item: 'https://comfy.org/p/supported-models'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: displayName
+    }
+  ]
+}
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
   '@type': 'FAQPage',
-  '@id': jsonLdId(url, 'faq'),
   mainEntity: [
     {
       '@type': 'Question',
       name: `What is ${displayName}?`,
-      acceptedAnswer: { '@type': 'Answer', text: whatIsDescription },
+      acceptedAnswer: {
+        '@type': 'Answer',
+        text: whatIsDescription
+      }
     },
     {
       '@type': 'Question',
@@ -79,44 +97,54 @@ const faqPage: JsonLdNode = {
         '@type': 'Answer',
         text: model.docsUrl
           ? `Follow the step-by-step tutorial at ${model.docsUrl}. You can also load any of the ${model.workflowCount} community workflow templates that use ${displayName} directly in ComfyUI.`
-          : `Open ComfyUI and browse the ${model.workflowCount} community workflow templates that use ${displayName}. Load one as a starting point, then customize the nodes and parameters to fit your use case.`,
-      },
+          : `Open ComfyUI and browse the ${model.workflowCount} community workflow templates that use ${displayName}. Load one as a starting point, then customize the nodes and parameters to fit your use case.`
+      }
     },
     {
       '@type': 'Question',
       name: `How many ComfyUI workflows use ${displayName}?`,
       acceptedAnswer: {
         '@type': 'Answer',
-        text: `There are ${model.workflowCount} community workflow templates that use ${displayName} on Comfy Hub. Each template is ready to run in ComfyUI and can be customized to suit your project.`,
-      },
+        text: `There are ${model.workflowCount} community workflow templates that use ${displayName} on Comfy Hub. Each template is ready to run in ComfyUI and can be customized to suit your project.`
+      }
     },
     {
       '@type': 'Question',
       name: `Is ${displayName} free to use in ComfyUI?`,
       acceptedAnswer: {
         '@type': 'Answer',
-        text: `ComfyUI is free and open source. ${model.huggingFaceUrl ? `${displayName} weights are available to download from Hugging Face.` : `${displayName} is available as a cloud API through Comfy Cloud.`} You only pay for compute when running on Comfy Cloud; local inference on your own hardware is always free.`,
-      },
-    },
-  ],
+        text: `ComfyUI is free and open source. ${model.huggingFaceUrl ? `${displayName} weights are available to download from Hugging Face.` : `${displayName} is available as a cloud API through Comfy Cloud.`} You only pay for compute when running on Comfy Cloud; local inference on your own hardware is always free.`
+      }
+    }
+  ]
 }
+
+const pageTitle = `${displayName} in ComfyUI`
+const pageDescription = `Run ${displayName} in ComfyUI with full parameter control. ${model.workflowCount} community workflow templates, step-by-step tutorials, and free local inference.`
 ---
 
 <BaseLayout
   title={`${pageTitle} — Comfy`}
   description={pageDescription}
   ogImage={model.thumbnailUrl}
-  mainEntityId={softwareId}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    {
-      name: t('models.breadcrumb.models', locale),
-      url: absoluteUrl(Astro.site, '/p/supported-models'),
-    },
-    { name: displayName },
-  ]}
-  extraJsonLd={[software, faqPage]}
 >
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(softwareAppJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
 
   <ModelHeroSection
     displayName={displayName}

apps/website/src/pages/p/supported-models/index.astro

@@ -2,29 +2,10 @@
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { models } from '../../../config/models'
 import { t } from '../../../i18n/translations'
-import {
-  absoluteUrl,
-  itemListNode,
-  jsonLdId,
-  pageContext,
-} from '../../../utils/jsonLd'
 
 const title = t('models.index.title')
 const subtitle = t('models.index.subtitle')
 
-const { url, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const modelList = itemListNode(
-  url,
-  title,
-  models.map((model) => ({
-    url: absoluteUrl(Astro.site, `/p/supported-models/${model.slug}`),
-  })),
-)
-
 const dirLabel: Record<string, string> = {
   diffusion_models: 'Diffusion',
   checkpoints: 'Checkpoint',
@@ -45,13 +26,6 @@ const dirLabel: Record<string, string> = {
 <BaseLayout
   title={`${title} — Comfy`}
   description={subtitle}
-  pageType="CollectionPage"
-  mainEntityId={jsonLdId(url, 'itemlist')}
-  breadcrumbs={[
-    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
-    { name: title },
-  ]}
-  extraJsonLd={[modelList]}
 >
   <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-24">
     <header class="mb-12">

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

@@ -5,29 +5,9 @@ import StorySection from '../../components/about/StorySection.vue'
 import OurValuesSection from '../../components/about/OurValuesSection.vue'
 import ValuesSection from '../../components/about/ValuesSection.vue'
 import CareersSection from '../../components/about/CareersSection.vue'
-import { t } from '../../i18n/translations'
-import { absoluteUrl, organizationId, pageContext } from '../../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
-<BaseLayout
-  title="关于我们 — Comfy"
-  description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。"
-  pageType="AboutPage"
-  mainEntityId={organizationId(siteUrl)}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: t('breadcrumb.about', locale) },
-  ]}
->
+<BaseLayout title="关于我们 — Comfy" description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。">
   <HeroSection locale="zh-CN" client:load />
   <StorySection locale="zh-CN" />
   <OurValuesSection locale="zh-CN" />

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

@@ -7,13 +7,6 @@ import TeamPhotosSection from '../../components/careers/TeamPhotosSection.vue'
 import FAQSection from '../../components/common/FAQSection.vue'
 import { fetchRolesForBuild } from '../../utils/ashby'
 import { reportAshbyOutcome } from '../../utils/ashby.ci'
-import { t } from '../../i18n/translations'
-import {
-  absoluteUrl,
-  itemListNode,
-  jsonLdId,
-  pageContext,
-} from '../../utils/jsonLd'
 
 const outcome = await fetchRolesForBuild()
 reportAshbyOutcome(outcome)
@@ -26,34 +19,11 @@ if (outcome.status === 'failed') {
 }
 
 const departments = outcome.snapshot.departments
-
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const roles = itemListNode(
-  url,
-  t('breadcrumb.careers', locale),
-  departments.flatMap((department) =>
-    department.roles.map((role) => ({ name: role.title, url: role.jobUrl })),
-  ),
-)
 ---
 
 <BaseLayout
   title="招聘 — Comfy"
   description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
-  pageType="CollectionPage"
-  mainEntityId={jsonLdId(url, 'itemlist')}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: t('breadcrumb.careers', locale) },
-  ]}
-  extraJsonLd={[roles]}
 >
   <HeroSection locale="zh-CN" />
   <RolesSection locale="zh-CN" departments={departments} client:visible />

apps/website/src/pages/zh-CN/cloud/pricing.astro

@@ -2,44 +2,9 @@
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import PriceSection from '../../../components/pricing/PriceSection.vue'
 import WhatsIncludedSection from '../../../components/pricing/WhatsIncludedSection.vue'
-import { pricingOffers } from '../../../config/pricing'
-import { t } from '../../../i18n/translations'
-import {
-  absoluteUrl,
-  jsonLdId,
-  pageContext,
-  productNode,
-} from '../../../utils/jsonLd'
-
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const productId = jsonLdId(url, 'product')
 ---
 
-<BaseLayout
-  title="定价 — Comfy Cloud"
-  mainEntityId={productId}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
-    { name: t('breadcrumb.pricing', locale) },
-  ]}
-  extraJsonLd={[
-    productNode({
-      siteUrl,
-      id: productId,
-      name: 'Comfy Cloud',
-      url,
-      offers: pricingOffers(locale),
-    }),
-  ]}
->
+<BaseLayout title="定价 — Comfy Cloud">
   <PriceSection locale="zh-CN" client:load />
   <WhatsIncludedSection locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes.astro

@@ -4,47 +4,39 @@ import HeroSection from '../../../components/cloud-nodes/HeroSection.vue'
 import PackGridSection from '../../../components/cloud-nodes/PackGridSection.vue'
 import { t } from '../../../i18n/translations'
 import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
-import {
-  absoluteUrl,
-  itemListNode,
-  jsonLdId,
-  pageContext,
-} from '../../../utils/jsonLd'
+import { escapeJsonLd } from '../../../utils/escapeJsonLd'
 
 const packs = await loadPacksForBuild()
 
-const title = t('cloudNodes.meta.title', 'zh-CN')
-const description = t('cloudNodes.meta.description', 'zh-CN')
-const { url, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const packList = itemListNode(
-  url,
-  title,
-  packs.map((pack) => ({
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL('/zh-CN/cloud/supported-nodes', siteBase).href
+
+const itemListJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  name: 'Comfy Cloud 支持的自定义节点包',
+  url: pageUrl,
+  numberOfItems: packs.length,
+  itemListElement: packs.map((pack, index) => ({
+    '@type': 'ListItem',
+    position: index + 1,
+    url: new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href,
     name: pack.displayName,
-    url: absoluteUrl(Astro.site, `/zh-CN/cloud/supported-nodes/${pack.id}`),
-  })),
-)
+    image: pack.bannerUrl || pack.iconUrl
+  }))
+}
 ---
 
 <BaseLayout
-  title={title}
-  description={description}
-  pageType="CollectionPage"
-  mainEntityId={jsonLdId(url, 'itemlist')}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
-    { name: t('breadcrumb.supportedNodes', locale) },
-  ]}
-  extraJsonLd={[packList]}
+  title={t('cloudNodes.meta.title', 'zh-CN')}
+  description={t('cloudNodes.meta.description', 'zh-CN')}
 >
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(itemListJsonLd)}
+  />
   <HeroSection locale="zh-CN" client:visible />
   <PackGridSection locale="zh-CN" packs={packs} client:visible />
 </BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes/[pack].astro

@@ -7,12 +7,7 @@ import PackDetail from '../../../../components/cloud-nodes/PackDetail.vue'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
 import { t } from '../../../../i18n/translations'
 import { loadPacksForBuild } from '../../../../utils/cloudNodes.build'
-import {
-  absoluteUrl,
-  jsonLdId,
-  pageContext,
-  softwareApplicationNode,
-} from '../../../../utils/jsonLd'
+import { escapeJsonLd } from '../../../../utils/escapeJsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -34,48 +29,35 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'zh-CN')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const softwareId = jsonLdId(url, 'software')
-const software = softwareApplicationNode({
-  siteUrl,
-  id: softwareId,
+const siteBase = Astro.site ?? new URL('https://comfy.org')
+const pageUrl = new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href
+
+const softwareJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
   name: pack.displayName,
-  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  description: pack.description || undefined,
+  url: pageUrl,
+  description,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  authorName: pack.publisher?.name,
-  isFree: true,
-})
+  author: pack.publisher?.name
+    ? { '@type': 'Person', name: pack.publisher.name }
+    : undefined,
+  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
+}
 ---
 
-<BaseLayout
-  title={title}
-  description={metaDescription}
-  ogImage={pack.bannerUrl}
-  mainEntityId={softwareId}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
-    {
-      name: t('breadcrumb.supportedNodes', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN/cloud/supported-nodes'),
-    },
-    { name: pack.displayName },
-  ]}
-  extraJsonLd={[software]}
->
+<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
+  <script
+    is:inline
+    slot="head"
+    type="application/ld+json"
+    set:html={escapeJsonLd(softwareJsonLd)}
+  />
   <PackDetail pack={pack} locale="zh-CN" />
 </BaseLayout>

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

@@ -2,28 +2,9 @@
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import FormSection from '../../components/contact/FormSection.vue'
 import SocialProofBarSection from '../../components/common/SocialProofBarSection.vue'
-import { t } from '../../i18n/translations'
-import { absoluteUrl, organizationId, pageContext } from '../../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
-<BaseLayout
-  title="联系我们 — Comfy"
-  pageType="ContactPage"
-  mainEntityId={organizationId(siteUrl)}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: t('breadcrumb.contact', locale) },
-  ]}
->
+<BaseLayout title="联系我们 — Comfy">
   <FormSection locale="zh-CN" client:load />
   <SocialProofBarSection />
 </BaseLayout>

apps/website/src/pages/zh-CN/demos/[slug].astro

@@ -7,13 +7,6 @@ import DemoTranscript from '../../../components/demos/DemoTranscript.vue'
 import DemoNavSection from '../../../components/demos/DemoNavSection.vue'
 import { demos, getDemoBySlug, getNextDemo } from '../../../config/demos'
 import { t } from '../../../i18n/translations'
-import type { JsonLdNode } from '../../../utils/jsonLd'
-import {
-  absoluteUrl,
-  jsonLdId,
-  organizationId,
-  pageContext,
-} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return demos.map((demo) => ({
@@ -26,34 +19,68 @@ const demo = getDemoBySlug(slug as string)!
 const nextDemo = getNextDemo(slug as string)
 const title = t(demo.title, 'zh-CN')
 const description = t(demo.description, 'zh-CN')
+const canonicalURL = new URL(`/zh-CN/demos/${demo.slug}`, Astro.site)
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const educationalLevel =
-  demo.difficulty === 'beginner'
+const howToJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  image: new URL(demo.ogImage, Astro.site).href,
+  totalTime: demo.durationIso,
+  datePublished: demo.publishedDate,
+  dateModified: demo.modifiedDate,
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const learningResourceJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'LearningResource',
+  name: title,
+  description,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel: demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced'
-const learningId = jsonLdId(url, 'learning')
-const learningResource: JsonLdNode = {
-  '@type': 'LearningResource',
-  '@id': learningId,
-  name: title,
-  description,
-  url,
-  image: new URL(demo.ogImage, Astro.site).href,
-  learningResourceType: 'interactive tutorial',
-  interactivityType: 'active',
-  educationalLevel,
-  timeRequired: demo.durationIso,
+      : 'Advanced',
+  url: canonicalURL.href,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  isPartOf: { '@id': jsonLdId(url, 'webpage') },
-  author: { '@id': organizationId(siteUrl) },
+  author: {
+    '@type': 'Organization',
+    name: 'Comfy Org',
+    url: 'https://comfy.org'
+  }
+}
+
+const breadcrumbJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'BreadcrumbList',
+  itemListElement: [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: t('demos.breadcrumb.home', 'zh-CN'),
+      item: 'https://comfy.org/zh-CN'
+    },
+    {
+      '@type': 'ListItem',
+      position: 2,
+      name: t('demos.breadcrumb.demos', 'zh-CN'),
+      item: 'https://comfy.org/zh-CN/demos'
+    },
+    {
+      '@type': 'ListItem',
+      position: 3,
+      name: title
+    }
+  ]
 }
 ---
 
@@ -61,23 +88,25 @@ const learningResource: JsonLdNode = {
   title={`${title} — Comfy`}
   description={description}
   ogImage={demo.ogImage}
-  mainEntityId={learningId}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    {
-      name: t('demos.breadcrumb.demos', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN/demos'),
-    },
-    { name: title },
-  ]}
-  extraJsonLd={[learningResource]}
 >
   <Fragment slot="head">
     <meta property="article:published_time" content={demo.publishedDate} />
     <meta property="article:modified_time" content={demo.modifiedDate} />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(howToJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(learningResourceJsonLd)}
+    />
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(breadcrumbJsonLd)}
+    />
     <link rel="preconnect" href="https://demo.arcade.software" />
   </Fragment>
 

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

@@ -8,32 +8,11 @@ import EcoSystemSection from '../../components/product/local/EcoSystemSection.vu
 import ProductCardsSection from '../../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../../components/product/local/FAQSection.vue'
 import { t } from '../../i18n/translations'
-import {
-  absoluteUrl,
-  comfyUiApplicationNode,
-  comfyUiSoftwareId,
-  pageContext,
-} from '../../utils/jsonLd'
-
-const { siteUrl, locale } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
 <BaseLayout
   title="下载 Comfy 桌面版 — 在您的硬件上运行 AI"
   description={t('download.hero.subtitle', 'zh-CN')}
-  mainEntityId={comfyUiSoftwareId(siteUrl)}
-  breadcrumbs={[
-    {
-      name: t('breadcrumb.home', locale),
-      url: absoluteUrl(Astro.site, '/zh-CN'),
-    },
-    { name: t('breadcrumb.download', locale) },
-  ]}
-  extraJsonLd={[comfyUiApplicationNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui desktop app', 'comfyui download', 'ComfyUI 下载', 'ComfyUI 桌面应用', 'ComfyUI 应用', 'ComfyUI Windows', 'ComfyUI macOS', 'ComfyUI Linux']}
 >
   <CloudBannerSection locale="zh-CN" />

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

@@ -9,25 +9,11 @@ import CaseStudySpotlightSection from '../../components/home/CaseStudySpotlightS
 import GetStartedSection from '../../components/home/GetStartedSection.vue'
 import BuildWhatSection from '../../components/home/BuildWhatSection.vue'
 import { t } from '../../i18n/translations'
-import {
-  comfyUiApplicationNode,
-  comfyUiSoftwareId,
-  comfyUiSourceCodeNode,
-  pageContext,
-} from '../../utils/jsonLd'
-
-const { siteUrl } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
 ---
 
 <BaseLayout
   title="Comfy — 视觉 AI 的最强可控性"
   description={t('hero.subtitle', 'zh-CN')}
-  mainEntityId={comfyUiSoftwareId(siteUrl)}
-  extraJsonLd={[comfyUiApplicationNode(siteUrl), comfyUiSourceCodeNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui web app', 'comfyui application', 'ComfyUI 应用', 'ComfyUI 网页版', 'ComfyUI 桌面应用', 'ComfyUI 下载', '可视化 AI', '节点式 AI', '生成式 AI 工作流']}
 >
   <HeroSection locale="zh-CN" client:load />

apps/website/src/utils/jsonLd.test.ts

@@ -1,212 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { externalLinks } from '../config/routes'
-import { escapeJsonLd } from './escapeJsonLd'
-import type { JsonLdGraph } from './jsonLd'
-import {
-  absoluteUrl,
-  buildPageGraph,
-  collectGraphIds,
-  comfyUiApplicationNode,
-  comfyUiSoftwareId,
-  comfyUiSourceCodeNode,
-  itemListNode,
-  jsonLdId,
-  organizationId,
-  pageContext,
-  productNode,
-  softwareApplicationNode
-} from './jsonLd'
-
-const siteUrl = 'https://comfy.org'
-const site = new URL('https://comfy.org/')
-
-function typeNames(graph: JsonLdGraph): string[] {
-  return graph['@graph'].map((node) => node['@type'])
-}
-
-describe('absoluteUrl', () => {
-  it('resolves internal paths to their trailing-slash canonical form', () => {
-    expect(absoluteUrl(site, '/cloud')).toBe('https://comfy.org/cloud/')
-    expect(absoluteUrl(site, '/about/')).toBe('https://comfy.org/about/')
-    expect(absoluteUrl(site, '/')).toBe('https://comfy.org/')
-  })
-})
-
-describe('pageContext', () => {
-  it('derives siteUrl, locale and canonical url from the Astro globals', () => {
-    expect(pageContext(site, '/about/', undefined)).toEqual({
-      siteUrl,
-      locale: 'en',
-      url: 'https://comfy.org/about/'
-    })
-    expect(pageContext(site, '/zh-CN/', 'zh-CN').locale).toBe('zh-CN')
-  })
-})
-
-describe('itemListNode', () => {
-  it('counts items and omits per-item names when not supplied', () => {
-    const node = itemListNode('https://comfy.org/careers/', 'Careers', [
-      { url: 'https://jobs.example/1' },
-      { url: 'https://jobs.example/2', name: 'Designer' }
-    ])
-    expect(node.numberOfItems).toBe(2)
-    const items = node.itemListElement as Record<string, unknown>[]
-    expect('name' in items[0]).toBe(false)
-    expect(items[1].name).toBe('Designer')
-  })
-})
-
-describe('softwareApplicationNode', () => {
-  it('claims Comfy Org as author and publisher only when first-party', () => {
-    const node = softwareApplicationNode({
-      siteUrl,
-      id: jsonLdId(siteUrl, 'software'),
-      name: 'ComfyUI',
-      url: siteUrl,
-      firstParty: true,
-      applicationCategory: 'MultimediaApplication',
-      isFree: true
-    })
-    const orgRef = { '@id': organizationId(siteUrl) }
-    expect(node.author).toEqual(orgRef)
-    expect(node.publisher).toEqual(orgRef)
-    expect(node.offers).toEqual({
-      '@type': 'Offer',
-      price: 0,
-      priceCurrency: 'USD',
-      seller: orgRef
-    })
-  })
-
-  it('does not name Comfy Org as seller on a third-party free offer', () => {
-    const node = softwareApplicationNode({
-      siteUrl,
-      id: 'https://comfy.org/cloud/supported-nodes/foo/#software',
-      name: 'Foo Pack',
-      url: 'https://comfy.org/cloud/supported-nodes/foo/',
-      applicationCategory: 'DeveloperApplication',
-      isFree: true
-    })
-    expect((node.offers as Record<string, unknown>).seller).toBeUndefined()
-  })
-
-  it('credits a known third-party author without claiming to publish it', () => {
-    const node = softwareApplicationNode({
-      siteUrl,
-      id: 'https://comfy.org/cloud/supported-nodes/foo/#software',
-      name: 'Foo Pack',
-      url: 'https://comfy.org/cloud/supported-nodes/foo/',
-      applicationCategory: 'DeveloperApplication',
-      authorName: 'Jane Dev'
-    })
-    expect(node.author).toEqual({ '@type': 'Person', name: 'Jane Dev' })
-    expect(node.publisher).toBeUndefined()
-  })
-
-  it('claims no author or publisher for third-party software with no author', () => {
-    const node = softwareApplicationNode({
-      siteUrl,
-      id: 'https://comfy.org/p/supported-models/foo/#software',
-      name: 'Foo Model',
-      url: 'https://comfy.org/p/supported-models/foo/',
-      applicationCategory: 'MultimediaApplication'
-    })
-    expect(node.author).toBeUndefined()
-    expect(node.publisher).toBeUndefined()
-  })
-})
-
-describe('sameAs encyclopedic references', () => {
-  it('links the organization to its Wikidata entity', () => {
-    const graph = buildPageGraph(
-      { siteUrl, locale: 'en' },
-      { url: `${siteUrl}/`, name: 'Home' }
-    )
-    const org = graph['@graph'].find((node) => node['@type'] === 'Organization')
-    expect(org?.sameAs).toContain(externalLinks.wikidataComfyOrg)
-  })
-
-  it('links the ComfyUI application to its Wikidata, Wikipedia and G2 entities', () => {
-    const node = comfyUiApplicationNode(siteUrl)
-    expect(node.sameAs).toEqual([
-      externalLinks.wikidataComfyUi,
-      externalLinks.wikipediaComfyUi,
-      externalLinks.g2ComfyUi
-    ])
-  })
-
-  it('omits sameAs for third-party software', () => {
-    const node = softwareApplicationNode({
-      siteUrl,
-      id: 'https://comfy.org/p/supported-models/foo/#software',
-      name: 'Foo Model',
-      url: 'https://comfy.org/p/supported-models/foo/',
-      applicationCategory: 'MultimediaApplication'
-    })
-    expect(node.sameAs).toBeUndefined()
-  })
-})
-
-describe('productNode', () => {
-  it('gives every offer a currency and price', () => {
-    const node = productNode({
-      siteUrl,
-      id: 'https://comfy.org/cloud/pricing/#product',
-      name: 'Comfy Cloud',
-      url: 'https://comfy.org/cloud/pricing/',
-      offers: [{ name: 'Standard', price: '20' }]
-    })
-    const offers = node.offers as Record<string, unknown>[]
-    expect(offers[0].price).toBe('20')
-    expect(offers[0].priceCurrency).toBe('USD')
-    expect(offers[0].seller).toEqual({ '@id': organizationId(siteUrl) })
-  })
-})
-
-describe('comfyUiSourceCodeNode', () => {
-  it('links the source code to the ComfyUI application via targetProduct', () => {
-    const node = comfyUiSourceCodeNode(siteUrl)
-    expect(node.targetProduct).toEqual({ '@id': comfyUiSoftwareId(siteUrl) })
-  })
-})
-
-describe('buildPageGraph', () => {
-  const url = 'https://comfy.org/cloud/pricing/'
-  const graph = buildPageGraph(
-    { siteUrl, locale: 'en' },
-    {
-      url,
-      name: 'Pricing',
-      type: 'CollectionPage',
-      mainEntityId: jsonLdId(url, 'itemlist'),
-      crumbs: [{ name: 'Home', url: `${siteUrl}/` }, { name: 'Pricing' }]
-    },
-    itemListNode(url, 'Plans', [{ url: `${siteUrl}/one/` }])
-  )
-
-  it('always includes the site-wide organization, website and page entity', () => {
-    expect(typeNames(graph)).toContain('Organization')
-    expect(typeNames(graph)).toContain('WebSite')
-    expect(typeNames(graph)).toContain('CollectionPage')
-  })
-
-  it('produces a graph where every @id reference resolves', () => {
-    const { defined, references } = collectGraphIds(graph)
-    for (const reference of references) {
-      expect(defined.has(reference)).toBe(true)
-    }
-  })
-})
-
-describe('escapeJsonLd on a built graph', () => {
-  it('neutralizes a </script> breakout in a page name', () => {
-    const graph = buildPageGraph(
-      { siteUrl, locale: 'en' },
-      { url: `${siteUrl}/x/`, name: '</script><script>alert(1)</script>' }
-    )
-    const serialized = escapeJsonLd(graph)
-    expect(serialized).not.toContain('</script>')
-    expect(serialized).toContain('\\u003c')
-  })
-})

apps/website/src/utils/jsonLd.ts

@@ -1,377 +0,0 @@
-import { externalLinks } from '../config/routes'
-import type { Locale } from '../i18n/translations'
-
-export type JsonLdNode = Record<string, unknown> & { '@type': string }
-
-export interface JsonLdGraph {
-  '@context': 'https://schema.org'
-  '@graph': JsonLdNode[]
-}
-
-export interface PageContext {
-  siteUrl: string
-  locale: Locale
-}
-
-export type WebPageType =
-  | 'WebPage'
-  | 'AboutPage'
-  | 'ContactPage'
-  | 'CollectionPage'
-
-export interface Crumb {
-  name: string
-  url?: string
-}
-
-const sameAs = [
-  externalLinks.github,
-  externalLinks.x,
-  externalLinks.youtube,
-  externalLinks.discord,
-  externalLinks.instagram,
-  externalLinks.reddit,
-  externalLinks.linkedin,
-  // Wikidata entity for the organization, so the Knowledge Graph can resolve it.
-  externalLinks.wikidataComfyOrg
-]
-
-// Authoritative encyclopedic and review-platform references for the ComfyUI software entity.
-const comfyUiSameAs = [
-  externalLinks.wikidataComfyUi,
-  externalLinks.wikipediaComfyUi,
-  externalLinks.g2ComfyUi
-]
-
-function siteUrlFrom(site: URL | undefined): string {
-  return (site?.href ?? 'https://comfy.org/').replace(/\/$/, '')
-}
-
-export function absoluteUrl(site: URL | undefined, path: string): string {
-  const resolved = new URL(path, site ?? 'https://comfy.org').href
-  return resolved.endsWith('/') ? resolved : `${resolved}/`
-}
-
-export function pageContext(
-  site: URL | undefined,
-  pathname: string,
-  currentLocale: string | undefined
-): PageContext & { url: string } {
-  return {
-    siteUrl: siteUrlFrom(site),
-    locale: currentLocale === 'zh-CN' ? 'zh-CN' : 'en',
-    url: absoluteUrl(site, pathname)
-  }
-}
-
-export function jsonLdId(pageUrl: string, fragment: string): string {
-  return `${pageUrl}#${fragment}`
-}
-
-export function organizationId(siteUrl: string): string {
-  return `${siteUrl}/#organization`
-}
-
-function websiteId(siteUrl: string): string {
-  return `${siteUrl}/#website`
-}
-
-function buildGraph(...nodes: (JsonLdNode | null | undefined)[]): JsonLdGraph {
-  return {
-    '@context': 'https://schema.org',
-    '@graph': nodes.filter((node): node is JsonLdNode => Boolean(node))
-  }
-}
-
-function organizationNode(siteUrl: string): JsonLdNode {
-  return {
-    '@type': 'Organization',
-    '@id': organizationId(siteUrl),
-    name: 'Comfy Org',
-    url: siteUrl,
-    logo: {
-      '@type': 'ImageObject',
-      url: `${siteUrl}/web-app-manifest-512x512.png`,
-      width: 512,
-      height: 512
-    },
-    sameAs
-  }
-}
-
-function websiteNode(siteUrl: string): JsonLdNode {
-  return {
-    '@type': 'WebSite',
-    '@id': websiteId(siteUrl),
-    name: 'Comfy',
-    url: siteUrl,
-    publisher: { '@id': organizationId(siteUrl) }
-  }
-}
-
-function breadcrumbNode(pageUrl: string, crumbs: Crumb[]): JsonLdNode {
-  return {
-    '@type': 'BreadcrumbList',
-    '@id': jsonLdId(pageUrl, 'breadcrumb'),
-    itemListElement: crumbs.map((crumb, index) => {
-      const isLast = index === crumbs.length - 1
-      return isLast || !crumb.url
-        ? { '@type': 'ListItem', position: index + 1, name: crumb.name }
-        : {
-            '@type': 'ListItem',
-            position: index + 1,
-            name: crumb.name,
-            item: crumb.url
-          }
-    })
-  }
-}
-
-export function itemListNode(
-  pageUrl: string,
-  name: string,
-  items: { url: string; name?: string }[]
-): JsonLdNode {
-  return {
-    '@type': 'ItemList',
-    '@id': jsonLdId(pageUrl, 'itemlist'),
-    name,
-    numberOfItems: items.length,
-    itemListElement: items.map((item, index) => ({
-      '@type': 'ListItem',
-      position: index + 1,
-      url: item.url,
-      ...(item.name ? { name: item.name } : {})
-    }))
-  }
-}
-
-interface WebPageInput {
-  siteUrl: string
-  locale: Locale
-  url: string
-  name: string
-  description?: string
-  imageUrl?: string
-  crumbs?: Crumb[]
-  mainEntityId?: string
-}
-
-function webPageNode(input: WebPageInput, type: WebPageType): JsonLdNode {
-  const hasCrumbs = Boolean(input.crumbs && input.crumbs.length > 0)
-  return {
-    '@type': type,
-    '@id': jsonLdId(input.url, 'webpage'),
-    url: input.url,
-    name: input.name,
-    description: input.description,
-    isPartOf: { '@id': websiteId(input.siteUrl) },
-    primaryImageOfPage: input.imageUrl
-      ? { '@type': 'ImageObject', url: input.imageUrl }
-      : undefined,
-    breadcrumb: hasCrumbs
-      ? { '@id': jsonLdId(input.url, 'breadcrumb') }
-      : undefined,
-    mainEntity: input.mainEntityId ? { '@id': input.mainEntityId } : undefined,
-    inLanguage: input.locale
-  }
-}
-
-export interface SoftwareAppInput {
-  siteUrl: string
-  id: string
-  name: string
-  url: string
-  applicationCategory: string
-  firstParty?: boolean
-  applicationSubCategory?: string
-  description?: string
-  operatingSystem?: string
-  image?: string
-  softwareVersion?: string
-  license?: string
-  codeRepository?: string
-  authorName?: string
-  isFree?: boolean
-  sameAs?: string[]
-}
-
-export function softwareApplicationNode(input: SoftwareAppInput): JsonLdNode {
-  const orgRef = { '@id': organizationId(input.siteUrl) }
-  const author = input.firstParty
-    ? orgRef
-    : input.authorName
-      ? { '@type': 'Person', name: input.authorName }
-      : undefined
-  return {
-    '@type': 'SoftwareApplication',
-    '@id': input.id,
-    name: input.name,
-    url: input.url,
-    applicationCategory: input.applicationCategory,
-    applicationSubCategory: input.applicationSubCategory,
-    description: input.description,
-    operatingSystem: input.operatingSystem,
-    image: input.image,
-    softwareVersion: input.softwareVersion,
-    license: input.license,
-    codeRepository: input.codeRepository,
-    author,
-    publisher: input.firstParty ? orgRef : undefined,
-    sameAs: input.sameAs,
-    offers: input.isFree
-      ? {
-          '@type': 'Offer',
-          price: 0,
-          priceCurrency: 'USD',
-          seller: input.firstParty ? orgRef : undefined
-        }
-      : undefined
-  }
-}
-
-interface SourceCodeInput {
-  siteUrl: string
-  id: string
-  name: string
-  codeRepository: string
-  programmingLanguage?: string
-  targetProductId?: string
-}
-
-function softwareSourceCodeNode(input: SourceCodeInput): JsonLdNode {
-  return {
-    '@type': 'SoftwareSourceCode',
-    '@id': input.id,
-    name: input.name,
-    codeRepository: input.codeRepository,
-    programmingLanguage: input.programmingLanguage,
-    targetProduct: input.targetProductId
-      ? { '@id': input.targetProductId }
-      : undefined,
-    author: { '@id': organizationId(input.siteUrl) }
-  }
-}
-
-export function comfyUiSoftwareId(siteUrl: string): string {
-  return `${siteUrl}/#software`
-}
-
-export function comfyUiApplicationNode(siteUrl: string): JsonLdNode {
-  return softwareApplicationNode({
-    siteUrl,
-    id: comfyUiSoftwareId(siteUrl),
-    name: 'ComfyUI',
-    url: siteUrl,
-    firstParty: true,
-    applicationCategory: 'MultimediaApplication',
-    operatingSystem: 'Windows, macOS, Linux',
-    isFree: true,
-    sameAs: comfyUiSameAs
-  })
-}
-
-export function comfyUiSourceCodeNode(siteUrl: string): JsonLdNode {
-  return softwareSourceCodeNode({
-    siteUrl,
-    id: `${siteUrl}/#sourcecode`,
-    name: 'ComfyUI',
-    codeRepository: externalLinks.github,
-    programmingLanguage: 'Python',
-    targetProductId: comfyUiSoftwareId(siteUrl)
-  })
-}
-
-interface OfferInput {
-  name: string
-  price: string | number
-  url?: string
-}
-
-export interface ProductInput {
-  siteUrl: string
-  id: string
-  name: string
-  url: string
-  offers: OfferInput[]
-}
-
-export function productNode(input: ProductInput): JsonLdNode {
-  return {
-    '@type': 'Product',
-    '@id': input.id,
-    name: input.name,
-    url: input.url,
-    brand: { '@id': organizationId(input.siteUrl) },
-    offers: input.offers.map((offer) => ({
-      '@type': 'Offer',
-      name: offer.name,
-      price: offer.price,
-      priceCurrency: 'USD',
-      url: offer.url,
-      seller: { '@id': organizationId(input.siteUrl) },
-      priceSpecification: {
-        '@type': 'UnitPriceSpecification',
-        price: offer.price,
-        priceCurrency: 'USD',
-        unitText: 'MONTH'
-      }
-    }))
-  }
-}
-
-export interface PageGraphInput {
-  url: string
-  name: string
-  type?: WebPageType
-  description?: string
-  imageUrl?: string
-  crumbs?: Crumb[]
-  mainEntityId?: string
-}
-
-export function buildPageGraph(
-  ctx: PageContext,
-  page: PageGraphInput,
-  ...extraNodes: (JsonLdNode | null | undefined)[]
-): JsonLdGraph {
-  const { type = 'WebPage', ...rest } = page
-  const input: WebPageInput = {
-    ...rest,
-    siteUrl: ctx.siteUrl,
-    locale: ctx.locale
-  }
-  const hasCrumbs = Boolean(page.crumbs && page.crumbs.length > 0)
-  return buildGraph(
-    organizationNode(ctx.siteUrl),
-    websiteNode(ctx.siteUrl),
-    webPageNode(input, type),
-    hasCrumbs ? breadcrumbNode(page.url, page.crumbs!) : undefined,
-    ...extraNodes
-  )
-}
-
-export function collectGraphIds(value: unknown): {
-  defined: Set<string>
-  references: string[]
-} {
-  const defined = new Set<string>()
-  const references: string[] = []
-  const walk = (node: unknown): void => {
-    if (Array.isArray(node)) {
-      node.forEach(walk)
-      return
-    }
-    if (node && typeof node === 'object') {
-      const record = node as Record<string, unknown>
-      const id = record['@id']
-      if (typeof id === 'string') {
-        if (Object.keys(record).length === 1) references.push(id)
-        else defined.add(id)
-      }
-      Object.values(record).forEach(walk)
-    }
-  }
-  walk(value)
-  return { defined, references }
-}

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

@@ -23,6 +23,7 @@ import { webSocketFixture } from '@e2e/fixtures/ws'
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 const ERROR_CLASS = /ring-destructive-background/
+const SLOT_ERROR_CLASS = /before:ring-error/
 const UNKNOWN_NODE_ID = '1'
 const INNER_EXECUTION_ID = '2:1'
 const KSAMPLER_MODEL_INPUT_NAME = 'model'
@@ -69,6 +70,25 @@ async function selectLoadImageNodeForPaste(
   }, localLoadImageId)
 }
 
+async function getInputSlotIndexByName(
+  comfyPage: ComfyPage,
+  nodeId: string,
+  inputName: string
+): Promise<number> {
+  return comfyPage.page.evaluate(
+    ({ inputName, nodeId }) => {
+      const graph = window.app!.canvas.graph ?? window.app!.graph
+      const node = graph.getNodeById(nodeId)
+      const index = node?.findInputSlot(inputName) ?? -1
+      if (index < 0) {
+        throw new Error(`Input slot "${inputName}" not found`)
+      }
+      return index
+    },
+    { inputName, nodeId: toNodeId(nodeId) }
+  )
+}
+
 async function setupLoadImageErrorScenario(comfyPage: ComfyPage) {
   await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
   const loadImageNode = (
@@ -139,17 +159,10 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
       async ({ comfyPage }) => {
         const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
         const ksamplerNode = comfyPage.vueNodes.getNodeLocator(ksamplerId)
-        const modelInputIndex = await comfyPage.page.evaluate(
-          ({ nodeId, inputName }) => {
-            const node = window.app!.graph.getNodeById(nodeId)
-            const index =
-              node?.inputs?.findIndex((input) => input.name === inputName) ?? -1
-            if (index < 0) {
-              throw new Error(`Input slot "${inputName}" not found`)
-            }
-            return index
-          },
-          { nodeId: toNodeId(ksamplerId), inputName: KSAMPLER_MODEL_INPUT_NAME }
+        const modelInputIndex = await getInputSlotIndexByName(
+          comfyPage,
+          ksamplerId,
+          KSAMPLER_MODEL_INPUT_NAME
         )
         const modelInputSlotRow = comfyPage.vueNodes.getInputSlotRow(
           ksamplerId,
@@ -175,7 +188,7 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
 
         await expect(modelInputSlotRow).toBeVisible()
         await expect(modelInputSlotRow).toBeInViewport()
-        await expect(modelInputSlotHighlight).toHaveClass(/before:ring-error/)
+        await expect(modelInputSlotHighlight).toHaveClass(SLOT_ERROR_CLASS)
         await expect(
           comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
         ).toHaveClass(ERROR_CLASS)
@@ -407,5 +420,76 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
 
       await expect(innerWrapper).toHaveClass(ERROR_CLASS)
     })
+
+    test('boundary-linked validation error surfaces on the subgraph host', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+      const subgraphParentId =
+        await comfyPage.vueNodes.getNodeIdByTitle('New Subgraph')
+      const innerWrapper =
+        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
+      const hostInputIndex = await getInputSlotIndexByName(
+        comfyPage,
+        subgraphParentId,
+        'positive'
+      )
+      const hostInputSlotHighlight =
+        comfyPage.vueNodes.getInputSlotConnectionDot(
+          subgraphParentId,
+          hostInputIndex
+        )
+      await expect(
+        innerWrapper,
+        'subgraph host must mount before injecting validation errors'
+      ).toBeVisible()
+      await expect(
+        innerWrapper,
+        'subgraph host should start without an error ring'
+      ).not.toHaveClass(ERROR_CLASS)
+
+      await test.step('surface the boundary-linked error on the host', async () => {
+        const exec = new ExecutionHelper(comfyPage)
+        await exec.mockValidationFailure({
+          [INNER_EXECUTION_ID]: buildKSamplerError(
+            'required_input_missing',
+            'positive',
+            'Required input is missing: positive'
+          )
+        })
+        await comfyPage.runButton.click()
+        await dismissErrorOverlay(comfyPage)
+
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+        await expect(hostInputSlotHighlight).toHaveClass(SLOT_ERROR_CLASS)
+      })
+
+      await test.step('confirm the interior node does not show the surfaced ring', async () => {
+        await comfyPage.vueNodes.enterSubgraph(subgraphParentId)
+        await comfyPage.nextFrame()
+        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+        const interiorKSamplerId =
+          await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
+        const interiorPositiveInputIndex = await getInputSlotIndexByName(
+          comfyPage,
+          interiorKSamplerId,
+          'positive'
+        )
+        const interiorPositiveSlotHighlight =
+          comfyPage.vueNodes.getInputSlotConnectionDot(
+            interiorKSamplerId,
+            interiorPositiveInputIndex
+          )
+        const interiorInnerWrapper =
+          comfyPage.vueNodes.getNodeInnerWrapper(interiorKSamplerId)
+
+        await expect(interiorInnerWrapper).toBeVisible()
+        await expect(interiorInnerWrapper).not.toHaveClass(ERROR_CLASS)
+        await expect(interiorPositiveSlotHighlight).toBeVisible()
+        await expect(interiorPositiveSlotHighlight).not.toHaveClass(
+          SLOT_ERROR_CLASS
+        )
+      })
+    })
   })
 })

knip.config.ts

@@ -54,12 +54,6 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
-    // Pending integration: consumed by split/member-auditing (Activity pager);
-    // models governance (DES-503) reuses it later
-    'src/components/ui/pagination/Pagination.vue',
-    // Pending integration: consumed by split/plan-credits-tabs (Overview);
-    // models governance (DES-503) reuses it later
-    'src/platform/workspace/composables/useAutoPageSize.ts',
     // Marketing media tooling — adopted by pages in a follow-up PR
     'apps/website/src/components/common/SiteVideo.vue',
     'apps/website/src/utils/marketingImage.ts',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.48.0",
+  "version": "1.47.8",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

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

scripts/collect-i18n-node-defs.ts

@@ -3,7 +3,10 @@ import * as fs from 'fs'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import { normalizeI18nKey } from '../packages/shared-frontend-utils/src/formatUtil'
+import {
+  escapeVueI18nMessageSyntax,
+  normalizeI18nKey
+} from '@/utils/formatUtil'
 import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 
 const localePath = './src/locales/en/main.json'
@@ -44,8 +47,6 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     }
   )
 
-  console.log(`Collected ${nodeDefs.length} node definitions`)
-
   const allDataTypesLocale = Object.fromEntries(
     nodeDefs
       .flatMap((nodeDef) => {
@@ -60,7 +61,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         )
         return allDataTypes.map((dataType) => [
           normalizeI18nKey(dataType),
-          dataType
+          escapeVueI18nMessageSyntax(dataType)
         ])
       })
       .sort((a, b) => a[0].localeCompare(b[0]))
@@ -98,7 +99,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         const runtimeWidgets = Object.fromEntries(
           Object.entries(widgetsMappings)
             .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([key, value]) => [normalizeI18nKey(key), { name: value }])
+            .map(([key, value]) => [
+              normalizeI18nKey(key),
+              { name: value ? escapeVueI18nMessageSyntax(value) : value }
+            ])
         )
 
         if (Object.keys(runtimeWidgets).length > 0) {
@@ -121,7 +125,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   function extractInputs(nodeDef: ComfyNodeDefImpl) {
     const inputs = Object.fromEntries(
       Object.values(nodeDef.inputs).flatMap((input) => {
-        const name = input.name
+        const name =
+          input.name === undefined
+            ? undefined
+            : escapeVueI18nMessageSyntax(input.name)
         const tooltip = input.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -146,7 +153,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     const outputs = Object.fromEntries(
       nodeDef.outputs.flatMap((output, i) => {
         // Ignore data types if they are already translated in allDataTypesLocale.
-        const name = output.name in allDataTypesLocale ? undefined : output.name
+        const name =
+          output.name === undefined || output.name in allDataTypesLocale
+            ? undefined
+            : escapeVueI18nMessageSyntax(output.name)
         const tooltip = output.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -179,8 +189,12 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         return [
           normalizeI18nKey(nodeDef.name),
           {
-            display_name: nodeDef.display_name ?? nodeDef.name,
-            description: nodeDef.description || undefined,
+            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)
           }
@@ -192,7 +206,10 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     nodeDefs.flatMap((nodeDef) =>
       nodeDef.category
         .split('/')
-        .map((category) => [normalizeI18nKey(category), category])
+        .map((category) => [
+          normalizeI18nKey(category),
+          escapeVueI18nMessageSyntax(category)
+        ])
     )
   )
 

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -4,37 +4,67 @@
     data-testid="bounding-boxes"
     @pointerdown.stop
   >
-    <div
-      ref="canvasContainer"
-      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
-      :style="canvasStyle"
-    >
-      <canvas
-        ref="canvasEl"
-        tabindex="0"
-        class="absolute inset-0 size-full rounded-sm outline-none"
-        :style="{ cursor: canvasCursor }"
-        @pointerdown="onPointerDown"
-        @pointermove="onCanvasPointerMove"
-        @pointerup="onDocPointerUp"
-        @pointercancel="onDocPointerUp"
-        @pointerleave="onPointerLeave"
-        @lostpointercapture="onDocPointerUp"
-        @dblclick="onDoubleClick"
-        @keydown="onCanvasKeyDown"
-        @focus="focused = true"
-        @blur="focused = false"
-      />
-      <textarea
-        v-if="inlineEditor"
-        ref="inlineEditorEl"
-        v-model="inlineEditor.value"
-        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-        :style="inlineEditor.style"
-        data-capture-wheel="true"
-        @keydown.stop="onInlineKeyDown"
-        @blur="commitInlineEditor"
-      />
+    <div class="flex flex-col">
+      <div
+        class="flex h-9 items-center gap-1 rounded-t-sm border border-b-0 border-component-node-border bg-component-node-widget-background px-2"
+      >
+        <Button
+          variant="textonly"
+          size="unset"
+          :aria-pressed="grid"
+          :class="
+            cn(
+              actionBtnClass,
+              grid && 'bg-component-node-widget-background-selected'
+            )
+          "
+          @click="grid = !grid"
+        >
+          <i class="icon-[lucide--grid-3x3] size-4" />
+          <span>{{ $t('boundingBoxes.grid') }}</span>
+        </Button>
+        <Button
+          variant="textonly"
+          size="unset"
+          :class="cn(actionBtnClass, 'ml-auto')"
+          @click="clearAll"
+        >
+          <i class="icon-[lucide--undo-2] size-4" />
+          <span>{{ $t('boundingBoxes.clearAll') }}</span>
+        </Button>
+      </div>
+      <div
+        ref="canvasContainer"
+        class="relative w-full shrink-0 overflow-hidden rounded-b-sm border border-t-0 border-component-node-border bg-base-background"
+        :style="canvasStyle"
+      >
+        <canvas
+          ref="canvasEl"
+          tabindex="0"
+          class="absolute inset-0 size-full rounded-sm text-node-component-slot-text outline-none"
+          :style="{ cursor: canvasCursor }"
+          @pointerdown="onPointerDown"
+          @pointermove="onCanvasPointerMove"
+          @pointerup="onDocPointerUp"
+          @pointercancel="onDocPointerUp"
+          @pointerleave="onPointerLeave"
+          @lostpointercapture="onDocPointerUp"
+          @dblclick="onDoubleClick"
+          @keydown="onCanvasKeyDown"
+          @focus="focused = true"
+          @blur="focused = false"
+        />
+        <textarea
+          v-if="inlineEditor"
+          ref="inlineEditorEl"
+          v-model="inlineEditor.value"
+          class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
+          :style="inlineEditor.style"
+          data-capture-wheel="true"
+          @keydown.stop="onInlineKeyDown"
+          @blur="commitInlineEditor"
+        />
+      </div>
     </div>
 
     <div
@@ -122,16 +152,6 @@
     <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
       {{ $t('boundingBoxes.clickRegionToEdit') }}
     </div>
-
-    <Button
-      variant="secondary"
-      size="md"
-      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
-      @click="clearAll"
-    >
-      <i class="icon-[lucide--undo-2]" />
-      {{ $t('boundingBoxes.clearAll') }}
-    </Button>
   </div>
 </template>
 
@@ -147,6 +167,9 @@ import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import type { NodeId } from '@/types/nodeId'
 
+const actionBtnClass =
+  'flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-component-node-widget-background-hovered'
+
 const { nodeId } = defineProps<{ nodeId: NodeId }>()
 const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
 
@@ -172,7 +195,8 @@ const {
   commitInlineEditor,
   setActiveType,
   clearAll,
-  syncState
+  syncState,
+  grid
 } = useBoundingBoxes(nodeId, {
   canvasEl,
   canvasContainer,

src/components/builder/AppModeWidgetList.vue

@@ -126,7 +126,7 @@ function nodeToNodeData(node: LGraphNode) {
 
   return {
     ...nodeData,
-    hasErrors: !!executionErrorStore.lastNodeErrors?.[node.id],
+    hasErrors: !!executionErrorStore.surfacedNodeErrors?.[node.id],
     dropIndicator,
     onDragDrop: node.onDragDrop,
     onDragOver: node.onDragOver

src/components/common/DropdownMenu.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ZIndex } from '@primeuix/utils/zindex'
 import type { MenuItem } from 'primevue/menuitem'
 import {
   DropdownMenuArrow,
@@ -12,21 +11,15 @@ import { computed, ref, toValue } from 'vue'
 
 import DropdownItem from '@/components/common/DropdownItem.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useModalLiftedZIndex } from '@/composables/useModalLiftedZIndex'
 import { cn } from '@comfyorg/tailwind-utils'
 import type { ButtonVariants } from '../ui/button/button.variants'
 
-// Shared base for @primeuix's auto-incrementing 'modal' z-index counter.
-const MODAL_BASE_Z_INDEX = 1700
-
 defineOptions({
   inheritAttrs: false
 })
 
-const {
-  itemClass: itemProp,
-  contentClass: contentProp,
-  modal = true
-} = defineProps<{
+const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
   entries?: MenuItem[]
   icon?: string
   to?: string | HTMLElement
@@ -34,7 +27,6 @@ const {
   contentClass?: string
   buttonSize?: ButtonVariants['size']
   buttonClass?: string
-  modal?: boolean
 }>()
 
 const itemClass = computed(() =>
@@ -51,19 +43,12 @@ const contentClass = computed(() =>
   )
 )
 
-// Body-portaled content keeps its static z-1700 unless a dialog that joined
-// @primeuix's auto-incrementing 'modal' counter is open above it; then lift
-// past that dialog so the menu isn't hidden behind it.
 const open = ref(false)
-const contentStyle = computed(() => {
-  if (!open.value) return undefined
-  const topZIndex = ZIndex.getCurrent('modal')
-  return topZIndex >= MODAL_BASE_Z_INDEX ? { zIndex: topZIndex + 1 } : undefined
-})
+const contentStyle = useModalLiftedZIndex(open)
 </script>
 
 <template>
-  <DropdownMenuRoot v-model:open="open" :modal>
+  <DropdownMenuRoot v-model:open="open">
     <DropdownMenuTrigger as-child>
       <slot name="button">
         <Button :size="buttonSize ?? 'icon'" :class="buttonClass">

src/components/common/SelectionBar.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="relative mx-2">
-    <div
-      class="absolute bottom-6 left-1/2 z-40 flex w-full max-w-78 -translate-x-1/2 items-center gap-2 rounded-lg bg-base-foreground p-2 text-base-background shadow-interface"
-    >
-      <Button
-        v-tooltip.top="{ value: deselectLabel, showDelay: 300 }"
-        variant="inverted"
-        size="icon-lg"
-        type="button"
-        :aria-label="deselectLabel"
-        class="rounded-lg hover:bg-base-background/10"
-        @click="emit('deselect')"
-      >
-        <i class="icon-[lucide--x] size-4" />
-      </Button>
-      <span class="pr-6 text-sm font-bold whitespace-nowrap tabular-nums">
-        {{ label }}
-      </span>
-      <div class="ml-auto flex shrink-0 items-center gap-1">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-
-defineProps<{
-  /** The "N selected" text; the caller formats it (pluralization, wording). */
-  label: string
-  /** Accessible label + tooltip for the deselect button. */
-  deselectLabel: string
-}>()
-
-const emit = defineEmits<{
-  deselect: []
-}>()
-</script>

src/components/common/UserCredit.vue

@@ -14,7 +14,7 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i class="icon-[lucide--coins]" />
+        <i class="icon-[lucide--component]" />
       </template>
     </Tag>
     <div :class="textClass">

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -86,7 +86,7 @@
           @max-reached="showCeilingWarning = true"
         >
           <template #prefix>
-            <i class="icon-[lucide--coins] size-4 shrink-0 text-gold-500" />
+            <i class="icon-[lucide--component] size-4 shrink-0 text-gold-500" />
           </template>
         </FormattedNumberStepper>
       </div>
@@ -98,7 +98,7 @@
       v-if="isBelowMin"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.minRequired', {
           credits: formatNumber(usdToCredits(MIN_AMOUNT))
@@ -109,7 +109,7 @@
       v-if="showCeilingWarning"
       class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
     >
-      <i class="icon-[lucide--coins] size-4" />
+      <i class="icon-[lucide--component] size-4" />
       {{
         $t('credits.topUp.maxAllowed', {
           credits: formatNumber(usdToCredits(MAX_AMOUNT))

src/components/dialog/rekaPrimeVueBridge.ts

@@ -12,7 +12,7 @@ const PRIMEVUE_OVERLAY_SELECTORS =
 // dismiss itself. These selectors cover the portaled roots so we can treat
 // interactions on them as inside.
 const REKA_PORTAL_SELECTORS =
-  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]'
+  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]'
 
 const OUTSIDE_LAYER_SELECTORS = `${PRIMEVUE_OVERLAY_SELECTORS}, ${REKA_PORTAL_SELECTORS}`
 

src/components/node/CreditBadge.vue

@@ -7,7 +7,7 @@
       )
     "
   >
-    <i class="icon-[lucide--coins] h-full bg-amber-400" />
+    <i class="icon-[lucide--component] h-full bg-amber-400" />
     <span class="truncate" v-text="text" />
   </span>
   <span

src/components/palette/PaletteSwatchRow.test.ts

@@ -32,7 +32,7 @@ describe('PaletteSwatchRow', () => {
 
   it('appends a color when the add button is clicked', async () => {
     const { emitted } = renderRow(['#ff0000'])
-    await userEvent.click(screen.getByRole('button'))
+    await userEvent.click(screen.getByRole('button', { name: '+' }))
     expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
   })
 
@@ -44,18 +44,14 @@ describe('PaletteSwatchRow', () => {
 
   it('hides the add button once the max is reached', () => {
     renderRow(['#a', '#b'], 2)
-    expect(screen.queryByRole('button')).toBeNull()
+    expect(screen.queryByRole('button', { name: '+' })).toBeNull()
   })
 
-  it('writes a picked color back through the hidden color input', async () => {
-    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
-    await fireEvent.click(container.querySelector('[data-index="1"]')!)
-    const input = container.querySelector(
-      'input[type="color"]'
-    ) as HTMLInputElement
-    input.value = '#0000ff'
-    await fireEvent.input(input)
-    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
+  it('opens the color picker when a swatch is clicked', async () => {
+    const { container } = renderRow(['#ff0000'])
+    const swatch = container.querySelector('[data-index="0"]')!
+    await userEvent.click(swatch)
+    expect(swatch.getAttribute('data-state')).toBe('open')
   })
 
   it('starts a drag on pointer down without emitting', async () => {

src/components/palette/PaletteSwatchRow.vue

@@ -1,17 +1,25 @@
 <template>
   <div ref="container" class="flex flex-wrap items-center gap-1">
-    <div
+    <ColorPicker
       v-for="(hex, i) in modelValue"
-      :key="`${i}-${hex}`"
-      :data-index="i"
-      :data-hex="hex"
-      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
-      :style="{ background: hex }"
-      :title="t('palette.swatchTitle')"
-      @click="openPicker(i, $event)"
-      @contextmenu.prevent.stop="remove(i)"
-      @pointerdown="onPointerDown(i, $event)"
-    />
+      :key="i"
+      :model-value="hex"
+      :alpha="false"
+      @update:model-value="(value) => updateAt(i, value)"
+    >
+      <template #trigger>
+        <button
+          type="button"
+          :data-index="i"
+          :data-hex="hex"
+          class="relative size-5 cursor-pointer rounded-sm border border-component-node-border p-0"
+          :style="{ background: hex }"
+          :title="t('palette.swatchTitle')"
+          @contextmenu.prevent.stop="remove(i)"
+          @pointerdown="onPointerDown(i, $event)"
+        />
+      </template>
+    </ColorPicker>
     <button
       v-if="modelValue.length < max"
       type="button"
@@ -21,12 +29,6 @@
     >
       +
     </button>
-    <input
-      ref="picker"
-      type="color"
-      class="pointer-events-none absolute size-0 opacity-0"
-      @input="onPickerInput"
-    />
   </div>
 </template>
 
@@ -34,6 +36,7 @@
 import { useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
 import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
 
 const { max = 5 } = defineProps<{ max?: number }>()
@@ -41,8 +44,9 @@ const modelValue = defineModel<string[]>({ required: true })
 const { t } = useI18n()
 
 const container = useTemplateRef<HTMLDivElement>('container')
-const picker = useTemplateRef<HTMLInputElement>('picker')
 
-const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
-  usePaletteSwatchRow({ modelValue, container, picker })
+const { updateAt, remove, addColor, onPointerDown } = usePaletteSwatchRow({
+  modelValue,
+  container
+})
 </script>

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

@@ -5,9 +5,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { MissingNodeType } from '@/types/comfy'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
+import type * as GraphTraversalUtil from '@/utils/graphTraversalUtil'
 
 vi.mock('@/scripts/app', () => ({
   app: {
+    isGraphReady: true,
     rootGraph: {
       serialize: vi.fn(() => ({})),
       getNodeById: vi.fn()
@@ -127,6 +129,8 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
+import { nodeError, validationError } from '@/utils/__tests__/nodeErrorHelpers'
+import { createBoundaryLinkedSubgraph } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 import {
   getExecutionIdByNode,
   getNodeByExecutionId
@@ -493,6 +497,47 @@ describe('useErrorGroups', () => {
       )
     })
 
+    it('groups lifted boundary errors under the host node card', async () => {
+      const { store, groups } = createErrorGroups()
+      const { rootGraph, host } = createBoundaryLinkedSubgraph({
+        interiorType: 'InteriorClass'
+      })
+      const { getNodeByExecutionId: actualGetNodeByExecutionId } =
+        await vi.importActual<typeof GraphTraversalUtil>(
+          '@/utils/graphTraversalUtil'
+        )
+      vi.mocked(getNodeByExecutionId).mockImplementation((_, nodeId) => {
+        return actualGetNodeByExecutionId(rootGraph, String(nodeId))
+      })
+      store.lastNodeErrors = {
+        '12:5': nodeError(
+          [
+            validationError(
+              'required_input_missing',
+              'seed_input',
+              {},
+              'Required input is missing'
+            )
+          ],
+          'InteriorClass'
+        )
+      }
+      await nextTick()
+
+      const execGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution'
+      )
+      expect(execGroup?.type).toBe('execution')
+      if (execGroup?.type !== 'execution') return
+
+      const card = execGroup.cards[0]
+      expect(card.nodeId).toBe('12')
+      expect(card.title).toBe(host.title)
+      expect(card.errors[0].displayDetails).toBe(
+        `${host.title} is missing a required input: seed`
+      )
+    })
+
     it('groups node validation errors by catalog id across node types', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -382,10 +382,10 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     groupsMap: Map<string, GroupEntry>,
     filterBySelection = false
   ) {
-    if (!executionErrorStore.lastNodeErrors) return
+    if (!executionErrorStore.surfacedNodeErrors) return
 
     for (const [rawNodeId, nodeError] of Object.entries(
-      executionErrorStore.lastNodeErrors
+      executionErrorStore.surfacedNodeErrors
     )) {
       const nodeId = tryNormalizeNodeExecutionId(rawNodeId)
       if (!nodeId) continue

src/components/searchbox/v2/NodeSearchListItem.vue

@@ -51,7 +51,7 @@
             >
               <i
                 aria-hidden="true"
-                class="icon-[lucide--coins] size-3 text-amber-400"
+                class="icon-[lucide--component] size-3 text-amber-400"
               />
               <i
                 aria-hidden="true"

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -31,7 +31,7 @@
 
     <!-- Credits Section -->
     <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
-      <i class="icon-[lucide--coins] text-sm text-amber-400" />
+      <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton v-if="isLoading" width="4rem" height="1.25rem" class="w-full" />
       <span v-else class="text-base font-semibold text-base-foreground">{{
         formattedBalance

src/components/ui/checkbox/Checkbox.vue

@@ -1,31 +0,0 @@
-<template>
-  <CheckboxRoot
-    v-model="checked"
-    :class="
-      cn(
-        'peer flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-interface-stroke bg-transparent transition-colors focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:outline-none data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-white data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-white',
-        className
-      )
-    "
-  >
-    <CheckboxIndicator class="flex items-center justify-center">
-      <i
-        :class="
-          checked === 'indeterminate'
-            ? 'icon-[lucide--minus] size-3'
-            : 'icon-[lucide--check] size-3'
-        "
-      />
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>
-
-<script setup lang="ts">
-import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-const checked = defineModel<boolean | 'indeterminate'>({ default: false })
-</script>

src/components/ui/color-picker/ColorPicker.vue

@@ -14,20 +14,27 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 import ColorPickerPanel from './ColorPickerPanel.vue'
 
-defineProps<{
+const { alpha = true } = defineProps<{
   class?: string
   disabled?: boolean
+  alpha?: boolean
 }>()
 
 const modelValue = defineModel<string>({ default: '#000000' })
 
-const hsva = ref<HSVA>(hexToHsva(modelValue.value || '#000000'))
+function readHsva(hex: string): HSVA {
+  const next = hexToHsva(hex || '#000000')
+  if (!alpha) next.a = 100
+  return next
+}
+
+const hsva = ref<HSVA>(readHsva(modelValue.value))
 const displayMode = ref<'hex' | 'rgba'>('hex')
 
 watch(modelValue, (newVal) => {
   const current = hsvaToHex(hsva.value)
   if (newVal !== current) {
-    hsva.value = hexToHsva(newVal || '#000000')
+    hsva.value = readHsva(newVal)
   }
 })
 
@@ -67,49 +74,51 @@ const contentStyle = useModalLiftedZIndex(isOpen)
 <template>
   <PopoverRoot v-model:open="isOpen">
     <PopoverTrigger as-child>
-      <button
-        type="button"
-        :disabled="$props.disabled"
-        :class="
-          cn(
-            'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
-            isOpen && 'border-node-stroke',
-            $props.class
-          )
-        "
-      >
-        <div class="flex size-8 shrink-0 items-center justify-center">
-          <div class="relative size-4 overflow-hidden rounded-sm">
-            <div
-              class="absolute inset-0"
-              :style="{
-                backgroundImage:
-                  'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
-                backgroundSize: '4px 4px'
-              }"
-            />
-            <div
-              class="absolute inset-0"
-              :style="{ backgroundColor: previewColor }"
-            />
-          </div>
-        </div>
-        <div
-          class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
+      <slot name="trigger">
+        <button
+          type="button"
+          :disabled="$props.disabled"
+          :class="
+            cn(
+              'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
+              isOpen && 'border-node-stroke',
+              $props.class
+            )
+          "
         >
-          <template v-if="displayMode === 'hex'">
-            <span>{{ displayHex }}</span>
-          </template>
-          <template v-else>
-            <div class="flex gap-2">
-              <span>{{ baseRgb.r }}</span>
-              <span>{{ baseRgb.g }}</span>
-              <span>{{ baseRgb.b }}</span>
+          <div class="flex size-8 shrink-0 items-center justify-center">
+            <div class="relative size-4 overflow-hidden rounded-sm">
+              <div
+                class="absolute inset-0"
+                :style="{
+                  backgroundImage:
+                    'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
+                  backgroundSize: '4px 4px'
+                }"
+              />
+              <div
+                class="absolute inset-0"
+                :style="{ backgroundColor: previewColor }"
+              />
             </div>
-          </template>
-          <span>{{ hsva.a }}%</span>
-        </div>
-      </button>
+          </div>
+          <div
+            class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
+          >
+            <template v-if="displayMode === 'hex'">
+              <span>{{ displayHex }}</span>
+            </template>
+            <template v-else>
+              <div class="flex gap-2">
+                <span>{{ baseRgb.r }}</span>
+                <span>{{ baseRgb.g }}</span>
+                <span>{{ baseRgb.b }}</span>
+              </div>
+            </template>
+            <span>{{ hsva.a }}%</span>
+          </div>
+        </button>
+      </slot>
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
@@ -123,6 +132,7 @@ const contentStyle = useModalLiftedZIndex(isOpen)
         <ColorPickerPanel
           v-model:hsva="hsva"
           v-model:display-mode="displayMode"
+          :alpha
         />
       </PopoverContent>
     </PopoverPortal>

src/components/ui/color-picker/ColorPickerPanel.vue

@@ -13,6 +13,8 @@ import { hsbToRgb, rgbToHex } from '@/utils/colorUtil'
 import ColorPickerSaturationValue from './ColorPickerSaturationValue.vue'
 import ColorPickerSlider from './ColorPickerSlider.vue'
 
+const { alpha = true } = defineProps<{ alpha?: boolean }>()
+
 const hsva = defineModel<HSVA>('hsva', { required: true })
 const displayMode = defineModel<'hex' | 'rgba'>('displayMode', {
   required: true
@@ -37,6 +39,7 @@ const { t } = useI18n()
     />
     <ColorPickerSlider v-model="hsva.h" type="hue" />
     <ColorPickerSlider
+      v-if="alpha"
       v-model="hsva.a"
       type="alpha"
       :hue="hsva.h"
@@ -72,7 +75,7 @@ const { t } = useI18n()
           <span class="w-6 shrink-0 text-center">{{ rgb.g }}</span>
           <span class="w-6 shrink-0 text-center">{{ rgb.b }}</span>
         </template>
-        <span class="shrink-0 border-l border-border-subtle pl-1"
+        <span v-if="alpha" class="shrink-0 border-l border-border-subtle pl-1"
           >{{ hsva.a }}%</span
         >
       </div>

src/components/ui/pagination/Pagination.vue

@@ -1,72 +0,0 @@
-<template>
-  <PaginationRoot
-    :page="page"
-    :total="total"
-    :items-per-page="itemsPerPage"
-    :sibling-count="1"
-    show-edges
-    @update:page="(p: number) => emit('update:page', p)"
-  >
-    <div class="flex items-center gap-1">
-      <PaginationPrev as-child>
-        <Button variant="muted-textonly" size="md" class="text-sm">
-          <i class="icon-[lucide--chevron-left] size-4" />
-          {{ $t('g.previous') }}
-        </Button>
-      </PaginationPrev>
-      <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-        <template v-for="(item, index) in items" :key="index">
-          <PaginationListItem
-            v-if="item.type === 'page'"
-            :value="item.value"
-            as-child
-          >
-            <Button
-              :variant="item.value === page ? 'secondary' : 'muted-textonly'"
-              size="icon"
-            >
-              {{ item.value }}
-            </Button>
-          </PaginationListItem>
-          <PaginationEllipsis v-else :index="index" :class="ellipsisClass">
-            …
-          </PaginationEllipsis>
-        </template>
-      </PaginationList>
-      <PaginationNext as-child>
-        <Button variant="muted-textonly" size="md" class="text-sm">
-          {{ $t('g.next') }}
-          <i class="icon-[lucide--chevron-right] size-4" />
-        </Button>
-      </PaginationNext>
-    </div>
-  </PaginationRoot>
-</template>
-
-<script setup lang="ts">
-import {
-  PaginationEllipsis,
-  PaginationList,
-  PaginationListItem,
-  PaginationNext,
-  PaginationPrev,
-  PaginationRoot
-} from 'reka-ui'
-
-import Button from '@/components/ui/button/Button.vue'
-
-const {
-  page = 1,
-  total,
-  itemsPerPage = 10
-} = defineProps<{
-  page?: number
-  total: number
-  itemsPerPage?: number
-}>()
-
-const emit = defineEmits<{ 'update:page': [page: number] }>()
-
-const ellipsisClass =
-  'inline-flex size-8 items-center justify-center text-sm text-muted-foreground'
-</script>

src/components/ui/search-input/searchInput.variants.ts

@@ -35,7 +35,7 @@ export const searchInputSizeConfig = {
     icon: 'size-4',
     iconPos: 'left-2.5',
     inputPl: 'pl-8',
-    inputText: 'text-sm',
+    inputText: 'text-xs',
     clearPos: 'left-2.5'
   },
   xl: {

src/components/ui/switch/Switch.vue

@@ -1,30 +0,0 @@
-<template>
-  <SwitchRoot
-    v-model="checked"
-    :disabled
-    :class="
-      cn(
-        'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent px-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        checked ? 'bg-primary' : 'bg-interface-stroke'
-      )
-    "
-  >
-    <SwitchThumb
-      :class="
-        cn(
-          'pointer-events-none block size-4 rounded-full bg-white shadow-sm transition-transform',
-          checked ? 'translate-x-3.5' : 'translate-x-0'
-        )
-      "
-    />
-  </SwitchRoot>
-</template>
-
-<script setup lang="ts">
-import { SwitchRoot, SwitchThumb } from 'reka-ui'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { disabled = false } = defineProps<{ disabled?: boolean }>()
-const checked = defineModel<boolean>({ default: false })
-</script>

src/components/ui/table/Table.vue

@@ -1,17 +0,0 @@
-<template>
-  <div :class="cn('relative w-full overflow-auto', className)">
-    <table
-      class="w-full caption-bottom border-separate border-spacing-0 text-sm"
-    >
-      <slot />
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableBody.vue

@@ -1,13 +0,0 @@
-<template>
-  <tbody :class="cn('[&_tr:last-child]:border-0', className)">
-    <slot />
-  </tbody>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableCell.vue

@@ -1,13 +0,0 @@
-<template>
-  <td :class="cn('px-2 py-2.5 align-middle whitespace-nowrap', className)">
-    <slot />
-  </td>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableHead.vue

@@ -1,21 +0,0 @@
-<template>
-  <th
-    scope="col"
-    :class="
-      cn(
-        'h-10 px-2 text-left align-middle text-sm font-normal whitespace-nowrap text-muted-foreground',
-        className
-      )
-    "
-  >
-    <slot />
-  </th>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableHeader.vue

@@ -1,15 +0,0 @@
-<template>
-  <thead
-    :class="cn('[&_tr]:border-b [&_tr]:border-interface-stroke/60', className)"
-  >
-    <slot />
-  </thead>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/ui/table/TableRow.vue

@@ -1,20 +0,0 @@
-<template>
-  <tr
-    :class="
-      cn(
-        'border-b border-interface-stroke/60 transition-colors hover:bg-secondary-background/50 data-[state=selected]:bg-secondary-background/50',
-        className
-      )
-    "
-  >
-    <slot />
-  </tr>
-</template>
-
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@comfyorg/tailwind-utils'
-
-const { class: className } = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>

src/components/widget/layout/BaseModalLayout.vue

@@ -14,12 +14,7 @@
       >
         <header
           data-component-id="LeftPanelHeader"
-          :class="
-            cn(
-              'flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6',
-              headerHeightClass
-            )
-          "
+          class="flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
         >
           <slot name="leftPanelHeaderTitle" />
           <Button
@@ -38,12 +33,7 @@
       <div class="flex flex-col overflow-hidden bg-base-background">
         <header
           v-if="$slots.header"
-          :class="
-            cn(
-              'flex h-18 w-full items-center justify-between gap-2 px-6',
-              headerHeightClass
-            )
-          "
+          class="flex h-18 w-full items-center justify-between gap-2 px-6"
         >
           <div class="flex min-w-0 flex-1 gap-2">
             <Button
@@ -161,22 +151,20 @@ const SIZE_CLASSES = {
 } as const
 
 type ModalSize = keyof typeof SIZE_CLASSES
-type ContentPadding = 'default' | 'compact' | 'none' | 'flush'
+type ContentPadding = 'default' | 'compact' | 'none'
 
 const {
   contentTitle,
   rightPanelTitle,
   size = 'lg',
   leftPanelWidth = '14rem',
-  contentPadding = 'default',
-  headerHeightClass = 'h-18'
+  contentPadding = 'default'
 } = defineProps<{
   contentTitle: string
   rightPanelTitle?: string
   size?: ModalSize
   leftPanelWidth?: string
   contentPadding?: ContentPadding
-  headerHeightClass?: string
 }>()
 
 const sizeClasses = computed(() => SIZE_CLASSES[size])
@@ -216,10 +204,7 @@ const contentContainerClass = computed(() =>
   cn(
     'flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto',
     contentPadding === 'default' && 'px-6 pt-0 pb-10',
-    contentPadding === 'compact' && 'px-6 pt-0 pb-2',
-    // Keep the horizontal inset but let content run to the bottom edge (it
-    // clips there instead of ending above a padding gap).
-    contentPadding === 'flush' && 'px-6 pt-0'
+    contentPadding === 'compact' && 'px-6 pt-0 pb-2'
   )
 )
 

src/composables/billing/types.ts

@@ -107,8 +107,6 @@ export interface BillingState {
 
 export interface BillingContext extends BillingState, BillingActions {
   type: ComputedRef<BillingType>
-  /** Subscription paused on a failed payment (`subscriptionStatus === 'paused'`). */
-  isPaused: ComputedRef<boolean>
   /**
    * True when the active team workspace is still on a pre-credit-slider
    * (legacy) per-member tier plan, which keeps the old team pricing table.

src/composables/billing/useBillingContext.ts

@@ -147,7 +147,6 @@ function useBillingContextInternal(): BillingContext {
   const subscriptionStatus = computed(() =>
     toValue(activeContext.value.subscriptionStatus)
   )
-  const isPaused = computed(() => subscriptionStatus.value === 'paused')
   const tier = computed(() => toValue(activeContext.value.tier))
   const renewalDate = computed(() => toValue(activeContext.value.renewalDate))
 
@@ -302,7 +301,6 @@ function useBillingContextInternal(): BillingContext {
     isLegacyTeamPlan,
     billingStatus,
     subscriptionStatus,
-    isPaused,
     tier,
     renewalDate,
     getMaxSeats,

src/composables/boundingBoxes/boundingBoxesUtil.test.ts

@@ -156,7 +156,7 @@ describe('fromBoundingBoxes', () => {
         y: 200,
         width: 300,
         height: 400,
-        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#fff'] }
+        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#ffffff'] }
       }
     ]
     expect(fromBoundingBoxes(boxes, 1000, 1000)[0]).toEqual({
@@ -167,10 +167,31 @@ describe('fromBoundingBoxes', () => {
       type: 'text',
       text: 'hi',
       desc: 'd',
-      palette: ['#fff']
+      palette: ['#ffffff']
     })
   })
 
+  it('normalizes palette entries and drops invalid colors', () => {
+    const boxes: BoundingBox[] = [
+      {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        metadata: {
+          type: 'obj',
+          text: '',
+          desc: '',
+          palette: ['#FF0000', '#abc', 'red', '', 123] as unknown as string[]
+        }
+      }
+    ]
+    expect(fromBoundingBoxes(boxes, 100, 100)[0].palette).toEqual([
+      '#ff0000',
+      '#aabbcc'
+    ])
+  })
+
   it('fills defaults when metadata is missing or partial', () => {
     const boxes = [{ x: 0, y: 0, width: 10, height: 10 }] as BoundingBox[]
     expect(fromBoundingBoxes(boxes, 100, 100)[0]).toMatchObject({

src/composables/boundingBoxes/boundingBoxesUtil.ts

@@ -202,6 +202,22 @@ function isBoundingBox(b: unknown): b is BoundingBox {
   )
 }
 
+function normalizeHexColor(color: unknown): string | null {
+  if (typeof color !== 'string') return null
+  const hex = color.trim().toLowerCase()
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(hex)
+  if (short) {
+    return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`
+  }
+  return /^#([0-9a-f]{6}|[0-9a-f]{8})$/.test(hex) ? hex : null
+}
+
+function normalizePalette(palette: unknown): string[] {
+  return Array.isArray(palette)
+    ? palette.map(normalizeHexColor).filter((c): c is string => c !== null)
+    : []
+}
+
 export function fromBoundingBoxes(
   boxes: readonly BoundingBox[],
   width: number,
@@ -219,9 +235,7 @@ export function fromBoundingBoxes(
       type: meta.type === 'text' ? 'text' : 'obj',
       text: typeof meta.text === 'string' ? meta.text : '',
       desc: typeof meta.desc === 'string' ? meta.desc : '',
-      palette: Array.isArray(meta.palette)
-        ? meta.palette.filter((c): c is string => typeof c === 'string')
-        : []
+      palette: normalizePalette(meta.palette)
     }
   })
 }

src/composables/boundingBoxes/useBoundingBoxes.test.ts

@@ -8,14 +8,32 @@ import { useBoundingBoxes } from './useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import { toNodeId } from '@/types/nodeId'
 
-const { appState } = vi.hoisted(() => ({
-  appState: { node: null as unknown }
+const { appState, outputState } = vi.hoisted(() => ({
+  appState: { node: null as unknown },
+  outputState: {
+    outputs: undefined as unknown,
+    nodeOutputs: null as { value: Record<string, unknown> } | null
+  }
 }))
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: { getNodeById: () => appState.node } } }
 }))
 
+vi.mock('@/stores/nodeOutputStore', async () => {
+  const { ref } = await import('vue')
+  const nodeOutputs = ref<Record<string, unknown>>({})
+  outputState.nodeOutputs = nodeOutputs
+  return {
+    useNodeOutputStore: () => ({
+      nodeOutputs,
+      nodePreviewImages: ref({}),
+      getNodeImageUrls: () => undefined,
+      getNodeOutputs: () => outputState.outputs
+    })
+  }
+})
+
 const ctx = {
   measureText: (s: string) => ({ width: s.length * 7 }),
   setTransform: () => {},
@@ -27,6 +45,9 @@ const ctx = {
   save: () => {},
   restore: () => {},
   beginPath: () => {},
+  moveTo: () => {},
+  arc: () => {},
+  fill: () => {},
   rect: () => {},
   clip: () => {},
   font: '',
@@ -58,17 +79,32 @@ function makeCanvas(): HTMLCanvasElement {
   return el
 }
 
-function makeNode() {
+interface MockNode {
+  widgets: { name: string; value: unknown }[]
+  findInputSlot: (name: string) => number
+  getInputNode: () => null
+  isInputConnected?: () => boolean
+}
+
+function makeNode(): MockNode {
   return {
     widgets: [
       { name: 'width', value: 512 },
-      { name: 'height', value: 512 }
+      { name: 'height', value: 512 },
+      { name: 'last_incoming', value: [] }
     ],
     findInputSlot: () => -1,
     getInputNode: () => null
   }
 }
 
+const lastIncomingOf = (node: MockNode) =>
+  node.widgets.find((w) => w.name === 'last_incoming')!.value
+
+const setLastIncomingOf = (node: MockNode, value: BoundingBox[]) => {
+  node.widgets.find((w) => w.name === 'last_incoming')!.value = value
+}
+
 const pe = (
   clientX: number,
   clientY: number,
@@ -96,6 +132,8 @@ interface Captured extends Api {
   modelValue: Ref<BoundingBox[]>
 }
 
+const modelBoxes = (c: Captured) => c.modelValue.value
+
 function setup(initial: BoundingBox[] = []) {
   let captured: Captured | undefined
   const Harness = defineComponent({
@@ -128,9 +166,19 @@ const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
   ...over
 })
 
+function makeConnectedNode(): MockNode {
+  return {
+    ...makeNode(),
+    findInputSlot: (name: string) => (name === 'bboxes' ? 1 : -1),
+    isInputConnected: () => true
+  }
+}
+
 beforeEach(() => {
   setActivePinia(createPinia())
   appState.node = makeNode()
+  outputState.outputs = undefined
+  if (outputState.nodeOutputs) outputState.nodeOutputs.value = {}
   vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
     void Promise.resolve().then(() => cb(0))
     return 1
@@ -168,8 +216,8 @@ describe('useBoundingBoxes drawing', () => {
     c.onCanvasPointerMove(pe(60, 60))
     c.onDocPointerUp(pe(60, 60))
     await flush()
-    expect(c.modelValue.value).toHaveLength(1)
-    expect(c.modelValue.value[0].width).toBeGreaterThan(0)
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBeGreaterThan(0)
   })
 
   it('discards a zero-size draw', async () => {
@@ -177,7 +225,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(10, 10))
     c.onDocPointerUp(pe(10, 10))
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
   })
 
   it('selects an existing region instead of drawing when clicking inside it', async () => {
@@ -185,7 +233,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(30, 30))
     c.onDocPointerUp(pe(30, 30))
     await flush()
-    expect(c.modelValue.value).toHaveLength(1)
+    expect(modelBoxes(c)).toHaveLength(1)
   })
 })
 
@@ -194,7 +242,7 @@ describe('useBoundingBoxes region editing', () => {
     const c = setup([box()])
     c.setActiveType('text')
     await flush()
-    expect(c.modelValue.value[0].metadata.type).toBe('text')
+    expect(modelBoxes(c)[0].metadata.type).toBe('text')
   })
 
   it('deletes the active region on Delete', async () => {
@@ -205,14 +253,18 @@ describe('useBoundingBoxes region editing', () => {
       stopPropagation: () => {}
     } as unknown as KeyboardEvent)
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
   })
 
-  it('clears all regions', async () => {
+  it('clears all regions and invalidates the applied upstream input', async () => {
+    const node = makeNode()
+    setLastIncomingOf(node, [box()])
+    appState.node = node
     const c = setup([box(), box({ x: 0 })])
     c.clearAll()
     await flush()
-    expect(c.modelValue.value).toHaveLength(0)
+    expect(modelBoxes(c)).toHaveLength(0)
+    expect(lastIncomingOf(node)).toEqual([])
   })
 })
 
@@ -226,7 +278,7 @@ describe('useBoundingBoxes inline editor', () => {
     c.inlineEditor.value!.value = 'a label'
     c.commitInlineEditor()
     await flush()
-    expect(c.modelValue.value[0].metadata.desc).toBe('a label')
+    expect(modelBoxes(c)[0].metadata.desc).toBe('a label')
     expect(c.inlineEditor.value).toBeNull()
   })
 
@@ -239,6 +291,168 @@ describe('useBoundingBoxes inline editor', () => {
   })
 })
 
+describe('useBoundingBoxes incoming bboxes input', () => {
+  it('adopts cached outputs on mount without overwriting existing edits', () => {
+    const node = makeConnectedNode()
+    appState.node = node
+    const incoming = [box({ x: 0, width: 100 })]
+    outputState.outputs = { input_bboxes: incoming }
+    const c = setup([box({ x: 200, width: 300 })])
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(300)
+    expect(lastIncomingOf(node)).toEqual(incoming)
+  })
+
+  it('does not re-apply an already applied output after a remount', async () => {
+    const node = makeConnectedNode()
+    const incoming = [box({ x: 0, width: 100 })]
+    setLastIncomingOf(node, incoming)
+    appState.node = node
+    outputState.outputs = { input_bboxes: incoming }
+    const c = setup([box({ x: 200, width: 300 })])
+    outputState.nodeOutputs!.value = { updated: true }
+    await flush()
+    expect(modelBoxes(c)[0].width).toBe(300)
+  })
+
+  it('ignores incoming output when the input is not connected', () => {
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    const c = setup([])
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+
+  it('repopulates from the next run after clearing the canvas', async () => {
+    appState.node = makeConnectedNode()
+    const c = setup([])
+
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+
+    c.clearAll()
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+
+    outputState.nodeOutputs!.value = { n: 2 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(100)
+  })
+
+  it('does not apply output updates while the input is disconnected', async () => {
+    let connected = true
+    appState.node = {
+      ...makeConnectedNode(),
+      isInputConnected: () => connected
+    }
+    const c = setup([])
+
+    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+
+    c.clearAll()
+    await flush()
+    connected = false
+    outputState.nodeOutputs!.value = { n: 2 }
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+
+  it('does not apply incoming boxes while the user is drawing', async () => {
+    appState.node = makeConnectedNode()
+    const c = setup([])
+    c.grid.value = false
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(50, 50))
+
+    outputState.outputs = {
+      input_bboxes: [box({ x: 0, width: 100, height: 100 })]
+    }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+
+    c.onDocPointerUp(pe(50, 50))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(205)
+  })
+
+  it('applies incoming boxes when outputs stream in after mount', async () => {
+    const node = makeConnectedNode()
+    appState.node = node
+    const c = setup([])
+    expect(modelBoxes(c)).toHaveLength(0)
+
+    const incoming = [box({ x: 0, width: 100 })]
+    outputState.outputs = { input_bboxes: incoming }
+    outputState.nodeOutputs!.value = { updated: true }
+    await flush()
+
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].width).toBe(100)
+    expect(lastIncomingOf(node)).toEqual(incoming)
+  })
+
+  it('re-seeds the canvas over user edits when the upstream value changes', async () => {
+    const node = makeConnectedNode()
+    setLastIncomingOf(node, [box({ x: 0, width: 100 })])
+    appState.node = node
+    const c = setup([box({ x: 200, width: 300 })])
+
+    const changed = [box({ x: 64, width: 128 })]
+    outputState.outputs = { input_bboxes: changed }
+    outputState.nodeOutputs!.value = { n: 1 }
+    await flush()
+
+    expect(modelBoxes(c)[0].width).toBe(128)
+    expect(lastIncomingOf(node)).toEqual(changed)
+  })
+})
+
+describe('useBoundingBoxes grid snapping', () => {
+  it('snaps a drawn box to the grid when grid is enabled (default)', async () => {
+    const c = setup()
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(60, 60))
+    c.onDocPointerUp(pe(60, 60))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(1)
+    expect(modelBoxes(c)[0].x).toBe(64)
+    expect(modelBoxes(c)[0].width).toBe(256)
+  })
+
+  it('does not snap when grid is disabled', async () => {
+    const c = setup()
+    c.grid.value = false
+    c.onPointerDown(pe(10, 10))
+    c.onCanvasPointerMove(pe(55, 55))
+    c.onDocPointerUp(pe(55, 55))
+    await flush()
+    expect(modelBoxes(c)[0].width).toBe(230)
+  })
+
+  it('keeps the anchored edge fixed when resizing a single edge', async () => {
+    const c = setup([box({ x: 51, y: 51, width: 256, height: 256 })])
+    c.onPointerDown(pe(60, 30))
+    c.onCanvasPointerMove(pe(80, 30))
+    c.onDocPointerUp(pe(80, 30))
+    await flush()
+    expect(modelBoxes(c)[0].x).toBe(51)
+  })
+
+  it('removes a box that a resize collapses to zero size', async () => {
+    const c = setup([box({ x: 64, y: 64, width: 128, height: 128 })])
+    c.onPointerDown(pe(37, 25))
+    c.onCanvasPointerMove(pe(14, 25))
+    c.onDocPointerUp(pe(14, 25))
+    await flush()
+    expect(modelBoxes(c)).toHaveLength(0)
+  })
+})
+
 describe('useBoundingBoxes hover cursor', () => {
   it('switches to a pointer cursor over a tag', async () => {
     const c = setup([box({ x: 10, y: 10, width: 256, height: 256 })])

src/composables/boundingBoxes/useBoundingBoxes.ts

@@ -1,4 +1,5 @@
 import { useElementSize } from '@vueuse/core'
+import { cloneDeep, isEqual } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
 import type { Ref, ShallowRef } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
@@ -15,6 +16,7 @@ import type {
   Region
 } from '@/composables/boundingBoxes/boundingBoxesUtil'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import type { NodeOutputWith } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import type { BoundingBox } from '@/types/boundingBoxes'
@@ -25,6 +27,10 @@ const HANDLE_PX = 8
 const DIMENSION_STEP = 16
 const BG_DIM = 0.75
 const MAX_ELEMENT_COLORS = 5
+const GRID_PX = 32
+const MAX_GRID_CELLS = 64
+const DOT_ALPHA = 0.18
+const DOT_RADIUS = 1
 
 interface InlineEditorState {
   value: string
@@ -57,6 +63,7 @@ export function useBoundingBoxes(
   const hoverTagIndex = ref<number | null>(null)
   const bgImage = ref<HTMLImageElement | null>(null)
   const inlineEditor = ref<InlineEditorState | null>(null)
+  const grid = ref(true)
 
   const { width: containerWidth } = useElementSize(canvasContainer)
 
@@ -96,6 +103,89 @@ export function useBoundingBoxes(
     return Math.max(0, Math.min(1, n))
   }
 
+  function gridSpec() {
+    const axisFraction = (size: number) =>
+      Math.max(GRID_PX, Math.ceil(size / MAX_GRID_CELLS)) / size
+    return {
+      fx: axisFraction(widthValue.value),
+      fy: axisFraction(heightValue.value)
+    }
+  }
+
+  function snapFraction(value: number, step: number) {
+    return step > 0 ? clampToCanvas(Math.round(value / step) * step) : value
+  }
+
+  function snapRegion(region: Region, mode: HitMode): Region {
+    if (!grid.value) return region
+    const { fx, fy } = gridSpec()
+    if (mode === 'move') {
+      return {
+        ...region,
+        x: Math.min(snapFraction(region.x, fx), 1 - region.w),
+        y: Math.min(snapFraction(region.y, fy), 1 - region.h)
+      }
+    }
+    const snapLeft =
+      mode === 'draw' ||
+      mode === 'resize-l' ||
+      mode === 'resize-tl' ||
+      mode === 'resize-bl'
+    const snapRight =
+      mode === 'draw' ||
+      mode === 'resize-r' ||
+      mode === 'resize-tr' ||
+      mode === 'resize-br'
+    const snapTop =
+      mode === 'draw' ||
+      mode === 'resize-t' ||
+      mode === 'resize-tl' ||
+      mode === 'resize-tr'
+    const snapBottom =
+      mode === 'draw' ||
+      mode === 'resize-b' ||
+      mode === 'resize-bl' ||
+      mode === 'resize-br'
+    const x1 = snapLeft ? snapFraction(region.x, fx) : region.x
+    const y1 = snapTop ? snapFraction(region.y, fy) : region.y
+    const x2 = snapRight
+      ? snapFraction(region.x + region.w, fx)
+      : region.x + region.w
+    const y2 = snapBottom
+      ? snapFraction(region.y + region.h, fy)
+      : region.y + region.h
+    return {
+      ...region,
+      x: x1,
+      y: y1,
+      w: Math.max(0, x2 - x1),
+      h: Math.max(0, y2 - y1)
+    }
+  }
+
+  function drawDots(ctx: CanvasRenderingContext2D, W: number, H: number) {
+    const el = canvasEl.value
+    if (!el) return
+    const { fx, fy } = gridSpec()
+    if (fx <= 0 || fy <= 0) return
+    const cols = Math.round(1 / fx)
+    const rows = Math.round(1 / fy)
+    ctx.save()
+    ctx.globalAlpha = DOT_ALPHA
+    ctx.fillStyle = getComputedStyle(el).color
+    ctx.beginPath()
+    for (let i = 0; i <= cols; i++) {
+      const cx = Math.min(1, i * fx) * W
+      for (let j = 0; j <= rows; j++) {
+        const cy = Math.min(1, j * fy) * H
+        ctx.moveTo(cx + DOT_RADIUS, cy)
+        ctx.arc(cx, cy, DOT_RADIUS, 0, Math.PI * 2)
+      }
+    }
+    ctx.fill()
+    ctx.restore()
+  }
+
   function logicalSize() {
     const el = canvasEl.value
     return { w: el?.clientWidth || 1, h: el?.clientHeight || 1 }
@@ -146,6 +236,8 @@ export function useBoundingBoxes(
       ctx.fillRect(0, 0, W, H)
     }
 
+    if (grid.value) drawDots(ctx, W, H)
+
     const showActive = focused.value || isNodeSelected.value
     const aIdx = showActive ? activeIndex.value : -1
     const order = state.value.regions
@@ -366,7 +458,7 @@ export function useBoundingBoxes(
     const dx = mN.x - dragStartNorm.value.x
     const dy = mN.y - dragStartNorm.value.y
     const nb = applyDrag(dragMode.value, boxAtStart.value, dx, dy)
-    state.value.regions[activeIndex.value] = nb
+    state.value.regions[activeIndex.value] = snapRegion(nb, dragMode.value)
     requestDraw()
   }
 
@@ -375,7 +467,7 @@ export function useBoundingBoxes(
     drawing.value = false
     canvasEl.value?.releasePointerCapture?.(e.pointerId)
     const b = state.value.regions[activeIndex.value]
-    if (b && (b.w < 0.005 || b.h < 0.005) && dragMode.value === 'draw') {
+    if (b && (b.w < 0.005 || b.h < 0.005)) {
       removeRegion(activeIndex.value)
     }
     syncState()
@@ -510,6 +602,7 @@ export function useBoundingBoxes(
   function clearAll() {
     state.value.regions = []
     activeIndex.value = -1
+    setLastIncoming([])
     syncState()
   }
 
@@ -530,6 +623,23 @@ export function useBoundingBoxes(
   watch(isNodeSelected, () => requestDraw())
   watch([widthValue, heightValue], () => syncState())
 
+  watch(
+    litegraphNode,
+    (node) => {
+      const props = node?.properties as { bboxGrid?: unknown } | undefined
+      if (props && typeof props.bboxGrid === 'boolean')
+        grid.value = props.bboxGrid
+    },
+    { immediate: true }
+  )
+  watch(grid, (enabled) => {
+    const props = litegraphNode.value?.properties as
+      | Record<string, unknown>
+      | undefined
+    if (props) props.bboxGrid = enabled
+    requestDraw()
+  })
+
   const nodeOutputStore = useNodeOutputStore()
   function applyImageDimensions(naturalWidth: number, naturalHeight: number) {
     const node = litegraphNode.value
@@ -580,10 +690,63 @@ export function useBoundingBoxes(
     }
     img.src = url
   }
-  watch(() => nodeOutputStore.nodeOutputs, updateBgImage, { deep: true })
+  function lastIncomingWidget() {
+    return litegraphNode.value?.widgets?.find((w) => w.name === 'last_incoming')
+  }
+
+  function lastIncomingValue(): BoundingBox[] {
+    const value = lastIncomingWidget()?.value
+    return Array.isArray(value) ? (value as BoundingBox[]) : []
+  }
+
+  function setLastIncoming(boxes: BoundingBox[]) {
+    const widget = lastIncomingWidget()
+    if (!widget) return
+    const next = cloneDeep(boxes)
+    widget.value = next
+    widget.callback?.(next)
+  }
+
+  function applyIncomingBoxes(apply = true) {
+    if (drawing.value) return
+    const node = litegraphNode.value
+    if (!node) return
+    const slot = node.findInputSlot('bboxes')
+    if (slot < 0 || !node.isInputConnected(slot)) return
+    const outputs = nodeOutputStore.getNodeOutputs(node) as
+      | NodeOutputWith<{ input_bboxes?: BoundingBox[] }>
+      | undefined
+    const incoming = outputs?.input_bboxes
+    if (!incoming?.length) return
+    const applied = lastIncomingValue()
+    if (isEqual(incoming, applied)) return
+    if (!apply) {
+      if (!applied.length && state.value.regions.length)
+        setLastIncoming(incoming)
+      return
+    }
+    state.value.regions = fromBoundingBoxes(
+      incoming,
+      widthValue.value,
+      heightValue.value
+    )
+    activeIndex.value = state.value.regions.length ? 0 : -1
+    setLastIncoming(incoming)
+    syncState()
+  }
+
+  watch(
+    () => nodeOutputStore.nodeOutputs,
+    () => {
+      updateBgImage()
+      applyIncomingBoxes()
+    },
+    { deep: true }
+  )
   watch(() => nodeOutputStore.nodePreviewImages, updateBgImage, { deep: true })
 
   updateBgImage()
+  applyIncomingBoxes(false)
   void nextTick(() => requestDraw())
 
   onBeforeUnmount(() => {
@@ -608,6 +771,7 @@ export function useBoundingBoxes(
     commitInlineEditor,
     setActiveType,
     clearAll,
-    syncState
+    syncState,
+    grid
   }
 }

src/composables/graph/useNodeErrorFlagSync.ts

@@ -84,7 +84,7 @@ function reconcileNodeErrorFlags(
 }
 
 export function useNodeErrorFlagSync(
-  lastNodeErrors: Ref<Record<string, NodeError> | null>,
+  nodeErrors: Ref<Record<string, NodeError> | null>,
   missingModelStore: ReturnType<typeof useMissingModelStore>,
   missingMediaStore: ReturnType<typeof useMissingMediaStore>
 ): () => void {
@@ -95,7 +95,7 @@ export function useNodeErrorFlagSync(
 
   const stop = watch(
     [
-      lastNodeErrors,
+      nodeErrors,
       () => missingModelStore.missingModelNodeIds,
       () => missingMediaStore.missingMediaNodeIds,
       showErrorsTab
@@ -108,7 +108,7 @@ export function useNodeErrorFlagSync(
       // Vue nodes compute hasAnyError independently and are unaffected.
       reconcileNodeErrorFlags(
         app.rootGraph,
-        lastNodeErrors.value,
+        nodeErrors.value,
         showErrorsTab.value
           ? missingModelStore.missingModelAncestorExecutionIds
           : new Set(),

src/composables/palette/usePaletteSwatchRow.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import type { EffectScope } from 'vue'
 import { effectScope, ref, shallowRef } from 'vue'
 
@@ -13,17 +13,12 @@ afterEach(() => {
 function setup(initial: string[]) {
   const modelValue = ref(initial)
   const container = shallowRef(document.createElement('div'))
-  const picker = shallowRef(document.createElement('input'))
   const scope = effectScope()
   scopes.push(scope)
-  const api = scope.run(() =>
-    usePaletteSwatchRow({ modelValue, container, picker })
-  )!
-  return { modelValue, container, picker, ...api }
+  const api = scope.run(() => usePaletteSwatchRow({ modelValue, container }))!
+  return { modelValue, container, ...api }
 }
 
-const mouseEvent = () => ({ stopPropagation: vi.fn() }) as unknown as MouseEvent
-
 describe('usePaletteSwatchRow', () => {
   it('appends a default color', () => {
     const { modelValue, addColor } = setup(['#000000'])
@@ -37,31 +32,17 @@ describe('usePaletteSwatchRow', () => {
     expect(modelValue.value).toEqual(['#a', '#c'])
   })
 
-  it('seeds the picker input with the clicked color before opening it', () => {
-    const { picker, openPicker } = setup(['#112233'])
-    const click = vi.spyOn(picker.value!, 'click')
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#112233')
-    expect(click).toHaveBeenCalled()
-  })
-
-  it('falls back to white when the slot is empty', () => {
-    const { picker, openPicker } = setup([''])
-    openPicker(0, mouseEvent())
-    expect(picker.value!.value).toBe('#ffffff')
-  })
-
-  it('writes the picked color back to the open slot', () => {
-    const { modelValue, openPicker, onPickerInput } = setup(['#a', '#b'])
-    openPicker(1, mouseEvent())
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
+  it('updates the color at an index', () => {
+    const { modelValue, updateAt } = setup(['#a', '#b'])
+    updateAt(1, '#123456')
     expect(modelValue.value).toEqual(['#a', '#123456'])
   })
 
-  it('ignores picker input when no slot is open', () => {
-    const { modelValue, onPickerInput } = setup(['#a'])
-    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
-    expect(modelValue.value).toEqual(['#a'])
+  it('ignores an update that does not change the color', () => {
+    const { modelValue, updateAt } = setup(['#a'])
+    const before = modelValue.value
+    updateAt(0, '#a')
+    expect(modelValue.value).toBe(before)
   })
 
   it('reorders via drag when the pointer crosses another swatch', () => {

src/composables/palette/usePaletteSwatchRow.ts

@@ -5,30 +5,16 @@ import { ref } from 'vue'
 interface UsePaletteSwatchRowOptions {
   modelValue: Ref<string[]>
   container: Readonly<ShallowRef<HTMLDivElement | null>>
-  picker: Readonly<ShallowRef<HTMLInputElement | null>>
 }
 
 export function usePaletteSwatchRow({
   modelValue,
-  container,
-  picker
+  container
 }: UsePaletteSwatchRowOptions) {
-  const pickerIndex = ref<number | null>(null)
-
-  function openPicker(i: number, e: MouseEvent) {
-    e.stopPropagation()
-    pickerIndex.value = i
-    const el = picker.value
-    if (!el) return
-    el.value = modelValue.value[i] || '#ffffff'
-    el.click()
-  }
-
-  function onPickerInput(e: Event) {
-    const v = (e.target as HTMLInputElement).value
-    if (pickerIndex.value === null) return
+  function updateAt(i: number, value: string) {
+    if (modelValue.value[i] === value) return
     const next = modelValue.value.slice()
-    next[pickerIndex.value] = v
+    next[i] = value
     modelValue.value = next
   }
 
@@ -105,8 +91,7 @@ export function usePaletteSwatchRow({
   })
 
   return {
-    openPicker,
-    onPickerInput,
+    updateAt,
     remove,
     addColor,
     onPointerDown

src/composables/useExternalLink.ts

@@ -90,9 +90,7 @@ export function useExternalLink() {
     githubFrontend: 'https://github.com/Comfy-Org/ComfyUI_frontend',
     githubElectron: 'https://github.com/Comfy-Org/electron',
     forum: 'https://forum.comfy.org/',
-    comfyOrg: 'https://www.comfy.org/',
-    teamPlanRequests:
-      'https://comfy-org.portal.usepylon.com/forms/team-plan-requests'
+    comfyOrg: 'https://www.comfy.org/'
   }
 
   /** Common doc paths for use with buildDocsUrl */

src/composables/useLoad3d.test.ts

@@ -77,6 +77,14 @@ vi.mock('pinia', async (importOriginal) => {
   }
 })
 
+const { settingGetMock } = vi.hoisted(() => ({
+  settingGetMock: vi.fn()
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({ get: settingGetMock })
+}))
+
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn()
 }))
@@ -95,6 +103,9 @@ describe('useLoad3d', () => {
     vi.clearAllMocks()
     nodeToLoad3dMap.clear()
     vi.mocked(getActivePinia).mockReturnValue(null as unknown as Pinia)
+    settingGetMock.mockImplementation((key: string) =>
+      key === 'Comfy.Load3D.BackgroundColor' ? '282828' : undefined
+    )
 
     mockNode = createMockLGraphNode({
       properties: {
@@ -356,6 +367,20 @@ describe('useLoad3d', () => {
       expect(composable.isPreview.value).toBe(true)
     })
 
+    it('should set preview mode for save-viewer nodes despite width/height widgets', async () => {
+      Object.defineProperty(mockNode, 'constructor', {
+        value: { comfyClass: 'Save3DAdvanced' },
+        configurable: true
+      })
+
+      const composable = useLoad3d(mockNode)
+      const containerRef = document.createElement('div')
+
+      await composable.initializeLoad3d(containerRef)
+
+      expect(composable.isPreview.value).toBe(true)
+    })
+
     it('should handle initialization errors', async () => {
       vi.mocked(createLoad3d).mockImplementationOnce(() => {
         throw new Error('Load3d creation failed')
@@ -383,7 +408,37 @@ describe('useLoad3d', () => {
       const nodeRef = shallowRef<LGraphNode | null>(mockNode)
       const composable = useLoad3d(nodeRef)
 
-      expect(composable.sceneConfig.value.backgroundColor).toBe('#000000')
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#282828')
+    })
+
+    it('defaults background color from the Comfy.Load3D.BackgroundColor setting', () => {
+      vi.mocked(getActivePinia).mockReturnValue({} as unknown as Pinia)
+      vi.mocked(useCanvasStore).mockReturnValue(
+        reactive({ appScalePercentage: 100 }) as unknown as ReturnType<
+          typeof useCanvasStore
+        >
+      )
+      settingGetMock.mockImplementation((key: string) =>
+        key === 'Comfy.Load3D.BackgroundColor' ? '123456' : undefined
+      )
+
+      const composable = useLoad3d(mockNode)
+
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#123456')
+    })
+
+    it('attaches event listeners before running queued ready callbacks', async () => {
+      const composable = useLoad3d(mockNode)
+      let listenersAttachedWhenCallbackRan = false
+
+      composable.waitForLoad3d(() => {
+        listenersAttachedWhenCallbackRan =
+          vi.mocked(mockLoad3d.addEventListener!).mock.calls.length > 0
+      })
+
+      await composable.initializeLoad3d(document.createElement('div'))
+
+      expect(listenersAttachedWhenCallbackRan).toBe(true)
     })
 
     it('passes getZoomScale callback to createLoad3d', async () => {

src/composables/useLoad3d.ts

@@ -8,6 +8,7 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
+import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
 import {
   isAssetPreviewSupported,
   persistThumbnail
@@ -118,7 +119,9 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
   const sceneConfig = ref<SceneConfig>({
     showGrid: true,
-    backgroundColor: '#000000',
+    backgroundColor: getActivePinia()
+      ? '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor')
+      : '#282828',
     backgroundImage: '',
     backgroundRenderMode: 'tiled'
   })
@@ -192,6 +195,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       const heightWidget = node.widgets?.find((w) => w.name === 'height')
 
       if (
+        isLoad3dResultViewerNode(node.constructor.comfyClass ?? '') ||
         node.constructor.comfyClass?.startsWith('Preview') ||
         !(widthWidget && heightWidget)
       ) {
@@ -248,6 +252,8 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
       nodeToLoad3dMap.set(node, load3d)
 
+      handleEvents('add')
+
       const callbacks = pendingCallbacks.get(node)
 
       if (callbacks && load3d) {
@@ -263,8 +269,6 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
           if (load3d) invokeReadyCallback(callback, load3d)
         })
       }
-
-      handleEvents('add')
     } catch (error) {
       console.error('Error initializing Load3d:', error)
       useToastStore().addAlert(

src/composables/useLoad3dViewer.ts

@@ -4,7 +4,7 @@ import QuickLRU from '@alloc/quick-lru'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
-import { isLoad3dPreviewNode } from '@/extensions/core/load3d/nodeTypes'
+import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
 import type {
   AnimationItem,
   BackgroundRenderModeType,
@@ -371,7 +371,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         | LightConfig
         | undefined
 
-      isPreview.value = isLoad3dPreviewNode(node.type ?? '')
+      isPreview.value = isLoad3dResultViewerNode(node.type ?? '')
 
       if (sceneConfig) {
         backgroundColor.value =

src/core/graph/subgraph/liftNodeErrorsToBoundary.test.ts

@@ -0,0 +1,299 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
+import { nodeError, validationError } from '@/utils/__tests__/nodeErrorHelpers'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import {
+  createBoundaryLinkedSubgraph,
+  createTestRootGraph,
+  createTestSubgraph,
+  createTestSubgraphNode
+} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
+import { toNodeId } from '@/types/nodeId'
+
+import { liftNodeErrorsToBoundary } from './liftNodeErrorsToBoundary'
+
+beforeEach(() => {
+  setActivePinia(createTestingPinia({ stubActions: false }))
+})
+
+describe('liftNodeErrorsToBoundary', () => {
+  it('lifts a boundary-linked slot error to the host', () => {
+    const { host, rootGraph } = createBoundaryLinkedSubgraph()
+    const errors = {
+      '12:5': nodeError([
+        validationError('required_input_missing', 'seed_input')
+      ])
+    }
+
+    const result = liftNodeErrorsToBoundary(rootGraph, errors)
+
+    expect(result).toEqual({
+      '12': {
+        class_type: host.title,
+        dependent_outputs: [],
+        errors: [
+          expect.objectContaining({
+            type: 'required_input_missing',
+            extra_info: expect.objectContaining({
+              input_name: 'seed',
+              source_execution_id: '12:5',
+              source_input_name: 'seed_input'
+            })
+          })
+        ]
+      }
+    })
+  })
+
+  it('lifts a promoted-widget value error to the host input', () => {
+    const rootGraph = createTestRootGraph()
+    const subgraph = createTestSubgraph({ rootGraph })
+    const host = createTestSubgraphNode(subgraph, { id: 12 })
+    rootGraph.add(host)
+
+    const interior = new LGraphNode('CheckpointLoaderSimple')
+    interior.id = toNodeId(5)
+    const input = interior.addInput('ckpt_name', 'COMBO')
+    const widget = interior.addWidget('combo', 'ckpt_name', '', () => {}, {
+      values: ['present.safetensors']
+    })
+    input.widget = { name: widget.name }
+    subgraph.add(interior)
+
+    expect(promoteValueWidgetViaSubgraphInput(host, interior, widget).ok).toBe(
+      true
+    )
+
+    const result = liftNodeErrorsToBoundary(rootGraph, {
+      '12:5': nodeError([
+        validationError('value_not_in_list', 'ckpt_name', {
+          received_value: 'missing.safetensors',
+          input_config: ['COMBO', { values: ['present.safetensors'] }]
+        })
+      ])
+    })
+
+    expect(result['12'].errors[0].extra_info).toMatchObject({
+      input_name: 'ckpt_name',
+      source_execution_id: '12:5',
+      source_input_name: 'ckpt_name',
+      received_value: 'missing.safetensors',
+      input_config: ['COMBO', { values: ['present.safetensors'] }]
+    })
+  })
+
+  it('recurses through nested boundary-linked hosts', () => {
+    const rootGraph = createTestRootGraph()
+    const outerSubgraph = createTestSubgraph({
+      rootGraph,
+      inputs: [{ name: 'seed', type: '*' }]
+    })
+    const outerHost = createTestSubgraphNode(outerSubgraph, { id: 1 })
+    outerHost.title = 'Outer Host'
+    rootGraph.add(outerHost)
+
+    const middleSubgraph = createTestSubgraph({
+      rootGraph,
+      inputs: [{ name: 'seed', type: '*' }]
+    })
+    const middleHost = createTestSubgraphNode(middleSubgraph, {
+      id: 2,
+      parentGraph: outerSubgraph
+    })
+    outerSubgraph.add(middleHost)
+    outerSubgraph.inputNode.slots[0].connect(middleHost.inputs[0], middleHost)
+
+    const leaf = new LGraphNode('LeafNode')
+    leaf.id = toNodeId(3)
+    const leafInput = leaf.addInput('seed_input', '*')
+    middleSubgraph.add(leaf)
+    middleSubgraph.inputNode.slots[0].connect(leafInput, leaf)
+
+    const result = liftNodeErrorsToBoundary(rootGraph, {
+      '1:2:3': nodeError([
+        validationError('required_input_missing', 'seed_input')
+      ])
+    })
+
+    expect(Object.keys(result)).toEqual(['1'])
+    expect(result['1'].class_type).toBe(outerHost.title)
+    expect(result['1'].errors[0].extra_info).toMatchObject({
+      input_name: 'seed',
+      source_execution_id: '1:2:3',
+      source_input_name: 'seed_input'
+    })
+  })
+
+  it('keeps errors on ordinary interior data-flow links', () => {
+    const rootGraph = createTestRootGraph()
+    const subgraph = createTestSubgraph({
+      rootGraph,
+      inputs: [{ name: 'seed', type: '*' }]
+    })
+    const host = createTestSubgraphNode(subgraph, { id: 12 })
+    rootGraph.add(host)
+
+    const source = new LGraphNode('SourceNode')
+    source.id = toNodeId(4)
+    source.addOutput('seed', '*')
+    subgraph.add(source)
+
+    const target = new LGraphNode('TargetNode')
+    target.id = toNodeId(5)
+    target.addInput('seed_input', '*')
+    subgraph.add(target)
+    source.connect(0, target, 0)
+
+    const errors = {
+      '12:5': nodeError([
+        validationError('required_input_missing', 'seed_input')
+      ])
+    }
+
+    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
+  })
+
+  it('keeps errors without a liftable subject on the interior node', () => {
+    const { rootGraph } = createBoundaryLinkedSubgraph()
+    const errors = {
+      '12:5': nodeError([
+        validationError('required_input_missing'),
+        validationError('exception_during_validation', 'seed_input'),
+        validationError('dependency_cycle', 'seed_input'),
+        validationError(
+          'custom_validation_failed',
+          'seed_input',
+          { received_value: 'image.png' },
+          'Invalid image file'
+        )
+      ])
+    }
+
+    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
+  })
+
+  it('keeps unknown typed validation errors on the interior node', () => {
+    const { rootGraph } = createBoundaryLinkedSubgraph()
+    const errors = {
+      '12:5': nodeError([
+        validationError('future_backend_validation_type', 'seed_input')
+      ])
+    }
+
+    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
+  })
+
+  it('splits liftable and non-liftable errors from the same node entry', () => {
+    const { rootGraph } = createBoundaryLinkedSubgraph()
+
+    const result = liftNodeErrorsToBoundary(rootGraph, {
+      '12:5': nodeError([
+        validationError('required_input_missing', 'seed_input'),
+        validationError('exception_during_validation', 'seed_input')
+      ])
+    })
+
+    expect(result['12'].errors).toHaveLength(1)
+    expect(result['12'].errors[0].type).toBe('required_input_missing')
+    expect(result['12:5'].errors).toHaveLength(1)
+    expect(result['12:5'].errors[0].type).toBe('exception_during_validation')
+  })
+
+  it('merges a lifted error into an existing host entry', () => {
+    const { rootGraph } = createBoundaryLinkedSubgraph()
+    const errors = {
+      '12': {
+        class_type: 'ExistingHostClass',
+        dependent_outputs: ['existing-output'],
+        errors: [validationError('value_smaller_than_min', 'other')]
+      },
+      '12:5': nodeError([
+        validationError('required_input_missing', 'seed_input')
+      ])
+    }
+
+    const result = liftNodeErrorsToBoundary(rootGraph, errors)
+
+    expect(result['12']).toMatchObject({
+      class_type: 'ExistingHostClass',
+      dependent_outputs: ['existing-output']
+    })
+    expect(result['12'].errors.map((error) => error.type)).toEqual([
+      'value_smaller_than_min',
+      'required_input_missing'
+    ])
+  })
+
+  it('keeps own errors before lifted errors for nested host keys', () => {
+    const rootGraph = createTestRootGraph()
+    const outerSubgraph = createTestSubgraph({ rootGraph })
+    const outerHost = createTestSubgraphNode(outerSubgraph, { id: 1 })
+    rootGraph.add(outerHost)
+
+    const middleSubgraph = createTestSubgraph({
+      rootGraph,
+      inputs: [{ name: 'seed', type: '*' }]
+    })
+    const middleHost = createTestSubgraphNode(middleSubgraph, {
+      id: 2,
+      parentGraph: outerSubgraph
+    })
+    outerSubgraph.add(middleHost)
+
+    const leaf = new LGraphNode('LeafNode')
+    leaf.id = toNodeId(3)
+    const leafInput = leaf.addInput('seed_input', '*')
+    middleSubgraph.add(leaf)
+    middleSubgraph.inputNode.slots[0].connect(leafInput, leaf)
+
+    const result = liftNodeErrorsToBoundary(rootGraph, {
+      '1:2:3': nodeError([
+        validationError('required_input_missing', 'seed_input')
+      ]),
+      '1:2': nodeError([validationError('value_smaller_than_min', 'seed')])
+    })
+
+    expect(result['1:2'].errors.map((error) => error.type)).toEqual([
+      'value_smaller_than_min',
+      'required_input_missing'
+    ])
+  })
+
+  it('preserves empty error entries unchanged', () => {
+    const rootGraph = createTestRootGraph()
+    const errors = {
+      '12': nodeError([], 'ExtraRootNode')
+    }
+
+    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
+  })
+
+  it('fails open without mutating the input record', () => {
+    const rootGraph = createTestRootGraph()
+    const subgraph = createTestSubgraph({ rootGraph })
+    const host = createTestSubgraphNode(subgraph, { id: 12 })
+    rootGraph.add(host)
+    const interior = new LGraphNode('InteriorNode')
+    interior.id = toNodeId(5)
+    interior.addInput('unlinked', '*')
+    subgraph.add(interior)
+
+    const errors = {
+      '99:5': nodeError([validationError('required_input_missing', 'x')]),
+      '12:5': nodeError([
+        validationError('required_input_missing', 'missing'),
+        validationError('value_not_in_list', 'unlinked')
+      ])
+    }
+    const original = structuredClone(errors)
+
+    const result = liftNodeErrorsToBoundary(rootGraph, errors)
+
+    expect(result).toEqual(original)
+    expect(errors).toEqual(original)
+    expect(result).not.toBe(errors)
+  })
+})

src/core/graph/subgraph/liftNodeErrorsToBoundary.ts

@@ -0,0 +1,193 @@
+import { groupBy, partition } from 'es-toolkit'
+
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { NodeError } from '@/schemas/apiSchema'
+import { tryNormalizeNodeExecutionId } from '@/types/nodeIdentification'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { isNodeLevelValidationError } from '@/utils/executionErrorUtil'
+import type { NodeValidationError } from '@/utils/executionErrorUtil'
+import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+import { isSubgraph } from '@/utils/typeGuardUtil'
+
+export interface LiftedErrorExtraInfo {
+  input_name: string
+  source_execution_id: string
+  source_input_name: string
+}
+
+export interface LiftedSurface {
+  hostExecId: NodeExecutionId
+  hostInputName: string
+}
+
+interface ErrorPlacement {
+  kind: 'own' | 'lifted'
+  targetExecId: string
+  error: NodeValidationError
+}
+
+export function getLiftedErrorSource(
+  error: NodeValidationError
+): LiftedErrorExtraInfo | null {
+  const extraInfo = error.extra_info
+  if (!extraInfo) return null
+
+  const { input_name, source_execution_id, source_input_name } = extraInfo
+  if (
+    typeof input_name !== 'string' ||
+    typeof source_execution_id !== 'string' ||
+    typeof source_input_name !== 'string'
+  ) {
+    return null
+  }
+
+  return { input_name, source_execution_id, source_input_name }
+}
+
+function getHostExecutionId(executionId: string): NodeExecutionId | null {
+  const separatorIndex = executionId.lastIndexOf(':')
+  if (separatorIndex <= 0) return null
+  return tryNormalizeNodeExecutionId(executionId.slice(0, separatorIndex))
+}
+
+/**
+ * Boundary surfaces that expose `(executionId, inputName)`, innermost first.
+ * Walks one host per level and stops at the last resolvable surface, so an
+ * unresolvable deeper host falls back to the shallower one (fail-open).
+ */
+export function resolveLiftChain(
+  rootGraph: LGraph,
+  executionId: string,
+  inputName: string
+): LiftedSurface[] {
+  const chain: LiftedSurface[] = []
+  let currentExecId = executionId
+  let currentInputName = inputName
+
+  for (;;) {
+    const node = getNodeByExecutionId(rootGraph, currentExecId)
+    const graph = node?.graph
+    if (!node || !graph || !isSubgraph(graph)) break
+
+    const slot = node.inputs?.find((input) => input.name === currentInputName)
+    if (slot?.link == null) break
+
+    const subgraphInput = graph
+      .getLink(slot.link)
+      ?.resolve(graph)?.subgraphInput
+    if (!subgraphInput) break
+
+    const hostExecId = getHostExecutionId(currentExecId)
+    if (!hostExecId || !getNodeByExecutionId(rootGraph, hostExecId)) break
+
+    chain.push({ hostExecId, hostInputName: subgraphInput.name })
+    currentExecId = hostExecId
+    currentInputName = subgraphInput.name
+  }
+
+  return chain
+}
+
+function createEmptyNodeError(nodeError: NodeError): NodeError {
+  return {
+    ...nodeError,
+    errors: []
+  }
+}
+
+// Lifted host entries use the host title for display; SubgraphNode.type is a UUID.
+function createLiftedHostEntry(
+  rootGraph: LGraph,
+  hostExecId: string
+): NodeError {
+  return {
+    class_type:
+      getNodeByExecutionId(rootGraph, hostExecId)?.title ?? hostExecId,
+    dependent_outputs: [],
+    errors: []
+  }
+}
+
+function toErrorPlacement(
+  rootGraph: LGraph,
+  executionId: string,
+  error: NodeValidationError
+): ErrorPlacement {
+  const inputName = error.extra_info?.input_name
+  const surface =
+    inputName && !isNodeLevelValidationError(error)
+      ? resolveLiftChain(rootGraph, executionId, inputName).at(-1)
+      : undefined
+
+  if (!inputName || !surface) {
+    return {
+      kind: 'own',
+      targetExecId: executionId,
+      error
+    }
+  }
+
+  const liftedExtraInfo: LiftedErrorExtraInfo = {
+    input_name: surface.hostInputName,
+    source_execution_id: executionId,
+    source_input_name: inputName
+  }
+
+  return {
+    kind: 'lifted',
+    targetExecId: surface.hostExecId,
+    error: {
+      ...error,
+      extra_info: {
+        ...error.extra_info,
+        ...liftedExtraInfo
+      }
+    }
+  }
+}
+
+export function liftNodeErrorsToBoundary(
+  rootGraph: LGraph,
+  nodeErrors: Record<string, NodeError>
+): Record<string, NodeError> {
+  const output: Record<string, NodeError> = {}
+  const placements = Object.entries(nodeErrors).flatMap(
+    ([executionId, nodeError]) =>
+      nodeError.errors.map((error) =>
+        toErrorPlacement(rootGraph, executionId, error)
+      )
+  )
+
+  for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
+    if (nodeError.errors.length === 0) {
+      output[executionId] = createEmptyNodeError(nodeError)
+    }
+  }
+
+  const placementsByTarget = groupBy(
+    placements,
+    (placement) => placement.targetExecId
+  )
+
+  for (const [targetExecId, targetPlacements] of Object.entries(
+    placementsByTarget
+  )) {
+    const baseEntry = nodeErrors[targetExecId]
+      ? createEmptyNodeError(nodeErrors[targetExecId])
+      : createLiftedHostEntry(rootGraph, targetExecId)
+
+    const [ownErrors, liftedErrors] = partition(
+      targetPlacements,
+      (placement) => placement.kind === 'own'
+    )
+
+    output[targetExecId] = {
+      ...baseEntry,
+      errors: [...ownErrors, ...liftedErrors].map(
+        (placement) => placement.error
+      )
+    }
+  }
+
+  return output
+}

src/extensions/core/createBoundingBoxes.test.ts

@@ -32,7 +32,8 @@ function makeNode(connected: boolean, comfyClass = 'CreateBoundingBoxes') {
   const widgets: MockWidget[] = [
     { name: 'width', hidden: false, options: {} },
     { name: 'height', hidden: false, options: {} },
-    { name: 'other', hidden: false, options: {} }
+    { name: 'other', hidden: false, options: {} },
+    { name: 'last_incoming', hidden: false, options: {} }
   ]
   return {
     constructor: { comfyClass },
@@ -73,6 +74,15 @@ describe('Comfy.CreateBoundingBoxes extension', () => {
     expect(node.widgets[0].options.hidden).toBe(false)
   })
 
+  it('always hides the internal last_incoming widget', () => {
+    for (const connected of [true, false]) {
+      const node = makeNode(connected)
+      state.extension!.nodeCreated(node)
+      expect(node.widgets[3].hidden).toBe(true)
+      expect(node.widgets[3].options.hidden).toBe(true)
+    }
+  })
+
   it('writes visibility through the widget value store when present', () => {
     state.widgetState = { options: {} }
     const node = makeNode(true)

src/extensions/core/createBoundingBoxes.ts

@@ -3,6 +3,7 @@ import { useExtensionService } from '@/services/extensionService'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 const DIMENSION_WIDGETS = new Set(['width', 'height'])
+const INTERNAL_WIDGETS = new Set(['last_incoming'])
 
 useExtensionService().registerExtension({
   name: 'Comfy.CreateBoundingBoxes',
@@ -15,20 +16,30 @@ useExtensionService().registerExtension({
 
     const widgetValueStore = useWidgetValueStore()
 
+    const setWidgetHidden = (
+      widget: NonNullable<typeof node.widgets>[number],
+      hidden: boolean
+    ) => {
+      widget.hidden = hidden
+      const state = widget.widgetId
+        ? widgetValueStore.getWidget(widget.widgetId)
+        : undefined
+      if (state?.options) state.options.hidden = hidden
+      else widget.options.hidden = hidden
+    }
+
     const syncDimensionVisibility = () => {
       const slot = node.findInputSlot('background')
       const hidden = slot >= 0 && node.isInputConnected(slot)
       for (const widget of node.widgets ?? []) {
-        if (!DIMENSION_WIDGETS.has(widget.name)) continue
-        widget.hidden = hidden
-        const state = widget.widgetId
-          ? widgetValueStore.getWidget(widget.widgetId)
-          : undefined
-        if (state?.options) state.options.hidden = hidden
-        else widget.options.hidden = hidden
+        if (DIMENSION_WIDGETS.has(widget.name)) setWidgetHidden(widget, hidden)
       }
     }
 
+    for (const widget of node.widgets ?? []) {
+      if (INTERNAL_WIDGETS.has(widget.name)) setWidgetHidden(widget, true)
+    }
+
     syncDimensionVisibility()
     node.onConnectionsChange = useChainCallback(
       node.onConnectionsChange,

src/extensions/core/load3d.test.ts

@@ -143,14 +143,23 @@ async function loadExtensionsFresh(): Promise<{
   load3DExt: ExtCreated
   preview3DExt: ExtCreated
   preview3DAdvancedExt: ExtCreated
+  save3DAdvancedExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3d')
+  const extByName = (name: string): ExtCreated => {
+    const call = registerExtensionMock.mock.calls.find(
+      (c) => (c[0] as ExtCreated).name === name
+    )
+    if (!call) throw new Error(`Extension ${name} was not registered`)
+    return call[0] as ExtCreated
+  }
   return {
-    load3DExt: registerExtensionMock.mock.calls[0][0] as ExtCreated,
-    preview3DExt: registerExtensionMock.mock.calls[1][0] as ExtCreated,
-    preview3DAdvancedExt: registerExtensionMock.mock.calls[2][0] as ExtCreated
+    load3DExt: extByName('Comfy.Load3D'),
+    preview3DExt: extByName('Comfy.Preview3D'),
+    preview3DAdvancedExt: extByName('Comfy.Preview3DAdvanced'),
+    save3DAdvancedExt: extByName('Comfy.Save3DAdvanced')
   }
 }
 
@@ -264,14 +273,15 @@ function setupBaseMocks() {
 describe('load3d module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers Comfy.Load3D, Comfy.Preview3D, and Comfy.Preview3DAdvanced extensions on import', async () => {
-    const { load3DExt, preview3DExt, preview3DAdvancedExt } =
+  it('registers Comfy.Load3D, Comfy.Preview3D, Comfy.Preview3DAdvanced, and Comfy.Save3DAdvanced extensions on import', async () => {
+    const { load3DExt, preview3DExt, preview3DAdvancedExt, save3DAdvancedExt } =
       await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(3)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
     expect(load3DExt.name).toBe('Comfy.Load3D')
     expect(preview3DExt.name).toBe('Comfy.Preview3D')
     expect(preview3DAdvancedExt.name).toBe('Comfy.Preview3DAdvanced')
+    expect(save3DAdvancedExt.name).toBe('Comfy.Save3DAdvanced')
   })
 })
 
@@ -711,6 +721,39 @@ describe('Comfy.Preview3D.onNodeOutputsUpdated', () => {
   })
 })
 
+describe('Comfy.Save3DAdvanced.onNodeOutputsUpdated', () => {
+  beforeEach(setupBaseMocks)
+
+  it('restores the saved model from the output folder when opened from history', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
+    getNodeByLocatorIdMock.mockReturnValue(node)
+
+    save3DAdvancedExt.onNodeOutputsUpdated!({
+      '7': { result: ['3d\\ComfyUI_00001.glb'] }
+    } as never)
+
+    expect(node.properties['Last Time Model File']).toBe('3d/ComfyUI_00001.glb')
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001.glb',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+  })
+
+  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
+    getNodeByLocatorIdMock.mockReturnValue(node)
+
+    save3DAdvancedExt.onNodeOutputsUpdated!({
+      '7': { result: ['mesh.glb'] }
+    } as never)
+
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+})
+
 describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
   beforeEach(setupBaseMocks)
 
@@ -1032,6 +1075,50 @@ describe('Comfy.Preview3DAdvanced.getNodeMenuItems', () => {
   })
 })
 
+describe('Comfy.Save3DAdvanced.nodeCreated', () => {
+  beforeEach(setupBaseMocks)
+
+  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
+
+    await save3DAdvancedExt.nodeCreated(node)
+
+    expect(waitForLoad3dMock).not.toHaveBeenCalled()
+    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
+  })
+
+  it('restores persisted models from the output folder, not temp', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({
+      comfyClass: 'Save3DAdvanced',
+      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.glb' }
+    })
+
+    await save3DAdvancedExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.glb',
+      { silentOnNotFound: true }
+    )
+  })
+
+  it('onExecuted loads the saved file from the output folder', async () => {
+    const { save3DAdvancedExt } = await loadExtensionsFresh()
+    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
+
+    await save3DAdvancedExt.nodeCreated(node)
+    node.onExecuted!({ result: ['3d/ComfyUI_00002_.glb'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00002_.glb',
+      { silentOnNotFound: true }
+    )
+  })
+})
+
 describe('Comfy.Load3D scene widget serializeValue caching', () => {
   beforeEach(setupBaseMocks)
 

src/extensions/core/load3d.ts

@@ -15,8 +15,10 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
+  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
+import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import {
   LOAD3D_NONE_MODEL,
@@ -48,6 +50,7 @@ import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { ComfyExtension } from '@/types/comfy'
 import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 const inputSpecLoad3D: CustomInputSpec = {
@@ -287,8 +290,11 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     const VIEWPORT_STATE_NODES = new Set([
       'Preview3DAdvanced',
+      'Save3DAdvanced',
       'PreviewGaussianSplat',
-      'PreviewPointCloud'
+      'PreviewPointCloud',
+      'SaveGaussianSplat',
+      'SavePointCloud'
     ])
     return {
       LOAD_3D(node) {
@@ -679,155 +685,215 @@ useExtensionService().registerExtension({
   }
 })
 
-useExtensionService().registerExtension({
-  name: 'Comfy.Preview3DAdvanced',
+function applyPreview3DAdvancedResult(
+  node: LGraphNode,
+  load3d: Load3d,
+  result: NonNullable<Preview3DAdvancedOutput['result']>,
+  loadFolder: LoadFolder,
+  comfyClass: string
+): void {
+  const filePath = result[0]
+  if (!filePath) return
 
-  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
-    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return []
+  const normalizedPath = filePath.replaceAll('\\', '/')
+  node.properties['Last Time Model File'] = normalizedPath
 
-    const load3d = useLoad3dService().getLoad3d(node)
-    if (!load3d) return []
+  const config = new Load3DConfiguration(load3d, node.properties)
+  config.configureForSaveMesh(loadFolder, normalizedPath, {
+    silentOnNotFound: true
+  })
 
-    if (load3d.isSplatModel()) return []
+  const cameraState = result[1]
+  const modelTransform = result[2]?.[0]
+  if (!cameraState && !modelTransform) return
 
-    return createExportMenuItems(load3d)
-  },
+  const targetGeneration = load3d.currentLoadGeneration
+  void load3d
+    .whenLoadIdle()
+    .then(() => {
+      if (load3d.currentLoadGeneration !== targetGeneration) return
+      if (cameraState) load3d.setCameraState(cameraState)
+      if (modelTransform) load3d.applyModelTransform(modelTransform)
+    })
+    .catch((error) => {
+      console.error(
+        `Failed to apply input camera_info / model_3d_info from ${comfyClass}:`,
+        error
+      )
+    })
+}
 
-  async nodeCreated(node: LGraphNode) {
-    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return
+function createPreview3DAdvancedExtension(
+  comfyClass: string,
+  extensionName: string,
+  loadFolder: LoadFolder
+): ComfyExtension {
+  return {
+    name: extensionName,
 
-    const [oldWidth, oldHeight] = node.size
+    onNodeOutputsUpdated(
+      nodeOutputs: Record<NodeLocatorId, NodeExecutionOutput>
+    ) {
+      for (const [locatorId, output] of Object.entries(nodeOutputs)) {
+        const result = (output as Preview3DAdvancedOutput).result
+        if (!result?.[0]) continue
 
-    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
+        const node = getNodeByLocatorId(app.rootGraph, locatorId)
+        if (!node || node.constructor.comfyClass !== comfyClass) continue
 
-    await nextTick()
-
-    const onExecuted = node.onExecuted
-
-    useLoad3d(node).onLoad3dReady((load3d) => {
-      const lastTimeModelFile = node.properties['Last Time Model File']
-      if (!lastTimeModelFile) return
-
-      const config = new Load3DConfiguration(load3d, node.properties)
-      config.configureForSaveMesh('temp', lastTimeModelFile as string, {
-        silentOnNotFound: true
-      })
-
-      const cameraConfig = node.properties['Camera Config'] as
-        | CameraConfig
-        | undefined
-      const cameraState = cameraConfig?.state
-      if (!cameraState) return
-
-      const targetGeneration = load3d.currentLoadGeneration
-      void load3d
-        .whenLoadIdle()
-        .then(() => {
-          if (load3d.currentLoadGeneration !== targetGeneration) return
-          load3d.setCameraState(cameraState)
-          load3d.forceRender()
-        })
-        .catch((error) => {
-          console.error(
-            'Failed to restore camera state for Preview3DAdvanced:',
-            error
+        useLoad3d(node).waitForLoad3d((load3d) => {
+          applyPreview3DAdvancedResult(
+            node,
+            load3d,
+            result,
+            loadFolder,
+            comfyClass
           )
         })
-    })
-
-    useLoad3d(node).waitForLoad3d((load3d) => {
-      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
-      if (!sceneWidget) return
-
-      const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
-
-      const widthWidget = node.widgets?.find((w) => w.name === 'width')
-      const heightWidget = node.widgets?.find((w) => w.name === 'height')
-      if (widthWidget && heightWidget) {
-        load3d.setTargetSize(
-          widthWidget.value as number,
-          heightWidget.value as number
-        )
-        widthWidget.callback = (value: number) => {
-          resolveLoad3d().setTargetSize(value, heightWidget.value as number)
-        }
-        heightWidget.callback = (value: number) => {
-          resolveLoad3d().setTargetSize(widthWidget.value as number, value)
-        }
       }
+    },
 
-      sceneWidget.serializeValue = async () => {
-        const currentLoad3d = nodeToLoad3dMap.get(node)
-        if (!currentLoad3d) {
-          console.error('No load3d instance found for node')
-          return null
-        }
+    getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+      if (node.constructor.comfyClass !== comfyClass) return []
 
-        const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
-          | CameraConfig
-          | undefined) || {
-          cameraType: currentLoad3d.getCurrentCameraType(),
-          fov: currentLoad3d.cameraManager.perspectiveCamera.fov
-        }
-        cameraConfig.state = currentLoad3d.getCameraState()
-        node.properties['Camera Config'] = cameraConfig
+      const load3d = useLoad3dService().getLoad3d(node)
+      if (!load3d) return []
 
-        const modelInfo = currentLoad3d.getModelInfo()
-        const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+      if (load3d.isSplatModel()) return []
 
-        return {
-          image: '',
-          mask: '',
-          normal: '',
-          camera_info: cameraConfig.state || null,
-          recording: '',
-          model_3d_info
-        }
-      }
+      return createExportMenuItems(load3d)
+    },
 
-      node.onExecuted = function (output: Preview3DAdvancedOutput) {
-        onExecuted?.call(this, output)
+    async nodeCreated(node: LGraphNode) {
+      if (node.constructor.comfyClass !== comfyClass) return
 
-        const result = output.result
-        const filePath = result?.[0]
+      const [oldWidth, oldHeight] = node.size
 
-        if (!filePath) {
-          const msg = t('toastMessages.unableToGetModelFilePath')
-          console.error(msg)
-          useToastStore().addAlert(msg)
-          return
-        }
+      node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
 
-        const normalizedPath = filePath.replaceAll('\\', '/')
-        node.properties['Last Time Model File'] = normalizedPath
+      await nextTick()
 
-        const currentLoad3d = resolveLoad3d()
-        const config = new Load3DConfiguration(currentLoad3d, node.properties)
-        config.configureForSaveMesh('temp', normalizedPath, {
+      const onExecuted = node.onExecuted
+      const { onLoad3dReady, waitForLoad3d } = useLoad3d(node)
+
+      onLoad3dReady((load3d) => {
+        const lastTimeModelFile = node.properties['Last Time Model File']
+        if (!lastTimeModelFile) return
+
+        const config = new Load3DConfiguration(load3d, node.properties)
+        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
-        const cameraState = result?.[1]
-        const modelTransform = result?.[2]?.[0]
-        if (cameraState || modelTransform) {
-          const targetGeneration = currentLoad3d.currentLoadGeneration
-          void currentLoad3d
-            .whenLoadIdle()
-            .then(() => {
-              if (currentLoad3d.currentLoadGeneration !== targetGeneration)
-                return
-              if (cameraState) currentLoad3d.setCameraState(cameraState)
-              if (modelTransform)
-                currentLoad3d.applyModelTransform(modelTransform)
-            })
-            .catch((error) => {
-              console.error(
-                'Failed to apply input camera_info / model_3d_info from Preview3DAdvanced:',
-                error
-              )
-            })
+        const cameraConfig = node.properties['Camera Config'] as
+          | CameraConfig
+          | undefined
+        const cameraState = cameraConfig?.state
+        if (!cameraState) return
+
+        const targetGeneration = load3d.currentLoadGeneration
+        void load3d
+          .whenLoadIdle()
+          .then(() => {
+            if (load3d.currentLoadGeneration !== targetGeneration) return
+            load3d.setCameraState(cameraState)
+            load3d.forceRender()
+          })
+          .catch((error) => {
+            console.error(
+              `Failed to restore camera state for ${comfyClass}:`,
+              error
+            )
+          })
+      })
+
+      waitForLoad3d((load3d) => {
+        const sceneWidget = node.widgets?.find(
+          (w) => w.name === 'viewport_state'
+        )
+        if (!sceneWidget) return
+
+        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
+        const widthWidget = node.widgets?.find((w) => w.name === 'width')
+        const heightWidget = node.widgets?.find((w) => w.name === 'height')
+        if (widthWidget && heightWidget) {
+          load3d.setTargetSize(
+            widthWidget.value as number,
+            heightWidget.value as number
+          )
+          widthWidget.callback = (value: number) => {
+            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
+          }
+          heightWidget.callback = (value: number) => {
+            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
+          }
         }
-      }
-    })
+
+        sceneWidget.serializeValue = async () => {
+          const currentLoad3d = nodeToLoad3dMap.get(node)
+          if (!currentLoad3d) {
+            console.error('No load3d instance found for node')
+            return null
+          }
+
+          const cameraConfig: CameraConfig = (node.properties[
+            'Camera Config'
+          ] as CameraConfig | undefined) || {
+            cameraType: currentLoad3d.getCurrentCameraType(),
+            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
+          }
+          cameraConfig.state = currentLoad3d.getCameraState()
+          node.properties['Camera Config'] = cameraConfig
+
+          const modelInfo = currentLoad3d.getModelInfo()
+          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+
+          return {
+            image: '',
+            mask: '',
+            normal: '',
+            camera_info: cameraConfig.state || null,
+            recording: '',
+            model_3d_info
+          }
+        }
+
+        node.onExecuted = function (output: Preview3DAdvancedOutput) {
+          onExecuted?.call(this, output)
+
+          const result = output.result
+          if (!result?.[0]) {
+            const msg = t('toastMessages.unableToGetModelFilePath')
+            console.error(msg)
+            useToastStore().addAlert(msg)
+            return
+          }
+
+          applyPreview3DAdvancedResult(
+            node,
+            resolveLoad3d(),
+            result,
+            loadFolder,
+            comfyClass
+          )
+        }
+      })
+    }
   }
-})
+}
+
+useExtensionService().registerExtension(
+  createPreview3DAdvancedExtension(
+    'Preview3DAdvanced',
+    'Comfy.Preview3DAdvanced',
+    'temp'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DAdvancedExtension(
+    'Save3DAdvanced',
+    'Comfy.Save3DAdvanced',
+    'output'
+  )
+)

src/extensions/core/load3d/interfaces.ts

@@ -14,6 +14,7 @@ export type MaterialMode =
 export type UpDirection = 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
 export type CameraType = 'perspective' | 'orthographic'
 export type BackgroundRenderModeType = 'tiled' | 'panorama'
+export type LoadFolder = 'temp' | 'output'
 
 interface CameraQuaternion {
   x: number

src/extensions/core/load3d/nodeTypes.ts

@@ -3,21 +3,24 @@
  * Adding a new node type that uses the viewer = one line change here.
  */
 
-const LOAD3D_PREVIEW_NODES = new Set([
+const LOAD3D_RESULT_VIEWER_NODES = new Set([
   'Preview3D',
   'PreviewGaussianSplat',
-  'PreviewPointCloud'
+  'PreviewPointCloud',
+  'Save3DAdvanced',
+  'SaveGaussianSplat',
+  'SavePointCloud'
 ])
 
 const LOAD3D_ALL_NODES = new Set([
-  ...LOAD3D_PREVIEW_NODES,
+  ...LOAD3D_RESULT_VIEWER_NODES,
   'Load3D',
   'Load3DAdvanced',
   'SaveGLB'
 ])
 
-export const isLoad3dPreviewNode = (nodeType: string): boolean =>
-  LOAD3D_PREVIEW_NODES.has(nodeType)
+export const isLoad3dResultViewerNode = (nodeType: string): boolean =>
+  LOAD3D_RESULT_VIEWER_NODES.has(nodeType)
 
 export const isLoad3dNode = (nodeType: string): boolean =>
   LOAD3D_ALL_NODES.has(nodeType)

src/extensions/core/load3dLazy.test.ts

@@ -90,7 +90,10 @@ describe('load3dLazy', () => {
     'Preview3D',
     'PreviewGaussianSplat',
     'PreviewPointCloud',
-    'SaveGLB'
+    'SaveGLB',
+    'Save3DAdvanced',
+    'SaveGaussianSplat',
+    'SavePointCloud'
   ])(
     'recognizes %s as a 3D node type and triggers the lazy-load path',
     async (nodeType) => {

src/extensions/core/load3dPreviewExtensions.test.ts

@@ -76,14 +76,24 @@ type ExtCreated = ComfyExtension & {
 async function loadExtensionsFresh(): Promise<{
   splatExt: ExtCreated
   pointCloudExt: ExtCreated
+  saveSplatExt: ExtCreated
+  savePointCloudExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3dPreviewExtensions')
-  const [splatCall, pointCloudCall] = registerExtensionMock.mock.calls
+  const extByName = (name: string): ExtCreated => {
+    const call = registerExtensionMock.mock.calls.find(
+      (c) => (c[0] as ExtCreated).name === name
+    )
+    if (!call) throw new Error(`Extension ${name} was not registered`)
+    return call[0] as ExtCreated
+  }
   return {
-    splatExt: splatCall[0] as ExtCreated,
-    pointCloudExt: pointCloudCall[0] as ExtCreated
+    splatExt: extByName('Comfy.PreviewGaussianSplat'),
+    pointCloudExt: extByName('Comfy.PreviewPointCloud'),
+    saveSplatExt: extByName('Comfy.SaveGaussianSplat'),
+    savePointCloudExt: extByName('Comfy.SavePointCloud')
   }
 }
 
@@ -92,6 +102,7 @@ interface FakeLoad3d {
   isSplatModel: ReturnType<typeof vi.fn>
   forceRender: ReturnType<typeof vi.fn>
   setCameraState: ReturnType<typeof vi.fn>
+  applyModelTransform: ReturnType<typeof vi.fn>
   setTargetSize: ReturnType<typeof vi.fn>
   getCurrentCameraType: ReturnType<typeof vi.fn>
   getCameraState: ReturnType<typeof vi.fn>
@@ -106,6 +117,7 @@ function makeLoad3dMock(): FakeLoad3d {
     isSplatModel: vi.fn(() => false),
     forceRender: vi.fn(),
     setCameraState: vi.fn(),
+    applyModelTransform: vi.fn(),
     setTargetSize: vi.fn(),
     getCurrentCameraType: vi.fn(() => 'perspective'),
     getCameraState: vi.fn(() => ({ position: { x: 0, y: 0, z: 0 } })),
@@ -151,12 +163,59 @@ function setupBaseMocks() {
 describe('load3dPreviewExtensions module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers both preview extensions on import', async () => {
-    const { splatExt, pointCloudExt } = await loadExtensionsFresh()
+  it('registers preview and save extensions on import', async () => {
+    const { splatExt, pointCloudExt, saveSplatExt, savePointCloudExt } =
+      await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(2)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
     expect(splatExt.name).toBe('Comfy.PreviewGaussianSplat')
     expect(pointCloudExt.name).toBe('Comfy.PreviewPointCloud')
+    expect(saveSplatExt.name).toBe('Comfy.SaveGaussianSplat')
+    expect(savePointCloudExt.name).toBe('Comfy.SavePointCloud')
+  })
+
+  it('save extensions load the saved file from the output folder, not temp', async () => {
+    const { saveSplatExt, savePointCloudExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+
+    const splatNode = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
+    await saveSplatExt.nodeCreated(splatNode)
+    splatNode.onExecuted!({ result: ['3d/ComfyUI_00001_.ply'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+
+    const pcNode = makePreviewNode({ comfyClass: 'SavePointCloud' })
+    await savePointCloudExt.nodeCreated(pcNode)
+    pcNode.onExecuted!({ result: ['3d/ComfyUI_00002_.ply'] })
+
+    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
+      'output',
+      '3d/ComfyUI_00002_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
+  })
+
+  it('restores persisted models from the output folder on nodeCreated, not temp', async () => {
+    const { saveSplatExt } = await loadExtensionsFresh()
+    const node = makePreviewNode({
+      comfyClass: 'SaveGaussianSplat',
+      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.ply' }
+    })
+
+    await saveSplatExt.nodeCreated(node)
+
+    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
+      'output',
+      '3d/ComfyUI_00001_.ply',
+      expect.objectContaining({ silentOnNotFound: true })
+    )
   })
 })
 
@@ -214,6 +273,44 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
     expect(cameraConfig?.state).toEqual(cameraState)
   })
 
+  it('applies onExecuted results to the remounted instance, not the disposed closure', async () => {
+    const { splatExt } = await loadExtensionsFresh()
+    const original = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(original)
+    )
+    const node = makePreviewNode()
+
+    await splatExt.nodeCreated(node)
+
+    const remounted = makeLoad3dMock()
+    nodeToLoad3dMapMock.set(node, remounted)
+
+    node.onExecuted!({
+      result: ['scene.ply', { position: { x: 1, y: 2, z: 3 } }]
+    })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(remounted.forceRender).toHaveBeenCalled()
+    expect(original.forceRender).not.toHaveBeenCalled()
+  })
+
+  it('re-applies the model transform from result[2] on execute', async () => {
+    const { saveSplatExt } = await loadExtensionsFresh()
+    const load3d = makeLoad3dMock()
+    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
+      cb(load3d)
+    )
+    const node = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
+    const transform = { position: { x: 1, y: 2, z: 3 } }
+
+    await saveSplatExt.nodeCreated(node)
+    node.onExecuted!({ result: ['scene.ply', undefined, [transform]] })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(load3d.applyModelTransform).toHaveBeenCalledWith(transform)
+  })
+
   it('syncs width/height widgets to load3d.setTargetSize and registers callbacks', async () => {
     const { splatExt } = await loadExtensionsFresh()
     const load3d = makeLoad3dMock()

src/extensions/core/load3dPreviewExtensions.ts

@@ -5,6 +5,7 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
+  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
 import type Load3d from '@/extensions/core/load3d/Load3d'
@@ -29,7 +30,9 @@ function applyResultToLoad3d(
   node: LGraphNode,
   load3d: Load3d,
   filePath: string,
-  cameraState: CameraState | undefined
+  cameraState: CameraState | undefined,
+  modelTransform: Model3DInfo[number] | undefined,
+  loadFolder: LoadFolder
 ): void {
   const normalizedPath = filePath.replaceAll('\\', '/')
   node.properties['Last Time Model File'] = normalizedPath
@@ -46,7 +49,7 @@ function applyResultToLoad3d(
   }
 
   const config = new Load3DConfiguration(load3d, node.properties)
-  config.configureForSaveMesh('temp', normalizedPath, {
+  config.configureForSaveMesh(loadFolder, normalizedPath, {
     silentOnNotFound: true
   })
 
@@ -54,13 +57,15 @@ function applyResultToLoad3d(
   void load3d.whenLoadIdle().then(() => {
     if (load3d.currentLoadGeneration !== targetGeneration) return
     if (cameraState) load3d.setCameraState(cameraState)
+    if (modelTransform) load3d.applyModelTransform(modelTransform)
     load3d.forceRender()
   })
 }
 
 function createPreview3DExtension(
   comfyClass: string,
-  extensionName: string
+  extensionName: string,
+  loadFolder: LoadFolder
 ): ComfyExtension {
   const applyPreviewOutput = (
     node: LGraphNode,
@@ -68,10 +73,18 @@ function createPreview3DExtension(
   ): void => {
     const filePath = result[0]
     const cameraState = result[1]
+    const modelTransform = result[2]?.[0]
     if (!filePath) return
 
     useLoad3d(node).waitForLoad3d((load3d) => {
-      applyResultToLoad3d(node, load3d, filePath, cameraState)
+      applyResultToLoad3d(
+        node,
+        load3d,
+        filePath,
+        cameraState,
+        modelTransform,
+        loadFolder
+      )
     })
   }
 
@@ -119,7 +132,7 @@ function createPreview3DExtension(
         if (!lastTimeModelFile) return
 
         const config = new Load3DConfiguration(load3d, node.properties)
-        config.configureForSaveMesh('temp', lastTimeModelFile as string, {
+        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
@@ -136,6 +149,8 @@ function createPreview3DExtension(
       })
 
       waitForLoad3d((load3d) => {
+        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
         const sceneWidget = node.widgets?.find(
           (w) => w.name === 'viewport_state'
         )
@@ -148,10 +163,10 @@ function createPreview3DExtension(
             heightWidget.value as number
           )
           widthWidget.callback = (value: number) => {
-            load3d.setTargetSize(value, heightWidget.value as number)
+            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
           }
           heightWidget.callback = (value: number) => {
-            load3d.setTargetSize(widthWidget.value as number, value)
+            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
           }
         }
 
@@ -199,7 +214,14 @@ function createPreview3DExtension(
             return
           }
 
-          applyResultToLoad3d(node, load3d, filePath, result?.[1])
+          applyResultToLoad3d(
+            node,
+            resolveLoad3d(),
+            filePath,
+            result?.[1],
+            result?.[2]?.[0],
+            loadFolder
+          )
         }
       })
     }
@@ -207,8 +229,26 @@ function createPreview3DExtension(
 }
 
 useExtensionService().registerExtension(
-  createPreview3DExtension('PreviewGaussianSplat', 'Comfy.PreviewGaussianSplat')
+  createPreview3DExtension(
+    'PreviewGaussianSplat',
+    'Comfy.PreviewGaussianSplat',
+    'temp'
+  )
 )
 useExtensionService().registerExtension(
-  createPreview3DExtension('PreviewPointCloud', 'Comfy.PreviewPointCloud')
+  createPreview3DExtension(
+    'PreviewPointCloud',
+    'Comfy.PreviewPointCloud',
+    'temp'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DExtension(
+    'SaveGaussianSplat',
+    'Comfy.SaveGaussianSplat',
+    'output'
+  )
+)
+useExtensionService().registerExtension(
+  createPreview3DExtension('SavePointCloud', 'Comfy.SavePointCloud', 'output')
 )

src/extensions/core/saveImageExtraOutput.test.ts

@@ -81,6 +81,9 @@ describe('Comfy.SaveImageExtraOutput', () => {
     'SaveAudioOpus',
     'SaveAudioAdvanced',
     'SaveGLB',
+    'Save3DAdvanced',
+    'SaveGaussianSplat',
+    'SavePointCloud',
     'SaveAnimatedPNG',
     'CLIPSave',
     'VAESave',

src/extensions/core/saveImageExtraOutput.ts

@@ -16,6 +16,9 @@ const saveNodeTypes = new Set([
   'SaveAudioOpus',
   'SaveAudioAdvanced',
   'SaveGLB',
+  'Save3DAdvanced',
+  'SaveGaussianSplat',
+  'SavePointCloud',
   'SaveAnimatedPNG',
   'CLIPSave',
   'VAESave',

src/i18n.safeTranslation.test.ts

@@ -0,0 +1,80 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { i18n, st, stRaw } from './i18n'
+
+const TEST_NAMESPACE = 'safeTranslationTest'
+
+beforeEach(() => {
+  i18n.global.locale.value = 'en'
+  const messages = i18n.global.getLocaleMessage('en')
+  delete (messages as Record<string, unknown>)[TEST_NAMESPACE]
+  i18n.global.setLocaleMessage('en', messages)
+})
+
+describe('st', () => {
+  it('returns the fallback when the key is not found', () => {
+    expect(st('safeTranslationTest.missing', 'Fallback value')).toBe(
+      'Fallback value'
+    )
+  })
+
+  it('uses compiled translations for valid locale messages', () => {
+    i18n.global.mergeLocaleMessage('en', {
+      safeTranslationTest: {
+        valid: 'Translated value'
+      }
+    })
+
+    expect(st('safeTranslationTest.valid', 'Fallback value')).toBe(
+      'Translated value'
+    )
+  })
+
+  it('returns raw locale messages when vue-i18n compilation fails', () => {
+    const message = 'Provided by @acme/model with JSON such as {"mode":"fast"}'
+
+    i18n.global.mergeLocaleMessage('en', {
+      safeTranslationTest: {
+        invalidLinkedFormat: message
+      }
+    })
+
+    expect(
+      st('safeTranslationTest.invalidLinkedFormat', 'Fallback value')
+    ).toBe(message)
+  })
+})
+
+describe('stRaw', () => {
+  it('returns raw locale messages for valid keys', () => {
+    i18n.global.mergeLocaleMessage('en', {
+      safeTranslationTest: {
+        rawValue: 'Raw value'
+      }
+    })
+
+    expect(stRaw('safeTranslationTest.rawValue', 'Fallback value')).toBe(
+      'Raw value'
+    )
+  })
+
+  it('returns raw messages containing vue-i18n syntax', () => {
+    const message = 'Provided by @acme/model with JSON such as {"mode":"fast"}'
+
+    i18n.global.mergeLocaleMessage('en', {
+      safeTranslationTest: {
+        rawSyntax: message
+      }
+    })
+
+    expect(stRaw('safeTranslationTest.rawSyntax', 'Fallback value')).toBe(
+      message
+    )
+  })
+
+  it('returns the fallback when the key is not found', () => {
+    expect(stRaw('safeTranslationTest.rawMissing', 'Fallback value')).toBe(
+      'Fallback value'
+    )
+  })
+})

src/i18n.ts

@@ -159,15 +159,28 @@ export const te: (typeof i18n.global)['te'] = i18n.global.te
 export const d: (typeof i18n.global)['d'] = i18n.global.d
 const tm = i18n.global.tm
 
+function rawTranslationOrFallback(key: string, fallbackMessage: string) {
+  const message = tm(key)
+  return typeof message === 'string' ? message : fallbackMessage
+}
+
 /**
  * Safe translation function that returns the fallback message if the key is not found.
+ * Invalid message syntax falls back to the raw locale message instead of crashing.
  *
  * @param key - The key to translate.
  * @param fallbackMessage - The fallback message to use if the key is not found.
  */
 export function st(key: string, fallbackMessage: string) {
-  // The normal defaultMsg overload fails in some cases for custom nodes
-  return te(key) ? t(key) : fallbackMessage
+  if (!te(key)) return fallbackMessage
+
+  try {
+    // The normal defaultMsg overload fails in some cases for custom nodes
+    return t(key)
+  } catch (error) {
+    if (!(error instanceof SyntaxError)) throw error
+    return rawTranslationOrFallback(key, fallbackMessage)
+  }
 }
 
 /**
@@ -180,6 +193,5 @@ export function st(key: string, fallbackMessage: string) {
 export function stRaw(key: string, fallbackMessage: string) {
   if (!te(key)) return fallbackMessage
 
-  const message = tm(key)
-  return typeof message === 'string' ? message : fallbackMessage
+  return rawTranslationOrFallback(key, fallbackMessage)
 }

src/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers.ts

@@ -18,6 +18,7 @@ import {
   SUBGRAPH_OUTPUT_ID
 } from '@/lib/litegraph/src/constants'
 import type { SerializedNodeId } from '@/types/nodeId'
+import { toNodeId } from '@/types/nodeId'
 import {
   LGraph,
   LGraphNode,
@@ -86,6 +87,23 @@ interface TestSubgraphNodeOptions {
   size?: [number, number]
 }
 
+interface BoundaryLinkedSubgraphOptions {
+  rootGraph?: LGraph
+  hostId?: SerializedNodeId
+  interiorId?: SerializedNodeId
+  boundaryName?: string
+  inputName?: string
+  hostTitle?: string
+  interiorType?: string
+}
+
+export interface BoundaryLinkedSubgraphFixture {
+  rootGraph: LGraph
+  subgraph: Subgraph
+  host: SubgraphNode
+  interior: LGraphNode
+}
+
 interface NestedSubgraphOptions {
   depth?: number
   nodesPerLevel?: number
@@ -269,6 +287,32 @@ export function createTestSubgraphNode(
   return new SubgraphNode(parentGraph, subgraph, instanceData)
 }
 
+export function createBoundaryLinkedSubgraph({
+  rootGraph = createTestRootGraph(),
+  hostId = 12,
+  interiorId = 5,
+  boundaryName = 'seed',
+  inputName = 'seed_input',
+  hostTitle = 'Host Subgraph',
+  interiorType = 'InteriorNode'
+}: BoundaryLinkedSubgraphOptions = {}): BoundaryLinkedSubgraphFixture {
+  const subgraph = createTestSubgraph({
+    rootGraph,
+    inputs: [{ name: boundaryName, type: '*' }]
+  })
+  const host = createTestSubgraphNode(subgraph, { id: hostId })
+  host.title = hostTitle
+  rootGraph.add(host)
+
+  const interior = new LGraphNode(interiorType)
+  interior.id = toNodeId(interiorId)
+  const input = interior.addInput(inputName, '*')
+  subgraph.add(interior)
+  subgraph.inputNode.slots[0].connect(input, interior)
+
+  return { rootGraph, subgraph, host, interior }
+}
+
 export function setupComplexPromotionFixture(): {
   graph: LGraph
   subgraph: Subgraph

src/locales/en/main.json

@@ -2170,7 +2170,8 @@
     "descLabel": "description",
     "textPlaceholder": "text to render (verbatim)",
     "descPlaceholder": "description of this region",
-    "colors": "color_palette"
+    "colors": "color_palette",
+    "grid": "Grid"
   },
   "palette": {
     "addColor": "Add a color",
@@ -2593,7 +2594,7 @@
     "additionalCreditsInfo": "About additional credits",
     "additionalCredits": "Additional credits",
     "additionalCreditsInUse": "In use",
-    "usedAfterMonthly": "Used after plan credits run out",
+    "usedAfterMonthly": "Used after monthly runs out",
     "monthlyCreditsUsedUpTitle": "Monthly credits are used up. Refills {date}",
     "monthlyCreditsUsedUpTitleNoDate": "Monthly credits are used up",
     "monthlyCreditsUsedUpDescription": "You're now spending additional credits.",
@@ -2831,10 +2832,7 @@
       "planUpdated": "Your plan has been successfully updated.",
       "receiptEmailed": "A receipt has been emailed to you.",
       "sendInvites": "Send invites"
-    },
-    "enterprisePlanName": "Enterprise",
-    "percentUsed": "{percent}% used",
-    "usageProgress": "{used} of {total} credits used"
+    }
   },
   "userSettings": {
     "title": "My Account Settings",
@@ -2849,7 +2847,7 @@
   "workspacePanel": {
     "invite": "Invite",
     "inviteMember": "Invite member",
-    "inviteLimitReached": "Your workspace is at the member limit",
+    "inviteLimitReached": "You've reached the maximum of {count} members",
     "tabs": {
       "dashboard": "Dashboard",
       "planCredits": "Plan & Credits",
@@ -2864,17 +2862,12 @@
       "pendingInvitesCount": "{count} pending invite | {count} pending invites",
       "tabs": {
         "active": "Active",
-        "pendingCount": "Pending ({count})",
-        "membersCount": "Members ({count})",
-        "pending": "Pending"
+        "pendingCount": "Pending ({count})"
       },
       "columns": {
         "inviteDate": "Invite date",
         "expiryDate": "Expiry date",
-        "role": "Role",
-        "creditsUsed": "Credits used this month",
-        "email": "Email",
-        "lastActivity": "Last activity"
+        "role": "Role"
       },
       "actions": {
         "resendInvite": "Resend invite",
@@ -2890,22 +2883,14 @@
       "contactUs": "Contact us",
       "noInvites": "No pending invites",
       "noMembers": "No members",
-      "searchPlaceholder": "Search...",
-      "activity": {
-        "daysAgo": "{count} day ago | {count} days ago",
-        "hoursAgo": "{n} hr ago",
-        "justNow": "just now",
-        "minutesAgo": "{n} min ago"
-      },
-      "membersUsage": "{count} of {max} total members."
+      "searchPlaceholder": "Search..."
     },
     "menu": {
       "editWorkspace": "Edit workspace details",
       "leaveWorkspace": "Leave Workspace",
       "deleteWorkspace": "Delete Workspace",
       "deleteWorkspaceDisabledTooltip": "Cancel your workspace's active subscription first",
-      "creatorCannotLeave": "The workspace creator can't leave the workspace they created",
-      "renameWorkspace": "Rename Workspace"
+      "creatorCannotLeave": "The workspace creator can't leave the workspace they created"
     },
     "editWorkspaceDialog": {
       "title": "Edit workspace details",
@@ -2994,97 +2979,6 @@
       "failedToDeleteWorkspace": "Failed to delete workspace",
       "failedToLeaveWorkspace": "Failed to leave workspace",
       "failedToFetchWorkspaces": "Failed to load workspaces"
-    },
-    "charactersLeft": "{count} character left | {count} characters left",
-    "doubleClickToRename": "Double-click to rename",
-    "editWorkspaceImage": "Edit workspace image",
-    "memberLimitDialog": {
-      "message": "All seats are filled. To invite someone new, remove a member, rescind an invite, or request more seats.",
-      "title": "Workspace is at the member limit"
-    },
-    "requestMore": "Request more",
-    "workflowQueuedDialog": {
-      "message": "Max workflow capacity reached. It'll start automatically as capacity opens up. If this happens often, you can also request for more capacity.",
-      "title": "Your workflow is queued"
-    },
-    "billingStatus": {
-      "ending": {
-        "body": "Members keep full access until then. Reactivate to keep your shared credits and seats.",
-        "reactivate": "Reactivate plan",
-        "title": "Your team plan ends on {date}"
-      },
-      "outOfCredits": {
-        "addCredits": "Add 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.",
-        "dismiss": "Dismiss",
-        "title": "Out of credits"
-      },
-      "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.",
-        "title": "Subscription paused"
-      },
-      "updatePayment": "Update payment",
-      "warning": {
-        "body": "Your last payment didn't go through. Your subscription will pause on {date} unless payment is updated.",
-        "title": "Payment declined"
-      }
-    },
-    "overview": {
-      "changePlan": "Change plan",
-      "inactive": {
-        "reactivate": "Reactivate plan",
-        "subtitle": "Reactivate your team plan to add more members and run workflows",
-        "subtitleEnterprise": "Reactivate your enterprise plan to add more members and run workflows",
-        "title": "Inactive team subscription",
-        "titleEnterprise": "Inactive enterprise subscription"
-      },
-      "learnMore": "Learn more",
-      "managePayment": "Manage payment",
-      "messageSupport": "Message support",
-      "paused": "Paused",
-      "perMonth": "mo",
-      "pricingTable": "Partner Nodes pricing table",
-      "renewsOn": "Renews on {date}",
-      "seeMore": "See more",
-      "snapshot": {
-        "creditsUsed": "Credits used",
-        "empty": {
-          "recentActivity": "No activity yet",
-          "topSpenders": "No credits used yet this month"
-        },
-        "lastActivity": "Last activity",
-        "recentActivity": "Recent activity",
-        "topSpenders": "Top spenders",
-        "user": "User"
-      }
-    },
-    "allowlist": {
-      "disableAll": "Disable all",
-      "enableAll": "Enable all",
-      "tabs": {
-        "partnerNodes": "Partner nodes"
-      }
-    },
-    "partnerNodes": {
-      "autoEnableSubject": "newly added partner nodes",
-      "autoEnableVerb": "auto-enable",
-      "clearSelection": "Clear selection",
-      "columns": {
-        "lastModified": "Last modified",
-        "name": "Partner Node",
-        "nodes": "Nodes"
-      },
-      "description": "Choose which partner nodes your team can use. Workflows with disabled nodes cannot be run.",
-      "empty": "No partner nodes match your search.",
-      "groupCount": "{enabled}/{total} enabled",
-      "loadError": "Failed to load partner nodes",
-      "neverModified": "—",
-      "searchPlaceholder": "Search partner nodes",
-      "selectAll": "Select all partner nodes",
-      "selectedCount": "{count} node selected | {count} nodes selected",
-      "updateError": "Failed to update partner nodes"
     }
   },
   "teamWorkspacesDialog": {
@@ -3097,7 +2991,7 @@
     "newWorkspace": "New workspace",
     "namePlaceholder": "e.g. Marketing Team",
     "createWorkspace": "Create workspace",
-    "nameValidationError": "Name must be 1–30 characters using letters, numbers, spaces, or common punctuation."
+    "nameValidationError": "Name must be 1–50 characters using letters, numbers, spaces, or common punctuation."
   },
   "workspaceSwitcher": {
     "switchWorkspace": "Switch workspace",
@@ -3107,8 +3001,7 @@
     "roleMember": "Member",
     "createWorkspace": "Create a workspace",
     "maxWorkspacesReached": "You can only own 10 workspaces. Delete one to create a new one.",
-    "failedToSwitch": "Failed to switch workspace",
-    "roleAdmin": "Admin"
+    "failedToSwitch": "Failed to switch workspace"
   },
   "selectionToolbox": {
     "executeButton": {
@@ -3230,52 +3123,57 @@
   "cloudOnboarding": {
     "skipToCloudApp": "Skip to the cloud app",
     "survey": {
-      "title": "Let's get to know you",
+      "title": "Cloud Survey",
       "placeholder": "Survey questions placeholder",
-      "intro": "A few quick questions so we can set up ComfyUI for you.",
-      "otherPlaceholder": "Tell us more",
+      "intro": "Help us tailor your ComfyUI experience.",
       "errors": {
         "chooseAnOption": "Please choose an option.",
         "selectAtLeastOne": "Please select at least one option.",
-        "describeAnswer": "Please describe your answer.",
-        "answerTooLong": "Please keep your answer under {max} characters."
+        "describeAnswer": "Please describe your answer."
+      },
+      "steps": {
+        "usage": "How do you plan to use ComfyUI?",
+        "familiarity": "How familiar are you with ComfyUI?",
+        "intent": "What do you want to create with ComfyUI?",
+        "source": "Where did you hear about ComfyUI?"
       },
       "options": {
+        "usage": {
+          "personal": "Personal use",
+          "work": "Work",
+          "education": "Education (student or educator)"
+        },
+        "familiarity": {
+          "new": "New — never used it",
+          "starting": "Beginner — following tutorials",
+          "basics": "Intermediate — comfortable with basics",
+          "advanced": "Advanced — build and edit workflows",
+          "expert": "Expert — I help others"
+        },
         "intent": {
-          "images": "Images",
-          "video": "Video",
-          "workflows": "Workflows and pipelines",
-          "apps_api": "Apps and APIs",
-          "exploring": "Just exploring",
-          "other": "Something else",
-          "otherPlaceholder": "What do you want to make?"
-        },
-        "experience": {
-          "new": "New to ComfyUI",
-          "some": "I know my way around",
-          "pro": "I'm a power user"
-        },
-        "focus": {
+          "workflows": "Custom workflows or pipelines",
           "custom_nodes": "Custom nodes",
-          "pipelines": "Automated pipelines",
-          "products": "Products for others"
+          "videos": "Videos",
+          "images": "Images",
+          "3d_game": "3D assets / game assets",
+          "audio": "Audio / music",
+          "apps": "Simplified Apps from workflows",
+          "api": "API endpoints to run workflows",
+          "not_sure": "Not sure"
         },
         "source": {
-          "social": "Social media",
-          "friend": "A friend or colleague",
-          "search": "Web search",
-          "community": "A community or forum",
-          "other": "Somewhere else",
-          "otherPlaceholder": "Where did you find us?"
-        },
-        "source_social": {
           "youtube": "YouTube",
           "reddit": "Reddit",
-          "twitter": "X (Twitter)",
+          "twitter": "Twitter / X",
           "instagram": "Instagram",
-          "tiktok": "TikTok",
           "linkedin": "LinkedIn",
-          "discord": "Discord"
+          "friend": "Friend or colleague",
+          "search": "Google / search",
+          "newsletter": "Newsletter or blog",
+          "conference": "Conference or event",
+          "discord": "Discord / community",
+          "github": "GitHub",
+          "other": "Other"
         }
       }
     },
@@ -3368,11 +3266,10 @@
   "cloudForgotPassword_emailRequired": "Email is required",
   "cloudForgotPassword_passwordResetSent": "Password reset sent",
   "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
-  "cloudSurvey_steps_intent": "What do you want to make?",
-  "cloudSurvey_steps_experience": "How well do you know ComfyUI?",
-  "cloudSurvey_steps_focus": "What are you building?",
-  "cloudSurvey_steps_source": "How did you find us?",
-  "cloudSurvey_steps_source_social": "Which platform?",
+  "cloudSurvey_steps_usage": "How do you plan to use ComfyUI?",
+  "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
+  "cloudSurvey_steps_intent": "What do you want to create with ComfyUI?",
+  "cloudSurvey_steps_source": "Where did you hear about ComfyUI?",
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",

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/assets/components/MediaAssetSelectionBar.vue

@@ -1,48 +1,67 @@
 <template>
-  <SelectionBar
-    data-testid="assets-selection-bar"
-    :label="$t('mediaAsset.selection.selectedCount', { count })"
-    :deselect-label="$t('mediaAsset.selection.deselectAll')"
-    @deselect="emit('deselect')"
-  >
-    <Button
-      v-tooltip.top="{
-        value: $t('mediaAsset.selection.downloadSelected'),
-        showDelay: 300
-      }"
-      variant="inverted"
-      size="icon-lg"
-      type="button"
-      data-testid="assets-download-selected"
-      :aria-label="$t('mediaAsset.selection.downloadSelected')"
-      class="rounded-lg hover:bg-base-background/10"
-      @click="emit('download')"
+  <div class="relative mx-2">
+    <div
+      data-testid="assets-selection-bar"
+      class="absolute bottom-6 left-1/2 z-40 flex w-full max-w-78 -translate-x-1/2 items-center gap-2 rounded-lg bg-base-foreground p-2 text-base-background shadow-interface"
     >
-      <i class="icon-[lucide--download] size-4" />
-    </Button>
-    <template v-if="showDelete">
-      <span class="h-6 w-px bg-base-background/20" aria-hidden="true" />
       <Button
         v-tooltip.top="{
-          value: $t('mediaAsset.selection.deleteSelected'),
+          value: $t('mediaAsset.selection.deselectAll'),
           showDelay: 300
         }"
         variant="inverted"
         size="icon-lg"
         type="button"
-        data-testid="assets-delete-selected"
-        :aria-label="$t('mediaAsset.selection.deleteSelected')"
+        data-testid="assets-deselect-selected"
+        :aria-label="$t('mediaAsset.selection.deselectAll')"
         class="rounded-lg hover:bg-base-background/10"
-        @click="emit('delete')"
+        @click="emit('deselect')"
       >
-        <i class="icon-[lucide--trash-2] size-4" />
+        <i class="icon-[lucide--x] size-4" />
       </Button>
-    </template>
-  </SelectionBar>
+      <span class="pr-6 text-sm font-bold whitespace-nowrap tabular-nums">
+        {{ $t('mediaAsset.selection.selectedCount', { count }) }}
+      </span>
+      <div class="ml-auto flex shrink-0 items-center gap-1">
+        <Button
+          v-tooltip.top="{
+            value: $t('mediaAsset.selection.downloadSelected'),
+            showDelay: 300
+          }"
+          variant="inverted"
+          size="icon-lg"
+          type="button"
+          data-testid="assets-download-selected"
+          :aria-label="$t('mediaAsset.selection.downloadSelected')"
+          class="rounded-lg hover:bg-base-background/10"
+          @click="emit('download')"
+        >
+          <i class="icon-[lucide--download] size-4" />
+        </Button>
+        <template v-if="showDelete">
+          <span class="h-6 w-px bg-base-background/20" aria-hidden="true" />
+          <Button
+            v-tooltip.top="{
+              value: $t('mediaAsset.selection.deleteSelected'),
+              showDelay: 300
+            }"
+            variant="inverted"
+            size="icon-lg"
+            type="button"
+            data-testid="assets-delete-selected"
+            :aria-label="$t('mediaAsset.selection.deleteSelected')"
+            class="rounded-lg hover:bg-base-background/10"
+            @click="emit('delete')"
+          >
+            <i class="icon-[lucide--trash-2] size-4" />
+          </Button>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import SelectionBar from '@/components/common/SelectionBar.vue'
 import Button from '@/components/ui/button/Button.vue'
 
 const { count, showDelete = true } = defineProps<{