1.48.1 (#13559)

Patch version increment to 1.48.1

**Base branch:** `main`

---------

Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

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

@@ -40,3 +40,6 @@ 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,10 +76,14 @@ test.describe('Affiliates landing — desktop interactions', () => {
       return match?.textContent ?? null
     })
     expect(faqJsonLd, 'FAQ JSON-LD script').not.toBeNull()
-    const parsed = JSON.parse(faqJsonLd!)
-    expect(parsed['@type']).toBe('FAQPage')
-    expect(Array.isArray(parsed.mainEntity)).toBe(true)
-    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
+    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)
   })
 
   test('Apply Now CTA opens the application form in a new tab', async ({

apps/website/package.json

@@ -17,7 +17,8 @@
     "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"
+    "generate:models": "tsx ./scripts/generate-models.ts",
+    "validate:jsonld": "tsx ./scripts/validate-jsonld.ts"
   },
   "dependencies": {
     "@astrojs/sitemap": "catalog:",

apps/website/scripts/validate-jsonld.ts

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,193 @@
+<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

@@ -0,0 +1,12 @@
+---
+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

@@ -0,0 +1,53 @@
+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,14 +82,19 @@ 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,6 +2190,13 @@ 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': '关闭' },
@@ -4061,7 +4068,6 @@ 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': {
@@ -4157,10 +4163,6 @@ 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,8 +14,10 @@ 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
@@ -23,6 +25,10 @@ interface Props {
   keywords?: string[]
   ogImage?: string
   noindex?: boolean
+  pageType?: WebPageType
+  breadcrumbs?: Crumb[]
+  mainEntityId?: string
+  extraJsonLd?: (JsonLdNode | null | undefined)[]
 }
 
 const {
@@ -31,15 +37,21 @@ 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 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 { 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 rawStars = await fetchGitHubStars('Comfy-Org', 'ComfyUI')
 const githubStars = rawStars ? formatStarCount(rawStars) : ''
 
@@ -58,28 +70,21 @@ const bannerVersion = createBannerVersion(bannerData, locale)
 const gtmId = 'GTM-NP9JM6K7'
 const gtmEnabled = import.meta.env.PROD
 
-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',
-}
+const structuredData = noindex
+  ? undefined
+  : buildPageGraph(
+      { siteUrl, locale },
+      {
+        url,
+        name: title,
+        description,
+        imageUrl: ogImageURL.href,
+        type: pageType,
+        crumbs: breadcrumbs,
+        mainEntityId,
+      },
+      ...(extraJsonLd ?? []),
+    )
 ---
 
 <!doctype html>
@@ -121,10 +126,7 @@ const websiteJsonLd = {
     <meta name="twitter:image" content={ogImageURL.href} />
 
     <!-- Structured Data -->
-    <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" />
-
+    {structuredData && <JsonLdGraph graph={structuredData} />}
     <slot name="head" />
 
     <!-- Google Tag Manager -->
@@ -144,7 +146,6 @@ const websiteJsonLd = {
     )}
 
     <ClientRouter />
-    <slot name="head" />
 
     <!-- Hide an already-dismissed announcement banner before first paint (no flash/shift). -->
     {bannerVisible && (

apps/website/src/pages/about.astro

@@ -5,9 +5,25 @@ 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">
+<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) },
+  ]}
+>
   <HeroSection client:load />
   <StorySection />
   <OurValuesSection />

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

@@ -9,34 +9,36 @@ 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 locale = 'en' as const
-
-const faqJsonLd = {
-  '@context': 'https://schema.org',
+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 = {
   '@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={t('affiliate.page.title', locale)}
-  description={t('affiliate.page.description', locale)}
+  title={pageTitle}
+  description={pageDescription}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: pageTitle },
+  ]}
+  extraJsonLd={[faqPage]}
 >
-  <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,6 +7,13 @@ 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)
@@ -19,11 +26,31 @@ 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,9 +2,41 @@
 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">
+<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),
+    }),
+  ]}
+>
   <PriceSection client:load />
   <WhatsIncludedSection />
 </BaseLayout>

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

@@ -4,39 +4,44 @@ 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 { escapeJsonLd } from '../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../utils/jsonLd'
 
 const packs = await loadPacksForBuild()
 
-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,
+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) => ({
     name: pack.displayName,
-    image: pack.bannerUrl || pack.iconUrl
-  }))
-}
+    url: absoluteUrl(Astro.site, `/cloud/supported-nodes/${pack.id}`),
+  })),
+)
 ---
 
 <BaseLayout
-  title={t('cloudNodes.meta.title', 'en')}
-  description={t('cloudNodes.meta.description', 'en')}
+  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]}
 >
-  <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,7 +7,12 @@ 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 { escapeJsonLd } from '../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  softwareApplicationNode,
+} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -29,35 +34,45 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'en')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-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',
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const softwareId = jsonLdId(url, 'software')
+const software = softwareApplicationNode({
+  siteUrl,
+  id: softwareId,
   name: pack.displayName,
+  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  url: pageUrl,
-  description,
+  description: pack.description || undefined,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  author: pack.publisher?.name
-    ? { '@type': 'Person', name: pack.publisher.name }
-    : undefined,
-  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
-}
+  authorName: pack.publisher?.name,
+  isFree: true,
+})
 ---
 
-<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(softwareJsonLd)}
-  />
+<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]}
+>
   <PackDetail pack={pack} />
 </BaseLayout>

apps/website/src/pages/contact.astro

@@ -2,9 +2,25 @@
 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">
+<BaseLayout
+  title="Contact — Comfy"
+  pageType="ContactPage"
+  mainEntityId={organizationId(siteUrl)}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: t('breadcrumb.contact', locale) },
+  ]}
+>
   <FormSection client:load />
   <SocialProofBarSection />
 </BaseLayout>

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

@@ -7,6 +7,13 @@ 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) => ({
@@ -19,68 +26,34 @@ 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 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'
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const educationalLevel =
+  demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced',
-  url: canonicalURL.href,
+      : '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,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  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
-    }
-  ]
+  isPartOf: { '@id': jsonLdId(url, 'webpage') },
+  author: { '@id': organizationId(siteUrl) },
 }
 ---
 
@@ -88,25 +61,20 @@ const breadcrumbJsonLd = {
   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,11 +8,29 @@ 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,11 +9,28 @@ 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,6 +4,13 @@ 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) => ({
@@ -19,7 +26,6 @@ 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',
@@ -40,55 +46,31 @@ 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 softwareAppJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
+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,
   name: displayName,
+  url,
   applicationCategory: 'MultimediaApplication',
   operatingSystem: 'Any',
-  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',
+})
+const faqPage: JsonLdNode = {
   '@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',
@@ -97,54 +79,44 @@ const faqJsonLd = {
         '@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,10 +2,29 @@
 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',
@@ -26,6 +45,13 @@ 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,9 +5,29 @@ 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 平台。">
+<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) },
+  ]}
+>
   <HeroSection locale="zh-CN" client:load />
   <StorySection locale="zh-CN" />
   <OurValuesSection locale="zh-CN" />

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

@@ -7,6 +7,13 @@ 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)
@@ -19,11 +26,34 @@ 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,9 +2,44 @@
 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">
+<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),
+    }),
+  ]}
+>
   <PriceSection locale="zh-CN" client:load />
   <WhatsIncludedSection locale="zh-CN" />
 </BaseLayout>

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

@@ -4,39 +4,47 @@ 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 { escapeJsonLd } from '../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../../utils/jsonLd'
 
 const packs = await loadPacksForBuild()
 
-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,
+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) => ({
     name: pack.displayName,
-    image: pack.bannerUrl || pack.iconUrl
-  }))
-}
+    url: absoluteUrl(Astro.site, `/zh-CN/cloud/supported-nodes/${pack.id}`),
+  })),
+)
 ---
 
 <BaseLayout
-  title={t('cloudNodes.meta.title', 'zh-CN')}
-  description={t('cloudNodes.meta.description', 'zh-CN')}
+  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]}
 >
-  <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,7 +7,12 @@ 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 { escapeJsonLd } from '../../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  softwareApplicationNode,
+} from '../../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -29,35 +34,48 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'zh-CN')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-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',
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const softwareId = jsonLdId(url, 'software')
+const software = softwareApplicationNode({
+  siteUrl,
+  id: softwareId,
   name: pack.displayName,
+  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  url: pageUrl,
-  description,
+  description: pack.description || undefined,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  author: pack.publisher?.name
-    ? { '@type': 'Person', name: pack.publisher.name }
-    : undefined,
-  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
-}
+  authorName: pack.publisher?.name,
+  isFree: true,
+})
 ---
 
-<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(softwareJsonLd)}
-  />
+<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]}
+>
   <PackDetail pack={pack} locale="zh-CN" />
 </BaseLayout>

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

@@ -2,9 +2,28 @@
 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">
+<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) },
+  ]}
+>
   <FormSection locale="zh-CN" client:load />
   <SocialProofBarSection />
 </BaseLayout>

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

@@ -7,6 +7,13 @@ 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) => ({
@@ -19,68 +26,34 @@ 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 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'
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const educationalLevel =
+  demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced',
-  url: canonicalURL.href,
+      : '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,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  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
-    }
-  ]
+  isPartOf: { '@id': jsonLdId(url, 'webpage') },
+  author: { '@id': organizationId(siteUrl) },
 }
 ---
 
@@ -88,25 +61,23 @@ const breadcrumbJsonLd = {
   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,11 +8,32 @@ 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,11 +9,25 @@ 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

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,377 @@
+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/cloudSecrets.spec.ts

@@ -0,0 +1,279 @@
+import { expect } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { bootCloud, mockCloudBoot } from '@e2e/fixtures/utils/cloudBootMocks'
+import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
+
+/**
+ * End-to-end coverage for the user-secrets (API keys) surface in the cloud app:
+ * add a provider key, see it listed, delete it — the full CRUD round-trip —
+ * plus the entitlement contract that a non-entitled account never sees the
+ * gated providers.
+ *
+ * Drives a raw `page` against fully-mocked endpoints (the `comfyPage` fixture
+ * would reach the OSS devtools backend during setup); `mockCloudBoot` +
+ * `bootCloud` boot the app signed-in, and this spec layers a stateful in-memory
+ * `/secrets` backend on top so the flow is deterministic and never touches a
+ * real server.
+ */
+const APP_URL = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+
+// `/api/features` is the remote-config source. Enabling user secrets is what
+// surfaces the Secrets settings panel for a signed-in user.
+const BOOT_FEATURES = {
+  user_secrets_enabled: true
+} satisfies RemoteConfig
+
+// TutorialCompleted suppresses the new-user template browser, whose modal
+// overlay (z-1700) would otherwise intercept clicks on the settings dialog.
+const BOOT_SETTINGS = { 'Comfy.TutorialCompleted': true }
+
+// The plaintext key a user types in. It must be sent on create but NEVER echoed
+// back by the API or rendered anywhere in the UI.
+const RUNWAY_KEY_VALUE = 'sk-runway-do-not-echo-0xDEADBEEF'
+
+interface SecretRecord {
+  id: string
+  name: string
+  provider?: string
+  created_at: string
+  updated_at: string
+  last_used_at?: string
+}
+
+interface CreateCapture {
+  name?: string
+  provider?: string
+  secret_value?: string
+}
+
+interface SecretsBackend {
+  /** Bodies received by POST /secrets, in order — for asserting what was sent. */
+  createRequests: CreateCapture[]
+  /** Current server-side store — for asserting delete actually removed a row. */
+  store: SecretRecord[]
+}
+
+/**
+ * Stateful mock of the ingest `/secrets` surface. A single route handler
+ * branches on path + method so registration order can never make a specific
+ * path (`/secrets/providers`, `/secrets/:id`) lose to the collection glob.
+ *
+ * `providerIds` models entitlement: an entitled account sees runway/gemini,
+ * a non-entitled account gets an empty list (the server omits them).
+ */
+async function mockSecretsBackend(
+  page: Page,
+  providerIds: string[]
+): Promise<SecretsBackend> {
+  const backend: SecretsBackend = { createRequests: [], store: [] }
+  let idSeq = 0
+
+  const respondList = (route: Route) =>
+    route.fulfill(jsonRoute({ data: backend.store }))
+
+  await page.route('**/api/secrets**', async (route) => {
+    const request = route.request()
+    const { pathname } = new URL(request.url())
+    const method = request.method()
+
+    // The glob `**/api/secrets**` also matches the panel's own lazy-loaded
+    // source module (`/src/platform/secrets/api/secretsApi.ts`), whose path
+    // contains the `/api/secrets` substring. Fulfilling that dev-server module
+    // request with JSON breaks the dynamic import and the panel never mounts.
+    // Anchor to the start of the pathname so only genuine `/api/secrets…` API
+    // routes are handled; everything else falls through to the real Vite server.
+    if (!/^\/api\/secrets(\/|$)/.test(pathname)) {
+      return route.continue()
+    }
+
+    // GET /secrets/providers — the entitlement-gated provider allowlist.
+    if (pathname.endsWith('/secrets/providers')) {
+      return route.fulfill(
+        jsonRoute({ data: providerIds.map((id) => ({ id })) })
+      )
+    }
+
+    // /secrets/:id — item routes (only DELETE is exercised by this flow).
+    const itemMatch = pathname.match(/\/secrets\/([^/]+)$/)
+    if (itemMatch) {
+      const id = itemMatch[1]
+      if (method === 'DELETE') {
+        backend.store = backend.store.filter((s) => s.id !== id)
+        return route.fulfill({ status: 204, body: '' })
+      }
+      return respondList(route)
+    }
+
+    // /secrets — collection routes.
+    if (method === 'POST') {
+      const body = (request.postDataJSON() ?? {}) as CreateCapture
+      backend.createRequests.push(body)
+      idSeq += 1
+      const created: SecretRecord = {
+        id: `00000000-0000-4000-8000-${String(idSeq).padStart(12, '0')}`,
+        name: body.name ?? '',
+        provider: body.provider,
+        created_at: '2026-07-08T00:00:00Z',
+        updated_at: '2026-07-08T00:00:00Z'
+      }
+      backend.store.push(created)
+      // Response echoes metadata ONLY — the schema has no secret_value field.
+      return route.fulfill(jsonRoute(created))
+    }
+
+    // GET /secrets (list).
+    return respondList(route)
+  })
+
+  return backend
+}
+
+/**
+ * Open the settings dialog and land on the Secrets panel, waiting for both the
+ * provider allowlist and the secret list to resolve so subsequent assertions
+ * are not racing the panel's on-mount fetches.
+ */
+async function openSecretsPanel(page: Page) {
+  const settingsDialog = page.getByTestId('settings-dialog')
+
+  await page.evaluate(() => {
+    const app = window.app
+    if (!app) throw new Error('window.app is not available')
+    return app.extensionManager.command.execute('Comfy.ShowSettingsDialog')
+  })
+  await settingsDialog.waitFor({ state: 'visible' })
+
+  const providersResolved = page.waitForResponse((r) =>
+    r.url().includes('/api/secrets/providers')
+  )
+  const listResolved = page.waitForResponse(
+    (r) =>
+      /\/api\/secrets(\?|$)/.test(r.url()) && r.request().method() === 'GET'
+  )
+
+  await settingsDialog
+    .locator('nav')
+    .getByRole('button', { name: 'Secrets' })
+    .click()
+
+  await Promise.all([providersResolved, listResolved])
+  return settingsDialog
+}
+
+test.describe('Cloud user secrets (API keys)', { tag: '@cloud' }, () => {
+  test('an entitled account can add, list, and delete a provider key', async ({
+    page
+  }) => {
+    test.slow()
+
+    await mockCloudBoot(page, {
+      features: BOOT_FEATURES,
+      settings: BOOT_SETTINGS
+    })
+    await bootCloud(page)
+    const backend = await mockSecretsBackend(page, ['runway', 'gemini'])
+
+    await page.goto(APP_URL)
+    await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+      timeout: 45_000
+    })
+
+    const settingsDialog = await openSecretsPanel(page)
+
+    // Empty state before anything is added.
+    await expect(settingsDialog.getByText(/No secrets stored/)).toBeVisible()
+
+    // --- ADD -------------------------------------------------------------
+    await settingsDialog.getByRole('button', { name: 'Add Secret' }).click()
+
+    const formDialog = page
+      .getByRole('dialog')
+      .filter({ hasText: 'Secret Value' })
+    await expect(formDialog).toBeVisible()
+
+    // Pick the entitled Runway provider from the server-driven dropdown.
+    await formDialog.locator('#secret-provider').click()
+    await page.getByRole('option', { name: 'Runway' }).click()
+
+    await formDialog.locator('#secret-name').fill('My Runway Key')
+    await formDialog.locator('input[type="password"]').fill(RUNWAY_KEY_VALUE)
+
+    await formDialog.getByRole('button', { name: 'Save', exact: true }).click()
+    await expect(formDialog).toBeHidden()
+
+    // --- LIST ------------------------------------------------------------
+    await expect(settingsDialog.getByText('My Runway Key')).toBeVisible()
+    await expect(settingsDialog.getByText(/No secrets stored/)).toBeHidden()
+
+    // The create request carried the plaintext value + provider...
+    expect(backend.createRequests).toHaveLength(1)
+    expect(backend.createRequests[0]).toMatchObject({
+      name: 'My Runway Key',
+      provider: 'runway',
+      secret_value: RUNWAY_KEY_VALUE
+    })
+    // ...but the value must never be echoed back into the list — the API
+    // response carries metadata only, so nothing should render it as text.
+    await expect(page.getByText(RUNWAY_KEY_VALUE)).toHaveCount(0)
+
+    // --- DELETE ----------------------------------------------------------
+    await settingsDialog
+      .getByRole('button', { name: 'Delete', exact: true })
+      .click()
+
+    const confirmDialog = page
+      .getByRole('dialog')
+      .filter({ hasText: 'Delete Secret' })
+    await confirmDialog
+      .getByRole('button', { name: 'Delete', exact: true })
+      .click()
+
+    await expect(settingsDialog.getByText('My Runway Key')).toBeHidden()
+    await expect(settingsDialog.getByText(/No secrets stored/)).toBeVisible()
+    expect(backend.store).toHaveLength(0)
+  })
+
+  test('a non-entitled account never sees the gated providers', async ({
+    page
+  }) => {
+    test.slow()
+
+    await mockCloudBoot(page, {
+      features: BOOT_FEATURES,
+      settings: BOOT_SETTINGS
+    })
+    await bootCloud(page)
+    // Non-entitled: the server omits runway/gemini from the allowlist.
+    await mockSecretsBackend(page, [])
+
+    await page.goto(APP_URL)
+    await page.waitForFunction(() => !!window.app?.extensionManager, null, {
+      timeout: 45_000
+    })
+
+    const settingsDialog = await openSecretsPanel(page)
+    await expect(settingsDialog.getByText(/No secrets stored/)).toBeVisible()
+
+    // The add form opens, but its provider dropdown is empty — the gated
+    // providers must not appear anywhere.
+    await settingsDialog.getByRole('button', { name: 'Add Secret' }).click()
+    const formDialog = page
+      .getByRole('dialog')
+      .filter({ hasText: 'Secret Value' })
+    await expect(formDialog).toBeVisible()
+
+    await formDialog.locator('#secret-provider').click()
+    // Anchor on the opened listbox so the absence assertions below can't pass
+    // vacuously against a dropdown that never opened.
+    const providerListbox = page.getByRole('listbox')
+    await expect(providerListbox).toBeVisible()
+    // An empty allowlist must yield an empty dropdown. Asserting zero options
+    // (not just runway/gemini absent) also rejects the fetch-failure fallback,
+    // where `availableProviders` is null and the default providers would show.
+    await expect(providerListbox.getByRole('option')).toHaveCount(0)
+  })
+})

