prototype(website): always show variant switcher on prototype route

The dev-only guard hid the switcher on the Vercel preview, where it is
actually needed to flip variants. The bar only mounts on the throwaway
/learning-prototype route, so showing it in all builds is safe.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.coderabbit.yaml

@@ -63,14 +63,3 @@ reviews:
           Pass if none of these patterns are found in the diff.
 
           When warning, reference the specific ADR by number and link to `docs/adr/` for context. Frame findings as directional guidance since ADR 0003 and 0008 are in Proposed status.
-
-  path_instructions:
-    - path: '**/*.test.ts'
-      instructions: |
-        Treat `.agents/checks/test-quality.md`, `docs/testing/README.md`, and `docs/guidance/vitest.md` as required review context for every changed Vitest test file.
-    - path: 'src/lib/litegraph/**/*.test.ts'
-      instructions: |
-        Treat `.agents/checks/test-quality.md`, `docs/testing/README.md`, `docs/guidance/vitest.md`, and `docs/testing/litegraph-testing.md` as required review context for every changed litegraph Vitest test file.
-    - path: '{browser_tests,apps/website/e2e}/**/*.spec.ts'
-      instructions: |
-        Treat `.agents/checks/test-quality.md`, `docs/testing/README.md`, and `docs/guidance/playwright.md` as required review context for every changed Playwright test file.

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

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

apps/website/e2e/affiliates.spec.ts

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

apps/website/e2e/learning.spec.ts

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

apps/website/package.json

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

apps/website/scripts/validate-jsonld.ts

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

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

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

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