package.json

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

src/components/dialog/GlobalDialog.test.ts

@@ -449,6 +449,12 @@ describe('shouldPreventRekaDismiss', () => {
     expect(event.defaultPrevented).toBe(false)
   })
 
+  it('focus-outside never dismisses when dismissOnFocusOutside is false', () => {
+    const event = makeEvent(document.body)
+    onRekaFocusOutside(event, { dismissOnFocusOutside: false })
+    expect(event.defaultPrevented).toBe(true)
+  })
+
   it('focus-outside on a sibling Reka portal does not dismiss the parent', () => {
     const portal = document.createElement('div')
     portal.setAttribute('role', 'dialog')

src/components/dialog/GlobalDialog.vue

@@ -32,7 +32,9 @@
                 dialogStore.activeKey === item.key
               )
           "
-          @focus-outside="onRekaFocusOutside"
+          @focus-outside="
+            (e) => onRekaFocusOutside(e, item.dialogComponentProps)
+          "
           @mousedown="() => dialogStore.riseDialog({ key: item.key })"
         >
           <template v-if="item.dialogComponentProps.headless">

src/components/dialog/rekaPrimeVueBridge.ts

@@ -53,7 +53,22 @@ export function onRekaPointerDownOutside(
 // nested Reka or PrimeVue dialog teleported to body). Without this guard a
 // non-modal Reka dialog would dismiss itself the moment a nested dialog
 // receives focus.
-export function onRekaFocusOutside(event: OutsideEvent) {
+//
+// A container dialog (e.g. Settings) that hosts nested confirm/edit dialogs can
+// also lose focus to an ordinary app element — not just a portal — when a
+// nested dialog closes and the element it focused was removed (deleting the
+// selected row). That programmatic focus shift is not a dismiss intent, so such
+// a dialog opts out of focus-outside dismissal entirely via
+// `dismissOnFocusOutside: false`; it still dismisses on escape or an outside
+// pointer.
+export function onRekaFocusOutside(
+  event: OutsideEvent,
+  options: { dismissOnFocusOutside?: boolean } = {}
+) {
+  if (options.dismissOnFocusOutside === false) {
+    event.preventDefault()
+    return
+  }
   if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
   }

src/extensions/core/load3d/GizmoManager.test.ts

@@ -3,21 +3,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { GizmoManager } from './GizmoManager'
 
-const {
-  mockSetMode,
-  mockAttach,
-  mockDetach,
-  mockGetHelper,
-  mockDispose,
-  transformControlsInstances
-} = vi.hoisted(() => ({
-  mockSetMode: vi.fn(),
-  mockAttach: vi.fn(),
-  mockDetach: vi.fn(),
-  mockGetHelper: vi.fn(),
-  mockDispose: vi.fn(),
-  transformControlsInstances: [] as unknown[]
-}))
+const { mockSetMode, mockAttach, mockDetach, mockGetHelper, mockDispose } =
+  vi.hoisted(() => ({
+    mockSetMode: vi.fn(),
+    mockAttach: vi.fn(),
+    mockDetach: vi.fn(),
+    mockGetHelper: vi.fn(),
+    mockDispose: vi.fn()
+  }))
 
 vi.mock('three/examples/jsm/controls/TransformControls', () => {
   class TransformControls {
@@ -27,7 +20,6 @@ vi.mock('three/examples/jsm/controls/TransformControls', () => {
 
     constructor(camera: THREE.Camera) {
       this.camera = camera
-      transformControlsInstances.push(this)
     }
 
     addEventListener(event: string, cb: (e: unknown) => void) {
@@ -72,7 +64,6 @@ describe('GizmoManager', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    transformControlsInstances.length = 0
 
     scene = new THREE.Scene()
     renderer = {
@@ -100,58 +91,6 @@ describe('GizmoManager', () => {
     vi.restoreAllMocks()
   })
 
-  describe('setPointerNdcSource', () => {
-    type PointerNdc = { x: number; y: number; button: number }
-    function getPointerOverride() {
-      const controls = transformControlsInstances.at(-1) as {
-        _getPointer?: (event: PointerEvent) => PointerNdc
-      }
-      return controls._getPointer
-    }
-
-    it('routes TransformControls pointer NDC through the injected source', () => {
-      manager.init()
-      manager.setPointerNdcSource((clientX, clientY) => ({
-        x: clientX / 100,
-        y: clientY / 100
-      }))
-
-      const pointer = getPointerOverride()!({
-        clientX: 50,
-        clientY: -25,
-        button: 2
-      } as PointerEvent)
-
-      expect(pointer).toEqual({ x: 0.5, y: -0.25, button: 2 })
-    })
-
-    it('maps points outside the viewport to an off-screen pointer', () => {
-      manager.init()
-      manager.setPointerNdcSource(() => null)
-
-      const pointer = getPointerOverride()!({
-        clientX: 0,
-        clientY: 0,
-        button: 0
-      } as PointerEvent)
-
-      expect(pointer).toEqual({ x: 10, y: 10, button: 0 })
-    })
-
-    it('applies a source registered before init once init runs', () => {
-      manager.setPointerNdcSource(() => ({ x: 0.5, y: 0.5 }))
-      manager.init()
-
-      const pointer = getPointerOverride()!({
-        clientX: 0,
-        clientY: 0,
-        button: 1
-      } as PointerEvent)
-
-      expect(pointer).toEqual({ x: 0.5, y: 0.5, button: 1 })
-    })
-  })
-
   describe('init', () => {
     it('adds helper to scene with correct name and render order', () => {
       manager.init()

src/extensions/core/load3d/GizmoManager.ts

@@ -18,10 +18,6 @@ export class GizmoManager {
   private renderer: THREE.WebGLRenderer
   private orbitControls: OrbitControls
   private onTransformChange?: () => void
-  private getPointerNdc?: (
-    clientX: number,
-    clientY: number
-  ) => { x: number; y: number } | null
 
   constructor(
     scene: THREE.Scene,
@@ -50,41 +46,12 @@ export class GizmoManager {
       }
     })
 
-    this.applyPointerNdcSource()
-
     const helper = this.transformControls.getHelper()
     helper.name = 'GizmoTransformControls'
     helper.renderOrder = 999
     this.scene.add(helper)
   }
 
-  setPointerNdcSource(
-    getPointerNdc: (
-      clientX: number,
-      clientY: number
-    ) => { x: number; y: number } | null
-  ): void {
-    this.getPointerNdc = getPointerNdc
-    this.applyPointerNdcSource()
-  }
-
-  private applyPointerNdcSource(): void {
-    if (!this.transformControls || !this.getPointerNdc) return
-    const getNdc = this.getPointerNdc
-    const controls = this.transformControls as unknown as {
-      _getPointer: (event: PointerEvent) => {
-        x: number
-        y: number
-        button: number
-      }
-    }
-    controls._getPointer = (event: PointerEvent) => {
-      const ndc = getNdc(event.clientX, event.clientY)
-      if (!ndc) return { x: 10, y: 10, button: event.button }
-      return { x: ndc.x, y: ndc.y, button: event.button }
-    }
-  }
-
   setupForModel(model: THREE.Object3D): void {
     if (!this.transformControls) return
 

src/extensions/core/load3d/Viewport3d.test.ts

@@ -386,74 +386,6 @@ describe('Viewport3d', () => {
     })
   })
 
-  describe('clientPointToNdc', () => {
-    function installCanvas(rect: {
-      left: number
-      top: number
-      width: number
-      height: number
-    }) {
-      const canvas = document.createElement('canvas')
-      vi.spyOn(canvas, 'getBoundingClientRect').mockReturnValue({
-        ...rect,
-        right: rect.left + rect.width,
-        bottom: rect.top + rect.height,
-        x: rect.left,
-        y: rect.top,
-        toJSON: () => ({})
-      } as DOMRect)
-      Object.assign(ctx.viewport, { renderer: { domElement: canvas } })
-    }
-
-    function expectNdc(
-      actual: { x: number; y: number } | null,
-      x: number,
-      y: number
-    ): void {
-      expect(actual).not.toBeNull()
-      expect(actual!.x).toBeCloseTo(x)
-      expect(actual!.y).toBeCloseTo(y)
-    }
-
-    beforeEach(() => {
-      Object.assign(ctx.viewport, {
-        targetWidth: 100,
-        targetHeight: 100,
-        targetAspectRatio: 1,
-        isViewerMode: false
-      })
-    })
-
-    it('maps pointer positions inside the letterboxed content to NDC', () => {
-      installCanvas({ left: 100, top: 50, width: 400, height: 200 })
-
-      expectNdc(ctx.viewport.clientPointToNdc(300, 150), 0, 0)
-      expectNdc(ctx.viewport.clientPointToNdc(200, 150), -1, 0)
-      expectNdc(ctx.viewport.clientPointToNdc(400, 50), 1, 1)
-    })
-
-    it('returns null on the letterbox bars', () => {
-      installCanvas({ left: 100, top: 50, width: 400, height: 200 })
-
-      expect(ctx.viewport.clientPointToNdc(150, 150)).toBeNull()
-      expect(ctx.viewport.clientPointToNdc(450, 150)).toBeNull()
-    })
-
-    it('returns null when the canvas has no layout size', () => {
-      installCanvas({ left: 0, top: 0, width: 0, height: 0 })
-
-      expect(ctx.viewport.clientPointToNdc(10, 10)).toBeNull()
-    })
-
-    it('maps the full canvas when no aspect ratio is maintained', () => {
-      installCanvas({ left: 100, top: 50, width: 400, height: 200 })
-      Object.assign(ctx.viewport, { targetWidth: 0, targetHeight: 0 })
-
-      expectNdc(ctx.viewport.clientPointToNdc(100, 50), -1, 1)
-      expectNdc(ctx.viewport.clientPointToNdc(500, 250), 1, -1)
-    })
-  })
-
   describe('start / remove lifecycle', () => {
     beforeEach(() => {
       vi.useFakeTimers()

src/extensions/core/load3d/Viewport3d.ts

@@ -17,11 +17,7 @@ import type {
 import { attachContextMenuGuard } from './load3dContextMenuGuard'
 import type { RenderLoopHandle } from './load3dRenderLoop'
 import { startRenderLoop } from './load3dRenderLoop'
-import {
-  clientPointToLetterboxNdc,
-  computeLetterboxedViewport,
-  isLoad3dActive
-} from './load3dViewport'
+import { computeLetterboxedViewport, isLoad3dActive } from './load3dViewport'
 
 export type Viewport3dDeps = {
   renderer: THREE.WebGLRenderer
@@ -259,20 +255,6 @@ export class Viewport3d extends WebGLViewport {
     this.renderer.render(this.sceneManager.scene, this.getRenderCamera())
   }
 
-  clientPointToNdc(
-    clientX: number,
-    clientY: number
-  ): { x: number; y: number } | null {
-    const rect = this.renderer.domElement.getBoundingClientRect()
-    if (rect.width <= 0 || rect.height <= 0) return null
-    return clientPointToLetterboxNdc(
-      (clientX - rect.left) / rect.width,
-      (clientY - rect.top) / rect.height,
-      { width: rect.width, height: rect.height },
-      this.shouldMaintainAspectRatio() ? this.targetAspectRatio : null
-    )
-  }
-
   resetViewport(): void {
     const width = this.renderer.domElement.clientWidth
     const height = this.renderer.domElement.clientHeight

src/extensions/core/load3d/createLoad3d.test.ts

@@ -111,7 +111,6 @@ vi.mock('./GizmoManager', () => ({
     getTransform = vi.fn(() => ({}))
     isEnabled = vi.fn(() => false)
     getMode = vi.fn(() => 'translate')
-    setPointerNdcSource = vi.fn()
   }
 }))
 
@@ -119,7 +118,6 @@ vi.mock('./Load3d', () => ({
   default: class {
     deps: unknown
     options: unknown
-    clientPointToNdc = vi.fn(() => ({ x: 0.25, y: -0.5 }))
     constructor(_container: unknown, deps: unknown, options: unknown) {
       this.deps = deps
       this.options = options
@@ -184,24 +182,6 @@ describe('createLoad3d', () => {
     expect(instance.options).toEqual(options)
   })
 
-  it('wires the gizmo pointer NDC source to the letterbox-aware mapping', () => {
-    const instance = createLoad3d(
-      createContainer()
-    ) as unknown as FakeLoad3d & {
-      clientPointToNdc: ReturnType<typeof vi.fn>
-      deps: { gizmoManager: { setPointerNdcSource: ReturnType<typeof vi.fn> } }
-    }
-
-    const source = instance.deps.gizmoManager.setPointerNdcSource.mock
-      .calls[0][0] as (
-      clientX: number,
-      clientY: number
-    ) => { x: number; y: number } | null
-
-    expect(source(12, 34)).toEqual({ x: 0.25, y: -0.5 })
-    expect(instance.clientPointToNdc).toHaveBeenCalledWith(12, 34)
-  })
-
   it('shares one AdapterRef between LoaderManager and SceneModelManager lambdas', () => {
     const container = createContainer()
     const instance = createLoad3d(container) as unknown as FakeLoad3d

src/extensions/core/load3d/createLoad3d.ts

@@ -140,11 +140,5 @@ export function createLoad3d(
   container: Element | HTMLElement,
   options?: Load3DOptions
 ): Load3d {
-  const deps = buildLoad3dDeps(container)
-  const load3d = new Load3d(container, deps, options)
-
-  deps.gizmoManager.setPointerNdcSource((clientX, clientY) =>
-    load3d.clientPointToNdc(clientX, clientY)
-  )
-  return load3d
+  return new Load3d(container, buildLoad3dDeps(container), options)
 }

src/extensions/core/load3d/load3dViewport.test.ts

@@ -1,10 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import {
-  clientPointToLetterboxNdc,
-  computeLetterboxedViewport,
-  isLoad3dActive
-} from './load3dViewport'
+import { computeLetterboxedViewport, isLoad3dActive } from './load3dViewport'
 import type { Load3dActivityFlags } from './load3dViewport'
 
 describe('computeLetterboxedViewport', () => {
@@ -110,59 +106,3 @@ describe('isLoad3dActive', () => {
     expect(isLoad3dActive({ ...idle, [flag]: true })).toBe(true)
   })
 })
-
-describe('clientPointToLetterboxNdc', () => {
-  function expectNdc(
-    actual: { x: number; y: number } | null,
-    x: number,
-    y: number
-  ): void {
-    expect(actual).not.toBeNull()
-    expect(actual!.x).toBeCloseTo(x)
-    expect(actual!.y).toBeCloseTo(y)
-  }
-
-  it('maps the full canvas when no target aspect is set', () => {
-    expectNdc(
-      clientPointToLetterboxNdc(0.5, 0.5, { width: 400, height: 300 }, null),
-      0,
-      0
-    )
-    expectNdc(
-      clientPointToLetterboxNdc(0, 1, { width: 400, height: 300 }, null),
-      -1,
-      -1
-    )
-  })
-
-  it('maps pillarboxed content edges to -1/1', () => {
-    const container = { width: 400, height: 200 }
-    expectNdc(clientPointToLetterboxNdc(0.25, 0.5, container, 1), -1, 0)
-    expectNdc(clientPointToLetterboxNdc(0.75, 0, container, 1), 1, 1)
-    expectNdc(clientPointToLetterboxNdc(0.5, 0.5, container, 1), 0, 0)
-  })
-
-  it('returns null on the letterbox bars', () => {
-    const container = { width: 400, height: 200 }
-    expect(clientPointToLetterboxNdc(0.1, 0.5, container, 1)).toBeNull()
-    expect(clientPointToLetterboxNdc(0.9, 0.5, container, 1)).toBeNull()
-  })
-
-  it('handles letterbox bars above/below wide content', () => {
-    const container = { width: 200, height: 400 }
-    expectNdc(clientPointToLetterboxNdc(0.5, 0.375, container, 2), 0, 1)
-    expect(clientPointToLetterboxNdc(0.5, 0.1, container, 2)).toBeNull()
-  })
-
-  it('returns null instead of NaN for zero-size containers', () => {
-    expect(
-      clientPointToLetterboxNdc(0.5, 0.5, { width: 0, height: 0 }, 1)
-    ).toBeNull()
-    expect(
-      clientPointToLetterboxNdc(0.5, 0.5, { width: 0, height: 200 }, 1)
-    ).toBeNull()
-    expect(
-      clientPointToLetterboxNdc(0.5, 0.5, { width: 400, height: 0 }, 1)
-    ).toBeNull()
-  })
-})

src/extensions/core/load3d/load3dViewport.ts

@@ -34,26 +34,6 @@ export function computeLetterboxedViewport(
   }
 }
 
-export function clientPointToLetterboxNdc(
-  normalizedX: number,
-  normalizedY: number,
-  container: Size,
-  targetAspectRatio: number | null
-): { x: number; y: number } | null {
-  if (targetAspectRatio === null) {
-    return { x: normalizedX * 2 - 1, y: -(normalizedY * 2 - 1) }
-  }
-  const { offsetX, offsetY, width, height } = computeLetterboxedViewport(
-    container,
-    targetAspectRatio
-  )
-  if (width <= 0 || height <= 0) return null
-  const localX = (normalizedX * container.width - offsetX) / width
-  const localY = (normalizedY * container.height - offsetY) / height
-  if (localX < 0 || localX > 1 || localY < 0 || localY > 1) return null
-  return { x: localX * 2 - 1, y: -(localY * 2 - 1) }
-}
-
 export type Load3dActivityFlags = {
   mouseOnNode: boolean
   mouseOnScene: boolean

src/locales/ar/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "يرجى إبقاء إجابتك أقل من {max} حرفًا.",
         "chooseAnOption": "يرجى اختيار خيار.",
         "describeAnswer": "يرجى وصف إجابتك.",
         "selectAtLeastOne": "يرجى اختيار خيار واحد على الأقل."
       },
       "intro": "ساعدنا في تخصيص تجربتك مع ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "مستخدم متقدم (سير عمل مخصصة)",
-          "basics": "مرتاح مع الأساسيات",
-          "expert": "خبير (أساعد الآخرين)",
-          "new": "جديد في ComfyUI (لم أستخدمه من قبل)",
-          "starting": "في البداية فقط (أتابع الدروس التعليمية)"
+        "experience": {
+          "new": "جديد على ComfyUI",
+          "pro": "أنا مستخدم محترف",
+          "some": "لدي معرفة جيدة"
+        },
+        "focus": {
+          "custom_nodes": "عُقد مخصصة",
+          "pipelines": "مسارات مؤتمتة",
+          "products": "منتجات للآخرين"
         },
         "intent": {
-          "3d_game": "أصول ثلاثية الأبعاد / أصول ألعاب",
-          "api": "نقاط نهاية API لتشغيل مسارات العمل",
-          "apps": "تطبيقات مبسطة من مسارات العمل",
-          "audio": "صوت / موسيقى",
-          "custom_nodes": "عُقد مخصصة",
+          "apps_api": "تطبيقات وواجهات برمجة التطبيقات",
+          "exploring": "أستكشف فقط",
           "images": "صور",
-          "not_sure": "لست متأكداً",
-          "videos": "فيديوهات",
+          "other": "شيء آخر",
+          "otherPlaceholder": "ماذا تريد أن تصنع؟",
+          "video": "فيديو",
           "workflows": "مسارات عمل أو خطوط معالجة مخصصة"
         },
         "source": {
-          "conference": "مؤتمر أو فعالية",
-          "discord": "ديسكورد / مجتمع",
+          "community": "مجتمع أو منتدى",
           "friend": "صديق أو زميل",
-          "github": "GitHub",
+          "other": "أخرى",
+          "otherPlaceholder": "من أين وجدتنا؟",
+          "search": "جوجل / بحث",
+          "social": "وسائل التواصل الاجتماعي"
+        },
+        "source_social": {
+          "discord": "ديسكورد",
           "instagram": "إنستغرام",
           "linkedin": "لينكدإن",
-          "newsletter": "النشرة البريدية أو مدونة",
-          "other": "أخرى",
           "reddit": "ريديت",
-          "search": "جوجل / بحث",
-          "twitter": "تويتر / X",
+          "tiktok": "تيك توك",
+          "twitter": "X (تويتر)",
           "youtube": "يوتيوب"
-        },
-        "usage": {
-          "education": "تعليمي (طالب أو معلم)",
-          "personal": "استخدام شخصي",
-          "work": "عمل"
         }
       },
+      "otherPlaceholder": "أخبرنا المزيد",
       "placeholder": "نص بديل لأسئلة الاستبيان",
-      "steps": {
-        "familiarity": "ما مدى معرفتك بـ ComfyUI؟",
-        "intent": "ما الذي ترغب في إنشائه باستخدام ComfyUI؟",
-        "source": "من أين سمعت عن ComfyUI؟",
-        "usage": "كيف تخطط لاستخدام ComfyUI؟"
-      },
       "title": "استبيان السحابة"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "تعرف على السحابة",
   "cloudStart_title": "ابدأ الإبداع في ثوانٍ",
   "cloudStart_wantToRun": "هل تريد تشغيل ComfyUI محليًا بدلاً من ذلك؟",
-  "cloudSurvey_steps_familiarity": "ما مدى معرفتك بـ ComfyUI؟",
+  "cloudSurvey_steps_experience": "ما مدى معرفتك بـ ComfyUI؟",
+  "cloudSurvey_steps_focus": "ماذا تبني؟",
   "cloudSurvey_steps_intent": "ما الذي ترغب في إنشائه باستخدام ComfyUI؟",
   "cloudSurvey_steps_source": "من أين سمعت عن ComfyUI؟",
-  "cloudSurvey_steps_usage": "كيف تخطط لاستخدام ComfyUI؟",
+  "cloudSurvey_steps_source_social": "أي منصة؟",
   "cloudWaitlist_contactLink": "هنا",
   "cloudWaitlist_questionsText": "أسئلة؟ اتصل بنا",
   "color": {

src/locales/en/main.json

@@ -2414,6 +2414,16 @@
       "tooltipLearnMore": "Learn more..."
     }
   },
+  "desktopLogin": {
+    "confirmSummary": "Approve desktop sign-in?",
+    "confirmMessage": "The ComfyUI desktop app is waiting to sign in with your account. Only continue if you just started signing in from the ComfyUI desktop app.",
+    "successSummary": "Signed in",
+    "successDetail": "You can return to the ComfyUI desktop app.",
+    "expiredSummary": "Desktop sign-in failed",
+    "expiredDetail": "The sign-in request expired or was already used. Start signing in again from the ComfyUI desktop app.",
+    "failedSummary": "Desktop sign-in failed",
+    "failedDetail": "Something went wrong completing the desktop sign-in. Start signing in again from the ComfyUI desktop app."
+  },
   "validation": {
     "invalidEmail": "Invalid email address",
     "required": "Required",

src/locales/es/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Por favor, mantén tu respuesta por debajo de {max} caracteres.",
         "chooseAnOption": "Por favor, elige una opción.",
         "describeAnswer": "Por favor, describe tu respuesta.",
         "selectAtLeastOne": "Por favor, selecciona al menos una opción."
       },
       "intro": "Ayúdanos a personalizar tu experiencia con ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Usuario avanzado (flujos de trabajo personalizados)",
-          "basics": "Cómodo con lo básico",
-          "expert": "Experto (ayudo a otros)",
-          "new": "Nuevo en ComfyUI (nunca lo he usado antes)",
-          "starting": "Recién comenzando (siguiendo tutoriales)"
+        "experience": {
+          "new": "Nuevo en ComfyUI",
+          "pro": "Soy usuario avanzado",
+          "some": "Ya tengo experiencia"
+        },
+        "focus": {
+          "custom_nodes": "Nodos personalizados",
+          "pipelines": "Pipelines automatizados",
+          "products": "Productos para otros"
         },
         "intent": {
-          "3d_game": "Recursos 3D / recursos para juegos",
-          "api": "Endpoints de API para ejecutar flujos de trabajo",
-          "apps": "Apps simplificadas a partir de flujos de trabajo",
-          "audio": "Audio / música",
-          "custom_nodes": "Nodos personalizados",
+          "apps_api": "Aplicaciones y APIs",
+          "exploring": "Solo explorando",
           "images": "Imágenes",
-          "not_sure": "No estoy seguro",
-          "videos": "Videos",
+          "other": "Otra cosa",
+          "otherPlaceholder": "¿Qué quieres crear?",
+          "video": "Video",
           "workflows": "Flujos de trabajo o pipelines personalizados"
         },
         "source": {
-          "conference": "Conferencia o evento",
-          "discord": "Discord / comunidad",
+          "community": "Una comunidad o foro",
           "friend": "Amigo o colega",
-          "github": "GitHub",
+          "other": "Otro",
+          "otherPlaceholder": "¿Dónde nos encontraste?",
+          "search": "Google / búsqueda",
+          "social": "Redes sociales"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Newsletter o blog",
-          "other": "Otro",
           "reddit": "Reddit",
-          "search": "Google / búsqueda",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Educación (estudiante o docente)",
-          "personal": "Uso personal",
-          "work": "Trabajo"
         }
       },
+      "otherPlaceholder": "Cuéntanos más",
       "placeholder": "Marcador de posición para preguntas de la encuesta",
-      "steps": {
-        "familiarity": "¿Qué tan familiarizado estás con ComfyUI?",
-        "intent": "¿Qué quieres crear con ComfyUI?",
-        "source": "¿Dónde escuchaste sobre ComfyUI?",
-        "usage": "¿Cómo planeas usar ComfyUI?"
-      },
       "title": "Encuesta en la Nube"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "Conoce más sobre Cloud",
   "cloudStart_title": "comienza a crear en segundos",
   "cloudStart_wantToRun": "¿Prefieres ejecutar ComfyUI localmente?",
-  "cloudSurvey_steps_familiarity": "¿Qué tan familiarizado estás con ComfyUI?",
+  "cloudSurvey_steps_experience": "¿Qué tanto conoces ComfyUI?",
+  "cloudSurvey_steps_focus": "¿Qué estás construyendo?",
   "cloudSurvey_steps_intent": "¿Qué quieres crear con ComfyUI?",
   "cloudSurvey_steps_source": "¿Dónde escuchaste sobre ComfyUI?",
-  "cloudSurvey_steps_usage": "¿Cómo planeas usar ComfyUI?",
+  "cloudSurvey_steps_source_social": "¿En qué plataforma?",
   "cloudWaitlist_contactLink": "aquí",
   "cloudWaitlist_questionsText": "¿Preguntas? Contáctanos",
   "color": {

src/locales/fa/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "لطفاً پاسخ خود را کمتر از {max} نویسه نگه دارید.",
         "chooseAnOption": "لطفاً یک گزینه را انتخاب کنید.",
         "describeAnswer": "لطفاً پاسخ خود را توضیح دهید.",
         "selectAtLeastOne": "لطفاً حداقل یک گزینه را انتخاب کنید."
       },
       "intro": "به ما کمک کنید تا تجربه شما از ComfyUI را متناسب‌سازی کنیم.",
       "options": {
-        "familiarity": {
-          "advanced": "کاربر پیشرفته (جریان‌کارهای سفارشی)",
-          "basics": "آشنایی با مبانی",
-          "expert": "کاربر خبره (به دیگران کمک می‌کنم)",
-          "new": "جدید در ComfyUI (تا کنون استفاده نکرده‌ام)",
-          "starting": "تازه شروع کرده‌ام (در حال دنبال کردن آموزش‌ها)"
+        "experience": {
+          "new": "جدید در ComfyUI",
+          "pro": "کاربر حرفه‌ای هستم",
+          "some": "آشنایی نسبی دارم"
+        },
+        "focus": {
+          "custom_nodes": "Nodeهای سفارشی",
+          "pipelines": "پایپ‌لاین‌های خودکار",
+          "products": "محصولات برای دیگران"
         },
         "intent": {
-          "3d_game": "دارایی سه‌بعدی / دارایی بازی",
-          "api": "API endpoint برای اجرای workflow",
-          "apps": "اپلیکیشن ساده‌شده از workflow",
-          "audio": "صدا / موسیقی",
-          "custom_nodes": "node سفارشی",
+          "apps_api": "اپلیکیشن‌ها و APIها",
+          "exploring": "فقط در حال بررسی",
           "images": "تصویر",
-          "not_sure": "مطمئن نیستم",
-          "videos": "ویدیو",
+          "other": "چیز دیگری",
+          "otherPlaceholder": "چه چیزی می‌خواهید بسازید؟",
+          "video": "ویدیو",
           "workflows": "workflow یا pipeline سفارشی"
         },
         "source": {
-          "conference": "کنفرانس یا رویداد",
-          "discord": "Discord / انجمن",
+          "community": "انجمن یا فروم",
           "friend": "دوست یا همکار",
-          "github": "GitHub",
+          "other": "سایر",
+          "otherPlaceholder": "از کجا با ما آشنا شدید؟",
+          "search": "Google / جستجو",
+          "social": "رسانه‌های اجتماعی"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "خبرنامه یا وبلاگ",
-          "other": "سایر",
           "reddit": "Reddit",
-          "search": "Google / جستجو",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "آموزشی (دانشجو یا مدرس)",
-          "personal": "استفاده شخصی",
-          "work": "کاری"
         }
       },
+      "otherPlaceholder": "بیشتر توضیح دهید",
       "placeholder": "جای‌نگهدار سوالات نظرسنجی",
-      "steps": {
-        "familiarity": "تا چه حد با ComfyUI آشنایی دارید؟",
-        "intent": "مایل هستید با ComfyUI چه چیزی ایجاد کنید؟",
-        "source": "از کجا با ComfyUI آشنا شدید؟",
-        "usage": "برنامه شما برای استفاده از ComfyUI چیست؟"
-      },
       "title": "نظرسنجی ابری"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "درباره Cloud بیشتر بدانید",
   "cloudStart_title": "در چند ثانیه شروع به خلق کنید",
   "cloudStart_wantToRun": "مایلید ComfyUI را به صورت محلی اجرا کنید؟",
-  "cloudSurvey_steps_familiarity": "تا چه اندازه با ComfyUI آشنایی دارید؟",
+  "cloudSurvey_steps_experience": "تا چه حد با ComfyUI آشنایی دارید؟",
+  "cloudSurvey_steps_focus": "در حال ساخت چه چیزی هستید؟",
   "cloudSurvey_steps_intent": "مایل هستید با ComfyUI چه چیزی ایجاد کنید؟",
   "cloudSurvey_steps_source": "از کجا با ComfyUI آشنا شدید؟",
-  "cloudSurvey_steps_usage": "برنامه شما برای استفاده از ComfyUI چیست؟",
+  "cloudSurvey_steps_source_social": "کدام پلتفرم؟",
   "cloudWaitlist_contactLink": "اینجا",
   "cloudWaitlist_questionsText": "سؤالی دارید؟ با ما تماس بگیرید",
   "color": {

src/locales/fr/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Veuillez limiter votre réponse à {max} caractères.",
         "chooseAnOption": "Veuillez choisir une option.",
         "describeAnswer": "Veuillez décrire votre réponse.",
         "selectAtLeastOne": "Veuillez sélectionner au moins une option."
       },
       "intro": "Aidez-nous à personnaliser votre expérience ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Utilisateur avancé (workflows personnalisés)",
-          "basics": "À l'aise avec les bases",
-          "expert": "Expert (j'aide les autres)",
-          "new": "Nouveau sur ComfyUI (jamais utilisé auparavant)",
-          "starting": "Je débute (je suis des tutoriels)"
+        "experience": {
+          "new": "Nouveau sur ComfyUI",
+          "pro": "Utilisateur avancé",
+          "some": "Je me débrouille"
+        },
+        "focus": {
+          "custom_nodes": "Nœuds personnalisés",
+          "pipelines": "Pipelines automatisés",
+          "products": "Produits pour les autres"
         },
         "intent": {
-          "3d_game": "Assets 3D / assets de jeu",
-          "api": "Points de terminaison API pour exécuter des workflows",
-          "apps": "Applications simplifiées à partir de workflows",
-          "audio": "Audio / musique",
-          "custom_nodes": "Nœuds personnalisés",
+          "apps_api": "Applications et API",
+          "exploring": "Je découvre simplement",
           "images": "Images",
-          "not_sure": "Pas sûr",
-          "videos": "Vidéos",
+          "other": "Autre chose",
+          "otherPlaceholder": "Qu'aimeriez-vous créer ?",
+          "video": "Vidéo",
           "workflows": "Workflows ou pipelines personnalisés"
         },
         "source": {
-          "conference": "Conférence ou événement",
-          "discord": "Discord / communauté",
+          "community": "Une communauté ou un forum",
           "friend": "Ami ou collègue",
-          "github": "GitHub",
+          "other": "Autre",
+          "otherPlaceholder": "Où nous avez-vous trouvés ?",
+          "search": "Google / recherche",
+          "social": "Réseaux sociaux"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Newsletter ou blog",
-          "other": "Autre",
           "reddit": "Reddit",
-          "search": "Google / recherche",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Éducation (étudiant ou enseignant)",
-          "personal": "Usage personnel",
-          "work": "Travail"
         }
       },
+      "otherPlaceholder": "Dites-nous en plus",
       "placeholder": "Texte indicatif des questions de l'enquête",
-      "steps": {
-        "familiarity": "Quelle est votre familiarité avec ComfyUI ?",
-        "intent": "Que souhaitez-vous créer avec ComfyUI ?",
-        "source": "Où avez-vous entendu parler de ComfyUI ?",
-        "usage": "Comment prévoyez-vous d'utiliser ComfyUI ?"
-      },
       "title": "Enquête Cloud"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "En savoir plus sur Cloud",
   "cloudStart_title": "créez en quelques secondes",
   "cloudStart_wantToRun": "Vous préférez exécuter ComfyUI localement ?",
-  "cloudSurvey_steps_familiarity": "Quelle est votre familiarité avec ComfyUI ?",
+  "cloudSurvey_steps_experience": "Quel est votre niveau de connaissance de ComfyUI ?",
+  "cloudSurvey_steps_focus": "Qu'êtes-vous en train de créer ?",
   "cloudSurvey_steps_intent": "Que souhaitez-vous créer avec ComfyUI ?",
   "cloudSurvey_steps_source": "Où avez-vous entendu parler de ComfyUI ?",
-  "cloudSurvey_steps_usage": "Comment prévoyez-vous d'utiliser ComfyUI ?",
+  "cloudSurvey_steps_source_social": "Quelle plateforme ?",
   "cloudWaitlist_contactLink": "ici",
   "cloudWaitlist_questionsText": "Des questions ? Contactez-nous",
   "color": {

src/locales/he/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "אנא שמרו את התשובה שלכם עד {max} תווים.",
         "chooseAnOption": "אנא בחר אפשרות.",
         "describeAnswer": "אנא תאר את תשובתך.",
         "selectAtLeastOne": "אנא בחר לפחות אפשרות אחת."
       },
       "intro": "עזרו לנו להתאים את חוויית ה-ComfyUI שלך.",
       "options": {
-        "familiarity": {
-          "advanced": "מתקדם — בונה ועורך תהליכי עבודה",
-          "basics": "בינוני — מרגיש בנוח עם היסודות",
-          "expert": "מומחה — אני עוזר לאחרים",
-          "new": "חדש — מעולם לא השתמשתי",
-          "starting": "מתחיל — עוקב אחר מדריכים"
+        "experience": {
+          "new": "חדש/ה ב-ComfyUI",
+          "pro": "משתמש/ת מתקדם/ת",
+          "some": "מכיר/ה את המערכת"
+        },
+        "focus": {
+          "custom_nodes": "צמתים מותאמים אישית",
+          "pipelines": "צינורות עבודה אוטומטיים",
+          "products": "מוצרים לאחרים"
         },
         "intent": {
-          "3d_game": "נכסי תלת-ממד / נכסי משחקים",
-          "api": "נקודות קצה של API להרצת תהליכי עבודה",
-          "apps": "יישומים מפושטים מתהליכי עבודה",
-          "audio": "שמע / מוזיקה",
-          "custom_nodes": "צמתים מותאמים",
+          "apps_api": "אפליקציות ו-API",
+          "exploring": "רק בודק/ת",
           "images": "תמונות",
-          "not_sure": "לא בטוח",
-          "videos": "סרטונים",
+          "other": "משהו אחר",
+          "otherPlaceholder": "מה תרצו ליצור?",
+          "video": "וידאו",
           "workflows": "תהליכי עבודה או צינורות (pipelines) מותאמים"
         },
         "source": {
-          "conference": "כנס או אירוע",
-          "discord": "Discord / קהילה",
+          "community": "קהילה או פורום",
           "friend": "חבר או עמית",
-          "github": "GitHub",
+          "other": "אחר",
+          "otherPlaceholder": "היכן שמעתם עלינו?",
+          "search": "Google / חיפוש",
+          "social": "רשתות חברתיות"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "ניוזלטר או בלוג",
-          "other": "אחר",
           "reddit": "Reddit",
-          "search": "Google / חיפוש",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "חינוך (סטודנט או מרצה)",
-          "personal": "שימוש אישי",
-          "work": "עבודה"
         }
       },
+      "otherPlaceholder": "ספרו לנו עוד",
       "placeholder": "מציין מיקום לשאלות הסקר",
-      "steps": {
-        "familiarity": "עד כמה אתה מכיר את ComfyUI?",
-        "intent": "מה ברצונך ליצור עם ComfyUI?",
-        "source": "היכן שמעת על ComfyUI?",
-        "usage": "כיצד אתה מתכנן להשתמש ב-ComfyUI?"
-      },
       "title": "סקר ענן"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "למד על הענן",
   "cloudStart_title": "התחל ליצור תוך שניות",
   "cloudStart_wantToRun": "מעדיף להריץ את ComfyUI מקומית?",
-  "cloudSurvey_steps_familiarity": "עד כמה אתה מכיר את ComfyUI?",
+  "cloudSurvey_steps_experience": "עד כמה אתם מכירים את ComfyUI?",
+  "cloudSurvey_steps_focus": "מה אתם בונים?",
   "cloudSurvey_steps_intent": "מה ברצונך ליצור עם ComfyUI?",
   "cloudSurvey_steps_source": "היכן שמעת על ComfyUI?",
-  "cloudSurvey_steps_usage": "כיצד אתה מתכנן להשתמש ב-ComfyUI?",
+  "cloudSurvey_steps_source_social": "באיזו פלטפורמה?",
   "cloudWaitlist_contactLink": "כאן",
   "cloudWaitlist_questionsText": "שאלות? צור איתנו קשר",
   "color": {

src/locales/ja/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "回答は{max}文字以内で入力してください。",
         "chooseAnOption": "オプションを選択してください。",
         "describeAnswer": "回答を記述してください。",
         "selectAtLeastOne": "少なくとも1つ選択してください。"
       },
       "intro": "ComfyUIの体験をより最適化するためにご協力ください。",
       "options": {
-        "familiarity": {
-          "advanced": "上級ユーザー（カスタムワークフロー）",
-          "basics": "基本操作に慣れている",
-          "expert": "エキスパート（他者を支援）",
-          "new": "ComfyUI初心者（使用経験なし）",
-          "starting": "使い始め（チュートリアルをフォロー中）"
+        "experience": {
+          "new": "ComfyUIは初めて",
+          "pro": "上級ユーザー",
+          "some": "ある程度使い方が分かる"
+        },
+        "focus": {
+          "custom_nodes": "カスタムノード",
+          "pipelines": "自動パイプライン",
+          "products": "他者向けプロダクト"
         },
         "intent": {
-          "3d_game": "3Dアセット／ゲームアセット",
-          "api": "ワークフロー実行用APIエンドポイント",
-          "apps": "ワークフローから簡易アプリ作成",
-          "audio": "音声／音楽",
-          "custom_nodes": "カスタムノード",
+          "apps_api": "アプリ・API",
+          "exploring": "探索中",
           "images": "画像",
-          "not_sure": "まだ分からない",
-          "videos": "動画",
+          "other": "その他",
+          "otherPlaceholder": "何を作りたいですか？",
+          "video": "動画",
           "workflows": "カスタムワークフローやパイプライン"
         },
         "source": {
-          "conference": "カンファレンスやイベント",
-          "discord": "Discord／コミュニティ",
+          "community": "コミュニティ・フォーラム",
           "friend": "友人または同僚",
-          "github": "GitHub",
+          "other": "その他",
+          "otherPlaceholder": "どこで私たちを知りましたか？",
+          "search": "Google／検索",
+          "social": "ソーシャルメディア"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "ニュースレターやブログ",
-          "other": "その他",
           "reddit": "Reddit",
-          "search": "Google／検索",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X（Twitter）",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "教育（学生または教育者）",
-          "personal": "個人利用",
-          "work": "仕事"
         }
       },
+      "otherPlaceholder": "詳細をお聞かせください",
       "placeholder": "アンケート質問のプレースホルダー",
-      "steps": {
-        "familiarity": "ComfyUIの使用経験はどの程度ですか？",
-        "intent": "ComfyUIで何を作成したいですか？",
-        "source": "ComfyUIをどこで知りましたか？",
-        "usage": "ComfyUIをどのように利用する予定ですか？"
-      },
       "title": "クラウドアンケート"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "クラウドについて学ぶ",
   "cloudStart_title": "数秒で作成を開始",
   "cloudStart_wantToRun": "代わりにローカルでComfyUIを実行したいですか？",
-  "cloudSurvey_steps_familiarity": "ComfyUIにどの程度精通していますか？",
+  "cloudSurvey_steps_experience": "ComfyUIの知識レベルは？",
+  "cloudSurvey_steps_focus": "何を作成していますか？",
   "cloudSurvey_steps_intent": "ComfyUIで何を作成したいですか？",
   "cloudSurvey_steps_source": "ComfyUIをどこで知りましたか？",
-  "cloudSurvey_steps_usage": "ComfyUIをどのように利用する予定ですか？",
+  "cloudSurvey_steps_source_social": "どのプラットフォームですか？",
   "cloudWaitlist_contactLink": "こちら",
   "cloudWaitlist_questionsText": "質問がありますか？お問い合わせください",
   "color": {

src/locales/ko/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "답변은 {max}자 이내로 작성해 주세요.",
         "chooseAnOption": "옵션을 선택해 주세요.",
         "describeAnswer": "답변을 설명해 주세요.",
         "selectAtLeastOne": "최소 한 가지 옵션을 선택해 주세요."
       },
       "intro": "ComfyUI 경험을 맞춤화할 수 있도록 도와주세요.",
       "options": {
-        "familiarity": {
-          "advanced": "고급 사용자 (커스텀 워크플로우 사용)",
-          "basics": "기본 기능에 익숙함",
-          "expert": "전문가 (다른 사용자 도움)",
-          "new": "ComfyUI 처음 사용 (이전에 사용한 적 없음)",
-          "starting": "막 시작한 단계 (튜토리얼 따라하는 중)"
+        "experience": {
+          "new": "ComfyUI가 처음이에요",
+          "pro": "전문 사용자입니다",
+          "some": "기본적인 사용법을 알아요"
+        },
+        "focus": {
+          "custom_nodes": "커스텀 노드",
+          "pipelines": "자동화 파이프라인",
+          "products": "타인을 위한 제품"
         },
         "intent": {
-          "3d_game": "3D 에셋 / 게임 에셋",
-          "api": "워크플로우 실행용 API 엔드포인트",
-          "apps": "워크플로우 기반 간소화 앱",
-          "audio": "오디오 / 음악",
-          "custom_nodes": "커스텀 노드",
+          "apps_api": "앱 및 API",
+          "exploring": "그냥 둘러보는 중",
           "images": "이미지",
-          "not_sure": "잘 모르겠음",
-          "videos": "비디오",
+          "other": "기타",
+          "otherPlaceholder": "무엇을 만들고 싶으신가요?",
+          "video": "비디오",
           "workflows": "맞춤형 워크플로우 또는 파이프라인"
         },
         "source": {
-          "conference": "컨퍼런스 또는 이벤트",
-          "discord": "Discord / 커뮤니티",
+          "community": "커뮤니티 또는 포럼",
           "friend": "친구 또는 동료",
-          "github": "GitHub",
+          "other": "기타",
+          "otherPlaceholder": "어디서 저희를 알게 되셨나요?",
+          "search": "Google / 검색",
+          "social": "소셜 미디어"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "뉴스레터 또는 블로그",
-          "other": "기타",
           "reddit": "Reddit",
-          "search": "Google / 검색",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "교육용(학생 또는 교육자)",
-          "personal": "개인용",
-          "work": "업무용"
         }
       },
+      "otherPlaceholder": "자세히 알려주세요",
       "placeholder": "설문 질문 자리표시자",
-      "steps": {
-        "familiarity": "ComfyUI에 얼마나 익숙하신가요?",
-        "intent": "ComfyUI로 무엇을 만들고 싶으신가요?",
-        "source": "ComfyUI를 어디에서 알게 되셨나요?",
-        "usage": "ComfyUI를 어떻게 사용하실 계획인가요?"
-      },
       "title": "클라우드 설문"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "클라우드 알아보기",
   "cloudStart_title": "몇 초 만에 제작 시작",
   "cloudStart_wantToRun": "로컬에서 ComfyUI를 실행하고 싶으신가요?",
-  "cloudSurvey_steps_familiarity": "ComfyUI에 얼마나 익숙하신가요?",
+  "cloudSurvey_steps_experience": "ComfyUI를 얼마나 잘 알고 계신가요?",
+  "cloudSurvey_steps_focus": "무엇을 만들고 계신가요?",
   "cloudSurvey_steps_intent": "ComfyUI로 무엇을 만들고 싶으신가요?",
   "cloudSurvey_steps_source": "ComfyUI를 어디에서 알게 되셨나요?",
-  "cloudSurvey_steps_usage": "ComfyUI를 어떻게 사용하실 계획인가요?",
+  "cloudSurvey_steps_source_social": "어떤 플랫폼에서 알게 되셨나요?",
   "cloudWaitlist_contactLink": "여기",
   "cloudWaitlist_questionsText": "질문이 있으신가요? 문의하기",
   "color": {

src/locales/pt-BR/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Por favor, mantenha sua resposta com menos de {max} caracteres.",
         "chooseAnOption": "Por favor, escolha uma opção.",
         "describeAnswer": "Por favor, descreva sua resposta.",
         "selectAtLeastOne": "Por favor, selecione pelo menos uma opção."
       },
       "intro": "Ajude-nos a personalizar sua experiência no ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Usuário avançado (fluxos de trabalho personalizados)",
-          "basics": "Confortável com o básico",
-          "expert": "Especialista (ajuda outras pessoas)",
-          "new": "Novo no ComfyUI (nunca usei antes)",
-          "starting": "Começando agora (seguindo tutoriais)"
+        "experience": {
+          "new": "Novo no ComfyUI",
+          "pro": "Sou um usuário avançado",
+          "some": "Já conheço um pouco"
+        },
+        "focus": {
+          "custom_nodes": "Nós personalizados",
+          "pipelines": "Pipelines automatizados",
+          "products": "Produtos para outros"
         },
         "intent": {
-          "3d_game": "Assets 3D / assets para jogos",
-          "api": "Endpoints de API para executar workflows",
-          "apps": "Apps simplificados a partir de workflows",
-          "audio": "Áudio / música",
-          "custom_nodes": "Nodes personalizados",
+          "apps_api": "Apps e APIs",
+          "exploring": "Só explorando",
           "images": "Imagens",
-          "not_sure": "Não tenho certeza",
-          "videos": "Vídeos",
+          "other": "Outra coisa",
+          "otherPlaceholder": "O que você quer criar?",
+          "video": "Vídeo",
           "workflows": "Workflows ou pipelines personalizados"
         },
         "source": {
-          "conference": "Conferência ou evento",
-          "discord": "Discord / comunidade",
+          "community": "Uma comunidade ou fórum",
           "friend": "Amigo ou colega",
-          "github": "GitHub",
+          "other": "Outro",
+          "otherPlaceholder": "Onde você nos encontrou?",
+          "search": "Google / busca",
+          "social": "Mídias sociais"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Newsletter ou blog",
-          "other": "Outro",
           "reddit": "Reddit",
-          "search": "Google / busca",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Educação (estudante ou educador)",
-          "personal": "Uso pessoal",
-          "work": "Trabalho"
         }
       },
+      "otherPlaceholder": "Conte-nos mais",
       "placeholder": "Espaço reservado para perguntas da pesquisa",
-      "steps": {
-        "familiarity": "Qual o seu nível de familiaridade com o ComfyUI?",
-        "intent": "O que você deseja criar com o ComfyUI?",
-        "source": "Onde você ouviu falar do ComfyUI?",
-        "usage": "Como você pretende usar o ComfyUI?"
-      },
       "title": "Pesquisa da Nuvem"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "Saiba mais sobre a Nuvem",
   "cloudStart_title": "comece a criar em segundos",
   "cloudStart_wantToRun": "Prefere rodar o ComfyUI localmente?",
-  "cloudSurvey_steps_familiarity": "Qual o seu nível de familiaridade com o ComfyUI?",
+  "cloudSurvey_steps_experience": "Qual o seu nível de conhecimento do ComfyUI?",
+  "cloudSurvey_steps_focus": "O que você está construindo?",
   "cloudSurvey_steps_intent": "O que você deseja criar com o ComfyUI?",
   "cloudSurvey_steps_source": "Onde você ouviu falar do ComfyUI?",
-  "cloudSurvey_steps_usage": "Como você pretende usar o ComfyUI?",
+  "cloudSurvey_steps_source_social": "Em qual plataforma?",
   "cloudWaitlist_contactLink": "aqui",
   "cloudWaitlist_questionsText": "Dúvidas? Entre em contato conosco",
   "color": {

src/locales/ru/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Пожалуйста, сократите ваш ответ до {max} символов.",
         "chooseAnOption": "Пожалуйста, выберите вариант.",
         "describeAnswer": "Пожалуйста, опишите ваш ответ.",
         "selectAtLeastOne": "Пожалуйста, выберите хотя бы один вариант."
       },
       "intro": "Помогите нам адаптировать ваш опыт работы с ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Продвинутый пользователь (пользовательские рабочие процессы)",
-          "basics": "Уверенно владею основами",
-          "expert": "Эксперт (помогаю другим)",
-          "new": "Новичок в ComfyUI (никогда не использовал)",
-          "starting": "Только начинаю (следую руководствам)"
+        "experience": {
+          "new": "Впервые в ComfyUI",
+          "pro": "Я опытный пользователь",
+          "some": "Я немного знаком(а)"
+        },
+        "focus": {
+          "custom_nodes": "Пользовательские узлы",
+          "pipelines": "Автоматизированные пайплайны",
+          "products": "Продукты для других"
         },
         "intent": {
-          "3d_game": "3D-ассеты / игровые ассеты",
-          "api": "API endpoints для запуска workflow",
-          "apps": "Упрощённые приложения из workflow",
-          "audio": "Аудио / музыка",
-          "custom_nodes": "Пользовательские node",
+          "apps_api": "Приложения и API",
+          "exploring": "Просто изучаю",
           "images": "Изображения",
-          "not_sure": "Не уверен",
-          "videos": "Видео",
+          "other": "Другое",
+          "otherPlaceholder": "Что вы хотите создать?",
+          "video": "Видео",
           "workflows": "Пользовательские workflow или pipeline"
         },
         "source": {
-          "conference": "Конференция или мероприятие",
-          "discord": "Discord / сообщество",
+          "community": "Сообщество или форум",
           "friend": "Друг или коллега",
-          "github": "GitHub",
+          "other": "Другое",
+          "otherPlaceholder": "Где вы о нас узнали?",
+          "search": "Google / поиск",
+          "social": "Социальные сети"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Новостная рассылка или блог",
-          "other": "Другое",
           "reddit": "Reddit",
-          "search": "Google / поиск",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Образование (студент или преподаватель)",
-          "personal": "Личное использование",
-          "work": "Работа"
         }
       },
+      "otherPlaceholder": "Расскажите подробнее",
       "placeholder": "Вопросы для опроса",
-      "steps": {
-        "familiarity": "Насколько вы знакомы с ComfyUI?",
-        "intent": "Что вы хотите создавать с помощью ComfyUI?",
-        "source": "Где вы узнали о ComfyUI?",
-        "usage": "Как вы планируете использовать ComfyUI?"
-      },
       "title": "Облачный опрос"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "Узнать о Cloud",
   "cloudStart_title": "начать создавать за секунды",
   "cloudStart_wantToRun": "Хотите запустить ComfyUI локально?",
-  "cloudSurvey_steps_familiarity": "Насколько вы знакомы с ComfyUI?",
+  "cloudSurvey_steps_experience": "Насколько хорошо вы знаете ComfyUI?",
+  "cloudSurvey_steps_focus": "Что вы создаёте?",
   "cloudSurvey_steps_intent": "Что вы хотите создавать с помощью ComfyUI?",
   "cloudSurvey_steps_source": "Где вы узнали о ComfyUI?",
-  "cloudSurvey_steps_usage": "Как вы планируете использовать ComfyUI?",
+  "cloudSurvey_steps_source_social": "На какой платформе?",
   "cloudWaitlist_contactLink": "здесь",
   "cloudWaitlist_questionsText": "Есть вопросы? Свяжитесь с нами",
   "color": {

src/locales/tr/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Lütfen cevabınızı {max} karakterin altında tutun.",
         "chooseAnOption": "Lütfen bir seçenek seçin.",
         "describeAnswer": "Lütfen cevabınızı açıklayın.",
         "selectAtLeastOne": "Lütfen en az bir seçenek seçin."
       },
       "intro": "ComfyUI deneyiminizi size özel hale getirmemize yardımcı olun.",
       "options": {
-        "familiarity": {
-          "advanced": "İleri seviye kullanıcı (özel iş akışları)",
-          "basics": "Temel bilgilerde rahatım",
-          "expert": "Uzman (başkalarına yardım ediyorum)",
-          "new": "ComfyUI'a yeni (daha önce hiç kullanmadım)",
-          "starting": "Yeni başlıyorum (eğitimleri takip ediyorum)"
+        "experience": {
+          "new": "ComfyUI'ye yeni",
+          "pro": "Güçlü bir kullanıcıyım",
+          "some": "Biraz biliyorum"
+        },
+        "focus": {
+          "custom_nodes": "Özel node'lar",
+          "pipelines": "Otomatikleştirilmiş pipeline'lar",
+          "products": "Başkaları için ürünler"
         },
         "intent": {
-          "3d_game": "3D varlıklar / oyun varlıkları",
-          "api": "İş akışlarını çalıştırmak için API uç noktaları",
-          "apps": "İş akışlarından basitleştirilmiş uygulamalar",
-          "audio": "Ses / müzik",
-          "custom_nodes": "Özel node'lar",
+          "apps_api": "Uygulamalar ve API'ler",
+          "exploring": "Sadece keşfediyorum",
           "images": "Görseller",
-          "not_sure": "Emin değilim",
-          "videos": "Videolar",
+          "other": "Başka bir şey",
+          "otherPlaceholder": "Ne yapmak istiyorsunuz?",
+          "video": "Video",
           "workflows": "Özel iş akışları veya boru hatları"
         },
         "source": {
-          "conference": "Konferans veya etkinlik",
-          "discord": "Discord / topluluk",
+          "community": "Bir topluluk veya forum",
           "friend": "Arkadaş veya iş arkadaşı",
-          "github": "GitHub",
+          "other": "Diğer",
+          "otherPlaceholder": "Bizi nereden buldunuz?",
+          "search": "Google / arama",
+          "social": "Sosyal medya"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Bülten veya blog",
-          "other": "Diğer",
           "reddit": "Reddit",
-          "search": "Google / arama",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Eğitim (öğrenci veya eğitmen)",
-          "personal": "Kişisel kullanım",
-          "work": "İş"
         }
       },
+      "otherPlaceholder": "Daha fazla bilgi verin",
       "placeholder": "Anket soruları yer tutucusu",
-      "steps": {
-        "familiarity": "ComfyUI'a ne kadar aşinasınız?",
-        "intent": "ComfyUI ile ne oluşturmak istiyorsunuz?",
-        "source": "ComfyUI'yi nereden duydunuz?",
-        "usage": "ComfyUI'yi nasıl kullanmayı planlıyorsunuz?"
-      },
       "title": "Bulut Anketi"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "Cloud hakkında bilgi edinin",
   "cloudStart_title": "saniyeler içinde oluşturmaya başlayın",
   "cloudStart_wantToRun": "ComfyUI'ı yerel olarak çalıştırmak mı istiyorsunuz?",
-  "cloudSurvey_steps_familiarity": "ComfyUI'ya ne kadar aşinasınız?",
+  "cloudSurvey_steps_experience": "ComfyUI'yi ne kadar iyi biliyorsunuz?",
+  "cloudSurvey_steps_focus": "Ne inşa ediyorsunuz?",
   "cloudSurvey_steps_intent": "ComfyUI ile ne oluşturmak istiyorsunuz?",
   "cloudSurvey_steps_source": "ComfyUI'yi nereden duydunuz?",
-  "cloudSurvey_steps_usage": "ComfyUI'yi nasıl kullanmayı planlıyorsunuz?",
+  "cloudSurvey_steps_source_social": "Hangi platform?",
   "cloudWaitlist_contactLink": "burada",
   "cloudWaitlist_questionsText": "Sorularınız mı var? Bize ulaşın",
   "color": {

src/locales/zh-TW/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "請將您的回答控制在 {max} 個字以內。",
         "chooseAnOption": "請選擇一個選項。",
         "describeAnswer": "請描述您的答案。",
         "selectAtLeastOne": "請至少選擇一個選項。"
       },
       "intro": "協助我們為您量身打造 ComfyUI 體驗。",
       "options": {
-        "familiarity": {
-          "advanced": "進階使用者（自訂工作流程）",
-          "basics": "熟悉基礎操作",
-          "expert": "專家（協助他人）",
-          "new": "ComfyUI 新手（從未使用過）",
-          "starting": "剛開始（正在跟隨教學）"
+        "experience": {
+          "new": "ComfyUI 新手",
+          "pro": "我是進階使用者",
+          "some": "我已經熟悉操作"
+        },
+        "focus": {
+          "custom_nodes": "自訂節點",
+          "pipelines": "自動化流程",
+          "products": "為他人打造產品"
         },
         "intent": {
-          "3d_game": "3D 素材／遊戲素材",
-          "api": "執行工作流程的 API 端點",
-          "apps": "由工作流程簡化的應用程式",
-          "audio": "音訊／音樂",
-          "custom_nodes": "自訂節點",
+          "apps_api": "應用程式與 API",
+          "exploring": "只是探索",
           "images": "圖像",
-          "not_sure": "尚未確定",
-          "videos": "影片",
+          "other": "其他",
+          "otherPlaceholder": "您想製作什麼？",
+          "video": "影片",
           "workflows": "自訂工作流程或管線"
         },
         "source": {
-          "conference": "研討會或活動",
-          "discord": "Discord／社群",
+          "community": "社群或論壇",
           "friend": "朋友或同事",
-          "github": "GitHub",
+          "other": "其他",
+          "otherPlaceholder": "您是在哪裡發現我們的？",
+          "search": "Google／搜尋引擎",
+          "social": "社群媒體"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "電子報或部落格",
-          "other": "其他",
           "reddit": "Reddit",
-          "search": "Google／搜尋引擎",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X（Twitter）",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "教育用途（學生或教育者）",
-          "personal": "個人用途",
-          "work": "工作用途"
         }
       },
+      "otherPlaceholder": "請告訴我們更多",
       "placeholder": "問卷問題佔位符",
-      "steps": {
-        "familiarity": "您對 ComfyUI 的熟悉程度如何？",
-        "intent": "您想用 ComfyUI 創作什麼？",
-        "source": "您是從哪裡得知 ComfyUI 的？",
-        "usage": "您打算如何使用 ComfyUI？"
-      },
       "title": "雲端問卷"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "了解雲端服務",
   "cloudStart_title": "數秒內開始創作",
   "cloudStart_wantToRun": "想要在本機運行 ComfyUI？",
-  "cloudSurvey_steps_familiarity": "您對 ComfyUI 的熟悉程度如何？",
+  "cloudSurvey_steps_experience": "您對 ComfyUI 的熟悉程度？",
+  "cloudSurvey_steps_focus": "您正在製作什麼？",
   "cloudSurvey_steps_intent": "您想用 ComfyUI 創作什麼？",
   "cloudSurvey_steps_source": "您是從哪裡得知 ComfyUI 的？",
-  "cloudSurvey_steps_usage": "您打算如何使用 ComfyUI？",
+  "cloudSurvey_steps_source_social": "哪個平台？",
   "cloudWaitlist_contactLink": "此處",
   "cloudWaitlist_questionsText": "有問題？聯絡我們",
   "color": {

src/locales/zh/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "请将您的回答控制在 {max} 个字符以内。",
         "chooseAnOption": "请选择一个选项。",
         "describeAnswer": "请描述您的答案。",
         "selectAtLeastOne": "请至少选择一个选项。"
       },
       "intro": "帮助我们为您定制 ComfyUI 体验。",
       "options": {
-        "familiarity": {
-          "advanced": "高级用户（自定义工作流）",
-          "basics": "熟练掌握基础知识",
-          "expert": "专家（帮助他人）",
-          "new": "ComfyUI 新手（从未使用过）",
-          "starting": "刚刚开始（正在学习教程）"
+        "experience": {
+          "new": "ComfyUI 新手",
+          "pro": "我是高级用户",
+          "some": "我已经熟悉操作"
+        },
+        "focus": {
+          "custom_nodes": "自定义节点",
+          "pipelines": "自动化流程",
+          "products": "为他人制作产品"
         },
         "intent": {
-          "3d_game": "3D 资产 / 游戏资产",
-          "api": "运行工作流的 API 端点",
-          "apps": "基于工作流的简化应用",
-          "audio": "音频 / 音乐",
-          "custom_nodes": "自定义节点",
+          "apps_api": "应用和 API",
+          "exploring": "只是探索一下",
           "images": "图像",
-          "not_sure": "不确定",
-          "videos": "视频",
+          "other": "其他",
+          "otherPlaceholder": "你想做什么？",
+          "video": "视频",
           "workflows": "自定义工作流或流程"
         },
         "source": {
-          "conference": "会议或活动",
-          "discord": "Discord / 社区",
+          "community": "社区或论坛",
           "friend": "朋友或同事",
-          "github": "GitHub",
+          "other": "其他",
+          "otherPlaceholder": "你是从哪里了解到我们的？",
+          "search": "Google / 搜索",
+          "social": "社交媒体"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "新闻通讯或博客",
-          "other": "其他",
           "reddit": "Reddit",
-          "search": "Google / 搜索",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X（推特）",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "教育（学生或教师）",
-          "personal": "个人使用",
-          "work": "工作"
         }
       },
+      "otherPlaceholder": "请告诉我们更多",
       "placeholder": "调查问题占位符",
-      "steps": {
-        "familiarity": "你对 ComfyUI 有多熟悉？",
-        "intent": "您希望用 ComfyUI 创作什么？",
-        "source": "您是从哪里了解到 ComfyUI 的？",
-        "usage": "您打算如何使用 ComfyUI？"
-      },
       "title": "云调研"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "了解云服务",
   "cloudStart_title": "几秒钟内开始创作",
   "cloudStart_wantToRun": "想在本地运行 ComfyUI 吗？",
-  "cloudSurvey_steps_familiarity": "你对 ComfyUI 有多熟悉？",
+  "cloudSurvey_steps_experience": "你对 ComfyUI 有多了解？",
+  "cloudSurvey_steps_focus": "你正在构建什么？",
   "cloudSurvey_steps_intent": "您希望用 ComfyUI 创作什么？",
   "cloudSurvey_steps_source": "您是从哪里了解到 ComfyUI 的？",
-  "cloudSurvey_steps_usage": "您打算如何使用 ComfyUI？",
+  "cloudSurvey_steps_source_social": "你是在哪个平台上看到的？",
   "cloudWaitlist_contactLink": "这里",
   "cloudWaitlist_questionsText": "有问题？联系我们",
   "color": {

src/platform/cloud/onboarding/desktopLoginRedemption.test.ts

@@ -0,0 +1,618 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { reactive } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+/**
+ * Every test drives a real in-memory router and the real preserved-query
+ * manager: the tracker strips the code from the URL at capture time, so the
+ * stash is the only carrier, and redemption fires from router.afterEach, an
+ * auth watcher, and a delayed retry after a transient failure.
+ *
+ * The fake clock (installed for every test) keeps those retry timers from
+ * leaking into later tests: afterEach discards them with vi.useRealTimers().
+ */
+
+const mockConfirm = vi.hoisted(() => vi.fn())
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    confirm: mockConfirm
+  })
+}))
+
+const mockToastAdd = vi.hoisted(() => vi.fn())
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({
+    add: mockToastAdd
+  })
+}))
+
+interface MockAuthStore {
+  currentUser: {
+    uid: string
+    getIdToken: (forceRefresh?: boolean) => Promise<string>
+  } | null
+  getIdToken: () => Promise<string>
+}
+
+const mockUserGetIdToken = vi.hoisted(() => vi.fn())
+const mockStoreGetIdToken = vi.hoisted(() => vi.fn())
+
+// Reactive so the module's watcher on currentUser fires without a navigation.
+// The mock factory is cached across vi.resetModules(), so it reads a holder
+// refilled per test; watchers leaked by earlier module generations stay
+// subscribed to earlier stores and remain dormant.
+const authStoreHolder = vi.hoisted(() => ({
+  store: null as MockAuthStore | null
+}))
+vi.mock('@/stores/authStore', () => ({
+  useAuthStore: () => authStoreHolder.store
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: (path: string) => `/api${path}`
+  }
+}))
+
+const VALID_CODE = `dlc_${'A'.repeat(43)}`
+const SECOND_CODE = `dlc_${'B'.repeat(43)}`
+const REDEEM_URL = '/api/auth/desktop-login-codes/redeem'
+const NAMESPACE = 'desktop_login'
+const STORAGE_KEY = 'Comfy.PreservedQuery.desktop_login'
+const RETRY_DELAY_MS = 5_000
+
+const mockFetch = vi.fn()
+
+let mockAuthStore: MockAuthStore
+
+function okResponse() {
+  return new Response(JSON.stringify({ status: 'redeemed' }), { status: 200 })
+}
+
+function expectedFetchOptions(code: string) {
+  return {
+    method: 'POST',
+    headers: {
+      Authorization: 'Bearer firebase-id-token',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ code }),
+    signal: expect.any(AbortSignal)
+  }
+}
+
+// The triggers fire-and-forget the redemption; a zero-length advance of the
+// fake clock yields the event loop so the whole mocked promise chain settles.
+async function flushRedemption() {
+  await vi.advanceTimersByTimeAsync(0)
+}
+
+// vi.resetModules() also resets the preserved-query manager's in-memory map,
+// so the manager must be imported alongside the module under test.
+async function setup() {
+  const { installDesktopLoginRedemption } =
+    await import('./desktopLoginRedemption')
+  const { capturePreservedQuery, getPreservedQueryParam } =
+    await import('@/platform/navigation/preservedQueryManager')
+
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/:pathMatch(.*)*', component: { template: '<div />' } }]
+  })
+  installDesktopLoginRedemption(router)
+
+  let navigationCount = 0
+  const trigger = async () => {
+    await router.push(`/trigger-${navigationCount++}`)
+    await flushRedemption()
+  }
+
+  return {
+    router,
+    trigger,
+    seedStash: (code: string) =>
+      capturePreservedQuery(NAMESPACE, { desktop_login_code: code }, [
+        'desktop_login_code'
+      ]),
+    stashedCode: () => getPreservedQueryParam(NAMESPACE, 'desktop_login_code')
+  }
+}
+
+describe('installDesktopLoginRedemption', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+    sessionStorage.clear()
+    vi.stubGlobal('fetch', mockFetch)
+    vi.spyOn(console, 'warn').mockImplementation(() => {})
+    mockFetch.mockReset()
+    mockConfirm.mockResolvedValue(true)
+    mockUserGetIdToken.mockResolvedValue('firebase-id-token')
+    mockAuthStore = reactive({
+      currentUser: {
+        uid: 'user-1',
+        getIdToken: mockUserGetIdToken
+      },
+      getIdToken: mockStoreGetIdToken
+    })
+    authStoreHolder.store = mockAuthStore
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    vi.restoreAllMocks()
+  })
+
+  it('does nothing on navigation when no code is stashed', async () => {
+    const { trigger } = await setup()
+
+    await trigger()
+
+    expect(mockConfirm).not.toHaveBeenCalled()
+    expect(mockFetch).not.toHaveBeenCalled()
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('redeems a stashed code once on navigation with the Firebase bearer token after approval', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockResolvedValue(okResponse())
+
+    await trigger()
+
+    expect(mockConfirm).toHaveBeenCalledTimes(1)
+    expect(mockConfirm).toHaveBeenCalledWith({
+      title: 'desktopLogin.confirmSummary',
+      message: 'desktopLogin.confirmMessage'
+    })
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledWith(
+      REDEEM_URL,
+      expectedFetchOptions(VALID_CODE)
+    )
+    expect(stashedCode()).toBeUndefined()
+    expect(mockToastAdd).toHaveBeenCalledWith({
+      severity: 'success',
+      summary: 'desktopLogin.successSummary',
+      detail: 'desktopLogin.successDetail',
+      life: 4000
+    })
+  })
+
+  it('does not fetch before the user approves the confirmation dialog', async () => {
+    const { trigger, seedStash } = await setup()
+    seedStash(VALID_CODE)
+    let approve!: (value: boolean) => void
+    mockConfirm.mockReturnValue(
+      new Promise<boolean>((resolve) => {
+        approve = resolve
+      })
+    )
+    mockFetch.mockResolvedValue(okResponse())
+
+    await trigger()
+    await vi.waitFor(() => expect(mockConfirm).toHaveBeenCalledTimes(1))
+    expect(mockFetch).not.toHaveBeenCalled()
+
+    approve(true)
+    await flushRedemption()
+
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+  })
+
+  it.for([
+    ['declines', false],
+    ['dismisses', null]
+  ] as const)(
+    'clears the stash without a request or toast when the user %s the dialog',
+    async ([_label, confirmResult]) => {
+      const { trigger, seedStash, stashedCode } = await setup()
+      seedStash(VALID_CODE)
+      mockConfirm.mockResolvedValue(confirmResult)
+
+      await trigger()
+
+      expect(mockFetch).not.toHaveBeenCalled()
+      expect(stashedCode()).toBeUndefined()
+      expect(mockToastAdd).not.toHaveBeenCalled()
+
+      // Declining is final for that code: re-capturing it never re-prompts.
+      seedStash(VALID_CODE)
+      await trigger()
+
+      expect(mockConfirm).toHaveBeenCalledTimes(1)
+      expect(mockFetch).not.toHaveBeenCalled()
+      expect(stashedCode()).toBeUndefined()
+    }
+  )
+
+  it('asks for approval at most once per code across transient retries', async () => {
+    const { trigger, seedStash } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockResolvedValue(new Response(null, { status: 500 }))
+
+    await trigger()
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(RETRY_DELAY_MS)
+
+    expect(mockConfirm).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+  })
+
+  it('redeems a code hydrated lazily from sessionStorage', async () => {
+    const { trigger } = await setup()
+    sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ desktop_login_code: VALID_CODE })
+    )
+    mockFetch.mockResolvedValue(okResponse())
+
+    await trigger()
+
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledWith(
+      REDEEM_URL,
+      expectedFetchOptions(VALID_CODE)
+    )
+  })
+
+  it('does not redeem or prompt again after a successful redemption', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockResolvedValue(okResponse())
+
+    await trigger()
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+
+    // A later navigation re-captures the already-redeemed code.
+    seedStash(VALID_CODE)
+    await trigger()
+
+    expect(mockConfirm).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it.for([400, 403, 404, 409, 410])(
+    'clears the stash, shows an error toast, and never retries on %s',
+    async (status) => {
+      const { trigger, seedStash, stashedCode } = await setup()
+      seedStash(VALID_CODE)
+      mockFetch.mockResolvedValue(new Response(null, { status }))
+
+      await trigger()
+
+      expect(stashedCode()).toBeUndefined()
+      expect(mockToastAdd).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'desktopLogin.expiredSummary',
+        detail: 'desktopLogin.expiredDetail',
+        life: 6000
+      })
+    }
+  )
+
+  it.for([401, 500])(
+    'keeps the stash on %s for the scheduled retry without a toast',
+    async (status) => {
+      const { trigger, seedStash, stashedCode } = await setup()
+      seedStash(VALID_CODE)
+      mockFetch.mockResolvedValue(new Response(null, { status }))
+
+      await trigger()
+
+      expect(mockFetch).toHaveBeenCalledTimes(1)
+      expect(stashedCode()).toBe(VALID_CODE)
+      expect(mockToastAdd).not.toHaveBeenCalled()
+    }
+  )
+
+  it('retries once by itself, then clears the stash and shows an error toast when the budget is spent', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockResolvedValue(new Response(null, { status: 500 }))
+
+    await trigger()
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+    expect(stashedCode()).toBe(VALID_CODE)
+    expect(mockToastAdd).not.toHaveBeenCalled()
+
+    await vi.advanceTimersByTimeAsync(RETRY_DELAY_MS)
+
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(stashedCode()).toBeUndefined()
+    expect(mockToastAdd).toHaveBeenCalledWith({
+      severity: 'error',
+      summary: 'desktopLogin.failedSummary',
+      detail: 'desktopLogin.failedDetail',
+      life: 6000
+    })
+  })
+
+  it('forces a token refresh on the retry after a 401', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch
+      .mockResolvedValueOnce(new Response(null, { status: 401 }))
+      .mockResolvedValueOnce(okResponse())
+
+    await trigger()
+    expect(mockUserGetIdToken).toHaveBeenLastCalledWith(false)
+
+    await vi.advanceTimersByTimeAsync(RETRY_DELAY_MS)
+
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(mockUserGetIdToken).toHaveBeenLastCalledWith(true)
+    expect(stashedCode()).toBeUndefined()
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({ severity: 'success' })
+    )
+  })
+
+  it('passes a timeout signal and treats an aborted request as transient', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockRejectedValue(
+      new DOMException('The operation timed out.', 'TimeoutError')
+    )
+
+    await trigger()
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      REDEEM_URL,
+      expectedFetchOptions(VALID_CODE)
+    )
+    expect(stashedCode()).toBe(VALID_CODE)
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('treats an id token failure as transient without a toast', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockUserGetIdToken.mockRejectedValue(new Error('firebase unavailable'))
+
+    await trigger()
+
+    expect(mockFetch).not.toHaveBeenCalled()
+    // authStore.getIdToken surfaces failures through a modal error dialog,
+    // which this background flow must never trigger.
+    expect(mockStoreGetIdToken).not.toHaveBeenCalled()
+    expect(stashedCode()).toBe(VALID_CODE)
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('clears the stash without a dialog or request for a malformed code', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash('not-a-desktop-login-code')
+
+    await trigger()
+
+    expect(mockConfirm).not.toHaveBeenCalled()
+    expect(mockFetch).not.toHaveBeenCalled()
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it('contains an unexpected internal error instead of rejecting', async () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const { trigger, seedStash } = await setup()
+    seedStash(VALID_CODE)
+    mockConfirm.mockRejectedValue(new Error('dialog exploded'))
+
+    await expect(trigger()).resolves.toBeUndefined()
+
+    expect(consoleError).toHaveBeenCalledWith(
+      '[DesktopLoginRedemption] Redemption failed:',
+      expect.any(Error)
+    )
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('keeps the stash while unauthenticated and redeems via the auth watcher once a session appears', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockAuthStore.currentUser = null
+    mockFetch.mockResolvedValue(okResponse())
+
+    // The first completed navigation installs the watcher; without a session
+    // nothing redeems and the stash is kept.
+    await trigger()
+    expect(mockConfirm).not.toHaveBeenCalled()
+    expect(mockFetch).not.toHaveBeenCalled()
+    expect(stashedCode()).toBe(VALID_CODE)
+
+    // A session appearing without any further navigation redeems via the
+    // watcher.
+    mockAuthStore.currentUser = {
+      uid: 'user-1',
+      getIdToken: mockUserGetIdToken
+    }
+
+    await vi.waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    expect(mockFetch).toHaveBeenCalledWith(
+      REDEEM_URL,
+      expectedFetchOptions(VALID_CODE)
+    )
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it.for([
+    ['succeeded', () => mockFetch.mockResolvedValueOnce(okResponse())],
+    ['was declined', () => mockConfirm.mockResolvedValueOnce(false)]
+  ] as const)(
+    'gives a second code its own dialog and request after the first code %s',
+    async ([_label, arrangeFirstOutcome]) => {
+      const { trigger, seedStash, stashedCode } = await setup()
+      seedStash(VALID_CODE)
+      arrangeFirstOutcome()
+
+      await trigger()
+      expect(mockConfirm).toHaveBeenCalledTimes(1)
+
+      seedStash(SECOND_CODE)
+      mockFetch.mockResolvedValue(okResponse())
+      await trigger()
+
+      expect(mockConfirm).toHaveBeenCalledTimes(2)
+      expect(mockFetch).toHaveBeenLastCalledWith(
+        REDEEM_URL,
+        expect.objectContaining({ body: JSON.stringify({ code: SECOND_CODE }) })
+      )
+      expect(stashedCode()).toBeUndefined()
+    }
+  )
+
+  it('gives a second code a fresh attempt budget after the first code exhausted its own', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch.mockResolvedValue(new Response(null, { status: 500 }))
+
+    await trigger()
+    await vi.advanceTimersByTimeAsync(RETRY_DELAY_MS)
+    expect(mockFetch).toHaveBeenCalledTimes(2)
+    expect(stashedCode()).toBeUndefined()
+
+    seedStash(SECOND_CODE)
+    await trigger()
+    expect(mockFetch).toHaveBeenCalledTimes(3)
+    expect(stashedCode()).toBe(SECOND_CODE)
+
+    await vi.advanceTimersByTimeAsync(RETRY_DELAY_MS)
+    expect(mockFetch).toHaveBeenCalledTimes(4)
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it('re-asks for approval when the account changes after approval and redeems with the new account token', async () => {
+    const { trigger, seedStash, stashedCode } = await setup()
+    seedStash(VALID_CODE)
+    mockFetch
+      .mockResolvedValueOnce(new Response(null, { status: 500 }))
+      .mockResolvedValueOnce(okResponse())
+
+    // user-1 approves; the redeem fails transiently, keeping the code stashed.
+    await trigger()
+    expect(mockConfirm).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+    expect(stashedCode()).toBe(VALID_CODE)
+
+    // The session changes to user-2 before the retry: user-1's approval must
+    // not authorize redeeming with user-2's token.
+    mockAuthStore.currentUser = {
+      uid: 'user-2',
+      getIdToken: vi.fn().mockResolvedValue('second-user-token')
+    }
+
+    await vi.waitFor(() => expect(mockConfirm).toHaveBeenCalledTimes(2))
+    await vi.waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+    expect(mockFetch).toHaveBeenLastCalledWith(
+      REDEEM_URL,
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: 'Bearer second-user-token'
+        })
+      })
+    )
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it('re-prompts and redeems under the new account when the session changes while the approval dialog is open', async () => {
+    const { seedStash, stashedCode, trigger } = await setup()
+    seedStash(VALID_CODE)
+    let approve!: (value: boolean) => void
+    mockConfirm.mockReturnValueOnce(
+      new Promise<boolean>((resolve) => {
+        approve = resolve
+      })
+    )
+    mockFetch.mockResolvedValue(okResponse())
+
+    await trigger()
+    await vi.waitFor(() => expect(mockConfirm).toHaveBeenCalledTimes(1))
+
+    // The session swaps to user-2 while user-1's dialog is open: the stale
+    // approval must not redeem, and the raced auth trigger is replayed to
+    // re-prompt under user-2 without another navigation.
+    const secondUser = {
+      uid: 'user-2',
+      getIdToken: vi.fn().mockResolvedValue('second-user-token')
+    }
+    mockAuthStore.currentUser = secondUser
+    await flushRedemption()
+    approve(true)
+    await flushRedemption()
+
+    await vi.waitFor(() => expect(mockConfirm).toHaveBeenCalledTimes(2))
+    await vi.waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    expect(mockFetch).toHaveBeenCalledWith(
+      REDEEM_URL,
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: 'Bearer second-user-token'
+        })
+      })
+    )
+    expect(stashedCode()).toBeUndefined()
+  })
+
+  it.for([
+    ['succeeds', () => okResponse()],
+    ['fails terminally', () => new Response(null, { status: 404 })]
+  ] as const)(
+    'processes a newer code stashed mid-flight after the older redemption %s',
+    async ([_label, firstResponse]) => {
+      const { trigger, seedStash, stashedCode } = await setup()
+      seedStash(VALID_CODE)
+      let resolveFirstFetch!: (response: Response) => void
+      mockFetch.mockReturnValueOnce(
+        new Promise<Response>((resolve) => {
+          resolveFirstFetch = resolve
+        })
+      )
+
+      await trigger()
+      await vi.waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+
+      // A second code arrives while the first redemption is in flight; it
+      // must survive the first's settlement and be processed right after.
+      seedStash(SECOND_CODE)
+      mockFetch.mockResolvedValue(okResponse())
+      resolveFirstFetch(firstResponse())
+
+      await vi.waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
+      expect(mockConfirm).toHaveBeenCalledTimes(2)
+      expect(mockFetch).toHaveBeenLastCalledWith(
+        REDEEM_URL,
+        expect.objectContaining({ body: JSON.stringify({ code: SECOND_CODE }) })
+      )
+      expect(stashedCode()).toBeUndefined()
+    }
+  )
+
+  it('coalesces concurrent triggers into one dialog and one request', async () => {
+    const { router, seedStash } = await setup()
+    seedStash(VALID_CODE)
+    let approve!: (value: boolean) => void
+    mockConfirm.mockReturnValue(
+      new Promise<boolean>((resolve) => {
+        approve = resolve
+      })
+    )
+    mockFetch.mockResolvedValue(okResponse())
+
+    await router.push('/burst-1')
+    await router.push('/burst-2')
+    await vi.waitFor(() => expect(mockConfirm).toHaveBeenCalledTimes(1))
+
+    approve(true)
+    await flushRedemption()
+
+    expect(mockConfirm).toHaveBeenCalledTimes(1)
+    expect(mockFetch).toHaveBeenCalledTimes(1)
+  })
+})

src/platform/cloud/onboarding/desktopLoginRedemption.ts

@@ -0,0 +1,263 @@
+import { watch } from 'vue'
+import type { Router } from 'vue-router'
+
+import { t } from '@/i18n'
+import {
+  clearPreservedQuery,
+  getPreservedQueryParam
+} from '@/platform/navigation/preservedQueryManager'
+import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { useDialogService } from '@/services/dialogService'
+import { useAuthStore } from '@/stores/authStore'
+
+const NAMESPACE = PRESERVED_QUERY_NAMESPACES.DESKTOP_LOGIN
+const DESKTOP_LOGIN_CODE_KEY = 'desktop_login_code'
+
+// The backend issues "dlc_" + 43 base64url chars; bounds are loose so the
+// backend stays the authority on exact code length.
+const DESKTOP_LOGIN_CODE_PATTERN = /^dlc_[A-Za-z0-9_-]{20,256}$/
+
+// Statuses that mean the desktop app must start a fresh sign-in, so the code
+// is dropped. 401 stays transient: the session may still be settling.
+const TERMINAL_REDEEM_STATUSES = new Set([400, 403, 404, 409, 410])
+
+// One delayed in-page retry, so an approved sign-in always reaches a success
+// or failure toast without ever looping within a page load.
+const MAX_REDEEM_ATTEMPTS = 2
+const RETRY_DELAY_MS = 5_000
+
+// Abort the redeem request if the backend hangs; treated as transient.
+const REDEEM_TIMEOUT_MS = 10_000
+
+interface CodeRedemptionState {
+  attempts: number
+  approvedUserUid: string | null
+  settled: boolean
+  forceTokenRefresh: boolean
+}
+
+// Keyed by code so a different code arriving later gets its own approval and
+// attempt budget, while retries of the same code reuse both.
+const codeStates = new Map<string, CodeRedemptionState>()
+
+// Coalesces concurrent triggers into one drain; a trigger arriving mid-drain
+// (e.g. the auth watcher firing while the dialog is open) is replayed as one
+// more pass instead of being dropped.
+let draining = false
+let retriggerRequested = false
+
+let authWatcherInstalled = false
+
+function getCodeState(code: string): CodeRedemptionState {
+  const existing = codeStates.get(code)
+  if (existing) return existing
+  const fresh = {
+    attempts: 0,
+    approvedUserUid: null,
+    settled: false,
+    forceTokenRefresh: false
+  }
+  codeStates.set(code, fresh)
+  return fresh
+}
+
+// A newer code can be stashed while an older one is mid-redemption; settling
+// the older one must not wipe it.
+function clearStashIfHolds(code: string): void {
+  if (getPreservedQueryParam(NAMESPACE, DESKTOP_LOGIN_CODE_KEY) === code) {
+    clearPreservedQuery(NAMESPACE)
+  }
+}
+
+function settle(code: string, state: CodeRedemptionState): void {
+  state.settled = true
+  clearStashIfHolds(code)
+}
+
+function handleTransientFailure(
+  code: string,
+  state: CodeRedemptionState,
+  reason: string
+): void {
+  console.warn(`[DesktopLoginRedemption] Redeem request failed: ${reason}`)
+  if (state.attempts < MAX_REDEEM_ATTEMPTS) {
+    // attempts only increments, so this branch runs at most once per code
+    // and cannot stack retry timers.
+    setTimeout(() => {
+      void redeemPendingDesktopLoginCode()
+    }, RETRY_DELAY_MS)
+    return
+  }
+  // Budget spent: drop the code and tell the user instead of failing silently.
+  settle(code, state)
+  useToastStore().add({
+    severity: 'error',
+    summary: t('desktopLogin.failedSummary'),
+    detail: t('desktopLogin.failedDetail'),
+    life: 6000
+  })
+}
+
+// Explicit approval defeats device-code phishing: a lured click on a leaked
+// link must not bind the victim's session to an attacker's desktop app.
+// Approval is per code *and* account.
+async function confirmRedemption(
+  state: CodeRedemptionState,
+  uid: string
+): Promise<boolean> {
+  if (state.approvedUserUid === uid) return true
+  const confirmed = await useDialogService().confirm({
+    title: t('desktopLogin.confirmSummary'),
+    message: t('desktopLogin.confirmMessage')
+  })
+  if (confirmed !== true) return false
+  state.approvedUserUid = uid
+  return true
+}
+
+async function redeemCode(code: string): Promise<void> {
+  const state = getCodeState(code)
+  if (state.settled) {
+    // A later navigation can re-capture an already-settled code; drop it.
+    clearStashIfHolds(code)
+    return
+  }
+
+  // No session yet (e.g. code captured on the login page): keep the stash and
+  // let a post-login trigger redeem it.
+  const user = useAuthStore().currentUser
+  if (!user) return
+
+  if (!(await confirmRedemption(state, user.uid))) {
+    // Declined/dismissed: drop the code without an error.
+    settle(code, state)
+    return
+  }
+
+  // Approval binds the code to one account: if the session changed while the
+  // dialog was open, keep the code stashed and let the (replayed) auth-change
+  // trigger re-prompt under the now-current account.
+  const approvedUser = useAuthStore().currentUser
+  if (!approvedUser || approvedUser.uid !== state.approvedUserUid) return
+
+  state.attempts++
+
+  // Token comes straight from the Firebase user: authStore.getIdToken()
+  // surfaces failures through a modal dialog this background flow must avoid.
+  let idToken: string
+  try {
+    idToken = await approvedUser.getIdToken(state.forceTokenRefresh)
+  } catch {
+    handleTransientFailure(code, state, 'could not get id token')
+    return
+  }
+
+  let response: Response
+  try {
+    response = await fetch(api.apiURL('/auth/desktop-login-codes/redeem'), {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${idToken}`,
+        'Content-Type': 'application/json'
+      },
+      // TODO(@comfyorg/ingest-types): type the payload with the generated
+      // request type once the desktop-login-codes openapi addition propagates.
+      body: JSON.stringify({ code }),
+      signal: AbortSignal.timeout(REDEEM_TIMEOUT_MS)
+    })
+  } catch (error) {
+    handleTransientFailure(
+      code,
+      state,
+      error instanceof Error && error.name === 'TimeoutError'
+        ? 'request timed out'
+        : 'network error'
+    )
+    return
+  }
+
+  if (response.ok) {
+    settle(code, state)
+    useToastStore().add({
+      severity: 'success',
+      summary: t('desktopLogin.successSummary'),
+      detail: t('desktopLogin.successDetail'),
+      life: 4000
+    })
+    return
+  }
+
+  if (TERMINAL_REDEEM_STATUSES.has(response.status)) {
+    settle(code, state)
+    useToastStore().add({
+      severity: 'error',
+      summary: t('desktopLogin.expiredSummary'),
+      detail: t('desktopLogin.expiredDetail'),
+      life: 6000
+    })
+    return
+  }
+
+  // A 401 usually means a stale cached id token; mint a fresh one on retry.
+  if (response.status === 401) state.forceTokenRefresh = true
+  handleTransientFailure(code, state, `status ${response.status}`)
+}
+
+async function redeemPendingDesktopLoginCode(): Promise<void> {
+  // Never rejects: the triggers fire-and-forget this.
+  if (draining) {
+    retriggerRequested = true
+    return
+  }
+  draining = true
+  try {
+    do {
+      retriggerRequested = false
+      const code = getPreservedQueryParam(NAMESPACE, DESKTOP_LOGIN_CODE_KEY)
+      if (!code) continue
+      if (!DESKTOP_LOGIN_CODE_PATTERN.test(code)) {
+        clearPreservedQuery(NAMESPACE)
+        continue
+      }
+      await redeemCode(code)
+      if (code !== getPreservedQueryParam(NAMESPACE, DESKTOP_LOGIN_CODE_KEY))
+        retriggerRequested = true
+    } while (retriggerRequested)
+  } catch (error) {
+    console.error('[DesktopLoginRedemption] Redemption failed:', error)
+  } finally {
+    draining = false
+  }
+}
+
+function installAuthWatcherOnce(): void {
+  if (authWatcherInstalled) return
+  authWatcherInstalled = true
+  // A session can appear without a navigation (e.g. dialog-based sign-in).
+  // Installed lazily because pinia is not active when router.ts evaluates.
+  watch(
+    () => useAuthStore().currentUser,
+    () => {
+      void redeemPendingDesktopLoginCode()
+    }
+  )
+}
+
+/**
+ * Redeems desktop login codes (`?desktop_login_code=dlc_...`).
+ *
+ * The desktop app opens the browser with an opaque one-time code and polls
+ * the cloud backend; redeeming the code from a signed-in browser session,
+ * with the user's approval, releases a one-time custom token to that poll
+ * and signs the desktop app in. The preserved-query tracker (configured in
+ * router.ts) strips the code from the URL at capture time, so the stash is
+ * the only place it lives.
+ */
+export function installDesktopLoginRedemption(router: Router): void {
+  router.afterEach(() => {
+    installAuthWatcherOnce()
+    void redeemPendingDesktopLoginCode()
+  })
+}

src/platform/navigation/preservedQueryNamespaces.ts

@@ -5,5 +5,6 @@ export const PRESERVED_QUERY_NAMESPACES = {
   SHARE_AUTH: 'share_auth',
   CREATE_WORKSPACE: 'create_workspace',
   OAUTH: 'oauth',
-  PRICING: 'pricing'
+  PRICING: 'pricing',
+  DESKTOP_LOGIN: 'desktop_login'
 } as const

src/platform/secrets/components/SecretFormDialog.vue

@@ -41,7 +41,7 @@
                     <img
                       v-if="option.logo"
                       :src="option.logo"
-                      :alt="option.label"
+                      alt=""
                       class="size-4"
                     />
                     {{ option.label }}

src/platform/secrets/composables/useSecretForm.test.ts

@@ -268,6 +268,27 @@ describe('useSecretForm', () => {
       ])
     })
 
+    it('passes a server-listed provider absent from the local registry through with its raw id as label and no logo', () => {
+      const visible = ref(true)
+      const { providerOptions } = useSecretForm({
+        mode: 'create',
+        existingProviders: () => [],
+        availableProviders: () => ['brand-new-provider'],
+        visible,
+        onSaved: vi.fn()
+      })
+
+      expect(providerOptions.value).toEqual([
+        {
+          value: 'brand-new-provider',
+          label: 'brand-new-provider',
+          logo: undefined,
+          disabled: false
+        }
+      ])
+      expect(providerOptions.value[0]?.logo).toBeUndefined()
+    })
+
     it('omits BYOK providers the server does not list', () => {
       const visible = ref(true)
       const { providerOptions } = useSecretForm({

src/platform/secrets/composables/useSecretForm.ts

@@ -101,8 +101,11 @@ export function useSecretForm(options: UseSecretFormOptions) {
 
   // Once the server allowlist resolves, drop a selection the resolved list no
   // longer offers so the user cannot submit an unlisted provider.
-  watch(providerOptions, (options) => {
-    if (form.provider && !options.some((o) => o.value === form.provider)) {
+  watch(providerOptions, (resolvedOptions) => {
+    if (
+      form.provider &&
+      !resolvedOptions.some((o) => o.value === form.provider)
+    ) {
       form.provider = null
     }
   })

src/platform/settings/composables/useSettingsDialog.ts

@@ -39,6 +39,11 @@ export function useSettingsDialog() {
         // breaks those nested dialogs' autofocus and click handling. Non-modal
         // keeps the visual overlay without those traps.
         modal: false,
+        // A nested dialog closing (e.g. confirming a Secrets delete) can move
+        // focus onto an app element once the row it focused is removed. As a
+        // non-modal dialog Settings would treat that as an outside focus and
+        // dismiss itself, so opt out — escape and outside clicks still close it.
+        dismissOnFocusOutside: false,
         size: 'full',
         contentClass: SETTINGS_CONTENT_CLASS,
         overlayClass: isWorkspaceMode ? 'p-8' : undefined

src/router.ts

@@ -16,6 +16,7 @@ import { useUserStore } from '@/stores/userStore'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 import { captureOAuthRequestId } from '@/platform/cloud/oauth/oauthState'
+import { installDesktopLoginRedemption } from '@/platform/cloud/onboarding/desktopLoginRedemption'
 import { installPreservedQueryTracker } from '@/platform/navigation/preservedQueryTracker'
 import { PRESERVED_QUERY_NAMESPACES } from '@/platform/navigation/preservedQueryNamespaces'
 import { preserveLoggedOutShareAuthAttribution } from '@/platform/workflow/sharing/utils/shareAuthAttribution'
@@ -118,6 +119,11 @@ installPreservedQueryTracker(router, [
   {
     namespace: PRESERVED_QUERY_NAMESPACES.PRICING,
     keys: ['pricing']
+  },
+  {
+    namespace: PRESERVED_QUERY_NAMESPACES.DESKTOP_LOGIN,
+    keys: ['desktop_login_code'],
+    stripAfterCapture: true
   }
 ])
 
@@ -249,6 +255,8 @@ if (isCloud) {
     // User is logged in and accessing protected route
     return next()
   })
+
+  installDesktopLoginRedemption(router)
 }
 
 export default router

src/stores/dialogStore.ts

@@ -38,6 +38,14 @@ interface CustomDialogComponentProps {
   pt?: DialogPassThroughOptions
   closeOnEscape?: boolean
   dismissableMask?: boolean
+  /**
+   * When `false`, the Reka dialog does not dismiss when focus leaves its
+   * content. Set on container dialogs (e.g. Settings) that host nested dialogs,
+   * where a nested dialog closing can move focus onto an ordinary app element
+   * — a programmatic shift that must not be read as a dismiss. Escape and
+   * outside-pointer dismissal are unaffected. Defaults to `true`.
+   */
+  dismissOnFocusOutside?: boolean
   unstyled?: boolean
   headless?: boolean
   renderer?: DialogRenderer