@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
-
-import { computed } from 'vue'
-import type { HTMLAttributes } from 'vue'
-
-import { prefersReducedMotion } from '../../composables/useReducedMotion'
-import ProductHeroBadge from '../common/ProductHeroBadge.vue'
-
-type Backdrop =
-  | { type: 'image'; src: string; alt?: string }
-  | { type: 'video'; src: string; poster?: string; alt?: string }
-
-const {
-  backdrop,
-  mobileBackdrop,
-  badgeText,
-  badgeLogoSrc,
-  badgeLogoAlt,
-  title,
-  subtitle,
-  footnote,
-  tone = 'light',
-  class: className
-} = defineProps<{
-  backdrop?: Backdrop
-  mobileBackdrop?: Backdrop
-  badgeText?: string
-  badgeLogoSrc?: string
-  badgeLogoAlt?: string
-  title: string
-  subtitle?: string
-  footnote?: string
-  tone?: 'light' | 'dark'
-  class?: HTMLAttributes['class']
-}>()
-
-// Light tone assumes a light backdrop: dark ink text on desktop plus a
-// warm-white radial scrim for contrast. Dark tone assumes a dark backdrop
-// and uses white text at all breakpoints, with no scrim.
-const toneTextClass = computed(() =>
-  tone === 'light'
-    ? 'text-primary-comfy-canvas lg:text-primary-comfy-ink'
-    : 'text-white'
-)
-
-// 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
-            v-if="tone === 'light'"
-            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="
-                cn(
-                  'mt-10 text-4xl/tight font-light tracking-tight whitespace-pre-line lg:text-6xl/tight',
-                  toneTextClass
-                )
-              "
-            >
-              {{ title }}
-            </h1>
-
-            <p
-              v-if="subtitle"
-              :class="cn('mt-8 max-w-md text-base lg:text-lg', toneTextClass)"
-            >
-              {{ subtitle }}
-            </p>
-
-            <p v-if="footnote" :class="cn('mt-10 text-sm', toneTextClass)">
-              {{ footnote }}
-            </p>
-
-            <slot />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

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

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import { clientLogos } from '../../data/clientLogos'
-import LogosAll01 from './LogosAll01.vue'
-
-const meta: Meta<typeof LogosAll01> = {
-  title: 'Website/Blocks/LogosAll01',
-  component: LogosAll01,
-  tags: ['autodocs'],
-  args: {
-    logos: clientLogos
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}

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

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-export interface LogoItem {
-  src: string
-  alt: string
-}
-
-const { logos, testId = 'logos-all' } = defineProps<{
-  logos: readonly LogoItem[]
-  testId?: string
-}>()
-
-// On mobile the single row splits into two counter-scrolling halves.
-const mobileRow1Logos = computed(() =>
-  logos.slice(0, Math.ceil(logos.length / 2))
-)
-const mobileRow2Logos = computed(() => logos.slice(Math.ceil(logos.length / 2)))
-</script>
-
-<template>
-  <section class="overflow-hidden py-12">
-    <!-- Single row on desktop -->
-    <div :data-testid="`${testId}-desktop`" class="hidden w-max gap-2 md:flex">
-      <div
-        v-for="copy in 2"
-        :key="copy"
-        class="animate-marquee flex shrink-0 items-center gap-2"
-        style="--marquee-gap: 0.5rem"
-        :aria-hidden="copy === 2 ? 'true' : undefined"
-      >
-        <div
-          v-for="logo in logos"
-          :key="logo.src"
-          class="flex h-20 w-50 shrink-0 items-center justify-center"
-        >
-          <img :src="logo.src" :alt="logo.alt" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Two rows on mobile -->
-    <div
-      :data-testid="`${testId}-mobile`"
-      class="flex flex-col gap-8 md:hidden"
-    >
-      <div class="flex w-max gap-8">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <div
-            v-for="logo in mobileRow1Logos"
-            :key="logo.src"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="logo.src" :alt="logo.alt" />
-          </div>
-        </div>
-      </div>
-      <div class="flex w-max gap-8">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee-reverse flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <div
-            v-for="logo in mobileRow2Logos"
-            :key="logo.src"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="logo.src" :alt="logo.alt" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

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

@@ -25,7 +25,7 @@ const {
   <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
     <div class="flex flex-col items-center text-center">
       <h2
-        class="max-w-5xl text-3xl font-light tracking-tight text-balance text-primary-comfy-canvas lg:text-5xl"
+        class="max-w-5xl text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
       >
         {{ t(headingKey, locale) }}
       </h2>

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

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

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

@@ -1,8 +1,82 @@
 <script setup lang="ts">
-import { clientLogos } from '../../data/clientLogos'
-import LogosAll01 from '../blocks/LogosAll01.vue'
+const logos = [
+  'Amazon Studios',
+  'Apple',
+  'Autodesk',
+  'Harman',
+  'Hp',
+  'Lucid',
+  'Netflix',
+  'Nike',
+  'Pixomondo',
+  'Tencent',
+  'Ubisoft'
+]
+
+const mobileRow1Logos = logos.slice(0, 6)
+const mobileRow2Logos = logos.slice(6)
 </script>
 
 <template>
-  <LogosAll01 :logos="clientLogos" test-id="social-proof" />
+  <section class="overflow-hidden py-12">
+    <!-- Single row on desktop -->
+    <div data-testid="social-proof-desktop" class="hidden w-max gap-2 md:flex">
+      <div
+        v-for="copy in 2"
+        :key="copy"
+        class="animate-marquee flex shrink-0 items-center gap-2"
+        style="--marquee-gap: 0.5rem"
+        :aria-hidden="copy === 2 ? 'true' : undefined"
+      >
+        <div
+          v-for="logo in logos"
+          :key="logo"
+          class="flex h-20 w-50 shrink-0 items-center justify-center"
+        >
+          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Two rows on mobile -->
+    <div
+      data-testid="social-proof-mobile"
+      class="flex flex-col gap-8 md:hidden"
+    >
+      <div class="flex w-max gap-8">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="animate-marquee flex shrink-0 items-center gap-8"
+          style="--marquee-gap: 2rem"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <div
+            v-for="logo in mobileRow1Logos"
+            :key="logo"
+            class="flex h-14 w-40 shrink-0 items-center justify-center"
+          >
+            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+          </div>
+        </div>
+      </div>
+      <div class="flex w-max gap-8">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="animate-marquee-reverse flex shrink-0 items-center gap-8"
+          style="--marquee-gap: 2rem"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <div
+            v-for="logo in mobileRow2Logos"
+            :key="logo"
+            class="flex h-14 w-40 shrink-0 items-center justify-center"
+          >
+            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>

apps/website/src/components/common/TutorialCard.stories.ts

@@ -1,30 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import { vfxTutorials } from '../../data/vfxTutorials'
-import TutorialCard from './TutorialCard.vue'
-
-const meta: Meta<typeof TutorialCard> = {
-  title: 'Website/Common/TutorialCard',
-  component: TutorialCard,
-  tags: ['autodocs'],
-  args: {
-    tutorial: vfxTutorials[0],
-    titlePrefixKey: 'learning.tutorials.titlePrefix'
-  }
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
-
-export const Overlay: Story = {
-  args: {
-    variant: 'overlay',
-    titlePrefixKey: undefined,
-    tutorial: {
-      ...vfxTutorials[0],
-      author: { name: 'Author Name', avatarSrc: '/icons/clients/Apple.svg' }
-    }
-  }
-}

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

@@ -1,180 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { VideoTrack } from './VideoPlayer.vue'
-import type {
-  Locale,
-  LocalizedText,
-  TranslationKey
-} from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import Badge from '../ui/badge/Badge.vue'
-import { ButtonMask } from '../ui/button-mask'
-
-export interface Tutorial {
-  id: string
-  tags: readonly TranslationKey[]
-  title: LocalizedText
-  videoSrc: string
-  href?: string
-  poster?: string
-  caption?: readonly VideoTrack[]
-  posterTime?: number
-  author?: { name: string; avatarSrc?: string }
-}
-
-const DEFAULT_POSTER_TIME_SECONDS = 1
-
-const getTutorialPosterSrc = (tutorial: Tutorial): string =>
-  tutorial.poster
-    ? tutorial.poster
-    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
-
-const {
-  tutorial,
-  locale = 'en',
-  titlePrefixKey,
-  variant = 'default'
-} = defineProps<{
-  tutorial: Tutorial
-  locale?: Locale
-  titlePrefixKey?: TranslationKey
-  variant?: 'default' | 'overlay'
-}>()
-
-const emit = defineEmits<{ play: [] }>()
-
-const accessibleTitle = computed(() =>
-  titlePrefixKey
-    ? `${t(titlePrefixKey, locale)} ${tutorial.title[locale]}`
-    : tutorial.title[locale]
-)
-</script>
-
-<template>
-  <article
-    class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
-  >
-    <button
-      type="button"
-      class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
-      :aria-label="accessibleTitle"
-      @click="emit('play')"
-    >
-      <video
-        :src="getTutorialPosterSrc(tutorial)"
-        :poster="tutorial.poster"
-        class="size-full object-cover"
-        preload="metadata"
-        playsinline
-        muted
-      ></video>
-      <!-- Dim the thumbnail so the overlaid title stays legible. -->
-      <span
-        v-if="variant === 'overlay'"
-        class="absolute inset-0 bg-black/30"
-        aria-hidden="true"
-      />
-      <span
-        v-if="variant === 'overlay'"
-        class="absolute inset-x-0 top-0 h-1/2 bg-linear-to-b from-black/60 to-transparent"
-        aria-hidden="true"
-      />
-      <span
-        v-if="variant === 'overlay'"
-        class="pointer-events-none absolute inset-x-0 top-0 p-6 text-left text-2xl font-light text-primary-comfy-canvas lg:p-8 lg:text-3xl"
-      >
-        {{ tutorial.title[locale] }}
-      </span>
-      <span
-        class="absolute inset-0 flex items-center justify-center"
-        aria-hidden="true"
-      >
-        <span
-          class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
-        >
-          <svg
-            class="ml-1 size-5 text-white lg:size-6"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path d="M8 5v14l11-7z" />
-          </svg>
-        </span>
-      </span>
-    </button>
-
-    <div class="flex flex-col space-y-3 p-4">
-      <div
-        v-if="variant === 'overlay'"
-        class="flex items-center justify-between gap-4"
-      >
-        <span
-          v-if="tutorial.author"
-          class="flex min-w-0 items-center gap-3 text-sm text-primary-comfy-canvas lg:text-base"
-        >
-          <img
-            v-if="tutorial.author.avatarSrc"
-            :src="tutorial.author.avatarSrc"
-            alt=""
-            class="size-10 shrink-0 rounded-full object-cover"
-          />
-          <span class="truncate">{{ tutorial.author.name }}</span>
-        </span>
-        <ButtonMask
-          v-if="tutorial.href"
-          as="a"
-          :href="tutorial.href"
-          icon-position="left"
-          :hide-label="false"
-          class="ml-auto shrink-0 ps-12"
-          variant="ghost"
-          size="default"
-        >
-          {{ t('cta.tryWorkflow', locale) }}
-        </ButtonMask>
-      </div>
-
-      <div v-else class="flex items-center justify-between gap-4">
-        <h3 class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug">
-          <template v-if="titlePrefixKey"
-            >{{ t(titlePrefixKey, locale) }}<br
-          /></template>
-          {{ tutorial.title[locale] }}
-        </h3>
-        <ButtonMask
-          v-if="tutorial.href"
-          as="a"
-          :href="tutorial.href"
-          icon-position="right"
-          class="shrink-0"
-          variant="ghost"
-          size="default"
-        >
-          {{ t('cta.tryWorkflow', locale) }}
-          <template #icon>
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="3"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="size-4"
-            >
-              <polyline points="9 6 15 12 9 18" />
-            </svg>
-          </template>
-        </ButtonMask>
-      </div>
-
-      <ul class="flex flex-wrap gap-2">
-        <li v-for="tag in tutorial.tags" :key="tag">
-          <Badge>{{ t(tag, locale) }}</Badge>
-        </li>
-      </ul>
-    </div>
-  </article>
-</template>

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Locale, TranslationKey } from '../../i18n/translations'
 
-import { localizeHref } from '../../config/routes'
 import { t } from '../../i18n/translations'
 
 const {
@@ -16,7 +15,8 @@ const {
   locale?: Locale
 }>()
 
-const nextHref = localizeHref(`/demos/${nextSlug}`, locale)
+const localePrefix = locale === 'en' ? '' : `/${locale}`
+const nextHref = `${localePrefix}/demos/${nextSlug}`
 </script>
 
 <template>

apps/website/src/components/learning/TutorialDetailDialog.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 
-import type { Tutorial } from './TutorialCard.vue'
-import type { Locale, TranslationKey } from '../../i18n/translations'
+import type { LearningTutorial } from '../../data/learningTutorials'
+import type { Locale } from '../../i18n/translations'
 
 import { lockScroll, unlockScroll } from '../../composables/scrollLock'
 import { t } from '../../i18n/translations'
-import VideoPlayer from './VideoPlayer.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
 
-const {
-  tutorial,
-  locale = 'en',
-  titlePrefixKey
-} = defineProps<{
-  tutorial: Tutorial
+const { tutorial, locale = 'en' } = defineProps<{
+  tutorial: LearningTutorial
   locale?: Locale
-  titlePrefixKey?: TranslationKey
 }>()
 
 const emit = defineEmits<{ close: [] }>()
@@ -78,9 +73,7 @@ onUnmounted(() => {
       <h2
         class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
       >
-        <template v-if="titlePrefixKey"
-          >{{ t(titlePrefixKey, locale) }}
-        </template>
+        {{ t('learning.tutorials.titlePrefix', locale) }}
         {{ tutorial.title[locale] }}
       </h2>
     </dialog>

apps/website/src/components/learning/TutorialsSection.vue

@@ -3,10 +3,14 @@ import { ref } from 'vue'
 
 import type { Locale } from '../../i18n/translations'
 
-import { learningTutorials } from '../../data/learningTutorials'
+import {
+  getTutorialPosterSrc,
+  learningTutorials
+} from '../../data/learningTutorials'
 import { t } from '../../i18n/translations'
-import TutorialCard from '../common/TutorialCard.vue'
-import TutorialDetailDialog from '../common/TutorialDetailDialog.vue'
+import Badge from '../ui/badge/Badge.vue'
+import { ButtonMask } from '../ui/button-mask'
+import TutorialDetailDialog from './TutorialDetailDialog.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -26,13 +30,84 @@ const activeTutorial = () =>
     <ul
       class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
     >
-      <li v-for="tutorial in learningTutorials" :key="tutorial.id">
-        <TutorialCard
-          :tutorial="tutorial"
-          :locale="locale"
-          title-prefix-key="learning.tutorials.titlePrefix"
-          @play="activeTutorialId = tutorial.id"
-        />
+      <li
+        v-for="tutorial in learningTutorials"
+        :key="tutorial.id"
+        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
+      >
+        <button
+          type="button"
+          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
+          @click="activeTutorialId = tutorial.id"
+        >
+          <video
+            :src="getTutorialPosterSrc(tutorial)"
+            :poster="tutorial.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          ></video>
+          <span
+            class="absolute inset-0 flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <span
+              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
+            >
+              <svg
+                class="ml-1 size-5 text-white lg:size-6"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </span>
+          </span>
+        </button>
+
+        <div class="flex flex-col space-y-3 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <h3
+              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
+            >
+              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
+              {{ tutorial.title[locale] }}
+            </h3>
+            <ButtonMask
+              v-if="tutorial.href"
+              as="a"
+              :href="tutorial.href"
+              icon-position="right"
+              class="shrink-0"
+              variant="ghost"
+              size="default"
+            >
+              {{ t('cta.tryWorkflow', locale) }}
+              <template #icon>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="size-4"
+                >
+                  <polyline points="9 6 15 12 9 18" />
+                </svg>
+              </template>
+            </ButtonMask>
+          </div>
+
+          <ul class="flex flex-wrap gap-2">
+            <li v-for="tag in tutorial.tags" :key="tag">
+              <Badge>{{ t(tag, locale) }}</Badge>
+            </li>
+          </ul>
+        </div>
       </li>
     </ul>
 
@@ -40,7 +115,6 @@ const activeTutorial = () =>
       v-if="activeTutorial()"
       :tutorial="activeTutorial()!"
       :locale="locale"
-      title-prefix-key="learning.tutorials.titlePrefix"
       @close="activeTutorialId = null"
     />
   </section>

apps/website/src/components/prototype/PrototypeSwitcher.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// PROTOTYPE — floating variant switcher bar. Not part of the design under
+// review. Shown in all builds: it only ever mounts on the throwaway
+// /learning-prototype route, which is deleted once a variant wins.
+import { onMounted, onUnmounted } from 'vue'
+
+interface PrototypeVariant {
+  key: string
+  name: string
+}
+
+const { variants, current } = defineProps<{
+  variants: PrototypeVariant[]
+  current: string
+}>()
+
+const emit = defineEmits<{
+  'update:current': [key: string]
+}>()
+
+const currentIndex = () =>
+  Math.max(
+    0,
+    variants.findIndex((variant) => variant.key === current)
+  )
+
+const cycle = (direction: 1 | -1) => {
+  const next = (currentIndex() + direction + variants.length) % variants.length
+  emit('update:current', variants[next].key)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const target = event.target as HTMLElement | null
+  if (
+    target &&
+    (target.tagName === 'INPUT' ||
+      target.tagName === 'TEXTAREA' ||
+      target.isContentEditable)
+  ) {
+    return
+  }
+  if (event.key === 'ArrowLeft') cycle(-1)
+  if (event.key === 'ArrowRight') cycle(1)
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <div
+    class="bg-primary-comfy-yellow fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-1 rounded-full border-2 border-primary-comfy-ink py-1.5 pr-4 pl-1.5 text-primary-comfy-ink shadow-[0_8px_30px_rgba(0,0,0,0.5)]"
+  >
+    <button
+      type="button"
+      aria-label="Previous variant"
+      class="flex size-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-primary-comfy-ink/10"
+      @click="cycle(-1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-4"
+        aria-hidden="true"
+      >
+        <polyline points="15 6 9 12 15 18" />
+      </svg>
+    </button>
+
+    <span class="text-xs font-bold tracking-wide uppercase select-none">
+      Prototype {{ current.toUpperCase() }} —
+      {{ variants[currentIndex()].name }}
+    </span>
+
+    <button
+      type="button"
+      aria-label="Next variant"
+      class="flex size-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-primary-comfy-ink/10"
+      @click="cycle(1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-4"
+        aria-hidden="true"
+      >
+        <polyline points="9 6 15 12 9 18" />
+      </svg>
+    </button>
+  </div>
+</template>

apps/website/src/components/prototype/learning-redesign/LearningRedesignPrototype.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+// PROTOTYPE — /learning redesign: three variants switchable via ?variant=a|b|c
+// (floating bottom bar, ← / → keys also cycle). The active category filter is
+// mirrored to ?category=vfx|animations|ads, standing in for the eventual
+// /learning/vfx-style routes. Mounted client:only, so URL access is safe here.
+import { ref, watch } from 'vue'
+
+import type { Locale } from '../../../i18n/translations'
+import type { CategoryFilter } from './prototypeData'
+
+import PrototypeSwitcher from '../PrototypeSwitcher.vue'
+import VariantA from './VariantA.vue'
+import VariantB from './VariantB.vue'
+import VariantC from './VariantC.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const VARIANTS = [
+  { key: 'a', name: 'Filter bar + featured lead' },
+  { key: 'b', name: 'Sidebar directory' },
+  { key: 'c', name: 'Spotlight + shelves' }
+]
+
+const CATEGORY_KEYS: readonly CategoryFilter[] = [
+  'all',
+  'vfx',
+  'animations',
+  'ads'
+]
+
+const readParam = <T extends string>(
+  key: string,
+  allowed: readonly T[],
+  fallback: T
+): T => {
+  const value = new URLSearchParams(window.location.search).get(key)
+  return allowed.includes(value as T) ? (value as T) : fallback
+}
+
+const variant = ref(
+  readParam(
+    'variant',
+    VARIANTS.map((v) => v.key),
+    'a'
+  )
+)
+const category = ref<CategoryFilter>(
+  readParam('category', CATEGORY_KEYS, 'all')
+)
+
+const syncParam = (key: string, value: string, omitWhen?: string) => {
+  const url = new URL(window.location.href)
+  if (value === omitWhen) url.searchParams.delete(key)
+  else url.searchParams.set(key, value)
+  history.replaceState(null, '', url)
+}
+
+watch(variant, (value) => syncParam('variant', value))
+watch(category, (value) => syncParam('category', value, 'all'))
+</script>
+
+<template>
+  <VariantA v-if="variant === 'a'" v-model:category="category" :locale />
+  <VariantB v-else-if="variant === 'b'" v-model:category="category" :locale />
+  <VariantC v-else v-model:category="category" :locale />
+
+  <PrototypeSwitcher
+    :variants="VARIANTS"
+    :current="variant"
+    @update:current="variant = $event"
+  />
+</template>

apps/website/src/components/prototype/learning-redesign/VariantA.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+// PROTOTYPE VARIANT A — "Filter bar + featured lead".
+// The hero is gone: a slim header plus a sticky category filter bar take its
+// place, and the featured tutorial becomes a double-width lead card at the top
+// of the grid (it follows the active filter).
+import { computed, ref } from 'vue'
+
+import type { Locale } from '../../../i18n/translations'
+import type { CategoryFilter, PrototypeTutorial } from './prototypeData'
+
+import { getTutorialPosterSrc } from '../../../data/learningTutorials'
+import { t } from '../../../i18n/translations'
+import Badge from '../../ui/badge/Badge.vue'
+import { ButtonMask } from '../../ui/button-mask'
+import TutorialDetailDialog from '../../learning/TutorialDetailDialog.vue'
+import {
+  categoryLabel,
+  categoryOptions,
+  featuredFor,
+  filterByCategory
+} from './prototypeData'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const category = defineModel<CategoryFilter>('category', { default: 'all' })
+
+const featured = computed(() => featuredFor(category.value))
+const rest = computed(() =>
+  filterByCategory(category.value).filter(
+    (tutorial) => tutorial.id !== featured.value?.id
+  )
+)
+const total = computed(() => filterByCategory(category.value).length)
+
+const activeTutorial = ref<PrototypeTutorial | null>(null)
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 pt-16 lg:pt-20">
+    <header class="flex flex-wrap items-end justify-between gap-6">
+      <div>
+        <p
+          class="text-primary-comfy-yellow text-xs font-semibold tracking-widest uppercase"
+        >
+          Learning
+        </p>
+        <h1
+          class="mt-3 text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+        >
+          Tutorials &amp; workflows
+        </h1>
+      </div>
+      <p class="text-primary-warm-gray text-sm">
+        {{ total }} tutorial{{ total === 1 ? '' : 's' }}
+      </p>
+    </header>
+  </section>
+
+  <div
+    class="sticky top-0 z-30 mt-10 border-y border-white/10 bg-primary-comfy-ink/85 backdrop-blur-md"
+  >
+    <nav
+      class="max-w-9xl mx-auto flex scrollbar-none items-center gap-3 overflow-x-auto px-6 py-4"
+      aria-label="Category filter"
+    >
+      <button
+        v-for="option in categoryOptions"
+        :key="option.value"
+        type="button"
+        :aria-pressed="category === option.value"
+        class="shrink-0 cursor-pointer rounded-lg px-4 py-2 text-xs font-semibold tracking-wide whitespace-nowrap transition-colors"
+        :class="
+          category === option.value
+            ? 'bg-primary-comfy-yellow text-primary-comfy-ink'
+            : 'bg-transparency-white-t4 text-primary-warm-gray hover:text-primary-comfy-canvas'
+        "
+        @click="category = option.value"
+      >
+        {{ option.label }}
+        <span class="ml-1 opacity-60">
+          {{ filterByCategory(option.value).length }}
+        </span>
+      </button>
+    </nav>
+  </div>
+
+  <section class="max-w-9xl mx-auto px-6 py-12 lg:py-16">
+    <ul
+      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
+    >
+      <!-- Featured lead card -->
+      <li v-if="featured" class="md:col-span-2">
+        <button
+          type="button"
+          class="group relative block aspect-video w-full cursor-pointer overflow-hidden rounded-3xl text-left"
+          :aria-label="`Featured: ${featured.title[locale]}`"
+          @click="activeTutorial = featured"
+        >
+          <video
+            :src="getTutorialPosterSrc(featured)"
+            :poster="featured.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          ></video>
+          <span
+            class="absolute inset-0 bg-linear-to-t from-primary-comfy-ink/90 via-primary-comfy-ink/20 to-transparent"
+            aria-hidden="true"
+          />
+          <span
+            class="absolute inset-x-0 bottom-0 flex flex-col gap-3 p-6 lg:p-8"
+          >
+            <span class="flex items-center gap-3">
+              <Badge variant="accent">Featured</Badge>
+              <Badge variant="category">
+                {{ categoryLabel(featured.category) }}
+              </Badge>
+            </span>
+            <span
+              class="text-xl font-light text-primary-comfy-canvas lg:text-3xl"
+            >
+              {{ t('learning.tutorials.titlePrefix', locale) }}
+              {{ featured.title[locale] }}
+            </span>
+          </span>
+          <span
+            class="absolute top-6 right-6 flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105"
+            aria-hidden="true"
+          >
+            <svg
+              class="ml-1 size-5 text-white"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </span>
+        </button>
+      </li>
+
+      <!-- Regular cards -->
+      <li
+        v-for="tutorial in rest"
+        :key="tutorial.id"
+        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
+      >
+        <button
+          type="button"
+          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
+          @click="activeTutorial = tutorial"
+        >
+          <video
+            :src="getTutorialPosterSrc(tutorial)"
+            :poster="tutorial.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          ></video>
+          <span
+            class="absolute inset-0 flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <span
+              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105"
+            >
+              <svg
+                class="ml-1 size-5 text-white"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </span>
+          </span>
+        </button>
+
+        <div class="flex flex-col space-y-3 p-4">
+          <Badge variant="category">
+            {{ categoryLabel(tutorial.category) }}
+          </Badge>
+          <div class="flex items-center justify-between gap-4">
+            <h3
+              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
+            >
+              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
+              {{ tutorial.title[locale] }}
+            </h3>
+            <ButtonMask
+              v-if="tutorial.href"
+              as="a"
+              :href="tutorial.href"
+              icon-position="right"
+              class="shrink-0"
+              variant="ghost"
+              size="default"
+            >
+              {{ t('cta.tryWorkflow', locale) }}
+              <template #icon>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="size-4"
+                >
+                  <polyline points="9 6 15 12 9 18" />
+                </svg>
+              </template>
+            </ButtonMask>
+          </div>
+          <ul class="flex flex-wrap gap-2">
+            <li v-for="tag in tutorial.tags" :key="tag">
+              <Badge>{{ t(tag, locale) }}</Badge>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+
+    <TutorialDetailDialog
+      v-if="activeTutorial"
+      :tutorial="activeTutorial"
+      :locale="locale"
+      @close="activeTutorial = null"
+    />
+  </section>
+</template>

apps/website/src/components/prototype/learning-redesign/VariantB.vue

@@ -0,0 +1,278 @@
+<script setup lang="ts">
+// PROTOTYPE VARIANT B — "Sidebar directory".
+// No hero at all: a persistent left sidebar carries the page title and the
+// category nav (with counts and blurbs), while the content column shows a
+// compact featured banner followed by a dense, scannable row list — a
+// directory, not a gallery.
+import { computed, ref } from 'vue'
+
+import type { Locale } from '../../../i18n/translations'
+import type { CategoryFilter, PrototypeTutorial } from './prototypeData'
+
+import { getTutorialPosterSrc } from '../../../data/learningTutorials'
+import { t } from '../../../i18n/translations'
+import Badge from '../../ui/badge/Badge.vue'
+import { ButtonMask } from '../../ui/button-mask'
+import TutorialDetailDialog from '../../learning/TutorialDetailDialog.vue'
+import {
+  categoryLabel,
+  categoryOptions,
+  featuredFor,
+  filterByCategory
+} from './prototypeData'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const category = defineModel<CategoryFilter>('category', { default: 'all' })
+
+const featured = computed(() => featuredFor(category.value))
+const rows = computed(() =>
+  filterByCategory(category.value).filter(
+    (tutorial) => tutorial.id !== featured.value?.id
+  )
+)
+
+const activeTutorial = ref<PrototypeTutorial | null>(null)
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-20">
+    <div class="flex flex-col gap-10 lg:flex-row lg:gap-16">
+      <!-- Sidebar -->
+      <aside class="lg:w-72 lg:shrink-0">
+        <div class="lg:sticky lg:top-10">
+          <h1
+            class="text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-4xl"
+          >
+            Learning
+          </h1>
+          <p class="text-primary-warm-gray mt-3 text-sm/relaxed">
+            Hands-on ComfyUI tutorials and workflows, by discipline.
+          </p>
+
+          <nav
+            class="mt-8 flex scrollbar-none gap-3 overflow-x-auto lg:flex-col lg:overflow-visible"
+            aria-label="Category filter"
+          >
+            <button
+              v-for="option in categoryOptions"
+              :key="option.value"
+              type="button"
+              :aria-pressed="category === option.value"
+              class="shrink-0 cursor-pointer rounded-xl px-4 py-3 text-left transition-colors lg:w-full"
+              :class="
+                category === option.value
+                  ? 'bg-primary-comfy-yellow text-primary-comfy-ink'
+                  : 'bg-transparency-white-t4 text-primary-comfy-canvas hover:bg-white/10'
+              "
+              @click="category = option.value"
+            >
+              <span class="flex items-baseline justify-between gap-6">
+                <span class="text-xs font-semibold tracking-wide uppercase">
+                  {{ option.label }}
+                </span>
+                <span
+                  class="text-xs tabular-nums"
+                  :class="
+                    category === option.value
+                      ? 'text-primary-comfy-ink/70'
+                      : 'text-primary-warm-gray'
+                  "
+                >
+                  {{ filterByCategory(option.value).length }}
+                </span>
+              </span>
+              <span
+                class="mt-1 hidden text-[11px]/snug lg:block"
+                :class="
+                  category === option.value
+                    ? 'text-primary-comfy-ink/70'
+                    : 'text-primary-warm-gray'
+                "
+              >
+                {{ option.blurb }}
+              </span>
+            </button>
+          </nav>
+        </div>
+      </aside>
+
+      <!-- Content column -->
+      <div class="min-w-0 flex-1">
+        <!-- Featured banner -->
+        <article
+          v-if="featured"
+          class="bg-transparency-white-t4 rounded-4.5xl grid items-center gap-6 p-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:gap-10 lg:p-8"
+        >
+          <div class="flex flex-col gap-4">
+            <div class="flex items-center gap-3">
+              <Badge variant="accent">Featured</Badge>
+              <Badge variant="category">
+                {{ categoryLabel(featured.category) }}
+              </Badge>
+            </div>
+            <h2
+              class="text-2xl font-light tracking-tight text-primary-comfy-canvas lg:text-3xl"
+            >
+              {{ t('learning.tutorials.titlePrefix', locale) }}
+              {{ featured.title[locale] }}
+            </h2>
+            <ul class="flex flex-wrap gap-2">
+              <li v-for="tag in featured.tags" :key="tag">
+                <Badge variant="subtle">{{ t(tag, locale) }}</Badge>
+              </li>
+            </ul>
+            <div v-if="featured.href">
+              <ButtonMask
+                as="a"
+                :href="featured.href"
+                icon-position="right"
+                variant="ghost"
+                size="default"
+              >
+                {{ t('cta.tryWorkflow', locale) }}
+                <template #icon>
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="size-4"
+                  >
+                    <polyline points="9 6 15 12 9 18" />
+                  </svg>
+                </template>
+              </ButtonMask>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+            :aria-label="`Play ${featured.title[locale]}`"
+            @click="activeTutorial = featured"
+          >
+            <video
+              :src="getTutorialPosterSrc(featured)"
+              :poster="featured.poster"
+              class="size-full object-cover"
+              preload="metadata"
+              playsinline
+              muted
+            ></video>
+            <span
+              class="absolute inset-0 flex items-center justify-center"
+              aria-hidden="true"
+            >
+              <span
+                class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105"
+              >
+                <svg
+                  class="ml-1 size-5 text-white"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </article>
+
+        <!-- Row list -->
+        <ul class="mt-6 divide-y divide-white/10">
+          <li
+            v-for="tutorial in rows"
+            :key="tutorial.id"
+            class="flex flex-wrap items-center gap-4 py-5 lg:flex-nowrap lg:gap-6"
+          >
+            <button
+              type="button"
+              class="group relative block aspect-video w-36 shrink-0 cursor-pointer overflow-hidden rounded-2xl lg:w-44"
+              :aria-label="`Play ${tutorial.title[locale]}`"
+              @click="activeTutorial = tutorial"
+            >
+              <video
+                :src="getTutorialPosterSrc(tutorial)"
+                :poster="tutorial.poster"
+                class="size-full object-cover"
+                preload="metadata"
+                playsinline
+                muted
+              ></video>
+              <span
+                class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+                aria-hidden="true"
+              >
+                <span
+                  class="flex size-9 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm"
+                >
+                  <svg
+                    class="ml-0.5 size-4 text-white"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                </span>
+              </span>
+            </button>
+
+            <div class="min-w-0 flex-1">
+              <Badge variant="category" size="xs">
+                {{ categoryLabel(tutorial.category) }}
+              </Badge>
+              <h3
+                class="mt-1 text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
+              >
+                {{ t('learning.tutorials.titlePrefix', locale) }}
+                {{ tutorial.title[locale] }}
+              </h3>
+              <ul class="mt-2 flex flex-wrap gap-2">
+                <li v-for="tag in tutorial.tags" :key="tag">
+                  <Badge size="xs">{{ t(tag, locale) }}</Badge>
+                </li>
+              </ul>
+            </div>
+
+            <ButtonMask
+              v-if="tutorial.href"
+              as="a"
+              :href="tutorial.href"
+              icon-position="right"
+              class="shrink-0"
+              variant="ghost"
+              size="default"
+            >
+              {{ t('cta.tryWorkflow', locale) }}
+              <template #icon>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="size-4"
+                >
+                  <polyline points="9 6 15 12 9 18" />
+                </svg>
+              </template>
+            </ButtonMask>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <TutorialDetailDialog
+      v-if="activeTutorial"
+      :tutorial="activeTutorial"
+      :locale="locale"
+      @close="activeTutorial = null"
+    />
+  </section>
+</template>

apps/website/src/components/prototype/learning-redesign/VariantC.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+// PROTOTYPE VARIANT C — "Spotlight hero + category shelves".
+// The hero earns its keep by merging with the featured element: headline on
+// the left, featured video playing inline on the right. Below, one horizontal
+// shelf per category (VFX / Animations / Ads); "View all" drills into a
+// single-category grid — this is the shape that maps most directly onto
+// /learning/vfx-style routes.
+import { computed, ref } from 'vue'
+
+import type { Locale } from '../../../i18n/translations'
+import type { CategoryFilter, PrototypeTutorial } from './prototypeData'
+
+import { getTutorialPosterSrc } from '../../../data/learningTutorials'
+import { t } from '../../../i18n/translations'
+import Badge from '../../ui/badge/Badge.vue'
+import { ButtonMask } from '../../ui/button-mask'
+import VideoPlayer from '../../common/VideoPlayer.vue'
+import TutorialDetailDialog from '../../learning/TutorialDetailDialog.vue'
+import {
+  categoryLabel,
+  featuredFor,
+  filterByCategory,
+  realCategories
+} from './prototypeData'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const category = defineModel<CategoryFilter>('category', { default: 'all' })
+
+const featured = computed(() => featuredFor('all'))
+const drilledIn = computed(() => category.value !== 'all')
+const drilledTutorials = computed(() => filterByCategory(category.value))
+const drilledLabel = computed(() =>
+  category.value === 'all' ? '' : categoryLabel(category.value)
+)
+
+const activeTutorial = ref<PrototypeTutorial | null>(null)
+</script>
+
+<template>
+  <!-- Spotlight hero: headline + featured element merged -->
+  <section class="max-w-9xl mx-auto px-6 pt-20 pb-8 lg:pt-24 lg:pb-12">
+    <div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
+      <div class="flex flex-col gap-6">
+        <h1
+          class="text-3xl leading-[110%] font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+        >
+          {{ t('learning.heroTitle.before', locale) }}
+          <span class="text-primary-comfy-yellow">ComfyUI</span
+          >{{ t('learning.heroTitle.after', locale) }}
+          {{ t('learning.heroTitle.line2', locale) }}
+        </h1>
+
+        <div v-if="featured" class="flex flex-col gap-4">
+          <div class="flex items-center gap-3">
+            <Badge variant="accent">Featured</Badge>
+            <Badge variant="category">
+              {{ categoryLabel(featured.category) }}
+            </Badge>
+          </div>
+          <p class="text-sm/relaxed text-primary-comfy-canvas lg:text-base">
+            {{ t('learning.tutorials.titlePrefix', locale) }}
+            {{ featured.title[locale] }}
+          </p>
+          <div v-if="featured.href">
+            <ButtonMask
+              as="a"
+              :href="featured.href"
+              icon-position="right"
+              variant="ghost"
+              size="default"
+            >
+              {{ t('cta.tryWorkflow', locale) }}
+              <template #icon>
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="size-4"
+                >
+                  <polyline points="9 6 15 12 9 18" />
+                </svg>
+              </template>
+            </ButtonMask>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="featured"
+        class="border-primary-warm-gray rounded-4.5xl border p-4"
+      >
+        <VideoPlayer
+          :locale
+          :src="featured.videoSrc"
+          :poster="featured.poster"
+          minimal
+        />
+      </div>
+    </div>
+  </section>
+
+  <!-- Drilled-in single-category grid -->
+  <section v-if="drilledIn" class="max-w-9xl mx-auto px-6 py-8 lg:py-12">
+    <button
+      type="button"
+      class="text-primary-warm-gray flex cursor-pointer items-center gap-2 text-xs font-semibold tracking-wide uppercase transition-colors hover:text-primary-comfy-canvas"
+      @click="category = 'all'"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-3"
+        aria-hidden="true"
+      >
+        <polyline points="15 6 9 12 15 18" />
+      </svg>
+      All categories
+    </button>
+
+    <h2
+      class="mt-4 mb-10 text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+    >
+      {{ drilledLabel }}
+      <span class="text-primary-warm-gray text-xl lg:text-3xl">
+        — {{ drilledTutorials.length }} tutorial{{
+          drilledTutorials.length === 1 ? '' : 's'
+        }}
+      </span>
+    </h2>
+
+    <ul
+      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
+    >
+      <li
+        v-for="tutorial in drilledTutorials"
+        :key="tutorial.id"
+        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl p-2"
+      >
+        <button
+          type="button"
+          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+          :aria-label="`Play ${tutorial.title[locale]}`"
+          @click="activeTutorial = tutorial"
+        >
+          <video
+            :src="getTutorialPosterSrc(tutorial)"
+            :poster="tutorial.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          ></video>
+          <span
+            class="absolute inset-0 flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <span
+              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105"
+            >
+              <svg
+                class="ml-1 size-5 text-white"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </span>
+          </span>
+        </button>
+        <div class="flex flex-col gap-2 p-4">
+          <Badge variant="category">
+            {{ categoryLabel(tutorial.category) }}
+          </Badge>
+          <h3 class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug">
+            {{ t('learning.tutorials.titlePrefix', locale) }}
+            {{ tutorial.title[locale] }}
+          </h3>
+        </div>
+      </li>
+    </ul>
+  </section>
+
+  <!-- Category shelves -->
+  <template v-else>
+    <section
+      v-for="option in realCategories"
+      :key="option.value"
+      class="max-w-9xl mx-auto px-6 py-8 lg:py-10"
+    >
+      <header class="mb-6 flex items-end justify-between gap-6">
+        <div>
+          <h2
+            class="text-2xl font-light tracking-tight text-primary-comfy-canvas lg:text-4xl"
+          >
+            {{ option.label }}
+          </h2>
+          <p class="text-primary-warm-gray mt-1 text-sm">
+            {{ option.blurb }}
+          </p>
+        </div>
+        <button
+          type="button"
+          class="text-primary-comfy-yellow flex shrink-0 cursor-pointer items-center gap-2 text-xs font-semibold tracking-wide uppercase transition-opacity hover:opacity-80"
+          @click="category = option.value"
+        >
+          View all {{ filterByCategory(option.value).length }}
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="size-3"
+            aria-hidden="true"
+          >
+            <polyline points="9 6 15 12 9 18" />
+          </svg>
+        </button>
+      </header>
+
+      <ul
+        class="flex snap-x scrollbar-none gap-6 overflow-x-auto pb-2 lg:gap-8"
+      >
+        <li
+          v-for="tutorial in filterByCategory(option.value)"
+          :key="tutorial.id"
+          class="bg-transparency-white-t4 flex w-72 shrink-0 snap-start flex-col gap-3 overflow-hidden rounded-3xl p-2 lg:w-80"
+        >
+          <button
+            type="button"
+            class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+            :aria-label="`Play ${tutorial.title[locale]}`"
+            @click="activeTutorial = tutorial"
+          >
+            <video
+              :src="getTutorialPosterSrc(tutorial)"
+              :poster="tutorial.poster"
+              class="size-full object-cover"
+              preload="metadata"
+              playsinline
+              muted
+            ></video>
+            <span
+              class="absolute inset-0 flex items-center justify-center"
+              aria-hidden="true"
+            >
+              <span
+                class="flex size-12 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105"
+              >
+                <svg
+                  class="ml-0.5 size-4 text-white"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            </span>
+          </button>
+          <div class="flex flex-col gap-2 p-3">
+            <Badge variant="category" size="xs">
+              {{ categoryLabel(tutorial.category) }}
+            </Badge>
+            <h3 class="text-sm/snug text-primary-comfy-canvas">
+              {{ t('learning.tutorials.titlePrefix', locale) }}
+              {{ tutorial.title[locale] }}
+            </h3>
+          </div>
+        </li>
+      </ul>
+    </section>
+  </template>
+
+  <TutorialDetailDialog
+    v-if="activeTutorial"
+    :tutorial="activeTutorial"
+    :locale="locale"
+    @close="activeTutorial = null"
+  />
+</template>

apps/website/src/components/prototype/learning-redesign/prototypeData.ts

@@ -0,0 +1,73 @@
+// PROTOTYPE — throwaway data layer for the /learning redesign prototype.
+// Assigns each existing tutorial a category (vfx | animations | ads) and picks
+// a featured item. In production the category would live on LearningTutorial
+// itself and drive /learning/vfx-style routes; here it's bolted on so the
+// variants have something real to filter.
+import type { LearningTutorial } from '../../../data/learningTutorials'
+
+import { learningTutorials } from '../../../data/learningTutorials'
+
+type LearningCategory = 'vfx' | 'animations' | 'ads'
+export type CategoryFilter = 'all' | LearningCategory
+
+export type PrototypeTutorial = LearningTutorial & {
+  category: LearningCategory
+}
+
+// PROTOTYPE guesses — the real assignment is a content decision.
+const categoryById: Record<string, LearningCategory> = {
+  cleanplate_walkthrough_v03: 'vfx',
+  deaging_workflow_v03: 'animations',
+  frame_adjustments_demo_v03: 'animations',
+  mattes_and_utilities_v03: 'vfx',
+  seedance_demo_comfyui_v03: 'ads',
+  skyreplacement_smaller_v06: 'vfx'
+}
+
+const prototypeTutorials: readonly PrototypeTutorial[] = learningTutorials.map(
+  (tutorial) => ({
+    ...tutorial,
+    category: categoryById[tutorial.id] ?? 'vfx'
+  })
+)
+
+// Same tutorial the current FeaturedWorkflowSection showcases.
+const FEATURED_ID = 'skyreplacement_smaller_v06'
+
+interface CategoryOption {
+  value: CategoryFilter
+  label: string
+  blurb: string
+}
+
+export const categoryOptions: readonly CategoryOption[] = [
+  { value: 'all', label: 'All', blurb: 'Every tutorial and workflow' },
+  { value: 'vfx', label: 'VFX', blurb: 'Compositing, cleanup and shot work' },
+  {
+    value: 'animations',
+    label: 'Animations',
+    blurb: 'Motion, retiming and character'
+  },
+  { value: 'ads', label: 'Ads', blurb: 'Product shots and campaign assets' }
+]
+
+export const realCategories = categoryOptions.filter(
+  (option): option is CategoryOption & { value: LearningCategory } =>
+    option.value !== 'all'
+)
+
+export const categoryLabel = (category: LearningCategory): string =>
+  realCategories.find((option) => option.value === category)?.label ?? category
+
+export const filterByCategory = (
+  category: CategoryFilter
+): readonly PrototypeTutorial[] =>
+  category === 'all'
+    ? prototypeTutorials
+    : prototypeTutorials.filter((tutorial) => tutorial.category === category)
+
+/** Featured item for the current filter — the global pick when visible, else the category's first. */
+export const featuredFor = (category: CategoryFilter): PrototypeTutorial => {
+  const pool = filterByCategory(category)
+  return pool.find((tutorial) => tutorial.id === FEATURED_ID) ?? pool[0]
+}

apps/website/src/components/ui/copyable-field/CopyableField.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
 import { Check, Copy } from '@lucide/vue'
 import { useClipboard } from '@vueuse/core'
 
-import { computed } from 'vue'
-
 // Interactive: the copy button is inert until its host island is hydrated.
 // Render under a `client:*` directive (e.g. `client:visible`) when the page
 // needs it to work.
@@ -14,8 +11,6 @@ const {
   copiedLabel = 'Copied'
 } = defineProps<{ value: string; copyLabel?: string; copiedLabel?: string }>()
 
-const multiline = computed(() => value.includes('\n'))
-
 const { copy, copied } = useClipboard({ copiedDuring: 2000 })
 
 function handleCopy() {
@@ -25,32 +20,15 @@ function handleCopy() {
 
 <template>
   <div
-    :class="
-      cn(
-        'bg-transparency-white-t4 border-primary-warm-gray flex gap-2 rounded-xl border px-4 py-3',
-        multiline ? 'items-start' : 'items-center'
-      )
-    "
+    class="bg-transparency-white-t4 border-primary-warm-gray flex items-center gap-2 rounded-xl border px-4 py-3"
   >
-    <span
-      :class="
-        cn(
-          'flex-1 font-mono text-xs text-primary-comfy-canvas',
-          multiline ? 'wrap-break-word whitespace-pre-line' : 'truncate'
-        )
-      "
-    >
+    <span class="flex-1 truncate font-mono text-xs text-primary-comfy-canvas">
       {{ value }}
     </span>
     <button
       type="button"
       :aria-label="copied ? copiedLabel : copyLabel"
-      :class="
-        cn(
-          'text-primary-warm-gray shrink-0 cursor-pointer transition-colors hover:text-primary-comfy-canvas',
-          multiline && 'mt-0.5'
-        )
-      "
+      class="text-primary-warm-gray shrink-0 cursor-pointer transition-colors hover:text-primary-comfy-canvas"
       @click="handleCopy"
     >
       <component :is="copied ? Check : Copy" class="size-4" />

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

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-
-import { externalLinks, getRoutes } from '../../config/routes'
-import { t } from '../../i18n/translations'
-import HeroBackdrop01 from '../blocks/HeroBackdrop01.vue'
-import Button from '../ui/button/Button.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const routes = computed(() => getRoutes(locale))
-
-const backdrop = {
-  type: 'video',
-  src: 'https://media.comfy.org/website/vfx/vfx_hero.mp4'
-} as const
-
-const mobileBackdrop = {
-  type: 'video',
-  src: 'https://media.comfy.org/website/vfx/vfx_hero-mobile.mp4'
-} as const
-</script>
-
-<template>
-  <HeroBackdrop01
-    tone="dark"
-    :backdrop="backdrop"
-    :mobile-backdrop="mobileBackdrop"
-    :title="t('vfx.hero.title', locale)"
-    :subtitle="t('vfx.hero.subtitle', locale)"
-  >
-    <div class="mt-10 flex flex-wrap gap-4">
-      <Button as="a" :href="routes.contact">
-        {{ t('vfx.cta.contactSales', locale) }}
-      </Button>
-      <Button as="a" :href="externalLinks.cloud" variant="outline">
-        {{ t('vfx.hero.tryNow', locale) }}
-      </Button>
-    </div>
-  </HeroBackdrop01>
-</template>

apps/website/src/components/vfx/TutorialsSection.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import type { Locale } from '../../i18n/translations'
-
-import { vfxTutorials } from '../../data/vfxTutorials'
-import { t } from '../../i18n/translations'
-import TutorialCard from '../common/TutorialCard.vue'
-import TutorialDetailDialog from '../common/TutorialDetailDialog.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const activeTutorialId = ref<string | null>(null)
-const activeTutorial = () =>
-  vfxTutorials.find((tutorial) => tutorial.id === activeTutorialId.value)
-</script>
-
-<template>
-  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
-    <h2
-      class="mb-6 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
-    >
-      {{ t('vfx.tutorials.heading', locale) }}
-    </h2>
-
-    <p
-      class="mx-auto mb-12 max-w-3xl text-center text-base text-primary-comfy-canvas lg:mb-16 lg:text-lg"
-    >
-      {{ t('vfx.tutorials.description', locale) }}
-    </p>
-
-    <ul
-      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
-    >
-      <li v-for="tutorial in vfxTutorials" :key="tutorial.id">
-        <TutorialCard
-          :tutorial="tutorial"
-          :locale="locale"
-          variant="overlay"
-          @play="activeTutorialId = tutorial.id"
-        />
-      </li>
-    </ul>
-
-    <TutorialDetailDialog
-      v-if="activeTutorial()"
-      :tutorial="activeTutorial()!"
-      :locale="locale"
-      @close="activeTutorialId = null"
-    />
-  </section>
-</template>

apps/website/src/composables/useCurrentPath.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { isHrefActive } from './useCurrentPath'
-
-describe('isHrefActive', () => {
-  it('matches the current page', () => {
-    expect(isHrefActive('/mcp', '/mcp')).toBe(true)
-  })
-
-  it('does not match other pages', () => {
-    expect(isHrefActive('/mcp', '/pricing')).toBe(false)
-  })
-
-  it('matches regardless of a trailing slash', () => {
-    expect(isHrefActive('/mcp', '/mcp/')).toBe(true)
-  })
-
-  it('ignores query and hash on the href', () => {
-    expect(isHrefActive('/mcp?ref=banner#setup', '/mcp')).toBe(true)
-  })
-
-  it('never matches an external href', () => {
-    expect(
-      isHrefActive('https://docs.comfy.org/agent-tools/cloud', '/mcp')
-    ).toBe(false)
-  })
-
-  it('never matches an empty href', () => {
-    expect(isHrefActive('', '/mcp')).toBe(false)
-  })
-})

apps/website/src/config/banner.ts

@@ -3,7 +3,6 @@ import type { Locale, TranslationKey } from '../i18n/translations'
 
 import { t } from '../i18n/translations'
 import { resolveRel } from '../utils/cta'
-import { localizeHref } from './routes'
 
 // The banner "CMS": a single typed config resolved through i18n at build time.
 // `isActive` is the master on/off switch (supersedes the old SHOW_ANNOUNCEMENT_BANNER).
@@ -74,7 +73,7 @@ export function getBannerData(
       : undefined,
     link: link
       ? {
-          href: localizeHref(link.href, locale),
+          href: link.href,
           title: t(link.titleKey, locale),
           target,
           rel: resolveRel({ target: target ?? '_self' }),

apps/website/src/config/pricing.ts

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

apps/website/src/config/routes.test.ts

@@ -1,23 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { localizeHref } from './routes'
-
-describe('localizeHref', () => {
-  it('prefixes an internal path for a non-default locale', () => {
-    expect(localizeHref('/mcp', 'zh-CN')).toBe('/zh-CN/mcp')
-  })
-
-  it('leaves the default locale unprefixed', () => {
-    expect(localizeHref('/mcp', 'en')).toBe('/mcp')
-  })
-
-  it('passes external URLs through unchanged', () => {
-    expect(
-      localizeHref('https://docs.comfy.org/agent-tools/cloud', 'zh-CN')
-    ).toBe('https://docs.comfy.org/agent-tools/cloud')
-  })
-
-  it('never prefixes locale-invariant routes', () => {
-    expect(localizeHref('/terms-of-service', 'zh-CN')).toBe('/terms-of-service')
-  })
-})

apps/website/src/config/routes.ts

@@ -14,7 +14,6 @@ const baseRoutes = {
   customers: '/customers',
   demos: '/demos',
   learning: '/learning',
-  vfx: '/learning/vfx',
   termsOfService: '/terms-of-service',
   enterpriseMsa: '/enterprise-msa',
   privacyPolicy: '/privacy-policy',
@@ -48,26 +47,13 @@ const LOCALE_INVARIANT_ROUTE_KEYS = new Set<keyof Routes>([
   'enterpriseMsa'
 ])
 
-const LOCALE_INVARIANT_PATHS = new Set<string>(
-  [...LOCALE_INVARIANT_ROUTE_KEYS].map((key) => baseRoutes[key])
-)
-
-/**
- * Prefix an internal path with the locale (`/mcp` → `/zh-CN/mcp`). External
- * URLs and locale-invariant routes pass through unchanged.
- */
-export function localizeHref(href: string, locale: Locale = 'en'): string {
-  if (locale === 'en' || !href.startsWith('/')) return href
-  if (LOCALE_INVARIANT_PATHS.has(href)) return href
-  return `/${locale}${href}`
-}
-
 export function getRoutes(locale: Locale = 'en'): Routes {
   if (locale === 'en') return baseRoutes
+  const prefix = `/${locale}`
   return Object.fromEntries(
-    Object.entries(baseRoutes).map(([key, path]) => [
-      key,
-      localizeHref(path, locale)
+    Object.entries(baseRoutes).map(([k, v]) => [
+      k,
+      LOCALE_INVARIANT_ROUTE_KEYS.has(k as keyof Routes) ? v : `${prefix}${v}`
     ])
   ) as unknown as Routes
 }
@@ -83,19 +69,15 @@ 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',
+  mcpServer: 'https://cloud.comfy.org/mcp',
   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/data/clientLogos.ts

@@ -1,20 +0,0 @@
-import type { LogoItem } from '../components/blocks/LogosAll01.vue'
-
-const names = [
-  'Amazon Studios',
-  'Apple',
-  'Autodesk',
-  'Harman',
-  'Hp',
-  'Lucid',
-  'Netflix',
-  'Nike',
-  'Pixomondo',
-  'Tencent',
-  'Ubisoft'
-]
-
-export const clientLogos: readonly LogoItem[] = names.map((name) => ({
-  src: `/icons/clients/${name}.svg`,
-  alt: name
-}))

apps/website/src/data/drops.ts

@@ -72,24 +72,6 @@ export const drops: readonly Drop[] = [
       href: { en: '/download', 'zh-CN': '/zh-CN/download' }
     }
   },
-  {
-    id: 'comfy-mcp',
-    badge: NEW_BADGE,
-    category: CLOUD,
-    media: imageFor('Drops_2x2card_MCP.jpg', {
-      en: 'Comfy MCP',
-      'zh-CN': 'Comfy MCP'
-    }),
-    title: { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
-    description: {
-      en: 'The full power of ComfyUI from anywhere — no setup, no GPU required.',
-      'zh-CN': '随时随地体验 ComfyUI 的全部能力 — 无需配置，无需 GPU。'
-    },
-    cta: {
-      label: EXPLORE,
-      href: { en: '/mcp', 'zh-CN': '/zh-CN/mcp' }
-    }
-  },
   {
     id: 'app-mode',
     badge: NEW_BADGE,
@@ -130,6 +112,24 @@ export const drops: readonly Drop[] = [
       href: { en: '/api', 'zh-CN': '/zh-CN/api' }
     }
   },
+  {
+    id: 'comfy-mcp',
+    badge: NEW_BADGE,
+    category: CLOUD,
+    media: imageFor('Drops_2x2card_MCP.jpg', {
+      en: 'Comfy MCP',
+      'zh-CN': 'Comfy MCP'
+    }),
+    title: { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
+    description: {
+      en: 'The full power of ComfyUI from anywhere — no setup, no GPU required.',
+      'zh-CN': '随时随地体验 ComfyUI 的全部能力 — 无需配置，无需 GPU。'
+    },
+    cta: {
+      label: EXPLORE,
+      href: { en: '/mcp', 'zh-CN': '/zh-CN/mcp' }
+    }
+  },
   {
     id: 'community-workflows',
     category: COMMUNITY,

apps/website/src/data/learningTutorials.ts

@@ -1,10 +1,28 @@
-import type { Tutorial } from '../components/common/TutorialCard.vue'
-import type { TranslationKey } from '../i18n/translations'
+import type { VideoTrack } from '../components/common/VideoPlayer.vue'
+import type { LocalizedText, TranslationKey } from '../i18n/translations'
+
+export interface LearningTutorial {
+  id: string
+  tags: readonly TranslationKey[]
+  title: LocalizedText
+  videoSrc: string
+  href?: string
+  poster?: string
+  caption?: readonly VideoTrack[]
+  posterTime?: number
+}
+
+const DEFAULT_POSTER_TIME_SECONDS = 1
 
 const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
 const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
 
-export const learningTutorials: readonly Tutorial[] = [
+export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
+  tutorial.poster
+    ? tutorial.poster
+    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
+
+export const learningTutorials: readonly LearningTutorial[] = [
   {
     id: 'cleanplate_walkthrough_v03',
     title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },

apps/website/src/data/vfxTutorials.ts

@@ -1,129 +0,0 @@
-import type { Tutorial } from '../components/common/TutorialCard.vue'
-import type { TranslationKey } from '../i18n/translations'
-
-const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
-const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
-
-const dougHoman: Tutorial['author'] = {
-  name: 'Doug Homan',
-  avatarSrc: 'https://media.comfy.org/website/authors/doug-hogan.jpeg'
-}
-
-export const vfxTutorials: readonly Tutorial[] = [
-  {
-    id: 'skyreplacement_smaller_v06',
-    title: { en: 'Sky Replacement', 'zh-CN': '天空替换' },
-    videoSrc:
-      'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06_thumbnail.jpg',
-    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  },
-  {
-    id: 'cleanplate_walkthrough_v03',
-    title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },
-    videoSrc:
-      'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03_thumbnail.jpg',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    href: 'https://comfy.org/workflows/8f2cf0df5da6-8f2cf0df5da6/',
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  },
-  {
-    id: 'deaging_workflow_v03',
-    title: { en: 'Deaging Workflow', 'zh-CN': '减龄工作流' },
-    videoSrc: 'https://media.comfy.org/website/vfx/deaging_workflow_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/deaging_workflow_v03_thumbnail.jpg',
-    href: 'https://comfy.org/workflows/93f286fbc2c8-93f286fbc2c8/',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/deaging_workflow_v03_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  },
-  {
-    id: 'frame_adjustments_demo_v03',
-    title: { en: 'Frame Adjustments Demo', 'zh-CN': '帧调整演示' },
-    videoSrc:
-      'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  },
-  {
-    id: 'mattes_and_utilities_v03',
-    title: { en: 'Mattes and Utilities', 'zh-CN': '遮罩与实用工具' },
-    videoSrc:
-      'https://media.comfy.org/website/vfx/mattes_and_utilities_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/mattes_and_utilities_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=be0889296f65',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/mattes_and_utilities_v03_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  },
-  {
-    id: 'seedance_demo_comfyui_v03',
-    title: {
-      en: 'Seedance Demo (ComfyUI)',
-      'zh-CN': 'Seedance 演示（ComfyUI）'
-    },
-    videoSrc:
-      'https://media.comfy.org/website/vfx/seedance_demo_comfyui_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/vfx/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
-    caption: [
-      {
-        src: 'https://media.comfy.org/website/vfx/seedance_demo_comfyui_v03_vtt.en.vtt',
-        kind: 'captions',
-        srclang: 'en',
-        label: 'English'
-      }
-    ],
-    tags: [partnerNodesTag, imageToVideoTag],
-    author: dougHoman
-  }
-] as const

apps/website/src/i18n/translations.ts

@@ -1546,42 +1546,6 @@ const translations = {
   },
   'learning.events.getNotified': { en: 'Get Notified', 'zh-CN': '获取通知' },
 
-  // VfxHeroSection
-  'vfx.hero.title': {
-    en: 'ComfyUI for\nVisual Effects',
-    'zh-CN': '面向视觉特效的\nComfyUI'
-  },
-  'vfx.hero.subtitle': {
-    en: 'From ideation to production, ComfyUI gives VFX teams faster workflows and more controlled output — so what ships looks exactly like what you envisioned.',
-    'zh-CN':
-      '从创意到成片，ComfyUI 为视觉特效团队带来更快的工作流与更可控的产出——让最终交付与你的构想分毫不差。'
-  },
-  'vfx.hero.tryNow': {
-    en: 'Try Now',
-    'zh-CN': '立即体验'
-  },
-
-  // VfxTutorialsSection
-  'vfx.tutorials.heading': {
-    en: 'See What’s Possible',
-    'zh-CN': '见证无限可能'
-  },
-  'vfx.tutorials.description': {
-    en: 'From concept, storyboarding to texture generation and compositing references — discover workflows built for every stage of VFX production. New workflows added regularly.',
-    'zh-CN':
-      '从概念设计、分镜脚本到纹理生成与合成参考——探索覆盖视觉特效制作各个环节的工作流。新工作流持续上新。'
-  },
-
-  // VfxCallToActionSection
-  'vfx.cta.heading': {
-    en: 'Bring your ideas to life with ComfyUI, exactly as intended.',
-    'zh-CN': '用 ComfyUI 将创意变为现实，一切尽如所想。'
-  },
-  'vfx.cta.contactSales': {
-    en: 'Contact Sales',
-    'zh-CN': '联系销售'
-  },
-
   // GalleryHeroSection
   'gallery.label': { en: 'GALLERY', 'zh-CN': '画廊' },
   'gallery.heroTitle.before': {
@@ -1908,10 +1872,6 @@ const translations = {
     en: 'VIEW DOCS',
     'zh-CN': '查看文档'
   },
-  'mcp.hero.installMcp': {
-    en: 'INSTALL MCP',
-    'zh-CN': '安装 MCP'
-  },
   'mcp.hero.runWorkflow': {
     en: 'RUN A WORKFLOW',
     'zh-CN': '运行工作流'
@@ -1949,27 +1909,21 @@ const translations = {
   },
   'mcp.setup.step1.label': { en: 'STEP 1', 'zh-CN': '第 1 步' },
   'mcp.setup.step1.title': {
-    en: 'Ask your agent to install Comfy MCP',
-    'zh-CN': '让你的智能体安装 Comfy MCP'
-  },
-  'mcp.setup.step1.command': {
-    en: 'Help me install Comfy MCP.\nFollow the setup guide at {url}',
-    'zh-CN': '帮我安装 Comfy MCP。\n请按照 {url} 上的设置指南操作。'
+    en: 'Copy the MCP URL',
+    'zh-CN': '复制 MCP URL'
   },
   'mcp.setup.step1.description': {
-    en: 'Paste this into Claude, Cursor, Codex, or any MCP-compatible agent. It reads the docs and adds the connector for you.',
-    'zh-CN':
-      '将它粘贴到 Claude、Cursor、Codex 或任意兼容 MCP 的智能体中。它会读取文档并为你添加连接器。'
+    en: "Click the copy button below. You'll paste it into your client in the next step.",
+    'zh-CN': '点击下方的复制按钮，下一步将其粘贴到你的客户端中。'
   },
   'mcp.setup.step2.label': { en: 'STEP 2', 'zh-CN': '第 2 步' },
   'mcp.setup.step2.title': {
-    en: 'Or add it by hand',
-    'zh-CN': '或手动添加'
+    en: 'Add the connector',
+    'zh-CN': '添加连接器'
   },
   'mcp.setup.step2.description': {
-    en: 'Prefer manual setup? Add Comfy Cloud as a custom connector with the MCP URL. The docs cover every client.',
-    'zh-CN':
-      '想手动配置？用 MCP URL 将 Comfy Cloud 添加为自定义连接器。文档涵盖各类客户端。'
+    en: 'Name it Comfy Cloud and paste the URL. The docs below cover every client.',
+    'zh-CN': '将其命名为 Comfy Cloud 并粘贴 URL。下方文档涵盖各类客户端。'
   },
   'mcp.setup.step2.cta': {
     en: 'COMFY CLOUD MCP DOCS',
@@ -2226,13 +2180,6 @@ const translations = {
   'nav.ctaCloudPrefix': { en: 'LAUNCH', 'zh-CN': '启动' },
   'nav.ctaCloudCore': { en: 'CLOUD', 'zh-CN': '云端' },
   'nav.home': { en: 'Comfy home', 'zh-CN': 'Comfy 首页' },
-  'breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
-  'breadcrumb.about': { en: 'About Us', 'zh-CN': '关于我们' },
-  'breadcrumb.contact': { en: 'Contact', 'zh-CN': '联系我们' },
-  'breadcrumb.download': { en: 'Download', 'zh-CN': '下载' },
-  'breadcrumb.careers': { en: 'Careers', 'zh-CN': '招聘' },
-  'breadcrumb.pricing': { en: 'Pricing', 'zh-CN': '定价' },
-  'breadcrumb.supportedNodes': { en: 'Supported Nodes', 'zh-CN': '支持的节点' },
   'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
   'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
   'nav.close': { en: 'Close', 'zh-CN': '关闭' },
@@ -4104,6 +4051,7 @@ const translations = {
     en: 'This page is being redesigned. Check back soon.',
     'zh-CN': '此页面正在重新设计中，请稍后再来。'
   },
+  'demos.breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
   'demos.breadcrumb.demos': { en: 'Demos', 'zh-CN': '演示' },
 
   'customers.story.whatsNext': {
@@ -4199,6 +4147,10 @@ const translations = {
     en: "Run the world's leading AI models in ComfyUI",
     'zh-CN': '在 ComfyUI 中运行世界领先的 AI 模型'
   },
+  'models.breadcrumb.home': {
+    en: 'Home',
+    'zh-CN': '首页'
+  },
   'models.breadcrumb.models': {
     en: 'Supported Models',
     'zh-CN': '支持的模型'

apps/website/src/layouts/BaseLayout.astro

@@ -7,17 +7,14 @@ import SiteFooter from '../components/common/SiteFooter.vue'
 import HeaderMain from '../components/common/HeaderMain/HeaderMain.vue'
 import AnnouncementBanner from '../templates/drops/AnnouncementBanner.vue'
 import { bannerConfig, getBannerData } from '../config/banner'
-import { isHrefActive } from '../composables/useCurrentPath'
 import {
   BANNER_DISMISS_ATTR,
   BANNER_STORAGE_KEY,
   createBannerVersion,
   evaluateBannerVisibility
 } from '../utils/banner'
+import { escapeJsonLd } from '../utils/escapeJsonLd'
 import { fetchGitHubStars, formatStarCount } from '../utils/github'
-import { buildPageGraph, pageContext } from '../utils/jsonLd'
-import type { Crumb, JsonLdNode, WebPageType } from '../utils/jsonLd'
-import JsonLdGraph from '../components/common/JsonLdGraph.astro'
 
 interface Props {
   title: string
@@ -25,10 +22,6 @@ interface Props {
   keywords?: string[]
   ogImage?: string
   noindex?: boolean
-  pageType?: WebPageType
-  breadcrumbs?: Crumb[]
-  mainEntityId?: string
-  extraJsonLd?: (JsonLdNode | null | undefined)[]
 }
 
 const {
@@ -37,54 +30,52 @@ const {
   keywords,
   ogImage = 'https://media.comfy.org/website/comfy.webp',
   noindex = false,
-  pageType,
-  breadcrumbs,
-  mainEntityId,
-  extraJsonLd,
 } = Astro.props
 
 const keywordsContent = keywords && keywords.length > 0 ? keywords.join(', ') : undefined
 
-const { siteUrl, locale, url } = pageContext(
-  Astro.site,
-  Astro.url.pathname,
-  Astro.currentLocale,
-)
-const canonicalURL = new URL(url)
-const ogImageURL = new URL(ogImage, Astro.site ?? 'https://comfy.org')
+const siteBase = Astro.site ?? 'https://comfy.org'
+const canonicalURL = new URL(Astro.url.pathname, siteBase)
+const ogImageURL = new URL(ogImage, siteBase)
+const rawLocale = Astro.currentLocale ?? 'en'
+const locale: Locale = rawLocale === 'zh-CN' ? 'zh-CN' : 'en'
 const rawStars = await fetchGitHubStars('Comfy-Org', 'ComfyUI')
 const githubStars = rawStars ? formatStarCount(rawStars) : ''
 
 // Announcement banner — build-time visibility gate + content-hash version key.
-// A promo never advertises the page you are already on, so the banner is
-// suppressed when its CTA points at the current path.
 const bannerData = getBannerData(bannerConfig, locale)
-const bannerVisible =
-  evaluateBannerVisibility(bannerConfig, {
-    currentLocale: locale,
-    currentSection: 'sitewide',
-    now: new Date(),
-  }) && !isHrefActive(bannerData.link?.href ?? '', Astro.url.pathname)
+const bannerVisible = evaluateBannerVisibility(bannerConfig, {
+  currentLocale: locale,
+  currentSection: 'sitewide',
+  now: new Date(),
+})
 const bannerVersion = createBannerVersion(bannerData, locale)
 
 const gtmId = 'GTM-NP9JM6K7'
 const gtmEnabled = import.meta.env.PROD
 
-const structuredData = noindex
-  ? undefined
-  : buildPageGraph(
-      { siteUrl, locale },
-      {
-        url,
-        name: title,
-        description,
-        imageUrl: ogImageURL.href,
-        type: pageType,
-        crumbs: breadcrumbs,
-        mainEntityId,
-      },
-      ...(extraJsonLd ?? []),
-    )
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'Comfy Org',
+  url: 'https://comfy.org',
+  logo: 'https://comfy.org/icons/logomark.svg',
+  sameAs: [
+    'https://github.com/comfyanonymous/ComfyUI',
+    'https://discord.gg/comfyorg',
+    'https://x.com/comaboratory',
+    'https://reddit.com/r/comfyui',
+    'https://linkedin.com/company/comfyorg',
+    'https://instagram.com/comfyorg',
+  ],
+}
+
+const websiteJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'WebSite',
+  name: 'Comfy',
+  url: 'https://comfy.org',
+}
 ---
 
 <!doctype html>
@@ -126,7 +117,10 @@ const structuredData = noindex
     <meta name="twitter:image" content={ogImageURL.href} />
 
     <!-- Structured Data -->
-    {structuredData && <JsonLdGraph graph={structuredData} />}
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(organizationJsonLd)} />
+    <script is:inline type="application/ld+json" set:html={escapeJsonLd(websiteJsonLd)} />
+    <slot name="head" />
+
     <slot name="head" />
 
     <!-- Google Tag Manager -->
@@ -146,6 +140,7 @@ const structuredData = noindex
     )}
 
     <ClientRouter />
+    <slot name="head" />
 
     <!-- Hide an already-dismissed announcement banner before first paint (no flash/shift). -->
     {bannerVisible && (

apps/website/src/pages/about.astro

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

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

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

apps/website/src/pages/careers.astro

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

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

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

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

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

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

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

apps/website/src/pages/contact.astro

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

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

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

apps/website/src/pages/download.astro

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

apps/website/src/pages/index.astro

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

apps/website/src/pages/learning-prototype.astro

@@ -0,0 +1,25 @@
+---
+// PROTOTYPE ROUTE — throwaway. Three redesign variants of the /learning page
+// (category filters vfx/animations/ads, featured element, category-labelled
+// cards), switchable via ?variant=a|b|c. The real /learning page is untouched.
+// Delete this file once a variant has been chosen and folded into /learning.
+import BaseLayout from '../layouts/BaseLayout.astro'
+import LearningRedesignPrototype from '../components/prototype/learning-redesign/LearningRedesignPrototype.vue'
+import CallToActionSection from '../components/common/CallToActionSection.vue'
+import { getRoutes } from '../config/routes'
+import { externalLinks } from '../config/routes'
+
+const routes = getRoutes('en')
+---
+
+<BaseLayout title="Learning (Prototype) — Comfy">
+  <LearningRedesignPrototype client:only="vue" />
+  <CallToActionSection
+    headingKey="learning.cta.heading"
+    primaryLabelKey="learning.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/learning.astro

@@ -0,0 +1,27 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import HeroSection from '../components/learning/HeroSection.vue'
+import FeaturedWorkflowSection from '../components/learning/FeaturedWorkflowSection.vue'
+import TutorialsSection from '../components/learning/TutorialsSection.vue'
+import CallToActionSection from '../components/common/CallToActionSection.vue'
+// import EventsSection from '../components/common/EventsSection.vue'
+import { getRoutes } from '../config/routes'
+import { externalLinks } from '../config/routes'
+// import { learningEvents } from '../data/events'
+
+const routes = getRoutes('en')
+---
+
+<BaseLayout title="Learning — Comfy">
+  <HeroSection client:load />
+  <FeaturedWorkflowSection client:visible />
+  <TutorialsSection client:visible />
+  <CallToActionSection
+    headingKey="learning.cta.heading"
+    primaryLabelKey="learning.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/learning/vfx.astro

@@ -1,25 +0,0 @@
----
-import BaseLayout from '../../layouts/BaseLayout.astro'
-import HeroSection from '../../components/vfx/HeroSection.vue'
-import TutorialsSection from '../../components/vfx/TutorialsSection.vue'
-import SocialProofBarSection from '../../components/common/SocialProofBarSection.vue'
-import CallToActionSection from '../../components/common/CallToActionSection.vue'
-import { getRoutes } from '../../config/routes'
-import { externalLinks } from '../../config/routes'
-
-const routes = getRoutes('en')
----
-
-<BaseLayout title="VFX — Comfy">
-  <HeroSection client:load />
-  <SocialProofBarSection client:visible />
-  <TutorialsSection client:visible />
-  <CallToActionSection
-    headingKey="vfx.cta.heading"
-    primaryLabelKey="vfx.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,19 +4,19 @@ import HeroSection from '../../components/learning/HeroSection.vue'
 import FeaturedWorkflowSection from '../../components/learning/FeaturedWorkflowSection.vue'
 import TutorialsSection from '../../components/learning/TutorialsSection.vue'
 import CallToActionSection from '../../components/common/CallToActionSection.vue'
-// import EventsSection from '../../components/common/EventsSection.vue'
-import { getRoutes } from '../../config/routes'
-import { externalLinks } from '../../config/routes'
-// import { learningEvents } from '../../data/events'
+import EventsSection from '../../components/common/EventsSection.vue'
+import { getRoutes, externalLinks } from '../../config/routes'
+import { learningEvents } from '../../data/events'
 
-const routes = getRoutes('en')
+const routes = getRoutes('zh-CN')
 ---
 
-<BaseLayout title="Learning — Comfy">
-  <HeroSection client:load />
-  <FeaturedWorkflowSection client:visible />
-  <TutorialsSection client:visible />
+<BaseLayout title="学习 — Comfy">
+  <HeroSection locale="zh-CN" client:load />
+  <FeaturedWorkflowSection locale="zh-CN" client:visible />
+  <TutorialsSection locale="zh-CN" client:visible />
   <CallToActionSection
+    locale="zh-CN"
     headingKey="learning.cta.heading"
     primaryLabelKey="learning.cta.contactSales"
     primaryHref={routes.contact}

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

@@ -1,27 +0,0 @@
----
-import BaseLayout from '../../../layouts/BaseLayout.astro'
-import HeroSection from '../../../components/learning/HeroSection.vue'
-import FeaturedWorkflowSection from '../../../components/learning/FeaturedWorkflowSection.vue'
-import TutorialsSection from '../../../components/learning/TutorialsSection.vue'
-import CallToActionSection from '../../../components/common/CallToActionSection.vue'
-import EventsSection from '../../../components/common/EventsSection.vue'
-import { getRoutes, externalLinks } from '../../../config/routes'
-import { learningEvents } from '../../../data/events'
-
-const routes = getRoutes('zh-CN')
----
-
-<BaseLayout title="学习 — Comfy">
-  <HeroSection locale="zh-CN" client:load />
-  <FeaturedWorkflowSection locale="zh-CN" client:visible />
-  <TutorialsSection locale="zh-CN" client:visible />
-  <CallToActionSection
-    locale="zh-CN"
-    headingKey="learning.cta.heading"
-    primaryLabelKey="learning.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

apps/website/src/pages/zh-CN/learning/vfx.astro

@@ -1,25 +0,0 @@
----
-import BaseLayout from '../../../layouts/BaseLayout.astro'
-import HeroSection from '../../../components/vfx/HeroSection.vue'
-import TutorialsSection from '../../../components/vfx/TutorialsSection.vue'
-import SocialProofBarSection from '../../../components/common/SocialProofBarSection.vue'
-import CallToActionSection from '../../../components/common/CallToActionSection.vue'
-import { getRoutes, externalLinks } from '../../../config/routes'
-
-const routes = getRoutes('zh-CN')
----
-
-<BaseLayout title="视效 — Comfy">
-  <HeroSection locale="zh-CN" client:load />
-  <SocialProofBarSection client:visible />
-  <TutorialsSection locale="zh-CN" client:visible />
-  <CallToActionSection
-    locale="zh-CN"
-    headingKey="vfx.cta.heading"
-    primaryLabelKey="vfx.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

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

@@ -17,7 +17,7 @@ const ctas = mcpCtas(locale)
     badge-text="MCP"
     :title="t('mcp.hero.heading', locale)"
     :subtitle="t('mcp.hero.subtitle', locale)"
-    :primary-cta="ctas.installMcp"
+    :primary-cta="ctas.runWorkflow"
     :secondary-cta="ctas.docs"
   >
     <template #media>

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

@@ -17,10 +17,7 @@ const cards: FeatureCard[] = [
     description: t('mcp.setup.step1.description', locale),
     action: {
       type: 'code',
-      value: t('mcp.setup.step1.command', locale).replace(
-        '{url}',
-        externalLinks.docsMcp
-      )
+      value: externalLinks.mcpServer
     }
   },
   {
@@ -56,8 +53,6 @@ const cards: FeatureCard[] = [
 
 <template>
   <FeatureGrid01
-    id="setup"
-    class="scroll-mt-24 lg:scroll-mt-36"
     :eyebrow="t('mcp.setup.label', locale)"
     :heading="t('mcp.setup.heading', locale)"
     :subtitle="t('mcp.setup.subtitle', locale)"

apps/website/src/templates/mcp/ctas.ts

@@ -9,25 +9,16 @@ export interface McpCta {
 }
 
 /**
- * Calls-to-action for the MCP page: view the docs, jump to the on-page setup
- * steps, or run a workflow in the cloud. The hero leads with install + docs;
- * the "how it works" section pairs run-a-workflow with docs.
+ * The two calls-to-action shared by the MCP hero and "how it works" sections:
+ * view the docs, or run a workflow in the cloud.
  */
-export function mcpCtas(locale: Locale): {
-  docs: McpCta
-  installMcp: McpCta
-  runWorkflow: McpCta
-} {
+export function mcpCtas(locale: Locale): { docs: McpCta; runWorkflow: McpCta } {
   return {
     docs: {
       label: t('mcp.hero.viewDocs', locale),
       href: externalLinks.docsMcp,
       target: '_blank'
     },
-    installMcp: {
-      label: t('mcp.hero.installMcp', locale),
-      href: '#setup'
-    },
     runWorkflow: {
       label: t('mcp.hero.runWorkflow', locale),
       href: getRoutes(locale).cloud

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

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

apps/website/src/utils/jsonLd.ts

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

browser_tests/assets/missing/missing_media_cloud_output_video_subfolder.json

@@ -1,37 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadVideo",
-      "pos": [50, 120],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "VIDEO",
-          "type": "VIDEO",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadVideo"
-      },
-      "widgets_values": ["video/cloud-video-hash.mp4 [output]", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/helpers/CloudWorkspaceMockHelper.ts

@@ -11,7 +11,6 @@ import {
   WORKSPACE_FEATURE_FLAG
 } from '@e2e/fixtures/data/cloudWorkspace'
 import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
-import { mockWorkspaceTokenMint } from '@e2e/fixtures/utils/workspaceMocks'
 
 interface RoleChangeRequest {
   url: string
@@ -93,7 +92,9 @@ export class CloudWorkspaceMockHelper {
     await page.route('**/api/auth/session', (r) =>
       r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
     )
-    await mockWorkspaceTokenMint(page, TEAM_WORKSPACE)
+    await page.route('**/api/auth/token', (r) =>
+      r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
+    )
     await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
 
     await page.route('**/api/workspaces', (r) =>

browser_tests/fixtures/utils/workspaceMocks.ts

@@ -33,27 +33,6 @@ export function member(
   }
 }
 
-/**
- * Stub `POST /api/auth/token` with a valid workspace token for `ws`. Without
- * this the mint fails and auth cannot resolve the active workspace.
- */
-export async function mockWorkspaceTokenMint(
-  page: Page,
-  ws: Pick<WorkspaceWithRole, 'id' | 'name' | 'type' | 'role'>
-) {
-  await page.route('**/api/auth/token', (r) =>
-    r.fulfill(
-      jsonRoute({
-        token: 'mock-workspace-token',
-        expires_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
-        workspace: { id: ws.id, name: ws.name, type: ws.type },
-        role: ws.role,
-        permissions: []
-      })
-    )
-  )
-}
-
 /**
  * Stub the workspace resolution + members list so the cloud app boots into the
  * given workspace with the given roster (drives the original-owner gate).
@@ -67,7 +46,17 @@ export async function mockWorkspace(
     if (route.request().method() !== 'GET') return route.fallback()
     await route.fulfill(jsonRoute({ workspaces: [ws] }))
   })
-  await mockWorkspaceTokenMint(page, ws)
+  await page.route('**/api/auth/token', (r) =>
+    r.fulfill(
+      jsonRoute({
+        token: 'mock-workspace-token',
+        expires_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+        workspace: { id: ws.id, name: ws.name, type: ws.type },
+        role: ws.role,
+        permissions: []
+      })
+    )
+  )
   await page.route('**/api/workspace/members**', (r) =>
     r.fulfill(
       jsonRoute({

browser_tests/tests/billingFacadeConsumers.spec.ts

@@ -11,10 +11,6 @@ import type {
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
 import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
-import {
-  mockWorkspaceTokenMint,
-  workspace
-} from '@e2e/fixtures/utils/workspaceMocks'
 
 /**
  * Billing facade consumers — FE-933 (B3) regression.
@@ -85,7 +81,6 @@ async function mockCloudBoot(
   await page.route('**/api/auth/session', (r) =>
     r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
   )
-  await mockWorkspaceTokenMint(page, workspace('personal', 'owner'))
   await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
 
   // Single personal workspace.

browser_tests/tests/cloudSecrets.spec.ts

@@ -1,279 +0,0 @@
-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)
-  })
-})

browser_tests/tests/dialogs/creditsTile.spec.ts

@@ -7,10 +7,6 @@ import type { BillingStatusResponse } from '@/platform/workspace/api/workspaceAp
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { mockSystemStats } from '@e2e/fixtures/data/systemStats'
 import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
-import {
-  mockWorkspaceTokenMint,
-  workspace
-} from '@e2e/fixtures/utils/workspaceMocks'
 
 // Drives a raw `page` (not the `comfyPage` fixture) so the cloud app boots
 // against fully mocked endpoints; `comfyPage` would try to reach the OSS
@@ -101,7 +97,6 @@ async function mockCloudBoot(page: Page) {
   await page.route('**/api/auth/session', (r) =>
     r.fulfill(jsonRoute({ token: 'mock-workspace-token' }))
   )
-  await mockWorkspaceTokenMint(page, workspace('personal', 'owner'))
   await page.route('**/releases**', (r) => r.fulfill(jsonRoute([])))
 
   // Single personal workspace.

browser_tests/tests/previewAsText.spec.ts

@@ -1,13 +1,7 @@
-import { mergeTests } from '@playwright/test'
-
 import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-
-const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Preview as Text node', () => {
   test('does not include preview widget values in the API prompt', async ({
@@ -45,34 +39,4 @@ test.describe('Preview as Text node', () => {
     expect(previewEntry!.inputs).not.toHaveProperty('preview_text')
     expect(previewEntry!.inputs).not.toHaveProperty('previewMode')
   })
-
-  wstest(
-    'restoring workflow restores state',
-    { tag: '@vue-nodes' },
-    async ({ comfyPage, getWebSocket }) => {
-      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-
-      await comfyPage.menu.topbar.newWorkflowButton.click()
-      await comfyPage.searchBoxV2.addNode('Preview as Text')
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Preview as Text')
-      const preview = node.root.locator('textarea')
-
-      await test.step('node previews execution result', async () => {
-        const id = await comfyPage.vueNodes.getNodeIdByTitle('Preview as Text')
-        execution.executed('', id, { text: 'massive fennec ears' })
-        await expect(preview).toHaveValue('massive fennec ears')
-      })
-
-      await test.step('swap to a different workflow and back', async () => {
-        await comfyPage.menu.topbar.getTab(0).click()
-        await expect(node.root).toBeHidden()
-        await comfyPage.menu.topbar.getTab(1).click()
-        await expect(node.root).toBeVisible()
-      })
-
-      await expect(preview, 'previous output is restored').toHaveValue(
-        'massive fennec ears'
-      )
-    }
-  )
 })

browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts

@@ -1,11 +1,6 @@
 import { expect, mergeTests } from '@playwright/test'
 import type { Page, Route } from '@playwright/test'
-import type {
-  Asset,
-  GetAllSettingsResponse,
-  GetSettingByIdResponse,
-  ListAssetsResponse
-} from '@comfyorg/ingest-types'
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
 
 import {
   assetRequestIncludesTag,
@@ -13,7 +8,6 @@ import {
 } from '@e2e/fixtures/assetApiFixture'
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import type { WorkspaceStore } from '@e2e/types/globals'
 import {
   routeObjectInfoFromSetupApi,
   setComboInputOptions
@@ -29,11 +23,10 @@ import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 const ossTest = mergeTests(comfyPageFixture, jobsRouteFixture)
 const outputHash =
   '147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png'
-const outputVideoHash = 'cloud-video-hash.mp4'
 const plainVideoFileName = 'plain_video.mp4'
 const graphDropPosition = { x: 500, y: 300 }
-const missingMediaObservationMs = 1_000
-const missingMediaPollMs = 100
+const missingMediaUploadObservationMs = 1_000
+const missingMediaUploadPollMs = 100
 const emptyMediaLoaderNodes = [
   {
     nodeType: 'LoadImage',
@@ -67,18 +60,6 @@ const cloudOutputAsset: Asset & { hash?: string } = {
   last_access_time: '2026-05-01T00:00:00Z'
 }
 
-const cloudOutputVideoAsset: Asset & { hash?: string } = {
-  id: 'test-output-video-hash-001',
-  name: 'ComfyUI_00001_.mp4',
-  hash: outputVideoHash,
-  size: 4_194_304,
-  mime_type: 'video/mp4',
-  tags: ['output'],
-  created_at: '2026-05-01T00:00:00Z',
-  updated_at: '2026-05-01T00:00:00Z',
-  last_access_time: '2026-05-01T00:00:00Z'
-}
-
 const cloudUploadedVideoAsset: Asset & { hash?: string } = {
   id: 'test-uploaded-video-001',
   name: plainVideoFileName,
@@ -111,21 +92,10 @@ interface CloudUploadAssetState {
 
 async function routeCloudBootstrapApis(page: Page) {
   await page.route('**/api/settings**', async (route) => {
-    const completedSurveySetting: GetSettingByIdResponse = {
-      value: { usage: 'personal' }
-    }
-    const allSettings: GetAllSettingsResponse = {}
-    const body = route
-      .request()
-      .url()
-      .includes('/api/settings/onboarding_survey')
-      ? completedSurveySetting
-      : allSettings
-
     await route.fulfill({
       status: 200,
       contentType: 'application/json',
-      body: JSON.stringify(body)
+      body: JSON.stringify({})
     })
   })
   await page.route('**/api/userdata**', async (route) => {
@@ -151,10 +121,7 @@ async function routeCloudBootstrapApis(page: Page) {
   })
 }
 
-const cloudOutputTest = createCloudAssetsFixture([
-  cloudOutputAsset,
-  cloudOutputVideoAsset
-]).extend({
+const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset]).extend({
   page: async ({ page }, use) => {
     await routeCloudBootstrapApis(page)
     const unrouteObjectInfo = await routeObjectInfoFromSetupApi(page)
@@ -258,33 +225,6 @@ function getErrorOverlay(comfyPage: ComfyPage) {
   return comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
 }
 
-function isOutputAssetsRequest(url: string) {
-  return url.includes('/api/assets') && assetRequestIncludesTag(url, 'output')
-}
-
-async function waitForOutputAssetsResponse(comfyPage: ComfyPage) {
-  await comfyPage.page.waitForResponse(
-    (response) =>
-      response.status() === 200 && isOutputAssetsRequest(response.url())
-  )
-}
-
-async function getCachedMissingMediaWarningNames(
-  comfyPage: ComfyPage
-): Promise<string[] | null> {
-  return await comfyPage.page.evaluate(() => {
-    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-      .activeWorkflow
-    if (!workflow) return null
-
-    return (
-      workflow.pendingWarnings?.missingMediaCandidates?.map(
-        (candidate) => candidate.name
-      ) ?? []
-    )
-  })
-}
-
 async function expectNoErrorsTab(comfyPage: ComfyPage) {
   await expect(getErrorOverlay(comfyPage)).toBeHidden()
 
@@ -387,31 +327,25 @@ async function expectLoadVideoUploading(comfyPage: ComfyPage) {
     .toBe(true)
 }
 
-async function expectNoMissingMediaForObservationWindow(comfyPage: ComfyPage) {
+async function expectNoMissingMediaDuringUpload(comfyPage: ComfyPage) {
   await comfyPage.nextFrame()
   await comfyPage.nextFrame()
 
   let sawErrorOverlay = false
-  let sawCachedMissingMedia = false
   const startedAt = Date.now()
   await expect
     .poll(
       async () => {
-        const cachedMissingMedia =
-          await getCachedMissingMediaWarningNames(comfyPage)
-        sawCachedMissingMedia =
-          sawCachedMissingMedia || !!cachedMissingMedia?.length
         sawErrorOverlay =
           sawErrorOverlay || (await getErrorOverlay(comfyPage).isVisible())
         return (
           !sawErrorOverlay &&
-          !sawCachedMissingMedia &&
-          Date.now() - startedAt >= missingMediaObservationMs
+          Date.now() - startedAt >= missingMediaUploadObservationMs
         )
       },
       {
-        timeout: missingMediaObservationMs + missingMediaPollMs * 5,
-        intervals: [missingMediaPollMs]
+        timeout: missingMediaUploadObservationMs + missingMediaUploadPollMs * 5,
+        intervals: [missingMediaUploadPollMs]
       }
     )
     .toBe(true)
@@ -490,7 +424,7 @@ ossTest.describe(
         })
 
         await expectLoadVideoUploading(comfyPage)
-        await expectNoMissingMediaForObservationWindow(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
 
         await delayedUpload.finishUpload()
         await expect(getErrorOverlay(comfyPage)).toBeHidden()
@@ -548,30 +482,18 @@ cloudOutputTest.describe(
 
     cloudOutputTest(
       'resolves compact annotated output media from output assets',
-      async ({ comfyPage }) => {
-        const outputAssetsResponse = waitForOutputAssetsResponse(comfyPage)
-
+      async ({ cloudAssetRequests, comfyPage }) => {
         await comfyPage.workflow.loadWorkflow(
           'missing/missing_media_cloud_output_annotation'
         )
 
-        await outputAssetsResponse
-        await expectNoMissingMediaForObservationWindow(comfyPage)
-        await expectNoErrorsTab(comfyPage)
-      }
-    )
-
-    cloudOutputTest(
-      'resolves subfoldered output video media from flat output asset hashes',
-      async ({ comfyPage }) => {
-        const outputAssetsResponse = waitForOutputAssetsResponse(comfyPage)
-
-        await comfyPage.workflow.loadWorkflow(
-          'missing/missing_media_cloud_output_video_subfolder'
-        )
-
-        await outputAssetsResponse
-        await expectNoMissingMediaForObservationWindow(comfyPage)
+        await expect
+          .poll(() =>
+            cloudAssetRequests.some((url) =>
+              assetRequestIncludesTag(url, 'output')
+            )
+          )
+          .toBe(true)
         await expectNoErrorsTab(comfyPage)
       }
     )
@@ -607,7 +529,7 @@ cloudUploadRaceTest.describe(
         })
 
         await expectLoadVideoUploading(comfyPage)
-        await expectNoMissingMediaForObservationWindow(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
 
         markUploadedCloudAssetAvailable()
         await delayedUpload.finishUpload()

docs/adr/0011-derived-credential-lifecycle.md

@@ -1,120 +0,0 @@
-# 11. Derived Credential Lifecycle for Cloud Auth
-
-Date: 2026-07-09
-
-## Status
-
-Proposed
-
-<!-- [Proposed | Accepted | Rejected | Deprecated | Superseded by [ADR-NNNN](NNNN-title.md)] -->
-
-## Context
-
-Cloud authentication derives several short-lived credentials from a single
-source of truth — the Firebase identity (ID token):
-
-- the **workspace JWT** minted by exchanging the Firebase token (`workspaceAuthStore`),
-- the **session cookie** created by POSTing the Firebase token to `/auth/session`
-  (`useSessionCookie`),
-- and consumer state gated on those credentials, such as **subscription status**
-  (`useSubscription`).
-
-A recurring class of production bugs traces back to how these derived credentials
-are kept fresh rather than to any single code path:
-
-- **FE-613** — workspace token exchange is not reactive to Firebase auth state.
-  Its refresh relies on a `setTimeout` timer that browsers throttle in background
-  tabs, so a backgrounded session serves an expired workspace JWT and every cloud
-  call 401s until reload.
-- **Workspace/personal oscillation** (PR #13511) — when a valid workspace token is
-  momentarily absent, `getAuthHeader`/`getAuthToken` silently downgraded to the
-  personal Firebase token, so requests authenticated as the wrong identity.
-- **Run-button toggle loop** (Slack, related to FE-1072) — a Firebase token-refresh
-  burst on wake/network-swap fans out into concurrent, undeduped subscription
-  fetches racing an in-flight session-cookie rotation; some land pre-rotation and
-  return 401/empty, flapping `subscriptionStatus` and the run button.
-
-These are not independent defects. They are symptoms of one design shape: **each
-derived credential has its own ad-hoc refresh lifecycle, driven by timers or
-one-shot events rather than the source identity, with no coalescing of concurrent
-refreshes and with silent fallback to a different identity or a stale value on
-failure.** Any credential built this way can go stale, stampede, or downgrade.
-
-## Decision
-
-Treat every derived credential as a pure function of the Firebase identity, and
-require all of them to obey the same lifecycle invariants. New auth code must
-satisfy these; existing code migrates toward them incrementally.
-
-1. **Single source of truth.** The Firebase identity is authoritative. Workspace
-   JWT and session cookie are derivations of it, never independent state that can
-   drift from it.
-
-2. **Valid-on-read.** A caller asking for a credential gets a currently-valid one
-   or a definitive failure — never a known-expired one. Validity is checked at the
-   point of use (expiry-aware), not assumed because a background timer _should_
-   have refreshed. Timers may be an optimization, never the guarantee.
-
-3. **Single-flight.** Concurrent requests for the same credential share one
-   in-flight mint/refresh. A refresh burst collapses to a single network call.
-
-4. **Fail-closed, never downgrade.** If the correct-scope credential cannot be
-   obtained, fail the request. Never silently substitute a different identity or
-   scope (e.g. personal token for a workspace request).
-
-5. **Bounded reactive retry.** Invalidation is driven by the source identity
-   (`onIdTokenChanged`), not by polling or wall-clock timers alone. A `401` on a
-   derived credential triggers at most one re-mint and one retry, then surfaces
-   the error.
-
-6. **Explicit scope.** A credential names the identity/workspace it is for.
-   Coalesced results are verified against the requested scope before use.
-
-PR #13511 is the first increment: workspace-token recovery is now valid-on-read,
-single-flight, fail-closed, and reconciles a revoked workspace instead of
-downgrading; subscription-status and session-cookie creation are now
-single-flight so a refresh burst can no longer flap them. It intentionally does
-**not** yet add the `onIdTokenChanged` subscription FE-613 proposes — recovery is
-lazy (on read) rather than reactive (on refresh). Invariant 5 is the remaining
-gap and is tracked by FE-950 (Unified Cloud Auth) and FE-963 (reactive 401
-re-mint + single retry).
-
-Alternatives considered:
-
-- **Layer more defensive checks per call site.** Rejected: this is what produced
-  the current state — correctness that depends on every caller remembering to
-  guard is the defect, not the fix.
-- **A single reactive credential store subscribing to Firebase, replacing all
-  three ad-hoc lifecycles at once.** Deferred, not rejected: it is the target
-  end-state, but a big-bang rewrite of live auth is too risky. We migrate under
-  these invariants incrementally instead.
-
-## Consequences
-
-### Positive
-
-- Whole categories of failure become structurally hard rather than individually
-  patched: stale-on-wake (invariant 2), refresh stampede (3), wrong-identity
-  requests (4).
-- New auth code has a single checklist to satisfy, and reviewers a single rubric
-  to apply.
-- Establishes a shared vocabulary (valid-on-read, single-flight, fail-closed) for
-  reasoning about auth changes.
-
-### Negative
-
-- Fail-closed surfaces auth failures that silent downgrade previously masked; some
-  transient conditions now show errors instead of degrading quietly, so
-  transient-vs-permanent classification must be correct.
-- The invariants are not yet fully realized. Until invariant 5 lands, recovery is
-  lazy and a backgrounded tab still relies on the next read to heal, leaving a
-  visible gap against FE-613's reactive ideal.
-- Existing lifecycles remain non-uniform during migration, so the mental model is
-  "target vs. current" until the reactive credential store exists.
-
-## Notes
-
-- Related: [ADR-0003](0003-crdt-based-layout-system.md) is unrelated in domain but
-  shares the philosophy of designing invariants that make illegal states
-  unrepresentable rather than guarding against them per call site.
-- Tickets: FE-613, FE-950, FE-963, FE-1072. PR: #13511.

docs/adr/README.md

@@ -20,7 +20,6 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0008](0008-entity-component-system.md)                     | Entity Component System                     | Proposed | 2026-03-23 |
 | [0009](0009-subgraph-promoted-widgets-use-linked-inputs.md) | Subgraph Promoted Widgets Use Linked Inputs | Proposed | 2026-05-05 |
 | [0010](0010-remove-nx-orchestration.md)                     | Remove Nx Orchestration                     | Accepted | 2026-05-19 |
-| [0011](0011-derived-credential-lifecycle.md)                | Derived Credential Lifecycle for Cloud Auth | Proposed | 2026-07-09 |
 
 ## Creating a New ADR
 

docs/testing/README.md

@@ -4,12 +4,11 @@ This guide provides an overview of testing approaches used in the ComfyUI Fronte
 
 ## Testing Documentation
 
-Documentation for unit tests is organized into four guides:
+Documentation for unit tests is organized into three guides:
 
 - [Component Testing](./component-testing.md) - How to test Vue components
 - [Unit Testing](./unit-testing.md) - How to test utility functions, composables, and other non-component code
 - [Store Testing](./store-testing.md) - How to test Pinia stores specifically
-- [LiteGraph Testing](./litegraph-testing.md) - How to test LiteGraph graph, node, link, and workflow behavior
 
 ## Testing Structure
 

docs/testing/litegraph-testing.md

@@ -1,9 +0,0 @@
-# LiteGraph Testing Guide
-
-This guide covers test patterns for LiteGraph graph, node, link, subgraph, and workflow behavior in ComfyUI Frontend.
-
-## Shared Factories
-
-Reuse shared factories in `src/utils/__tests__/litegraphTestUtils.ts` instead of hand-rolling LiteGraph node, canvas, graph, subgraph, or workflow builders.
-
-Use real LiteGraph instances or shared factories when they exercise behavior directly. Avoid mocking LiteGraph classes unless the test is intentionally checking a seam outside LiteGraph itself.

package.json

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

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

@@ -414,15 +414,15 @@ describe('formatUtil', () => {
   })
 
   describe('isPreviewableMediaType', () => {
-    it('returns true for image/video/audio/3D/text', () => {
+    it('returns true for image/video/audio/3D', () => {
       expect(isPreviewableMediaType('image')).toBe(true)
       expect(isPreviewableMediaType('video')).toBe(true)
       expect(isPreviewableMediaType('audio')).toBe(true)
       expect(isPreviewableMediaType('3D')).toBe(true)
-      expect(isPreviewableMediaType('text')).toBe(true)
     })
 
-    it('returns false for other', () => {
+    it('returns false for text/other', () => {
+      expect(isPreviewableMediaType('text')).toBe(false)
       expect(isPreviewableMediaType('other')).toBe(false)
     })
   })

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

@@ -677,7 +677,12 @@ export function getMediaTypeFromFilename(
 }
 
 export function isPreviewableMediaType(mediaType: MediaType): boolean {
-  return mediaType !== 'other'
+  return (
+    mediaType === 'image' ||
+    mediaType === 'video' ||
+    mediaType === 'audio' ||
+    mediaType === '3D'
+  )
 }
 
 export function formatTime(seconds: number): string {

public/assets/images/gemini.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Google Gemini">
-  <path d="M12 1c.6 5.4 4.6 9.4 10 10-5.4.6-9.4 4.6-10 10-.6-5.4-4.6-9.4-10-10 5.4-.6 9.4-4.6 10-10z" fill="#4285F4"/>
-</svg>

public/assets/images/runway.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Runway">
-  <rect width="24" height="24" rx="5" fill="#6E56CF"/>
-  <path d="M9.5 8.2v7.6l6.3-3.8z" fill="#ffffff"/>
-</svg>

src/components/dialog/GlobalDialog.test.ts

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

src/components/dialog/rekaPrimeVueBridge.ts

@@ -53,22 +53,7 @@ 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.
-//
-// 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
-  }
+export function onRekaFocusOutside(event: OutsideEvent) {
   if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
   }

src/components/sidebar/tabs/queue/MediaLightbox.vue

@@ -49,7 +49,6 @@
           />
           <ResultVideo v-else-if="activeItem.isVideo" :result="activeItem" />
           <ResultAudio v-else-if="activeItem.isAudio" :result="activeItem" />
-          <ResultText v-else-if="activeItem.isText" :result="activeItem" />
         </template>
       </div>
 
@@ -76,7 +75,6 @@ import Button from '@/components/ui/button/Button.vue'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
-import ResultText from './ResultText.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const emit = defineEmits<{

src/components/sidebar/tabs/queue/ResultText.vue

@@ -1,21 +0,0 @@
-<template>
-  <article
-    class="m-auto max-h-[80vh] w-[min(90vw,42rem)] scroll-shadows-secondary-background overflow-y-auto rounded-lg bg-secondary-background p-4 whitespace-pre-wrap"
-  >
-    <span v-if="hasError" class="text-muted-foreground">
-      {{ $t('g.textFailedToLoad') }}
-    </span>
-    <template v-else>{{ textContent }}</template>
-  </article>
-</template>
-
-<script setup lang="ts">
-import { useTextFileContent } from '@/composables/useTextFileContent'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-const { result } = defineProps<{
-  result: ResultItemImpl
-}>()
-
-const { textContent, hasError } = useTextFileContent(() => result)
-</script>

src/composables/useTextFileContent.test.ts

@@ -1,71 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import { useTextFileContent } from '@/composables/useTextFileContent'
-
-function stubFetch(response: Partial<Response> | Error) {
-  const mock =
-    response instanceof Error
-      ? vi.fn().mockRejectedValue(response)
-      : vi.fn().mockResolvedValue(response)
-  vi.stubGlobal('fetch', mock)
-  return mock
-}
-
-describe(useTextFileContent, () => {
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('returns inline content without fetching', async () => {
-    const fetchMock = stubFetch(new Error('should not be called'))
-    const { textContent } = useTextFileContent(() => ({
-      content: 'inline text',
-      url: 'http://example.com/file.txt'
-    }))
-
-    await vi.waitFor(() => expect(textContent.value).toBe('inline text'))
-    expect(fetchMock).not.toHaveBeenCalled()
-  })
-
-  it('fetches text from the url when no inline content is present', async () => {
-    const fetchMock = stubFetch({
-      ok: true,
-      text: () => Promise.resolve('fetched text')
-    })
-    const { textContent, hasError } = useTextFileContent(() => ({
-      url: 'http://example.com/file.txt'
-    }))
-
-    await vi.waitFor(() => expect(textContent.value).toBe('fetched text'))
-    expect(fetchMock).toHaveBeenCalledWith('http://example.com/file.txt')
-    expect(hasError.value).toBe(false)
-  })
-
-  it('flags an error for a non-ok response', async () => {
-    stubFetch({ ok: false })
-    const { textContent, hasError } = useTextFileContent(() => ({
-      url: 'http://example.com/missing.txt'
-    }))
-
-    await vi.waitFor(() => expect(hasError.value).toBe(true))
-    expect(textContent.value).toBe('')
-  })
-
-  it('flags an error when the fetch rejects', async () => {
-    stubFetch(new Error('network down'))
-    const { hasError } = useTextFileContent(() => ({
-      url: 'http://example.com/file.txt'
-    }))
-
-    await vi.waitFor(() => expect(hasError.value).toBe(true))
-  })
-
-  it('resolves empty content when there is no source', async () => {
-    const fetchMock = stubFetch(new Error('should not be called'))
-    const { textContent, isLoading } = useTextFileContent(() => undefined)
-
-    await vi.waitFor(() => expect(isLoading.value).toBe(false))
-    expect(textContent.value).toBe('')
-    expect(fetchMock).not.toHaveBeenCalled()
-  })
-})

src/composables/useTextFileContent.ts

@@ -1,40 +0,0 @@
-import { computedAsync } from '@vueuse/core'
-import { ref, toValue } from 'vue'
-import type { MaybeRefOrGetter } from 'vue'
-
-interface TextSource {
-  content?: string
-  url?: string
-}
-
-export function useTextFileContent(
-  source: MaybeRefOrGetter<TextSource | undefined>
-) {
-  const isLoading = ref(false)
-  const hasError = ref(false)
-
-  const textContent = computedAsync(
-    async () => {
-      hasError.value = false
-      const { content, url } = toValue(source) ?? {}
-      if (content !== undefined) return content
-      if (!url) return ''
-
-      const response = await fetch(url)
-      if (!response.ok) {
-        hasError.value = true
-        return ''
-      }
-      return await response.text()
-    },
-    '',
-    {
-      evaluating: isLoading,
-      onError: () => {
-        hasError.value = true
-      }
-    }
-  )
-
-  return { textContent, isLoading, hasError }
-}

src/extensions/core/index.ts

@@ -21,7 +21,6 @@ if (!isCloud) {
 import './noteNode'
 import './painter'
 import './previewAny'
-import './saveText'
 import './rerouteNode'
 import './saveImageExtraOutput'
 // saveMesh is loaded on-demand with load3d (see load3dLazy.ts)

src/extensions/core/previewAny.test.ts

@@ -1,17 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ComfyExtension } from '@/types/comfy'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-
-const { addTextPreviewWidgets, updateTextPreviewWidgets } = vi.hoisted(() => ({
-  addTextPreviewWidgets: vi.fn(),
-  updateTextPreviewWidgets: vi.fn()
-}))
-
-vi.mock('@/extensions/core/textPreviewWidgets', () => ({
-  addTextPreviewWidgets,
-  updateTextPreviewWidgets
-}))
 
 const capturedExtensions: ComfyExtension[] = []
 
@@ -23,51 +12,103 @@ vi.mock('@/services/extensionService', () => ({
   })
 }))
 
-type BeforeRegister = NonNullable<ComfyExtension['beforeRegisterNodeDef']>
+vi.mock('@/scripts/app', () => ({ app: {} }))
 
-async function setupNode() {
-  const ext = capturedExtensions.find((e) => e.name === 'Comfy.PreviewAny')
-  expect(ext).toBeDefined()
-
-  const nodeType = { prototype: {} } as unknown as Parameters<BeforeRegister>[0]
-  const nodeData = { name: 'PreviewAny' } as Parameters<BeforeRegister>[1]
-  await ext!.beforeRegisterNodeDef!(
-    nodeType,
-    nodeData,
-    {} as Parameters<BeforeRegister>[2]
-  )
-
-  const node = {} as LGraphNode
-  const proto = nodeType.prototype as {
-    onNodeCreated?: () => void
-    onExecuted?: (message: { text?: string }) => void
-  }
-  return { node, proto }
+interface MockWidget {
+  name: string
+  options: Record<string, unknown>
+  element: { readOnly: boolean }
+  callback?: (value: unknown) => void
+  value: unknown
+  hidden: boolean
+  label: string
+  serialize?: boolean
 }
 
+const createdWidgets: MockWidget[] = []
+
+vi.mock('@/scripts/widgets', () => {
+  const create =
+    (kind: string) =>
+    (
+      node: { widgets?: MockWidget[] },
+      name: string,
+      _info: unknown,
+      _app: unknown
+    ) => {
+      const widget: MockWidget = {
+        name,
+        options: {},
+        element: { readOnly: false },
+        value: kind === 'BOOLEAN' ? false : '',
+        hidden: false,
+        label: ''
+      }
+      node.widgets = node.widgets ?? []
+      node.widgets.push(widget)
+      createdWidgets.push(widget)
+      return { widget }
+    }
+  return {
+    ComfyWidgets: {
+      MARKDOWN: create('MARKDOWN'),
+      STRING: create('STRING'),
+      BOOLEAN: create('BOOLEAN')
+    }
+  }
+})
+
 describe('PreviewAny extension', () => {
   beforeEach(async () => {
     capturedExtensions.length = 0
-    addTextPreviewWidgets.mockClear()
-    updateTextPreviewWidgets.mockClear()
+    createdWidgets.length = 0
     vi.resetModules()
     await import('./previewAny')
   })
 
-  it('adds the shared text preview widgets on node creation', async () => {
-    const { node, proto } = await setupNode()
+  async function setupNode() {
+    const ext = capturedExtensions.find((e) => e.name === 'Comfy.PreviewAny')
+    expect(ext).toBeDefined()
 
+    const nodeType = { prototype: {} } as unknown as Parameters<
+      NonNullable<ComfyExtension['beforeRegisterNodeDef']>
+    >[0]
+    const nodeData = { name: 'PreviewAny' } as Parameters<
+      NonNullable<ComfyExtension['beforeRegisterNodeDef']>
+    >[1]
+
+    await ext!.beforeRegisterNodeDef!(
+      nodeType,
+      nodeData,
+      {} as Parameters<NonNullable<ComfyExtension['beforeRegisterNodeDef']>>[2]
+    )
+
+    const node: { widgets?: MockWidget[] } = {}
+    const proto = nodeType.prototype as { onNodeCreated?: () => void }
     proto.onNodeCreated!.call(node)
+    return node
+  }
 
-    expect(addTextPreviewWidgets).toHaveBeenCalledWith(node)
-  })
+  it('excludes preview widgets from the API prompt to prevent re-execution', async () => {
+    await setupNode()
 
-  it('updates the preview with executed text', async () => {
-    const { node, proto } = await setupNode()
-    const message = { text: 'hello' }
+    const previewMarkdown = createdWidgets.find(
+      (w) => w.name === 'preview_markdown'
+    )
+    const previewText = createdWidgets.find((w) => w.name === 'preview_text')
+    const previewMode = createdWidgets.find((w) => w.name === 'previewMode')
 
-    proto.onExecuted!.call(node, message)
+    expect(previewMarkdown).toBeDefined()
+    expect(previewText).toBeDefined()
+    expect(previewMode).toBeDefined()
 
-    expect(updateTextPreviewWidgets).toHaveBeenCalledWith(node, message)
+    // widget.options.serialize === false is what executionUtil.graphToPrompt
+    // checks to exclude a widget from the API prompt sent to the backend.
+    // Without this, post-execution widget value updates (the rendered preview
+    // text) get serialized as inputs, change the cache signature, and cause
+    // the node to re-execute on the next prompt.
+    expect(previewMarkdown!.options.serialize).toBe(false)
+    expect(previewText!.options.serialize).toBe(false)
+    expect(previewMode!.options.serialize).toBe(false)
   })
 })

src/extensions/core/previewAny.ts

@@ -4,14 +4,11 @@ https://github.com/rgthree/rgthree-comfy/blob/main/py/display_any.py
 upstream requested in https://github.com/Kosinkadink/rfcs/blob/main/rfcs/0000-corenodes.md#preview-nodes
  */
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import {
-  addTextPreviewWidgets,
-  updateTextPreviewWidgets
-} from '@/extensions/core/textPreviewWidgets'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { app } from '@/scripts/app'
+import { type DOMWidget } from '@/scripts/domWidget'
+import { ComfyWidgets } from '@/scripts/widgets'
 import { useExtensionService } from '@/services/extensionService'
-import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.PreviewAny',
@@ -19,24 +16,82 @@ useExtensionService().registerExtension({
     nodeType: typeof LGraphNode,
     nodeData: ComfyNodeDef
   ) {
-    if (nodeData.name !== 'PreviewAny') return
+    if (nodeData.name === 'PreviewAny') {
+      const onNodeCreated = nodeType.prototype.onNodeCreated
 
-    const onNodeCreated = nodeType.prototype.onNodeCreated
-    nodeType.prototype.onNodeCreated = function () {
-      onNodeCreated?.apply(this, [])
-      addTextPreviewWidgets(this)
-    }
+      nodeType.prototype.onNodeCreated = function () {
+        onNodeCreated ? onNodeCreated.apply(this, []) : undefined
 
-    const onExecuted = nodeType.prototype.onExecuted
-    nodeType.prototype.onExecuted = function (message) {
-      onExecuted?.apply(this, [message])
-      updateTextPreviewWidgets(this, message)
-    }
-  },
-  onNodeOutputsUpdated(nodeOutputs) {
-    for (const [nodeLocatorId, output] of Object.entries(nodeOutputs)) {
-      const node = getNodeByLocatorId(app.rootGraph, nodeLocatorId)
-      if (node?.type === 'PreviewAny') updateTextPreviewWidgets(node, output)
+        const showValueWidget = ComfyWidgets['MARKDOWN'](
+          this,
+          'preview_markdown',
+          ['MARKDOWN', {}],
+          app
+        ).widget as DOMWidget<HTMLTextAreaElement, string>
+
+        const showValueWidgetPlain = ComfyWidgets['STRING'](
+          this,
+          'preview_text',
+          ['STRING', { multiline: true }],
+          app
+        ).widget as DOMWidget<HTMLTextAreaElement, string>
+
+        const showAsPlaintextWidget = ComfyWidgets['BOOLEAN'](
+          this,
+          'previewMode',
+          [
+            'BOOLEAN',
+            { label_on: 'Markdown', label_off: 'Plaintext', default: false }
+          ],
+          app
+        )
+
+        showAsPlaintextWidget.widget.callback = (value: boolean) => {
+          showValueWidget.hidden = !value
+          showValueWidget.options.hidden = !value
+          showValueWidgetPlain.hidden = value
+          showValueWidgetPlain.options.hidden = value
+        }
+
+        showValueWidget.label = 'Preview'
+        showValueWidget.hidden = true
+        showValueWidget.options.hidden = true
+        showValueWidget.options.read_only = true
+        showValueWidget.options.serialize = false
+        showValueWidget.element.readOnly = true
+        showValueWidget.serialize = false
+
+        showValueWidgetPlain.label = 'Preview'
+        showValueWidgetPlain.hidden = false
+        showValueWidgetPlain.options.hidden = false
+        showValueWidgetPlain.options.read_only = true
+        showValueWidgetPlain.options.serialize = false
+        showValueWidgetPlain.element.readOnly = true
+        showValueWidgetPlain.serialize = false
+
+        // The previewMode toggle is a frontend-only display preference and
+        // is not declared in the backend INPUT_TYPES, so it must not be
+        // serialized into the API prompt (would alter the cache signature).
+        showAsPlaintextWidget.widget.options.serialize = false
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+
+      nodeType.prototype.onExecuted = function (message) {
+        onExecuted === null || onExecuted === void 0
+          ? void 0
+          : onExecuted.apply(this, [message])
+
+        const previewWidgets =
+          this.widgets?.filter((w) => w.name.startsWith('preview_')) ?? []
+
+        for (const previewWidget of previewWidgets) {
+          const text = message.text ?? ''
+          previewWidget.value = Array.isArray(text)
+            ? (text?.join('\n\n') ?? '')
+            : text
+        }
+      }
     }
   }
 })

src/extensions/core/saveText.ts

@@ -1,24 +0,0 @@
-import {
-  addTextPreviewWidgets,
-  updateTextPreviewWidgets
-} from '@/extensions/core/textPreviewWidgets'
-import { useExtensionService } from '@/services/extensionService'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.saveText',
-  async beforeRegisterNodeDef(nodeType, nodeData) {
-    if (nodeData.name !== 'SaveText') return
-
-    const onNodeCreated = nodeType.prototype.onNodeCreated
-    nodeType.prototype.onNodeCreated = function () {
-      onNodeCreated?.apply(this, [])
-      addTextPreviewWidgets(this)
-    }
-
-    const onExecuted = nodeType.prototype.onExecuted
-    nodeType.prototype.onExecuted = function (message) {
-      onExecuted?.apply(this, [message])
-      updateTextPreviewWidgets(this, message)
-    }
-  }
-})

src/extensions/core/textPreviewWidgets.test.ts

@@ -1,103 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-
-interface MockWidget {
-  name: string
-  options: Record<string, unknown>
-  value?: unknown
-  serialize?: boolean
-}
-
-vi.mock('@/scripts/app', () => ({ app: { rootGraph: { id: 'graph-1' } } }))
-
-vi.mock('@/lib/litegraph/src/litegraph', () => ({
-  resolveNodeRootGraphId: () => 'graph-1'
-}))
-
-vi.mock(
-  '@/renderer/extensions/vueNodes/widgets/components/WidgetTextPreview.vue',
-  () => ({
-    default: {}
-  })
-)
-
-vi.mock('@/stores/widgetValueStore', () => ({
-  useWidgetValueStore: () => ({ getWidget: () => undefined })
-}))
-
-vi.mock('@/scripts/domWidget', () => ({
-  ComponentWidgetImpl: class {
-    name: string
-    options: Record<string, unknown>
-    type: string
-    serialize?: boolean
-    constructor(obj: {
-      name: string
-      options: Record<string, unknown>
-      type: string
-    }) {
-      this.name = obj.name
-      this.options = obj.options
-      this.type = obj.type
-    }
-  },
-  addWidget: (node: { widgets?: MockWidget[] }, widget: MockWidget) => {
-    node.widgets = node.widgets ?? []
-    node.widgets.push(widget)
-  }
-}))
-
-vi.mock('@/scripts/widgets', () => ({
-  ComfyWidgets: {
-    BOOLEAN: (node: { widgets?: MockWidget[] }, name: string) => {
-      const widget: MockWidget = { name, options: {}, value: false }
-      node.widgets = node.widgets ?? []
-      node.widgets.push(widget)
-      return { widget }
-    }
-  }
-}))
-
-const { addTextPreviewWidgets, updateTextPreviewWidgets } =
-  await import('./textPreviewWidgets')
-
-function makeNode(): LGraphNode & { widgets: MockWidget[] } {
-  return { id: '1', widgets: [] } as unknown as LGraphNode & {
-    widgets: MockWidget[]
-  }
-}
-
-describe('addTextPreviewWidgets', () => {
-  it('adds a non-serialized preview widget and a non-serialized mode toggle', () => {
-    const node = makeNode()
-    addTextPreviewWidgets(node)
-
-    const preview = node.widgets.find((w) => w.name === 'preview_text')
-    const mode = node.widgets.find((w) => w.name === 'preview_mode')
-
-    expect(preview?.type).toBe('textPreview')
-    expect(preview?.serialize).toBe(false)
-    expect(preview?.options.serialize).toBe(false)
-    expect(mode?.options.serialize).toBe(false)
-  })
-})
-
-describe('updateTextPreviewWidgets', () => {
-  let node: LGraphNode & { widgets: MockWidget[] }
-
-  beforeEach(() => {
-    node = makeNode()
-    node.widgets.push({ name: 'preview_text', options: {}, value: '' })
-  })
-
-  it('joins array text into the preview widget value', () => {
-    updateTextPreviewWidgets(node, { text: ['a', 'b'] })
-    expect(node.widgets[0].value).toBe('a\n\nb')
-  })
-
-  it('writes a plain string message as-is', () => {
-    updateTextPreviewWidgets(node, { text: 'hello' })
-    expect(node.widgets[0].value).toBe('hello')
-  })
-})

src/extensions/core/textPreviewWidgets.ts

@@ -1,78 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { resolveNodeRootGraphId } from '@/lib/litegraph/src/litegraph'
-import WidgetTextPreview from '@/renderer/extensions/vueNodes/widgets/components/WidgetTextPreview.vue'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { app } from '@/scripts/app'
-import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
-import { ComfyWidgets } from '@/scripts/widgets'
-import { useWidgetValueStore } from '@/stores/widgetValueStore'
-import { widgetId } from '@/types/widgetId'
-
-const PREVIEW_WIDGET_NAME = 'preview_text'
-const MODE_WIDGET_NAME = 'preview_mode'
-
-const inputSpecTextPreview: CustomInputSpec = {
-  name: PREVIEW_WIDGET_NAME,
-  type: 'TEXT_PREVIEW',
-  isPreview: true
-}
-
-export function addTextPreviewWidgets(node: LGraphNode) {
-  const widgetStore = useWidgetValueStore()
-  let fallbackValue = ''
-
-  const previewWidgetId = () =>
-    widgetId(
-      resolveNodeRootGraphId(node, app.rootGraph.id),
-      node.id,
-      PREVIEW_WIDGET_NAME
-    )
-
-  const preview = new ComponentWidgetImpl<string | object>({
-    node,
-    name: PREVIEW_WIDGET_NAME,
-    component: WidgetTextPreview,
-    inputSpec: inputSpecTextPreview,
-    type: 'textPreview',
-    options: {
-      serialize: false,
-      hideInPanel: true,
-      getMinHeight: () => 60,
-      getValue: () => {
-        const stored = widgetStore.getWidget(previewWidgetId())?.value
-        return typeof stored === 'string' ? stored : fallbackValue
-      },
-      setValue: (value: string | object) => {
-        fallbackValue = typeof value === 'string' ? value : ''
-        const state = widgetStore.getWidget(previewWidgetId())
-        if (state) state.value = fallbackValue
-      }
-    }
-  })
-  preview.serialize = false
-  addWidget(node, preview)
-
-  const modeWidget = ComfyWidgets['BOOLEAN'](
-    node,
-    MODE_WIDGET_NAME,
-    [
-      'BOOLEAN',
-      { label_on: 'Markdown', label_off: 'Plain text', default: false }
-    ],
-    app
-  ).widget
-
-  modeWidget.options.serialize = false
-  modeWidget.serialize = false
-}
-
-export function updateTextPreviewWidgets(
-  node: LGraphNode,
-  message: { text?: string | string[] }
-) {
-  const preview = node.widgets?.find((w) => w.name === PREVIEW_WIDGET_NAME)
-  if (!preview) return
-
-  const text = message.text ?? ''
-  preview.value = Array.isArray(text) ? text.join('\n\n') : text
-}