feat: workspace Members settings panel + identity editing

Restructures workspace member management into its own settings entry:
a Members sidebar panel (table rows with role menu, last-activity and
credits-used columns rendering em-dash/0 until the API carries the
fields, pending-invite rows, Owner/Admin role labels), the workspace
settings header with inline rename (double-click or menu, save-on-blur,
Escape cancels, 30-char cap) and hover image-edit affordance, and the
member-limit flow (count-free copy, Invite enabled at cap surfacing a
request-seats dialog wired to the team-plan request form; seat cap 50
counting pending invites).

The existing combined Workspace panel stays registered so plan and
credit management remains reachable; a follow-up swaps it to the
dedicated Plan & Credits panel. Table primitives (nowrap cells,
divider rows) land here with their first consumer.

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

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

apps/website/e2e/affiliates.spec.ts

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

apps/website/e2e/learning.spec.ts

@@ -0,0 +1,158 @@
+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,7 +17,8 @@
     "test:visual:update": "playwright test --project visual --update-snapshots",
     "ashby:refresh-snapshot": "tsx ./scripts/refresh-ashby-snapshot.ts",
     "cloud-nodes:refresh-snapshot": "tsx ./scripts/refresh-cloud-nodes-snapshot.ts",
-    "generate:models": "tsx ./scripts/generate-models.ts"
+    "generate:models": "tsx ./scripts/generate-models.ts",
+    "validate:jsonld": "tsx ./scripts/validate-jsonld.ts"
   },
   "dependencies": {
     "@astrojs/sitemap": "catalog:",

apps/website/scripts/validate-jsonld.ts

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

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

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

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

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

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

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

apps/website/src/config/pricing.ts

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

apps/website/src/config/routes.ts

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

apps/website/src/i18n/translations.ts

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

apps/website/src/layouts/BaseLayout.astro

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

apps/website/src/pages/about.astro

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

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

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

apps/website/src/pages/careers.astro

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

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

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

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

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

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

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

apps/website/src/pages/contact.astro

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

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

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

apps/website/src/pages/download.astro

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

apps/website/src/pages/index.astro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/website/src/utils/jsonLd.ts

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

browser_tests/tests/cloudSecrets.spec.ts

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

browser_tests/tests/previewAsText.spec.ts

@@ -1,7 +1,13 @@
+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 ({
@@ -39,4 +45,34 @@ 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'
+      )
+    }
+  )
 })

knip.config.ts

@@ -54,6 +54,11 @@ const config: KnipConfig = {
     '.github/workflows/ci-oss-assets-validation.yaml',
     // Pending integration in stacked PR
     'src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue',
+    // Pending integration in the workspace-settings stacked PRs: consumed by
+    // split/auto-reload + split/allowlist (Switch) and split/member-auditing
+    // + split/allowlist (Pagination); each consumer removes its entry
+    'src/components/ui/switch/Switch.vue',
+    'src/components/ui/pagination/Pagination.vue',
     // Marketing media tooling — adopted by pages in a follow-up PR
     'apps/website/src/components/common/SiteVideo.vue',
     'apps/website/src/utils/marketingImage.ts',

package.json

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

src/components/common/DropdownMenu.vue

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

src/components/common/SelectionBar.vue

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

src/components/dialog/GlobalDialog.test.ts

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

src/components/dialog/GlobalDialog.vue

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

src/components/dialog/rekaPrimeVueBridge.ts

@@ -12,7 +12,7 @@ const PRIMEVUE_OVERLAY_SELECTORS =
 // dismiss itself. These selectors cover the portaled roots so we can treat
 // interactions on them as inside.
 const REKA_PORTAL_SELECTORS =
-  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]'
+  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [aria-haspopup="menu"], [aria-haspopup="dialog"], [aria-haspopup="listbox"]'
 
 const OUTSIDE_LAYER_SELECTORS = `${PRIMEVUE_OVERLAY_SELECTORS}, ${REKA_PORTAL_SELECTORS}`
 
@@ -53,7 +53,22 @@ export function onRekaPointerDownOutside(
 // nested Reka or PrimeVue dialog teleported to body). Without this guard a
 // non-modal Reka dialog would dismiss itself the moment a nested dialog
 // receives focus.
-export function onRekaFocusOutside(event: OutsideEvent) {
+//
+// A container dialog (e.g. Settings) that hosts nested confirm/edit dialogs can
+// also lose focus to an ordinary app element — not just a portal — when a
+// nested dialog closes and the element it focused was removed (deleting the
+// selected row). That programmatic focus shift is not a dismiss intent, so such
+// a dialog opts out of focus-outside dismissal entirely via
+// `dismissOnFocusOutside: false`; it still dismisses on escape or an outside
+// pointer.
+export function onRekaFocusOutside(
+  event: OutsideEvent,
+  options: { dismissOnFocusOutside?: boolean } = {}
+) {
+  if (options.dismissOnFocusOutside === false) {
+    event.preventDefault()
+    return
+  }
   if (isInsideOverlay(event.detail.originalEvent.target)) {
     event.preventDefault()
   }

src/components/ui/pagination/Pagination.vue

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

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

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

src/components/ui/switch/Switch.vue

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

src/components/ui/table/Table.vue

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

src/components/ui/table/TableBody.vue

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

src/components/ui/table/TableCell.vue

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

src/components/ui/table/TableHead.vue

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

src/components/ui/table/TableHeader.vue

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

src/components/ui/table/TableRow.vue

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

src/components/widget/layout/BaseModalLayout.vue

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

src/composables/useExternalLink.ts

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

src/extensions/core/previewAny.ts

@@ -9,7 +9,9 @@ import {
   updateTextPreviewWidgets
 } from '@/extensions/core/textPreviewWidgets'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import { app } from '@/scripts/app'
 import { useExtensionService } from '@/services/extensionService'
+import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
 
 useExtensionService().registerExtension({
   name: 'Comfy.PreviewAny',
@@ -30,5 +32,11 @@ useExtensionService().registerExtension({
       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)
+    }
   }
 })

src/locales/en/main.json

@@ -2846,7 +2846,7 @@
   "workspacePanel": {
     "invite": "Invite",
     "inviteMember": "Invite member",
-    "inviteLimitReached": "You've reached the maximum of {count} members",
+    "inviteLimitReached": "Your workspace is at the member limit",
     "tabs": {
       "dashboard": "Dashboard",
       "planCredits": "Plan & Credits",
@@ -2861,12 +2861,17 @@
       "pendingInvitesCount": "{count} pending invite | {count} pending invites",
       "tabs": {
         "active": "Active",
-        "pendingCount": "Pending ({count})"
+        "pendingCount": "Pending ({count})",
+        "membersCount": "Members ({count})",
+        "pending": "Pending"
       },
       "columns": {
         "inviteDate": "Invite date",
         "expiryDate": "Expiry date",
-        "role": "Role"
+        "role": "Role",
+        "creditsUsed": "Credits used this month",
+        "email": "Email",
+        "lastActivity": "Last activity"
       },
       "actions": {
         "resendInvite": "Resend invite",
@@ -2882,14 +2887,22 @@
       "contactUs": "Contact us",
       "noInvites": "No pending invites",
       "noMembers": "No members",
-      "searchPlaceholder": "Search..."
+      "searchPlaceholder": "Search...",
+      "activity": {
+        "daysAgo": "{count} day ago | {count} days ago",
+        "hoursAgo": "{n} hr ago",
+        "justNow": "just now",
+        "minutesAgo": "{n} min ago"
+      },
+      "membersUsage": "{count} of {max} total members."
     },
     "menu": {
       "editWorkspace": "Edit workspace details",
       "leaveWorkspace": "Leave Workspace",
       "deleteWorkspace": "Delete Workspace",
       "deleteWorkspaceDisabledTooltip": "Cancel your workspace's active subscription first",
-      "creatorCannotLeave": "The workspace creator can't leave the workspace they created"
+      "creatorCannotLeave": "The workspace creator can't leave the workspace they created",
+      "renameWorkspace": "Rename Workspace"
     },
     "editWorkspaceDialog": {
       "title": "Edit workspace details",
@@ -2978,6 +2991,18 @@
       "failedToDeleteWorkspace": "Failed to delete workspace",
       "failedToLeaveWorkspace": "Failed to leave workspace",
       "failedToFetchWorkspaces": "Failed to load workspaces"
+    },
+    "charactersLeft": "{count} character left | {count} characters left",
+    "doubleClickToRename": "Double-click to rename",
+    "editWorkspaceImage": "Edit workspace image",
+    "memberLimitDialog": {
+      "message": "All seats are filled. To invite someone new, remove a member, rescind an invite, or request more seats.",
+      "title": "Workspace is at the member limit"
+    },
+    "requestMore": "Request more",
+    "workflowQueuedDialog": {
+      "message": "Max workflow capacity reached. It'll start automatically as capacity opens up. If this happens often, you can also request for more capacity.",
+      "title": "Your workflow is queued"
     }
   },
   "teamWorkspacesDialog": {
@@ -2990,7 +3015,7 @@
     "newWorkspace": "New workspace",
     "namePlaceholder": "e.g. Marketing Team",
     "createWorkspace": "Create workspace",
-    "nameValidationError": "Name must be 1–50 characters using letters, numbers, spaces, or common punctuation."
+    "nameValidationError": "Name must be 1–30 characters using letters, numbers, spaces, or common punctuation."
   },
   "workspaceSwitcher": {
     "switchWorkspace": "Switch workspace",
@@ -3000,7 +3025,8 @@
     "roleMember": "Member",
     "createWorkspace": "Create a workspace",
     "maxWorkspacesReached": "You can only own 10 workspaces. Delete one to create a new one.",
-    "failedToSwitch": "Failed to switch workspace"
+    "failedToSwitch": "Failed to switch workspace",
+    "roleAdmin": "Admin"
   },
   "selectionToolbox": {
     "executeButton": {
@@ -3122,57 +3148,52 @@
   "cloudOnboarding": {
     "skipToCloudApp": "Skip to the cloud app",
     "survey": {
-      "title": "Cloud Survey",
+      "title": "Let's get to know you",
       "placeholder": "Survey questions placeholder",
-      "intro": "Help us tailor your ComfyUI experience.",
+      "intro": "A few quick questions so we can set up ComfyUI for you.",
+      "otherPlaceholder": "Tell us more",
       "errors": {
         "chooseAnOption": "Please choose an option.",
         "selectAtLeastOne": "Please select at least one option.",
-        "describeAnswer": "Please describe your answer."
-      },
-      "steps": {
-        "usage": "How do you plan to use ComfyUI?",
-        "familiarity": "How familiar are you with ComfyUI?",
-        "intent": "What do you want to create with ComfyUI?",
-        "source": "Where did you hear about ComfyUI?"
+        "describeAnswer": "Please describe your answer.",
+        "answerTooLong": "Please keep your answer under {max} characters."
       },
       "options": {
-        "usage": {
-          "personal": "Personal use",
-          "work": "Work",
-          "education": "Education (student or educator)"
-        },
-        "familiarity": {
-          "new": "New — never used it",
-          "starting": "Beginner — following tutorials",
-          "basics": "Intermediate — comfortable with basics",
-          "advanced": "Advanced — build and edit workflows",
-          "expert": "Expert — I help others"
-        },
         "intent": {
-          "workflows": "Custom workflows or pipelines",
-          "custom_nodes": "Custom nodes",
-          "videos": "Videos",
           "images": "Images",
-          "3d_game": "3D assets / game assets",
-          "audio": "Audio / music",
-          "apps": "Simplified Apps from workflows",
-          "api": "API endpoints to run workflows",
-          "not_sure": "Not sure"
+          "video": "Video",
+          "workflows": "Workflows and pipelines",
+          "apps_api": "Apps and APIs",
+          "exploring": "Just exploring",
+          "other": "Something else",
+          "otherPlaceholder": "What do you want to make?"
+        },
+        "experience": {
+          "new": "New to ComfyUI",
+          "some": "I know my way around",
+          "pro": "I'm a power user"
+        },
+        "focus": {
+          "custom_nodes": "Custom nodes",
+          "pipelines": "Automated pipelines",
+          "products": "Products for others"
         },
         "source": {
+          "social": "Social media",
+          "friend": "A friend or colleague",
+          "search": "Web search",
+          "community": "A community or forum",
+          "other": "Somewhere else",
+          "otherPlaceholder": "Where did you find us?"
+        },
+        "source_social": {
           "youtube": "YouTube",
           "reddit": "Reddit",
-          "twitter": "Twitter / X",
+          "twitter": "X (Twitter)",
           "instagram": "Instagram",
+          "tiktok": "TikTok",
           "linkedin": "LinkedIn",
-          "friend": "Friend or colleague",
-          "search": "Google / search",
-          "newsletter": "Newsletter or blog",
-          "conference": "Conference or event",
-          "discord": "Discord / community",
-          "github": "GitHub",
-          "other": "Other"
+          "discord": "Discord"
         }
       }
     },
@@ -3265,10 +3286,11 @@
   "cloudForgotPassword_emailRequired": "Email is required",
   "cloudForgotPassword_passwordResetSent": "Password reset sent",
   "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
-  "cloudSurvey_steps_usage": "How do you plan to use ComfyUI?",
-  "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
-  "cloudSurvey_steps_intent": "What do you want to create with ComfyUI?",
-  "cloudSurvey_steps_source": "Where did you hear about ComfyUI?",
+  "cloudSurvey_steps_intent": "What do you want to make?",
+  "cloudSurvey_steps_experience": "How well do you know ComfyUI?",
+  "cloudSurvey_steps_focus": "What are you building?",
+  "cloudSurvey_steps_source": "How did you find us?",
+  "cloudSurvey_steps_source_social": "Which platform?",
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",

src/platform/assets/components/MediaAssetSelectionBar.vue

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

src/platform/cloud/onboarding/CloudSurveyView.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="flex h-[700px] max-h-[85vh] w-[320px] max-w-[90vw] flex-col">
+  <div
+    class="dark-theme flex max-h-[85vh] w-full max-w-md flex-col overflow-y-auto px-4 sm:px-6"
+  >
+    <h1
+      class="-mb-1 font-inter text-xl/8 font-semibold tracking-wide text-primary-comfy-canvas sm:text-2xl/8"
+    >
+      {{ $t('cloudOnboarding.survey.title') }}
+    </h1>
     <DynamicSurveyForm
       :key="activeSurvey.version"
       :survey="activeSurvey"

src/platform/cloud/onboarding/components/CloudTemplate.test.ts

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import CloudTemplate from './CloudTemplate.vue'
+
+const renderWithMeta = async (meta: Record<string, unknown>) => {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/', name: 'test', component: CloudTemplate, meta }]
+  })
+  await router.push('/')
+  await router.isReady()
+  return render(CloudTemplate, {
+    global: {
+      plugins: [router],
+      stubs: {
+        CloudHeroCarousel: { template: '<div data-testid="hero" />' },
+        CloudTemplateFooter: true
+      }
+    }
+  })
+}
+
+describe('CloudTemplate', () => {
+  it('shows the hero carousel when the route does not hide it', async () => {
+    await renderWithMeta({})
+    expect(screen.getByTestId('hero')).toBeInTheDocument()
+  })
+
+  it('hides the hero carousel when route.meta.hideHero is set', async () => {
+    await renderWithMeta({ hideHero: true })
+    expect(screen.queryByTestId('hero')).not.toBeInTheDocument()
+  })
+})

src/platform/cloud/onboarding/components/CloudTemplate.vue

@@ -13,15 +13,22 @@
       </div>
       <CloudTemplateFooter />
     </div>
-    <div class="relative hidden flex-1 overflow-hidden py-2 pr-2 lg:block">
+    <div
+      v-if="!route.meta.hideHero"
+      class="relative hidden flex-1 overflow-hidden py-2 pr-2 lg:block"
+    >
       <CloudHeroCarousel />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRoute } from 'vue-router'
+
 import CloudHeroCarousel from '@/platform/cloud/onboarding/components/CloudHeroCarousel.vue'
 import CloudTemplateFooter from '@/platform/cloud/onboarding/components/CloudTemplateFooter.vue'
+
+const route = useRoute()
 </script>
 <style>
 @import '../assets/css/fonts.css';

src/platform/cloud/onboarding/components/CloudTemplateFooter.vue

@@ -5,20 +5,22 @@
     <a
       href="https://www.comfy.org/terms-of-service"
       target="_blank"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      rel="noopener noreferrer"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
     >
       {{ t('auth.login.termsLink') }}
     </a>
     <a
       href="https://www.comfy.org/privacy-policy"
       target="_blank"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      rel="noopener noreferrer"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
     >
       {{ t('auth.login.privacyLink') }}
     </a>
     <a
       href="https://support.comfy.org"
-      class="cursor-pointer text-sm text-gray-600 no-underline"
+      class="cursor-pointer text-sm text-primary-comfy-canvas/60 no-underline"
       target="_blank"
       rel="noopener noreferrer"
     >

src/platform/cloud/onboarding/onboardingCloudRoutes.ts

@@ -94,7 +94,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         name: 'cloud-survey',
         component: () =>
           import('@/platform/cloud/onboarding/CloudSurveyView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true, hideHero: true }
       },
       {
         path: 'oauth/consent',
@@ -106,7 +106,7 @@ export const cloudOnboardingRoutes: RouteRecordRaw[] = [
         name: 'cloud-user-check',
         component: () =>
           import('@/platform/cloud/onboarding/UserCheckView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true, hideHero: true }
       },
       {
         path: 'sorry-contact-support',

src/platform/cloud/onboarding/survey/DynamicSurveyField.test.ts

@@ -0,0 +1,176 @@
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+import type { OnboardingSurveyField } from '@/platform/remoteConfig/types'
+
+import DynamicSurveyField from './DynamicSurveyField.vue'
+
+const renderField = (
+  field: OnboardingSurveyField,
+  props: {
+    modelValue?: string | string[]
+    otherValue?: string
+    errorMessage?: string
+  } = {},
+  locale = 'en'
+) =>
+  render(DynamicSurveyField, {
+    global: {
+      plugins: [
+        createI18n({ legacy: false, locale, messages: { en: enMessages } })
+      ]
+    },
+    props: { field, modelValue: undefined, ...props }
+  })
+
+const optionButton = (label: string) =>
+  screen.getByRole('button', { name: label })
+
+describe('DynamicSurveyField', () => {
+  const singleField: OnboardingSurveyField = {
+    id: 'intent',
+    type: 'single',
+    label: 'What do you want to make?',
+    required: true,
+    options: [
+      { value: 'images', label: 'Images', icon: 'icon-[lucide--image]' },
+      { value: 'video', label: 'Video' }
+    ]
+  }
+
+  it('renders the label and one card per option', () => {
+    renderField(singleField)
+    expect(screen.getByText('What do you want to make?')).toBeVisible()
+    expect(screen.getByText('Images')).toBeInTheDocument()
+    expect(screen.getByText('Video')).toBeInTheDocument()
+  })
+
+  it('emits the chosen value for a single-select card', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderField(singleField)
+
+    await user.click(screen.getByText('Images'))
+    expect(emitted()['update:modelValue']?.[0]).toEqual(['images'])
+  })
+
+  it('marks the selected single card as on (aria-pressed/state)', () => {
+    renderField(singleField, { modelValue: 'images' })
+    expect(optionButton('Images')).toHaveAttribute('data-state', 'on')
+    expect(optionButton('Video')).toHaveAttribute('data-state', 'off')
+  })
+
+  it('gives each option card a stable "<fieldId>-<value>" id', () => {
+    renderField(singleField)
+    expect(optionButton('Images')).toHaveAttribute('id', 'intent-images')
+    expect(optionButton('Video')).toHaveAttribute('id', 'intent-video')
+  })
+
+  const multiField: OnboardingSurveyField = {
+    id: 'making',
+    type: 'multi',
+    label: 'Pick some',
+    required: true,
+    options: [
+      { value: 'a', label: 'Making A' },
+      { value: 'b', label: 'Making B' }
+    ]
+  }
+
+  it('emits an array for a multi-select card and reflects current selection', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderField(multiField, { modelValue: ['a'] })
+
+    expect(optionButton('Making A')).toHaveAttribute('data-state', 'on')
+    await user.click(screen.getByText('Making B'))
+    const events = emitted()['update:modelValue'] as unknown[][] | undefined
+    const last = events?.at(-1)?.[0]
+    expect(last).toEqual(expect.arrayContaining(['a', 'b']))
+  })
+
+  it('shows the "other" free-text input only when "other" is selected and emits it', async () => {
+    const user = userEvent.setup()
+    const otherField: OnboardingSurveyField = {
+      id: 'source',
+      type: 'single',
+      label: 'How did you find us?',
+      required: true,
+      allowOther: true,
+      otherFieldId: 'sourceOther',
+      options: [
+        { value: 'search', label: 'Web search' },
+        { value: 'other', label: 'Somewhere else' }
+      ]
+    }
+
+    const { rerender, emitted } = renderField(otherField, {
+      modelValue: 'search'
+    })
+    expect(
+      screen.queryByPlaceholderText('Where did you find us?')
+    ).not.toBeInTheDocument()
+
+    await rerender({ field: otherField, modelValue: 'other', otherValue: '' })
+    const input = screen.getByPlaceholderText('Where did you find us?')
+    await user.type(input, 'A podcast')
+    expect(emitted()['update:otherValue']?.length).toBeGreaterThan(0)
+  })
+
+  it('renders a text field and emits typed input', async () => {
+    const user = userEvent.setup()
+    const textField: OnboardingSurveyField = {
+      id: 'note',
+      type: 'text',
+      label: 'Anything else?',
+      placeholder: 'Your note'
+    }
+    const { emitted } = renderField(textField)
+
+    await user.type(screen.getByPlaceholderText('Your note'), 'Hi')
+    expect(emitted()['update:modelValue']?.length).toBeGreaterThan(0)
+  })
+
+  it('resolves labels via labelKey, locale map, and falls back to the value', () => {
+    renderField(
+      {
+        id: 'q',
+        type: 'single',
+        labelKey: 'cloudSurvey_steps_intent',
+        options: [
+          { value: 'x', label: { en: 'Ex', ko: '엑스' } },
+          { value: 'raw' } // no label → falls back to the value
+        ]
+      },
+      {}
+    )
+    expect(screen.getByText('What do you want to make?')).toBeVisible()
+    expect(screen.getByText('Ex')).toBeInTheDocument()
+    expect(screen.getByText('raw')).toBeInTheDocument()
+  })
+
+  it('resolves a field label from a locale map when no labelKey is set', () => {
+    renderField({
+      id: 'q',
+      type: 'single',
+      label: { en: 'Server question', ko: '서버 질문' },
+      options: [{ value: 'a', label: 'A' }]
+    })
+    expect(screen.getByText('Server question')).toBeVisible()
+  })
+
+  it('falls back to the field id when neither labelKey nor label resolves', () => {
+    renderField({
+      id: 'bare_field_id',
+      type: 'single',
+      options: [{ value: 'a', label: 'A' }]
+    })
+    expect(screen.getByText('bare_field_id')).toBeVisible()
+  })
+
+  it('renders the error message when provided', () => {
+    renderField(singleField, { errorMessage: 'Please choose an option.' })
+    expect(screen.getByText('Please choose an option.')).toBeVisible()
+  })
+})

src/platform/cloud/onboarding/survey/DynamicSurveyField.vue

@@ -2,62 +2,72 @@
   <fieldset
     v-if="field.type !== 'text'"
     :aria-invalid="Boolean(errorMessage)"
-    class="flex flex-col gap-4 border-0 p-0"
+    class="m-0 flex flex-col gap-4 border-0 p-0"
   >
-    <legend class="mb-2 block text-lg font-medium text-base-foreground">
+    <legend class="mb-2 block text-lg font-medium text-primary-comfy-canvas">
       {{ resolvedLabel }}
     </legend>
-    <template v-if="field.type === 'single'">
-      <div
+    <ToggleGroup
+      v-if="field.type === 'single'"
+      :model-value="(modelValue as string) ?? ''"
+      type="single"
+      class="flex w-full flex-col gap-2"
+      @update:model-value="onSingleChange"
+    >
+      <ToggleGroupItem
         v-for="option in field.options"
+        :id="`${field.id}-${option.value}`"
         :key="option.value"
-        class="flex items-center gap-3"
+        :value="option.value"
+        :class="optionCardClass"
       >
-        <RadioButton
-          :model-value="(modelValue as string) ?? ''"
-          :input-id="`${field.id}-${option.value}`"
-          :name="field.id"
-          :value="option.value"
-          :dt="checkedTokens"
-          @update:model-value="onSingleChange"
+        <i
+          v-if="option.icon"
+          :class="
+            cn('size-4 shrink-0 text-primary-comfy-canvas/60', option.icon)
+          "
+          aria-hidden="true"
         />
-        <label
-          :for="`${field.id}-${option.value}`"
-          class="cursor-pointer text-sm"
-          >{{ resolveOptionLabel(option) }}</label
-        >
-      </div>
-    </template>
-    <template v-else>
-      <div
+        <span class="flex-1">{{ resolveOptionLabel(option) }}</span>
+        <i :class="checkMarkClass" aria-hidden="true" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+    <ToggleGroup
+      v-else
+      :model-value="(modelValue as string[]) ?? []"
+      type="multiple"
+      class="flex w-full flex-col gap-2"
+      @update:model-value="onMultiChange"
+    >
+      <ToggleGroupItem
         v-for="option in field.options"
+        :id="`${field.id}-${option.value}`"
         :key="option.value"
-        class="flex items-center gap-3"
+        :value="option.value"
+        :class="optionCardClass"
       >
-        <Checkbox
-          :model-value="(modelValue as string[]) ?? []"
-          :input-id="`${field.id}-${option.value}`"
-          :value="option.value"
-          :dt="checkedTokens"
-          @update:model-value="onMultiChange"
+        <i
+          v-if="option.icon"
+          :class="
+            cn('size-4 shrink-0 text-primary-comfy-canvas/60', option.icon)
+          "
+          aria-hidden="true"
         />
-        <label
-          :for="`${field.id}-${option.value}`"
-          class="cursor-pointer text-sm"
-          >{{ resolveOptionLabel(option) }}</label
-        >
-      </div>
-    </template>
+        <span class="flex-1">{{ resolveOptionLabel(option) }}</span>
+        <i :class="checkMarkClass" aria-hidden="true" />
+      </ToggleGroupItem>
+    </ToggleGroup>
     <Input
-      v-if="field.allowOther && field.otherFieldId && modelValue === 'other'"
+      v-if="field.allowOther && field.otherFieldId && isOtherSelected"
       :model-value="(otherValue as string) ?? ''"
+      :class="inputClass"
+      :maxlength="OTHER_TEXT_MAX_LENGTH"
       :placeholder="
         $t(
           `cloudOnboarding.survey.options.${field.id}.otherPlaceholder`,
           $t('cloudOnboarding.survey.otherPlaceholder')
         )
       "
-      class="ml-1"
       @update:model-value="onOtherChange"
     />
     <p v-if="errorMessage" class="text-danger text-xs">{{ errorMessage }}</p>
@@ -65,7 +75,7 @@
   <div v-else class="flex flex-col gap-3">
     <label
       :for="controlId"
-      class="block text-lg font-medium text-base-foreground"
+      class="block text-lg font-medium text-primary-comfy-canvas"
     >
       {{ resolvedLabel }}
     </label>
@@ -74,6 +84,7 @@
       :model-value="(modelValue as string) ?? ''"
       :placeholder="field.placeholder"
       :aria-invalid="Boolean(errorMessage)"
+      :class="inputClass"
       @update:model-value="onTextChange"
     />
     <p v-if="errorMessage" class="text-danger text-xs">{{ errorMessage }}</p>
@@ -81,18 +92,20 @@
 </template>
 
 <script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
-import RadioButton from 'primevue/radiobutton'
-import { useId } from 'vue'
+import { cn } from '@comfyorg/tailwind-utils'
+import { computed, useId } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Input from '@/components/ui/input/Input.vue'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import type {
   LocalizedString,
   OnboardingSurveyField,
   OnboardingSurveyOption
 } from '@/platform/remoteConfig/types'
 
+import { OTHER_TEXT_MAX_LENGTH } from './surveySchema'
+
 const {
   field,
   modelValue,
@@ -113,25 +126,31 @@ const emit = defineEmits<{
 const { t, te, locale } = useI18n()
 const controlId = useId()
 
+const optionCardClass =
+  'group h-auto w-full items-center justify-start gap-3 rounded-md border border-solid border-smoke-800/10 bg-smoke-800/10 px-4 py-3 text-left text-sm text-primary-comfy-canvas shadow-inset-highlight transition-colors hover:bg-sand-300/20 data-[state=on]:bg-sand-300/15 data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-brand-yellow'
+
+const checkMarkClass =
+  'icon-[lucide--check] size-4 shrink-0 text-brand-yellow opacity-0 group-data-[state=on]:opacity-100'
+
+const inputClass =
+  'border-smoke-800/10 bg-smoke-800/10 text-primary-comfy-canvas placeholder:text-primary-comfy-canvas/50 focus-visible:ring-inset'
+
+const isOtherSelected = computed(() =>
+  Array.isArray(modelValue)
+    ? modelValue.includes('other')
+    : modelValue === 'other'
+)
+
 const resolveLocalized = (value: LocalizedString): string => {
   if (typeof value === 'string') return value
   return value[locale.value] ?? value.en ?? Object.values(value)[0] ?? ''
 }
 
-const checkedTokens = {
-  checked: {
-    background: 'var(--color-electric-400)',
-    borderColor: 'var(--color-electric-400)',
-    hoverBackground: 'var(--color-electric-400)',
-    hoverBorderColor: 'var(--color-electric-400)'
-  }
-}
-
-const resolvedLabel = (() => {
+const resolvedLabel = computed(() => {
   if (field.labelKey && te(field.labelKey)) return t(field.labelKey)
   if (field.label != null) return resolveLocalized(field.label)
   return field.id
-})()
+})
 
 const resolveOptionLabel = (option: OnboardingSurveyOption): string => {
   if (option.labelKey && te(option.labelKey)) return t(option.labelKey)
@@ -143,13 +162,10 @@ const onSingleChange = (value: unknown) => {
   emit('update:modelValue', typeof value === 'string' ? value : '')
 }
 const onMultiChange = (value: unknown) => {
-  if (!Array.isArray(value)) {
-    emit('update:modelValue', [])
-    return
-  }
+  const selected = Array.isArray(value) ? value : []
   emit(
     'update:modelValue',
-    value.filter((v): v is string => typeof v === 'string')
+    selected.filter((v): v is string => typeof v === 'string')
   )
 }
 const onTextChange = (value: string | number | undefined) => {

src/platform/cloud/onboarding/survey/DynamicSurveyForm.test.ts

@@ -1,320 +1,383 @@
 import userEvent from '@testing-library/user-event'
-import { render, screen } from '@testing-library/vue'
-import PrimeVue from 'primevue/config'
+import { render, screen, waitFor } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
+import enMessages from '@/locales/en/main.json'
 import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
 
 import DynamicSurveyForm from './DynamicSurveyForm.vue'
-
-const flushPromises = () => new Promise((resolve) => setTimeout(resolve, 0))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      g: { back: 'Back', next: 'Next', submit: 'Submit' },
-      cloudOnboarding: {
-        survey: {
-          intro: 'Help us tailor your ComfyUI experience.',
-          errors: {
-            chooseAnOption: 'Please choose an option.',
-            selectAtLeastOne: 'Please select at least one option.',
-            describeAnswer: 'Please describe your answer.'
-          }
-        }
-      }
-    }
-  }
-})
+import { defaultOnboardingSurvey } from './defaultSurveySchema'
 
 const renderForm = (survey: OnboardingSurvey) =>
   render(DynamicSurveyForm, {
-    global: { plugins: [PrimeVue, i18n] },
+    global: {
+      plugins: [
+        createI18n({
+          legacy: false,
+          locale: 'en',
+          messages: { en: enMessages }
+        })
+      ]
+    },
     props: { survey }
   })
 
+const clickOption = (user: ReturnType<typeof userEvent.setup>, label: string) =>
+  user.click(screen.getByText(label))
+
+const firstSubmitPayload = (
+  emitted: Record<string, unknown[]>
+): Record<string, unknown> | undefined =>
+  (emitted.submit?.[0] as [Record<string, unknown>] | undefined)?.[0]
+
 const twoStepSurvey: OnboardingSurvey = {
   version: 1,
-  introKey: 'cloudOnboarding.survey.intro',
   fields: [
-    {
-      id: 'usage',
-      type: 'single',
-      label: 'How do you plan to use ComfyUI?',
-      required: true,
-      options: [
-        { value: 'personal', label: 'Personal use' },
-        { value: 'work', label: 'Work' }
-      ]
-    },
     {
       id: 'intent',
-      type: 'multi',
-      label: 'What do you want to create with ComfyUI?',
+      type: 'single',
+      label: 'What do you want to make?',
       required: true,
       options: [
         { value: 'images', label: 'Images' },
-        { value: 'videos', label: 'Videos' }
+        { value: 'video', label: 'Video' }
+      ]
+    },
+    {
+      id: 'making',
+      type: 'multi',
+      label: 'Pick everything that applies',
+      required: true,
+      options: [
+        { value: 'a', label: 'Making A' },
+        { value: 'b', label: 'Making B' }
       ]
     }
   ]
 }
 
-describe('DynamicSurveyForm', () => {
-  it('renders the intro text and the first field options', () => {
-    renderForm(twoStepSurvey)
+const branchedSurvey: OnboardingSurvey = {
+  version: 1,
+  fields: [
+    {
+      id: 'intent',
+      type: 'single',
+      label: 'What do you want to make?',
+      required: true,
+      options: [
+        { value: 'workflows', label: 'Workflows' },
+        { value: 'images', label: 'Images' }
+      ]
+    },
+    {
+      id: 'focus',
+      type: 'single',
+      label: 'What are you building?',
+      required: true,
+      showWhen: { field: 'intent', equals: 'workflows' },
+      options: [{ value: 'custom_nodes', label: 'Custom nodes' }]
+    }
+  ]
+}
 
-    expect(
-      screen.getByText('Help us tailor your ComfyUI experience.')
-    ).toBeInTheDocument()
-    expect(screen.getByText('How do you plan to use ComfyUI?')).toBeVisible()
-    expect(screen.getByLabelText('Personal use')).toBeInTheDocument()
-    expect(screen.getByLabelText('Work')).toBeInTheDocument()
+describe('DynamicSurveyForm', () => {
+  it('renders the real default schema (v3) with its first question and options', () => {
+    expect(defaultOnboardingSurvey.version).toBe(3)
+    const firstField = defaultOnboardingSurvey.fields[0]!
+    renderForm(defaultOnboardingSurvey)
+
+    expect(screen.getByText('What do you want to make?')).toBeVisible()
+    expect(screen.getByText('Images')).toBeInTheDocument()
+    expect(screen.getAllByRole('button')).toHaveLength(
+      firstField.options!.length
+    )
   })
 
-  it('disables Next until the user selects an option, then advances', async () => {
+  it('auto-advances when a single-select option is chosen', async () => {
     const user = userEvent.setup()
     renderForm(twoStepSurvey)
 
-    const next = screen.getByRole('button', { name: 'Next' })
-    expect(next).toBeDisabled()
-
-    await user.click(screen.getByLabelText('Personal use'))
-    expect(next).toBeEnabled()
-
-    await user.click(next)
-    await flushPromises()
+    // No Next click — choosing the card advances the wizard.
+    await clickOption(user, 'Images')
 
     expect(
-      screen.getByText('What do you want to create with ComfyUI?')
+      await screen.findByText('Pick everything that applies')
     ).toBeVisible()
-    expect(screen.getByLabelText('Images')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument()
   })
 
+  it('does not auto-advance a multi-select step; Submit gates on a choice', async () => {
+    const user = userEvent.setup()
+    renderForm(twoStepSurvey)
+
+    await clickOption(user, 'Images')
+
+    const submit = await screen.findByRole('button', { name: 'Submit' })
+    expect(submit).toBeDisabled()
+
+    await clickOption(user, 'Making A')
+    // Still on the multi step (no auto-advance), now submittable.
+    expect(screen.getByText('Pick everything that applies')).toBeVisible()
+    await waitFor(() => expect(submit).toBeEnabled())
+  })
+
   it('navigates back to the previous step', async () => {
     const user = userEvent.setup()
     renderForm(twoStepSurvey)
 
-    await user.click(screen.getByLabelText('Personal use'))
-    await user.click(screen.getByRole('button', { name: 'Next' }))
-    await flushPromises()
+    await clickOption(user, 'Images')
     expect(
-      screen.getByText('What do you want to create with ComfyUI?')
+      await screen.findByText('Pick everything that applies')
     ).toBeVisible()
 
     await user.click(screen.getByRole('button', { name: 'Back' }))
-    await flushPromises()
-    expect(screen.getByText('How do you plan to use ComfyUI?')).toBeVisible()
+    expect(await screen.findByText('What do you want to make?')).toBeVisible()
   })
 
-  it('resolves option and field labels via labelKey when provided', () => {
-    const localizedI18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: {
-        en: {
-          g: { back: 'Back', next: 'Next', submit: 'Submit' },
-          cloudOnboarding: {
-            survey: {
-              intro: 'Help us tailor your ComfyUI experience.',
-              errors: {
-                chooseAnOption: '',
-                selectAtLeastOne: '',
-                describeAnswer: ''
-              }
-            }
-          },
-          survey_label: 'Localized question?',
-          survey_a: 'Localized A',
-          survey_b: 'Localized B'
-        }
-      }
-    })
+  it('offers Next on an already-answered single-select reached via Back', async () => {
+    const user = userEvent.setup()
+    renderForm(twoStepSurvey)
 
-    render(DynamicSurveyForm, {
-      global: { plugins: [PrimeVue, localizedI18n] },
-      props: {
-        survey: {
-          version: 1,
-          fields: [
-            {
-              id: 'q',
-              type: 'single',
-              labelKey: 'survey_label',
-              required: true,
-              options: [
-                { value: 'a', labelKey: 'survey_a' },
-                { value: 'b', labelKey: 'survey_b' }
-              ]
-            }
-          ]
-        }
-      }
-    })
+    await clickOption(user, 'Images')
+    await screen.findByText('Pick everything that applies')
+    await user.click(screen.getByRole('button', { name: 'Back' }))
 
-    expect(screen.getByText('Localized question?')).toBeVisible()
-    expect(screen.getByLabelText('Localized A')).toBeInTheDocument()
-    expect(screen.getByLabelText('Localized B')).toBeInTheDocument()
+    const next = await screen.findByRole('button', { name: 'Next' })
+    await user.click(next)
+    expect(
+      await screen.findByText('Pick everything that applies')
+    ).toBeVisible()
   })
 
-  it('renders server-supplied translations from a label locale map', () => {
-    const koreanI18n = createI18n({
-      legacy: false,
-      locale: 'ko',
-      fallbackLocale: 'en',
-      messages: {
-        en: {
-          g: { back: 'Back', next: 'Next', submit: 'Submit' },
-          cloudOnboarding: {
-            survey: {
-              intro: '',
-              errors: {
-                chooseAnOption: '',
-                selectAtLeastOne: '',
-                describeAnswer: ''
-              }
-            }
-          }
-        },
-        ko: { g: { back: '뒤로', next: '다음', submit: '제출' } }
-      }
-    })
+  it('reveals a branched follow-up step from the answer and submits it', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderForm(branchedSurvey)
 
-    render(DynamicSurveyForm, {
-      global: { plugins: [PrimeVue, koreanI18n] },
-      props: {
-        survey: {
-          version: 1,
-          fields: [
-            {
-              id: 'usage',
-              type: 'single',
-              label: {
-                en: 'How will you use it?',
-                ko: '어떻게 사용하시겠어요?'
-              },
-              required: true,
-              options: [
-                {
-                  value: 'personal',
-                  label: { en: 'Personal use', ko: '개인 용도' }
-                },
-                { value: 'work', label: { en: 'Work', ko: '업무' } }
-              ]
-            }
-          ]
-        }
-      }
-    })
+    await clickOption(user, 'Workflows')
+    expect(await screen.findByText('What are you building?')).toBeVisible()
 
-    expect(screen.getByText('어떻게 사용하시겠어요?')).toBeVisible()
-    expect(screen.getByLabelText('개인 용도')).toBeInTheDocument()
-    expect(screen.getByLabelText('업무')).toBeInTheDocument()
+    await clickOption(user, 'Custom nodes')
+    await user.click(await screen.findByRole('button', { name: 'Submit' }))
+
+    await waitFor(() =>
+      expect(firstSubmitPayload(emitted())).toEqual({
+        intent: 'workflows',
+        focus: 'custom_nodes'
+      })
+    )
   })
 
-  it('falls back to English when current locale missing from label map', () => {
-    const fallbackI18n = createI18n({
-      legacy: false,
-      locale: 'fr',
-      fallbackLocale: 'en',
-      messages: {
-        en: {
-          g: { back: 'Back', next: 'Next', submit: 'Submit' },
-          cloudOnboarding: {
-            survey: {
-              intro: '',
-              errors: {
-                chooseAnOption: '',
-                selectAtLeastOne: '',
-                describeAnswer: ''
-              }
-            }
-          }
-        },
-        fr: {}
-      }
-    })
+  it('hides the branched step when the answer does not match', async () => {
+    const user = userEvent.setup()
+    const { emitted } = renderForm(branchedSurvey)
 
-    render(DynamicSurveyForm, {
-      global: { plugins: [PrimeVue, fallbackI18n] },
-      props: {
-        survey: {
-          version: 1,
-          fields: [
-            {
-              id: 'q',
-              type: 'single',
-              label: { en: 'English question', ko: '한국어' },
-              required: true,
-              options: [
-                { value: 'a', label: { en: 'English A', ko: '한국어 A' } }
-              ]
-            }
+    // 'images' is the last visible step (focus hidden) → Submit, no branch.
+    await clickOption(user, 'Images')
+    const submit = await screen.findByRole('button', { name: 'Submit' })
+    expect(screen.queryByText('What are you building?')).not.toBeInTheDocument()
+
+    await user.click(submit)
+    await waitFor(() =>
+      expect(firstSubmitPayload(emitted())).toEqual({
+        intent: 'images',
+        focus: ''
+      })
+    )
+  })
+
+  it('requires the "other" free-text before submitting, then submits it', async () => {
+    const user = userEvent.setup()
+    const otherSurvey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'source',
+          type: 'single',
+          label: 'How did you find us?',
+          required: true,
+          allowOther: true,
+          otherFieldId: 'sourceOther',
+          options: [
+            { value: 'search', label: 'Web search' },
+            { value: 'other', label: 'Somewhere else' }
           ]
         }
-      }
+      ]
+    }
+    const { emitted } = renderForm(otherSurvey)
+
+    // Selecting 'other' must NOT auto-advance — the text box is required.
+    await clickOption(user, 'Somewhere else')
+    const submit = await screen.findByRole('button', { name: 'Submit' })
+    expect(submit).toBeDisabled()
+
+    await user.type(
+      await screen.findByPlaceholderText('Where did you find us?'),
+      'A newsletter'
+    )
+    await waitFor(() => expect(submit).toBeEnabled())
+
+    await user.click(submit)
+    await waitFor(() =>
+      expect(firstSubmitPayload(emitted())).toEqual({ source: 'A newsletter' })
+    )
+  })
+
+  it('surfaces the free-text error once "other" text is touched then cleared', async () => {
+    const user = userEvent.setup()
+    const otherSurvey: OnboardingSurvey = {
+      version: 1,
+      fields: [
+        {
+          id: 'source',
+          type: 'single',
+          label: 'How did you find us?',
+          required: true,
+          allowOther: true,
+          otherFieldId: 'sourceOther',
+          options: [
+            { value: 'search', label: 'Web search' },
+            { value: 'other', label: 'Somewhere else' }
+          ]
+        }
+      ]
+    }
+    renderForm(otherSurvey)
+
+    await clickOption(user, 'Somewhere else')
+    const input = await screen.findByPlaceholderText('Where did you find us?')
+    // Type then clear → the free-text field is touched but empty, so its
+    // required error surfaces.
+    await user.type(input, 'x')
+    await user.clear(input)
+    expect(
+      await screen.findByText('Please describe your answer.')
+    ).toBeVisible()
+  })
+
+  it('shows a required-field error only after the user interacts, not before', async () => {
+    const user = userEvent.setup()
+    renderForm({
+      version: 1,
+      fields: [
+        {
+          id: 'making',
+          type: 'multi',
+          label: 'Pick everything that applies',
+          required: true,
+          options: [{ value: 'a', label: 'Making A' }]
+        }
+      ]
     })
 
-    // fr is not in the map → falls back to en
-    expect(screen.getByText('English question')).toBeVisible()
-    expect(screen.getByLabelText('English A')).toBeInTheDocument()
+    // No error on first render (field untouched).
+    expect(
+      screen.queryByText('Please select at least one option.')
+    ).not.toBeInTheDocument()
+
+    // Select then clear → field is touched but empty → error surfaces.
+    await user.click(screen.getByText('Making A'))
+    await user.click(screen.getByText('Making A'))
+    expect(
+      await screen.findByText('Please select at least one option.')
+    ).toBeVisible()
   })
 
   it('allows advancing past an optional field while still empty', async () => {
     const user = userEvent.setup()
-    render(DynamicSurveyForm, {
-      global: { plugins: [PrimeVue, i18n] },
-      props: {
-        survey: {
-          version: 1,
-          fields: [
-            {
-              id: 'q1',
-              type: 'single',
-              label: 'Optional question?',
-              options: [
-                { value: 'a', label: 'A' },
-                { value: 'b', label: 'B' }
-              ]
-              // no required: true — should be skippable
-            },
-            {
-              id: 'q2',
-              type: 'single',
-              label: 'Required question?',
-              required: true,
-              options: [{ value: 'c', label: 'C' }]
-            }
+    renderForm({
+      version: 1,
+      fields: [
+        {
+          id: 'q1',
+          type: 'single',
+          label: 'Optional question?',
+          options: [
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' }
           ]
+          // no required: true — should be skippable
+        },
+        {
+          id: 'q2',
+          type: 'single',
+          label: 'Required question?',
+          required: true,
+          options: [{ value: 'c', label: 'C' }]
         }
-      }
+      ]
     })
 
     const next = screen.getByRole('button', { name: 'Next' })
     expect(next).toBeEnabled()
 
     await user.click(next)
-    await flushPromises()
-    expect(screen.getByText('Required question?')).toBeVisible()
+    expect(await screen.findByText('Required question?')).toBeVisible()
   })
 
-  it('enables Submit only after the multi-select field has at least one choice', async () => {
+  it('resets to the first step when the survey prop changes', async () => {
     const user = userEvent.setup()
-    renderForm(twoStepSurvey)
+    const { rerender } = render(DynamicSurveyForm, {
+      global: {
+        plugins: [
+          createI18n({
+            legacy: false,
+            locale: 'en',
+            messages: { en: enMessages }
+          })
+        ]
+      },
+      props: { survey: twoStepSurvey }
+    })
 
-    await user.click(screen.getByLabelText('Work'))
-    await user.click(screen.getByRole('button', { name: 'Next' }))
-    await flushPromises()
+    await clickOption(user, 'Images')
+    expect(
+      await screen.findByText('Pick everything that applies')
+    ).toBeVisible()
 
-    const submitBtn = screen.getByRole('button', { name: 'Submit' })
-    expect(submitBtn).toBeDisabled()
+    await rerender({ survey: branchedSurvey })
+    // Back on step 0 of the new survey (no Back button on the first step).
+    expect(await screen.findByText('What do you want to make?')).toBeVisible()
+    expect(
+      screen.queryByRole('button', { name: 'Back' })
+    ).not.toBeInTheDocument()
+  })
 
-    await user.click(screen.getByRole('checkbox', { name: /Images/i }))
-    await flushPromises()
-    expect(submitBtn).toBeEnabled()
+  it('renders server-supplied label translations and falls back to English', () => {
+    render(DynamicSurveyForm, {
+      global: {
+        plugins: [
+          createI18n({
+            legacy: false,
+            locale: 'ko',
+            fallbackLocale: 'en',
+            messages: { en: enMessages, ko: { g: { next: '다음' } } }
+          })
+        ]
+      },
+      props: {
+        survey: {
+          version: 1,
+          fields: [
+            {
+              id: 'intent',
+              type: 'single',
+              label: { en: 'What will you make?', ko: '무엇을 만들 건가요?' },
+              required: true,
+              options: [
+                // ko provided → localized; ko missing → English fallback
+                { value: 'images', label: { en: 'Images', ko: '이미지' } },
+                { value: 'video', label: { en: 'Video' } }
+              ]
+            }
+          ]
+        }
+      }
+    })
+
+    expect(screen.getByText('무엇을 만들 건가요?')).toBeVisible()
+    expect(screen.getByText('이미지')).toBeInTheDocument()
+    expect(screen.getByText('Video')).toBeInTheDocument()
   })
 })

src/platform/cloud/onboarding/survey/DynamicSurveyForm.vue

@@ -1,109 +1,118 @@
 <template>
-  <form class="flex size-full flex-col" @submit.prevent="onSubmit">
-    <p v-if="introText" class="mb-4 text-sm text-muted">
+  <form class="flex w-full flex-col" @submit.prevent="onSubmit">
+    <p v-if="introText" class="mb-4 text-sm text-muted-foreground">
       {{ introText }}
     </p>
     <div
-      class="mb-8 h-2 w-full overflow-hidden rounded-full bg-secondary-background"
+      class="mb-8 h-1.5 w-full overflow-hidden rounded-full bg-primary-comfy-canvas/10"
     >
       <div
-        class="h-full bg-electric-400 transition-[width] duration-300 ease-out"
+        class="h-full bg-brand-yellow transition-[width] duration-300 ease-out"
         :style="{ width: `${progressPercent}%` }"
       />
     </div>
 
-    <div class="flex flex-1 flex-col overflow-hidden">
-      <div
-        v-if="currentField"
-        :key="currentField.id"
-        class="flex flex-1 flex-col gap-4 overflow-y-auto pr-1"
-      >
-        <DynamicSurveyField
-          :field="currentField"
-          :model-value="values[currentField.id]"
-          :other-value="
-            currentField.otherFieldId
-              ? (values[currentField.otherFieldId] as string)
-              : undefined
-          "
-          :error-message="
-            errors[currentField.id] ??
-            (currentField.otherFieldId
-              ? errors[currentField.otherFieldId]
-              : undefined)
-          "
-          @update:model-value="(value) => onFieldChange(currentField.id, value)"
-          @update:other-value="
-            (value) =>
-              currentField.otherFieldId &&
-              onFieldChange(currentField.otherFieldId, value)
-          "
-        />
+    <div
+      class="overflow-hidden transition-[height] duration-300 ease-out"
+      :style="animatedHeightStyle"
+    >
+      <div ref="questionContent" class="relative">
+        <Transition
+          enter-active-class="transition-opacity duration-300 ease-out"
+          enter-from-class="opacity-0"
+          leave-active-class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-out"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-if="currentField"
+            :key="currentField.id"
+            class="flex flex-col gap-4"
+          >
+            <DynamicSurveyField
+              :field="currentField"
+              :model-value="values[currentField.id]"
+              :other-value="
+                currentField.otherFieldId
+                  ? (values[currentField.otherFieldId] as string)
+                  : undefined
+              "
+              :error-message="currentError"
+              @update:model-value="
+                (value) => void onFieldChange(currentField.id, value)
+              "
+              @update:other-value="
+                (value) =>
+                  currentField.otherFieldId &&
+                  void onFieldChange(currentField.otherFieldId, value)
+              "
+            />
+          </div>
+        </Transition>
       </div>
     </div>
 
-    <div class="flex gap-6 pt-4">
+    <div
+      v-if="!isFirst || showNext || isLast"
+      class="mt-8 flex items-center justify-between gap-4"
+    >
       <Button
         v-if="!isFirst"
         type="button"
-        variant="secondary"
-        class="h-10 flex-1 text-white"
+        variant="link"
+        size="lg"
+        class="px-0 text-primary-comfy-canvas/70 hover:text-primary-comfy-canvas"
         @click="goPrevious"
       >
+        <i class="icon-[lucide--chevron-left] size-4" aria-hidden="true" />
         {{ $t('g.back') }}
       </Button>
-      <span v-else class="flex-1" />
+      <span v-else />
       <Button
-        v-if="!isLast"
+        v-if="showNext"
         type="button"
+        size="lg"
         :disabled="!isCurrentValid"
-        :class="
-          cn(
-            'h-10 flex-1 border-none',
-            isCurrentValid
-              ? 'bg-electric-400 text-black hover:bg-electric-400/85'
-              : 'bg-zinc-800 text-zinc-500'
-          )
-        "
+        class="bg-brand-yellow text-primary-comfy-ink hover:bg-brand-yellow/85 disabled:bg-smoke-800/10 disabled:text-primary-comfy-canvas/40 disabled:opacity-100"
         @click="goNext"
       >
         {{ $t('g.next') }}
+        <i class="icon-[lucide--chevron-right] size-4" aria-hidden="true" />
       </Button>
       <Button
-        v-else
+        v-else-if="isLast"
         type="submit"
+        size="lg"
         :disabled="!isCurrentValid || isSubmitting"
         :loading="isSubmitting"
-        :class="
-          cn(
-            'h-10 flex-1 border-none',
-            isCurrentValid && !isSubmitting
-              ? 'bg-electric-400 text-black hover:bg-electric-400/85'
-              : 'bg-zinc-800 text-zinc-500'
-          )
-        "
+        class="bg-brand-yellow text-primary-comfy-ink hover:bg-brand-yellow/85 disabled:bg-smoke-800/10 disabled:text-primary-comfy-canvas/40 disabled:opacity-100"
       >
         {{ $t('g.submit') }}
       </Button>
+      <span v-else />
     </div>
   </form>
 </template>
 
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
+import { useElementSize } from '@vueuse/core'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+import type {
+  OnboardingSurvey,
+  OnboardingSurveyField
+} from '@/platform/remoteConfig/types'
 
 import DynamicSurveyField from './DynamicSurveyField.vue'
 import {
   buildInitialValues,
   buildSubmissionPayload,
   buildZodSchema,
+  hasNonEmptyValue,
+  isOtherValue,
   prepareSurvey,
   visibleFields
 } from './surveySchema'
@@ -147,6 +156,8 @@ watch(
     liveValues.value = { ...fresh }
     resetForm({ values: fresh })
     stepIndex.value = 0
+    touched.value = new Set()
+    isAdvancing.value = false
   }
 )
 
@@ -154,11 +165,43 @@ const visible = computed(() =>
   visibleFields(preparedSurvey.value, values as SurveyValues)
 )
 const stepIndex = ref(0)
+const touched = ref(new Set<string>())
+const isAdvancing = ref(false)
+
+const questionContent = useTemplateRef<HTMLElement>('questionContent')
+const { height: contentHeight } = useElementSize(questionContent)
+const animatedHeightStyle = computed(() =>
+  contentHeight.value ? { height: `${contentHeight.value}px` } : {}
+)
 
 const currentField = computed(() => visible.value[stepIndex.value])
 const isFirst = computed(() => stepIndex.value === 0)
 const isLast = computed(() => stepIndex.value === visible.value.length - 1)
 
+const showNext = computed(() => {
+  if (isLast.value || isAdvancing.value) return false
+  const field = currentField.value
+  if (!field) return false
+  if (field.type !== 'single') return true
+  return !(field.required && !hasNonEmptyValue(values[field.id]))
+})
+
+const currentError = computed(() => {
+  const field = currentField.value
+  if (!field) return undefined
+  if (touched.value.has(field.id) && errors.value[field.id]) {
+    return errors.value[field.id]
+  }
+  if (
+    field.otherFieldId &&
+    touched.value.has(field.otherFieldId) &&
+    errors.value[field.otherFieldId]
+  ) {
+    return errors.value[field.otherFieldId]
+  }
+  return undefined
+})
+
 const totalSteps = computed(() => Math.max(visible.value.length, 1))
 const progressPercent = computed(() =>
   Math.max(
@@ -172,26 +215,41 @@ const isCurrentValid = computed(() => {
   if (!field) return false
 
   const value = values[field.id]
-  const isEmpty =
-    field.type === 'multi'
-      ? !Array.isArray(value) || value.length === 0
-      : typeof value !== 'string' || value.length === 0
+  if (!hasNonEmptyValue(value)) return !field.required
 
-  if (isEmpty) return !field.required
-
-  if (field.allowOther && field.otherFieldId && value === 'other') {
+  if (field.allowOther && field.otherFieldId && isOtherValue(value)) {
     const other = values[field.otherFieldId]
     return typeof other === 'string' && other.trim().length > 0
   }
   return true
 })
 
-const onFieldChange = (id: string, value: string | string[]) => {
+const isAutoAdvanceValue = (field: OnboardingSurveyField, value: unknown) =>
+  field.type === 'single' &&
+  typeof value === 'string' &&
+  value !== '' &&
+  value !== 'other'
+
+const markTouched = (id: string) => {
+  touched.value = new Set(touched.value).add(id)
+}
+
+const onFieldChange = async (id: string, value: string | string[]) => {
+  if (isAdvancing.value) return
+  markTouched(id)
   setFieldValue(id, value)
   liveValues.value = { ...liveValues.value, [id]: value }
   if (stepIndex.value > visible.value.length - 1) {
     stepIndex.value = Math.max(0, visible.value.length - 1)
   }
+
+  const field = currentField.value
+  if (field?.id === id && isAutoAdvanceValue(field, value)) {
+    isAdvancing.value = true
+    await nextTick()
+    goNext()
+    isAdvancing.value = false
+  }
 }
 
 const goNext = () => {
@@ -202,6 +260,11 @@ const goPrevious = () => {
 }
 
 const onSubmit = async () => {
+  const field = currentField.value
+  if (field) {
+    markTouched(field.id)
+    if (field.otherFieldId) markTouched(field.otherFieldId)
+  }
   const result = await validate()
   if (!result.valid) return
   emit(

src/platform/cloud/onboarding/survey/defaultSurveySchema.ts

@@ -1,55 +1,61 @@
-import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
+import type {
+  OnboardingSurvey,
+  OnboardingSurveyOption
+} from '@/platform/remoteConfig/types'
 
 const optionsFor = (
   fieldId: string,
-  values: string[]
-): { value: string; labelKey: string }[] =>
+  values: string[],
+  icons: Record<string, string> = {}
+): OnboardingSurveyOption[] =>
   values.map((value) => ({
     value,
-    labelKey: `cloudOnboarding.survey.options.${fieldId}.${value}`
+    labelKey: `cloudOnboarding.survey.options.${fieldId}.${value}`,
+    ...(icons[value] ? { icon: icons[value] } : {})
   }))
 
 export const defaultOnboardingSurvey: OnboardingSurvey = {
-  version: 2,
+  version: 3,
   introKey: 'cloudOnboarding.survey.intro',
   fields: [
-    {
-      id: 'usage',
-      type: 'single',
-      labelKey: 'cloudSurvey_steps_usage',
-      required: true,
-      options: optionsFor('usage', ['personal', 'work', 'education'])
-    },
-    {
-      id: 'familiarity',
-      type: 'single',
-      labelKey: 'cloudSurvey_steps_familiarity',
-      required: true,
-      options: optionsFor('familiarity', [
-        'new',
-        'starting',
-        'basics',
-        'advanced',
-        'expert'
-      ])
-    },
     {
       id: 'intent',
-      type: 'multi',
+      type: 'single',
       labelKey: 'cloudSurvey_steps_intent',
       required: true,
-      randomize: true,
-      options: optionsFor('intent', [
-        'workflows',
-        'custom_nodes',
-        'videos',
-        'images',
-        '3d_game',
-        'audio',
-        'apps',
-        'api',
-        'not_sure'
-      ])
+      allowOther: true,
+      otherFieldId: 'intentOther',
+      options: optionsFor(
+        'intent',
+        ['images', 'video', 'workflows', 'apps_api', 'exploring', 'other'],
+        {
+          images: 'icon-[lucide--image]',
+          video: 'icon-[lucide--video]',
+          workflows: 'icon-[lucide--workflow]',
+          apps_api: 'icon-[lucide--blocks]',
+          exploring: 'icon-[lucide--compass]',
+          other: 'icon-[lucide--pencil]'
+        }
+      )
+    },
+    {
+      id: 'experience',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_experience',
+      required: true,
+      options: optionsFor('experience', ['new', 'some', 'pro'], {
+        new: 'icon-[lucide--sprout]',
+        some: 'icon-[lucide--map]',
+        pro: 'icon-[lucide--rocket]'
+      })
+    },
+    {
+      id: 'focus',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_focus',
+      required: true,
+      showWhen: { field: 'intent', equals: ['workflows', 'apps_api'] },
+      options: optionsFor('focus', ['custom_nodes', 'pipelines', 'products'])
     },
     {
       id: 'source',
@@ -57,19 +63,31 @@ export const defaultOnboardingSurvey: OnboardingSurvey = {
       labelKey: 'cloudSurvey_steps_source',
       required: true,
       randomize: true,
+      allowOther: true,
+      otherFieldId: 'sourceOther',
       options: optionsFor('source', [
+        'social',
+        'friend',
+        'search',
+        'community',
+        'other'
+      ])
+    },
+    {
+      id: 'source_social',
+      type: 'single',
+      labelKey: 'cloudSurvey_steps_source_social',
+      required: true,
+      randomize: true,
+      showWhen: { field: 'source', equals: 'social' },
+      options: optionsFor('source_social', [
         'youtube',
         'reddit',
         'twitter',
         'instagram',
+        'tiktok',
         'linkedin',
-        'friend',
-        'search',
-        'newsletter',
-        'conference',
-        'discord',
-        'github',
-        'other'
+        'discord'
       ])
     }
   ]

src/platform/cloud/onboarding/survey/surveySchema.test.ts

@@ -2,10 +2,13 @@ import { describe, expect, it } from 'vitest'
 
 import type { OnboardingSurvey } from '@/platform/remoteConfig/types'
 
+import { defaultOnboardingSurvey } from './defaultSurveySchema'
 import {
+  OTHER_TEXT_MAX_LENGTH,
   buildInitialValues,
   buildSubmissionPayload,
   buildZodSchema,
+  hasNonEmptyValue,
   prepareSurvey,
   visibleFields
 } from './surveySchema'
@@ -246,3 +249,179 @@ describe('prepareSurvey', () => {
     expect(values.slice(0, -2).sort()).toEqual(['a', 'b'])
   })
 })
+
+describe('defaultOnboardingSurvey branching', () => {
+  const idsFor = (values: Record<string, string | string[]>) =>
+    visibleFields(defaultOnboardingSurvey, values).map((f) => f.id)
+
+  it('asks only the core steps when no branch condition is met', () => {
+    expect(idsFor({ intent: 'images', source: 'friend' })).toEqual([
+      'intent',
+      'experience',
+      'source'
+    ])
+  })
+
+  it('asks every step when both branches are active', () => {
+    expect(idsFor({ intent: 'workflows', source: 'social' })).toEqual([
+      'intent',
+      'experience',
+      'focus',
+      'source',
+      'source_social'
+    ])
+  })
+
+  it('asks focus only for builder intents (workflows / apps_api)', () => {
+    expect(idsFor({ intent: 'workflows' })).toContain('focus')
+    expect(idsFor({ intent: 'apps_api' })).toContain('focus')
+    expect(idsFor({ intent: 'images' })).not.toContain('focus')
+    expect(idsFor({ intent: 'exploring' })).not.toContain('focus')
+  })
+
+  it('asks source_social only when source is social', () => {
+    expect(idsFor({ source: 'social' })).toContain('source_social')
+    expect(idsFor({ source: 'friend' })).not.toContain('source_social')
+  })
+
+  it('zeroes hidden branch fields in the submission payload', () => {
+    const payload = buildSubmissionPayload(defaultOnboardingSurvey, {
+      intent: 'images',
+      experience: 'new',
+      source: 'friend'
+    })
+    expect(payload).toMatchObject({
+      intent: 'images',
+      experience: 'new',
+      source: 'friend',
+      focus: '',
+      source_social: ''
+    })
+  })
+
+  it('prefers free-text over the "other" sentinel for intent and source', () => {
+    const payload = buildSubmissionPayload(defaultOnboardingSurvey, {
+      intent: 'other',
+      intentOther: '  Comics  ',
+      experience: 'pro',
+      source: 'other',
+      sourceOther: 'A podcast'
+    })
+    expect(payload.intent).toBe('Comics')
+    expect(payload.source).toBe('A podcast')
+  })
+})
+
+describe('hasNonEmptyValue', () => {
+  const cases: [string | string[] | undefined, boolean][] = [
+    [undefined, false],
+    ['', false],
+    [[], false],
+    ['a', true],
+    [['a'], true],
+    [['a', 'b'], true]
+  ]
+  it.for(cases)('treats %o as non-empty=%o', ([value, expected]) => {
+    expect(hasNonEmptyValue(value)).toBe(expected)
+  })
+})
+
+describe('multi-select allowOther', () => {
+  const multiOtherSurvey: OnboardingSurvey = {
+    version: 1,
+    fields: [
+      {
+        id: 'making',
+        type: 'multi',
+        required: true,
+        allowOther: true,
+        otherFieldId: 'makingOther',
+        options: [
+          { value: 'a', labelKey: 'a' },
+          { value: 'other', labelKey: 'other' }
+        ]
+      }
+    ]
+  }
+
+  it('requires the free-text when a multi field includes "other"', () => {
+    const schema = buildZodSchema(multiOtherSurvey, {
+      making: ['a', 'other'],
+      makingOther: ''
+    })
+    expect(
+      schema.safeParse({ making: ['a', 'other'], makingOther: '' }).success
+    ).toBe(false)
+    expect(
+      schema.safeParse({ making: ['a', 'other'], makingOther: 'Comics' })
+        .success
+    ).toBe(true)
+  })
+
+  it('does not require the free-text when "other" is not among the choices', () => {
+    const schema = buildZodSchema(multiOtherSurvey, {
+      making: ['a'],
+      makingOther: ''
+    })
+    expect(schema.safeParse({ making: ['a'], makingOther: '' }).success).toBe(
+      true
+    )
+  })
+
+  it('keeps the array and surfaces the trimmed free-text separately', () => {
+    const payload = buildSubmissionPayload(multiOtherSurvey, {
+      making: ['a', 'other'],
+      makingOther: '  Comics  '
+    })
+    expect(payload.making).toEqual(['a', 'other'])
+    expect(payload.makingOther).toBe('Comics')
+  })
+})
+
+describe('other free-text validation', () => {
+  const otherSurvey: OnboardingSurvey = {
+    version: 1,
+    fields: [
+      {
+        id: 'source',
+        type: 'single',
+        required: true,
+        allowOther: true,
+        otherFieldId: 'sourceOther',
+        options: [
+          { value: 'search', labelKey: 'search' },
+          { value: 'other', labelKey: 'other' }
+        ]
+      }
+    ]
+  }
+
+  it('rejects a whitespace-only "other" answer', () => {
+    const schema = buildZodSchema(otherSurvey, {
+      source: 'other',
+      sourceOther: '   '
+    })
+    expect(
+      schema.safeParse({ source: 'other', sourceOther: '   ' }).success
+    ).toBe(false)
+  })
+
+  it('rejects an "other" answer longer than the max length', () => {
+    const schema = buildZodSchema(otherSurvey, {
+      source: 'other',
+      sourceOther: 'x'.repeat(OTHER_TEXT_MAX_LENGTH + 1)
+    })
+    expect(
+      schema.safeParse({
+        source: 'other',
+        sourceOther: 'x'.repeat(OTHER_TEXT_MAX_LENGTH + 1)
+      }).success
+    ).toBe(false)
+    expect(
+      schema.safeParse({
+        source: 'other',
+        sourceOther: 'x'.repeat(OTHER_TEXT_MAX_LENGTH)
+      }).success
+    ).toBe(true)
+  })
+})

src/platform/cloud/onboarding/survey/surveySchema.ts

@@ -9,12 +9,19 @@ import type {
 
 export type SurveyValues = Record<string, string | string[] | undefined>
 
-const hasNonEmptyValue = (current: string | string[] | undefined): boolean => {
+export const OTHER_TEXT_MAX_LENGTH = 200
+
+export const hasNonEmptyValue = (
+  current: string | string[] | undefined
+): boolean => {
   if (current === undefined || current === '') return false
   if (Array.isArray(current)) return current.length > 0
   return true
 }
 
+export const isOtherValue = (current: string | string[] | undefined): boolean =>
+  Array.isArray(current) ? current.includes('other') : current === 'other'
+
 const conditionMatches = (
   condition: OnboardingSurveyFieldCondition | undefined,
   values: SurveyValues
@@ -54,7 +61,7 @@ export const prepareSurvey = (survey: OnboardingSurvey): OnboardingSurvey => ({
   fields: survey.fields.map(randomizeOptions)
 })
 
-type Translator = (key: string) => string
+type Translator = (key: string, named?: Record<string, unknown>) => string
 
 const identityTranslator: Translator = (key) => key
 
@@ -87,11 +94,19 @@ export const buildZodSchema = (
     if (
       field.allowOther &&
       field.otherFieldId &&
-      values[field.id] === 'other'
+      isOtherValue(values[field.id])
     ) {
-      shape[field.otherFieldId] = z.string().min(1, {
-        message: t('cloudOnboarding.survey.errors.describeAnswer')
-      })
+      shape[field.otherFieldId] = z
+        .string()
+        .trim()
+        .min(1, {
+          message: t('cloudOnboarding.survey.errors.describeAnswer')
+        })
+        .max(OTHER_TEXT_MAX_LENGTH, {
+          message: t('cloudOnboarding.survey.errors.answerTooLong', {
+            max: OTHER_TEXT_MAX_LENGTH
+          })
+        })
     } else if (field.otherFieldId) {
       shape[field.otherFieldId] = z.string().optional()
     }
@@ -120,17 +135,23 @@ export const buildSubmissionPayload = (
       continue
     }
     const value = values[field.id]
-    const otherRaw = field.otherFieldId ? values[field.otherFieldId] : undefined
-    if (
+    const otherFieldId = field.otherFieldId
+    const otherRaw = otherFieldId ? values[otherFieldId] : undefined
+    const otherText =
       field.allowOther &&
-      field.otherFieldId &&
-      value === 'other' &&
+      otherFieldId &&
+      isOtherValue(value) &&
       typeof otherRaw === 'string'
-    ) {
-      const other = otherRaw.trim()
-      payload[field.id] = other || 'other'
+        ? otherRaw.trim()
+        : undefined
+
+    if (otherText !== undefined && field.type !== 'multi') {
+      payload[field.id] = otherText || 'other'
     } else {
       payload[field.id] = field.type === 'multi' ? (value ?? []) : (value ?? '')
+      if (otherText !== undefined && otherFieldId) {
+        payload[otherFieldId] = otherText
+      }
     }
   }
   return payload

src/platform/remoteConfig/types.ts

@@ -44,6 +44,7 @@ export type OnboardingSurveyOption = {
   value: string
   label?: LocalizedString
   labelKey?: string
+  icon?: string
 }
 
 export type OnboardingSurveyFieldCondition = {

src/platform/secrets/components/SecretFormDialog.vue

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

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

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

src/platform/secrets/composables/useSecretForm.ts

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

src/platform/settings/components/SettingDialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <BaseModalLayout content-title="" data-testid="settings-dialog" size="full">
+  <BaseModalLayout
+    content-title=""
+    data-testid="settings-dialog"
+    size="full"
+    header-height-class="h-22"
+    :content-padding="isWorkspacePanel ? 'flush' : 'default'"
+  >
     <template #leftPanelHeaderTitle>
       <i class="icon-[lucide--settings]" />
       <h2 class="text-neutral text-base">{{ $t('g.settings') }}</h2>
@@ -48,6 +54,7 @@
         id="keybinding-panel-header"
         class="flex-1"
       />
+      <WorkspaceSettingsHeader v-else-if="isWorkspacePanel" />
     </template>
 
     <template #header-right-area>
@@ -55,6 +62,7 @@
         v-if="activeCategoryKey === 'keybinding'"
         id="keybinding-panel-actions"
       />
+      <WorkspaceMenuButton v-else-if="isWorkspacePanel" />
     </template>
 
     <template #content>
@@ -93,8 +101,11 @@ import NavTitle from '@/components/widget/nav/NavTitle.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
 import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
+import WorkspaceMenuButton from '@/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue'
+import WorkspaceSettingsHeader from '@/platform/workspace/components/dialogs/settings/WorkspaceSettingsHeader.vue'
 import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
 import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
+import { useSettingsNavigation } from '@/platform/settings/composables/useSettingsNavigation'
 import { useSearchQueryTracking } from '@/platform/telemetry/searchQuery/useSearchQueryTracking'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import type {
@@ -135,6 +146,14 @@ const { fetchBalance } = useBillingContext()
 const navRef = ref<HTMLElement | null>(null)
 const activeCategoryKey = ref<string | null>(defaultCategory.value?.key ?? null)
 
+// Let panels deep-link into a sibling panel (e.g. Overview → Members).
+const { requestedPanelKey } = useSettingsNavigation()
+watch(requestedPanelKey, (key) => {
+  if (!key) return
+  activeCategoryKey.value = key
+  requestedPanelKey.value = null
+})
+
 const searchableNavItems = computed(() =>
   navGroups.value.flatMap((g) =>
     g.items.map((item) => ({
@@ -172,6 +191,17 @@ const activePanel = computed(() => {
   return findPanelByKey(activeCategoryKey.value)
 })
 
+const WORKSPACE_PANEL_KEYS = [
+  'workspace',
+  'workspace-members',
+  'workspace-partner-nodes'
+]
+const isWorkspacePanel = computed(
+  () =>
+    !!activeCategoryKey.value &&
+    WORKSPACE_PANEL_KEYS.includes(activeCategoryKey.value)
+)
+
 const getGroupSortOrder = (group: SettingTreeNode): number =>
   Math.max(0, ...flattenTree<SettingParams>(group).map((s) => s.sortOrder ?? 0))
 

src/platform/settings/composables/useSettingUI.ts

@@ -188,6 +188,18 @@ export function useSettingUI(
     )
   }
 
+  const membersPanel: SettingPanelItem = {
+    node: {
+      key: 'workspace-members',
+      label: 'Members',
+      children: []
+    },
+    component: defineAsyncComponent(
+      () =>
+        import('@/platform/workspace/components/dialogs/settings/WorkspaceMembersPanelContent.vue')
+    )
+  }
+
   const shouldShowWorkspacePanel = computed(
     () => teamWorkspacesEnabled.value && isLoggedIn.value
   )
@@ -245,7 +257,7 @@ export function useSettingUI(
       aboutPanel,
       creditsPanel,
       userPanel,
-      ...(shouldShowWorkspacePanel.value ? [workspacePanel] : []),
+      ...(shouldShowWorkspacePanel.value ? [workspacePanel, membersPanel] : []),
       keybindingPanel,
       extensionPanel,
       ...(isDesktop ? [serverConfigPanel] : []),
@@ -295,7 +307,9 @@ export function useSettingUI(
       key: 'workspace',
       label: 'Workspace',
       children: [
-        ...(shouldShowWorkspacePanel.value ? [workspacePanel.node] : []),
+        ...(shouldShowWorkspacePanel.value
+          ? [workspacePanel.node, membersPanel.node]
+          : []),
         ...(isLoggedIn.value &&
         !(isCloud && window.__CONFIG__?.subscription_required)
           ? [creditsPanel.node]

src/platform/settings/composables/useSettingsDialog.ts

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

src/platform/settings/composables/useSettingsNavigation.ts

@@ -0,0 +1,13 @@
+import { ref } from 'vue'
+
+// A one-shot request to switch the open Settings dialog to another panel, so a
+// panel's content can deep-link into a sibling panel (e.g. Overview → Members).
+const requestedPanelKey = ref<string | null>(null)
+
+export function useSettingsNavigation() {
+  function navigateToPanel(key: string) {
+    requestedPanelKey.value = key
+  }
+
+  return { requestedPanelKey, navigateToPanel }
+}

src/platform/settings/types.ts

@@ -87,3 +87,5 @@ export type SettingPanelType =
   | 'subscription'
   | 'user'
   | 'workspace'
+  | 'workspace-members'
+  | 'workspace-partner-nodes'

src/platform/telemetry/types.ts

@@ -52,20 +52,25 @@ export interface AuthMetadata {
   utm_campaign?: string
 }
 
-/**
- * Survey response data for user profiling
- * Maps 1-to-1 with actual survey fields
- */
+/** Survey field ids → answers. Fields are backend-overridable, so all optional. */
 export interface SurveyResponses {
+  // Current default schema (see defaultSurveySchema.ts)
+  intent?: string | string[]
+  intentOther?: string
+  experience?: string
+  focus?: string
+  source?: string
+  sourceOther?: string
+  source_social?: string
+  // Legacy fields — only emitted by older backend-supplied schemas, never by
+  // the current default. Kept so historical responses still typecheck.
   familiarity?: string
   industry?: string
   useCase?: string
   making?: string[]
   role?: string
   teamSize?: string
-  source?: string
   usage?: string
-  intent?: string[]
 }
 
 export interface SurveyResponsesNormalized extends SurveyResponses {

src/platform/workspace/api/workspaceApi.ts

@@ -37,6 +37,11 @@ export interface Member {
   // billing lifecycle actions (cancel / reactivate / downgrade).
   // Optional: the cloud OpenAPI does not carry this field yet.
   is_original_owner?: boolean
+  // Last time the member ran or interacted with the workspace, and the credits
+  // they've consumed in the current billing cycle. Optional: the cloud OpenAPI
+  // does not carry these fields yet.
+  last_active_at?: string | null
+  credits_used_this_month?: number
 }
 
 interface PaginationInfo {

src/platform/workspace/components/WorkspaceProfilePic.vue

@@ -1,22 +1,37 @@
 <template>
   <div
-    class="flex aspect-square size-8 items-center justify-center rounded-md text-base font-semibold text-white"
-    :style="{
-      background: gradient,
-      textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)'
-    }"
+    :class="
+      cn(
+        'flex aspect-square size-8 items-center justify-center overflow-hidden rounded-md text-base font-semibold text-white',
+        $attrs.class as string
+      )
+    "
+    :style="imageUrl ? undefined : { background: gradient, textShadow }"
   >
-    {{ letter }}
+    <img
+      v-if="imageUrl"
+      :src="imageUrl"
+      :alt="workspaceName"
+      class="size-full object-cover"
+    />
+    <template v-else>{{ letter }}</template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { workspaceName } = defineProps<{
+import { cn } from '@comfyorg/tailwind-utils'
+
+defineOptions({ inheritAttrs: false })
+
+const { workspaceName, imageUrl } = defineProps<{
   workspaceName: string
+  imageUrl?: string
 }>()
 
+const textShadow = '0 1px 2px rgba(0, 0, 0, 0.2)'
+
 const letter = computed(() => workspaceName?.charAt(0)?.toUpperCase() ?? '?')
 
 const gradient = computed(() => {

src/platform/workspace/components/dialogs/ChangeMemberRoleDialogContent.test.ts

@@ -56,7 +56,7 @@ describe('ChangeMemberRoleDialogContent', () => {
     mockChangeMemberRole.mockResolvedValue(undefined)
   })
 
-  it('shows promote copy and confirms with Make owner', async () => {
+  it('shows promote copy and confirms with Make admin', async () => {
     const { user } = renderDialog('owner')
 
     expect(

src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue

@@ -64,6 +64,7 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { onConfirm } = defineProps<{
@@ -80,7 +81,11 @@ const workspaceName = ref('')
 const isValidName = computed(() => {
   const name = workspaceName.value.trim()
   const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
-  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+  return (
+    name.length >= 1 &&
+    name.length <= WORKSPACE_NAME_MAX_LENGTH &&
+    safeNameRegex.test(name)
+  )
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue

@@ -58,6 +58,7 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { t } = useI18n()
@@ -70,7 +71,11 @@ const newWorkspaceName = ref(workspaceStore.workspaceName)
 const isValidName = computed(() => {
   const name = newWorkspaceName.value.trim()
   const safeNameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\s\-_'.,()&+]*$/
-  return name.length >= 1 && name.length <= 50 && safeNameRegex.test(name)
+  return (
+    name.length >= 1 &&
+    name.length <= WORKSPACE_NAME_MAX_LENGTH &&
+    safeNameRegex.test(name)
+  )
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-full max-w-lg flex-col rounded-2xl border border-border-default bg-base-background"
+    class="flex w-132 max-w-full flex-col rounded-2xl border border-border-default bg-base-background"
   >
     <div
       class="flex h-12 items-center justify-between border-b border-border-default px-4"
@@ -35,7 +35,7 @@
             :value="email"
             :class="
               cn(
-                'rounded-full',
+                'rounded-full bg-tertiary-background-hover',
                 !EMAIL_REGEX.test(email) && 'bg-danger/20 text-danger'
               )
             "

src/platform/workspace/components/dialogs/RequestMoreDialogContent.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex w-full max-w-[400px] flex-col rounded-2xl border border-border-default bg-base-background"
+  >
+    <div
+      class="flex h-12 items-center justify-between border-b border-border-default px-4"
+    >
+      <h2 class="m-0 text-sm font-normal text-base-foreground">{{ title }}</h2>
+      <button
+        class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
+        :aria-label="$t('g.close')"
+        @click="close"
+      >
+        <i class="pi pi-times size-4" />
+      </button>
+    </div>
+
+    <div class="p-4">
+      <p class="m-0 text-sm text-muted-foreground">{{ message }}</p>
+    </div>
+
+    <div class="flex items-center justify-end gap-2 p-4">
+      <Button variant="muted-textonly" @click="close">
+        {{ $t('g.close') }}
+      </Button>
+      <Button variant="secondary" size="lg" @click="requestMore">
+        {{ $t('workspacePanel.requestMore') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { dialogKey, onRequestMore } = defineProps<{
+  dialogKey: string
+  title: string
+  message: string
+  onRequestMore: () => void
+}>()
+
+const dialogStore = useDialogStore()
+
+function close() {
+  dialogStore.closeDialog({ key: dialogKey })
+}
+
+function requestMore() {
+  onRequestMore()
+  close()
+}
+</script>

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts

@@ -232,7 +232,7 @@ describe('TeamWorkspacesDialogContent', () => {
       expect(findCreateButton(container)).toBeDisabled()
     })
 
-    it('disables create button for name exceeding 50 characters', async () => {
+    it('disables create button for name exceeding the character limit', async () => {
       const { container, user } = mountComponent()
       const input = container.querySelector(
         '#workspace-name-input'

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.vue

@@ -145,6 +145,7 @@ import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfil
 import { useWorkspaceSwitch } from '@/platform/workspace/composables/useWorkspaceSwitch'
 import { useWorkspaceTierLabel } from '@/platform/workspace/composables/useWorkspaceTierLabel'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const { onConfirm } = defineProps<{
@@ -178,7 +179,11 @@ const tierLabels = computed(
 
 const isValidName = computed(() => {
   const name = workspaceName.value.trim()
-  return name.length >= 1 && name.length <= 50 && SAFE_NAME_REGEX.test(name)
+  return (
+    name.length >= 1 &&
+    name.length <= WORKSPACE_NAME_MAX_LENGTH &&
+    SAFE_NAME_REGEX.test(name)
+  )
 })
 
 function onCancel() {

src/platform/workspace/components/dialogs/settings/MemberListItem.vue

@@ -1,91 +0,0 @@
-<template>
-  <div
-    :data-testid="`member-row-${member.id}`"
-    :class="
-      cn(
-        'grid w-full items-center rounded-lg p-2',
-        isSingleSeatPlan ? 'grid-cols-1' : gridCols,
-        striped && 'bg-secondary-background/50'
-      )
-    "
-  >
-    <div class="flex items-center gap-3">
-      <UserAvatar
-        class="size-8"
-        :photo-url="isCurrentUser ? photoUrl : undefined"
-        :pt:icon:class="{ 'text-xl!': !isCurrentUser || !photoUrl }"
-      />
-      <div class="flex min-w-0 flex-1 flex-col gap-1">
-        <span class="text-sm text-base-foreground">
-          {{ member.name }}
-          <span v-if="isCurrentUser" class="text-muted-foreground">
-            ({{ $t('g.you') }})
-          </span>
-        </span>
-        <span class="text-sm text-muted-foreground">
-          {{ member.email }}
-        </span>
-      </div>
-    </div>
-    <span
-      v-if="showRoleColumn && !isSingleSeatPlan"
-      class="text-right text-sm text-muted-foreground"
-    >
-      {{
-        member.role === 'owner'
-          ? $t('workspaceSwitcher.roleOwner')
-          : $t('workspaceSwitcher.roleMember')
-      }}
-    </span>
-    <div
-      v-if="canManageMembers && !isSingleSeatPlan"
-      class="flex items-center justify-end"
-    >
-      <DropdownMenu
-        v-if="!isCurrentUser && !isOriginalOwner"
-        :entries="menuItems"
-      >
-        <template #button>
-          <Button
-            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-            variant="muted-textonly"
-            size="icon"
-            :aria-label="$t('g.moreOptions')"
-          >
-            <i class="pi pi-ellipsis-h" />
-          </Button>
-        </template>
-      </DropdownMenu>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MenuItem } from 'primevue/menuitem'
-
-import DropdownMenu from '@/components/common/DropdownMenu.vue'
-import UserAvatar from '@/components/common/UserAvatar.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const {
-  showRoleColumn = false,
-  canManageMembers = false,
-  isSingleSeatPlan = false,
-  isOriginalOwner = false,
-  striped = false,
-  menuItems = []
-} = defineProps<{
-  member: WorkspaceMember
-  isCurrentUser: boolean
-  photoUrl?: string
-  gridCols: string
-  showRoleColumn?: boolean
-  canManageMembers?: boolean
-  isSingleSeatPlan?: boolean
-  isOriginalOwner?: boolean
-  striped?: boolean
-  menuItems?: MenuItem[]
-}>()
-</script>

src/platform/workspace/components/dialogs/settings/MemberTableRow.vue

@@ -0,0 +1,117 @@
+<template>
+  <TableRow
+    :data-testid="`member-row-${member.id}`"
+    class="group hover:bg-transparent [&:last-child>td]:border-b-0 [&>td]:border-b [&>td]:border-interface-stroke/20"
+  >
+    <TableCell>
+      <div class="flex items-center gap-3">
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-full"
+          :style="{
+            backgroundColor: userBadgeColor(member.name || member.email)
+          }"
+        >
+          <span class="text-sm font-bold text-base-foreground">
+            {{ initial }}
+          </span>
+        </span>
+        <div class="flex min-w-0 flex-1 flex-col gap-1">
+          <span class="text-sm text-base-foreground">
+            {{ member.name }}
+            <span v-if="isCurrentUser" class="text-muted-foreground">
+              ({{ $t('g.you') }})
+            </span>
+          </span>
+          <span class="truncate text-sm text-muted-foreground">
+            {{ member.email }}
+          </span>
+        </div>
+      </div>
+    </TableCell>
+    <TableCell class="text-sm text-muted-foreground">
+      {{ $t(roleLabelKey(member.role, isOriginalOwner)) }}
+    </TableCell>
+    <TableCell v-if="canManageMembers" class="text-sm text-muted-foreground">
+      {{ lastActivityLabel }}
+    </TableCell>
+    <TableCell
+      v-if="canManageMembers"
+      class="text-right text-sm text-muted-foreground tabular-nums"
+    >
+      {{ creditsLabel }}
+    </TableCell>
+    <TableCell v-if="canManageMembers" class="text-right" @click.stop>
+      <DropdownMenu
+        v-if="showMenu"
+        :entries="menuItems"
+        :modal="false"
+        content-class="min-w-44"
+      >
+        <template #button>
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            variant="muted-textonly"
+            size="icon"
+            :aria-label="$t('g.moreOptions')"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+        </template>
+      </DropdownMenu>
+    </TableCell>
+  </TableRow>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DropdownMenu from '@/components/common/DropdownMenu.vue'
+import Button from '@/components/ui/button/Button.vue'
+import TableCell from '@/components/ui/table/TableCell.vue'
+import TableRow from '@/components/ui/table/TableRow.vue'
+import type { WorkspaceMember } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { userBadgeColor } from '@/platform/workspace/utils/badgeColor'
+import { roleLabelKey } from '@/platform/workspace/utils/roleLabels'
+import { formatRelativeTime } from '@/platform/workspace/utils/relativeTime'
+
+const {
+  member,
+  isCurrentUser,
+  canManageMembers = false,
+  isOriginalOwner = false,
+  menuItems = []
+} = defineProps<{
+  member: WorkspaceMember
+  isCurrentUser: boolean
+  canManageMembers?: boolean
+  isOriginalOwner?: boolean
+  menuItems?: MenuItem[]
+}>()
+
+const { t } = useI18n()
+
+const initial = computed(() =>
+  (member.name || member.email).charAt(0).toUpperCase()
+)
+
+// The creator and the current user can't be managed from their own row.
+const showMenu = computed(
+  () => canManageMembers && !isCurrentUser && !isOriginalOwner
+)
+
+const lastActivityLabel = computed(() => {
+  if (!member.lastActivity) return '—'
+  return formatRelativeTime(member.lastActivity, new Date(), {
+    justNow: t('workspacePanel.members.activity.justNow'),
+    minutesAgo: (n) => t('workspacePanel.members.activity.minutesAgo', { n }),
+    hoursAgo: (n) => t('workspacePanel.members.activity.hoursAgo', { n }),
+    daysAgo: (n) => t('workspacePanel.members.activity.daysAgo', n)
+  })
+})
+
+const creditsLabel = computed(() =>
+  (member.creditsUsedThisMonth ?? 0).toLocaleString()
+)
+</script>

src/platform/workspace/components/dialogs/settings/MembersPanelContent.test.ts

@@ -1,8 +1,7 @@
 import { render, screen, within } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Slots } from 'vue'
-import { computed, h, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import MembersPanelContent from './MembersPanelContent.vue'
@@ -18,6 +17,7 @@ const mockMemberMenuItems = vi.fn(() => [])
 const mockShowTeamPlans = vi.fn()
 const mockToggleSort = vi.fn()
 const mockHandleInviteMember = vi.fn()
+const mockFetchBalance = vi.fn()
 
 const {
   mockMembers,
@@ -27,13 +27,14 @@ const {
   mockFilteredPendingInvites,
   mockIsPersonalWorkspace,
   mockIsOnTeamPlan,
-  mockHasMultipleMembers,
   mockShowSearch,
   mockShowViewTabs,
   mockShowInviteButton,
   mockIsInviteDisabled,
   mockActiveView,
   mockSearchQuery,
+  mockSortField,
+  mockSortDirection,
   mockPermissions,
   mockUiConfig
 } = vi.hoisted(() => {
@@ -44,7 +45,6 @@ const {
     mockMembers: ref<WorkspaceMember[]>([]),
     mockPendingInvites: ref<PendingInvite[]>([]),
     mockOriginalOwnerId: ref<string | null>(null),
-    mockHasMultipleMembers: ref(true),
     mockShowSearch: ref(true),
     mockShowViewTabs: ref(true),
     mockShowInviteButton: ref(true),
@@ -55,39 +55,36 @@ const {
     mockIsOnTeamPlan: ref(true),
     mockActiveView: ref<'active' | 'pending'>('active'),
     mockSearchQuery: ref(''),
+    mockSortField: ref('role'),
+    mockSortDirection: ref('desc'),
     mockPermissions: ref({
-      canViewOtherMembers: true,
       canViewPendingInvites: true,
       canInviteMembers: true,
       canManageInvites: true,
-      canManageMembers: true,
-      canLeaveWorkspace: true,
-      canAccessWorkspaceMenu: true,
-      canManageSubscription: true,
-      canTopUp: true
+      canManageMembers: true
     }),
     mockUiConfig: ref({
       showMembersList: true,
       showPendingTab: true,
-      showSearch: true,
-      showRoleColumn: true,
-      membersGridCols: 'grid-cols-[50%_40%_10%]',
-      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
-      headerGridCols: 'grid-cols-[50%_40%_10%]',
-      showEditWorkspaceMenuItem: true,
-      workspaceMenuAction: 'delete' as 'leave' | 'delete' | null,
-      workspaceMenuDisabledTooltip: null as string | null
+      showSearch: true
     })
   }
 })
 
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: () => ({ isPaused: computed(() => false) })
+}))
+
 vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
   useMembersPanel: () => ({
     searchQuery: mockSearchQuery,
     activeView: mockActiveView,
-    maxSeats: computed(() => 20),
+    sortField: mockSortField,
+    sortDirection: mockSortDirection,
+    maxSeats: computed(() => 50),
+    memberCount: computed(() => mockMembers.value.length),
     isOnTeamPlan: mockIsOnTeamPlan,
-    hasMultipleMembers: mockHasMultipleMembers,
+    hasLapsedTeamPlan: computed(() => false),
     showSearch: mockShowSearch,
     showViewTabs: mockShowViewTabs,
     showInviteButton: mockShowInviteButton,
@@ -104,7 +101,6 @@ vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
     })),
     filteredMembers: mockFilteredMembers,
     filteredPendingInvites: mockFilteredPendingInvites,
-    memberMenuItems: mockMemberMenuItems,
     memberMenus: computed(
       () =>
         new Map(
@@ -112,28 +108,21 @@ vi.mock('@/platform/workspace/composables/useMembersPanel', () => ({
         )
     ),
     isPersonalWorkspace: mockIsPersonalWorkspace,
-    members: mockMembers,
     pendingInvites: mockPendingInvites,
     permissions: mockPermissions,
     uiConfig: mockUiConfig,
     userPhotoUrl: ref(null),
+    fetchBalance: mockFetchBalance,
     isCurrentUser: (m: WorkspaceMember) =>
       m.email.toLowerCase() === 'owner@example.com',
     isOriginalOwner: (m: WorkspaceMember) => m.id === mockOriginalOwnerId.value,
     toggleSort: mockToggleSort,
     showTeamPlans: mockShowTeamPlans,
     handleResendInvite: mockHandleResendInvite,
-    handleRevokeInvite: mockHandleRevokeInvite,
-    handleRemoveMember: vi.fn(),
-    handleChangeRole: vi.fn()
+    handleRevokeInvite: mockHandleRevokeInvite
   })
 }))
 
-vi.mock('@/components/button/MoreButton.vue', () => ({
-  default: (_: unknown, { slots }: { slots: Slots }) =>
-    h('div', slots.default?.({ close: () => {} }))
-}))
-
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -157,6 +146,15 @@ const SearchInputStub = {
   emits: ['update:modelValue']
 }
 
+// Render the trigger slot (carries the g.moreOptions button) plus each entry as
+// a flat button, so menu items are assertable without opening a real overlay.
+const DropdownMenuStub = {
+  name: 'DropdownMenu',
+  props: ['entries', 'modal', 'contentClass'],
+  template:
+    '<div><slot name="button" /><button v-for="e in (entries || [])" :key="e.label" :aria-label="e.label" @click="e.command && e.command()">{{ e.label }}</button></div>'
+}
+
 function renderComponent() {
   return render(MembersPanelContent, {
     global: {
@@ -164,8 +162,9 @@ function renderComponent() {
       stubs: {
         Button: ButtonStub,
         SearchInput: SearchInputStub,
+        DropdownMenu: DropdownMenuStub,
         UserAvatar: true,
-        WorkspaceMenuButton: true
+        BillingStatusBanner: true
       },
       directives: { tooltip: () => {} }
     }
@@ -207,7 +206,6 @@ describe('MembersPanelContent', () => {
     mockFilteredPendingInvites.value = []
     mockIsPersonalWorkspace.value = false
     mockIsOnTeamPlan.value = true
-    mockHasMultipleMembers.value = true
     mockShowSearch.value = true
     mockShowViewTabs.value = true
     mockShowInviteButton.value = true
@@ -215,27 +213,15 @@ describe('MembersPanelContent', () => {
     mockActiveView.value = 'active'
     mockSearchQuery.value = ''
     mockPermissions.value = {
-      canViewOtherMembers: true,
       canViewPendingInvites: true,
       canInviteMembers: true,
       canManageInvites: true,
-      canManageMembers: true,
-      canLeaveWorkspace: true,
-      canAccessWorkspaceMenu: true,
-      canManageSubscription: true,
-      canTopUp: true
+      canManageMembers: true
     }
     mockUiConfig.value = {
       showMembersList: true,
       showPendingTab: true,
-      showSearch: true,
-      showRoleColumn: true,
-      membersGridCols: 'grid-cols-[50%_40%_10%]',
-      pendingGridCols: 'grid-cols-[50%_20%_20%_10%]',
-      headerGridCols: 'grid-cols-[50%_40%_10%]',
-      showEditWorkspaceMenuItem: true,
-      workspaceMenuAction: 'delete',
-      workspaceMenuDisabledTooltip: null
+      showSearch: true
     }
   })
 
@@ -243,13 +229,9 @@ describe('MembersPanelContent', () => {
     beforeEach(() => {
       mockIsPersonalWorkspace.value = true
       mockIsOnTeamPlan.value = false
-      mockHasMultipleMembers.value = false
       mockShowSearch.value = false
       mockShowViewTabs.value = false
       mockIsInviteDisabled.value = true
-      mockUiConfig.value.showMembersList = false
-      mockUiConfig.value.showSearch = false
-      mockUiConfig.value.showPendingTab = false
     })
 
     it('shows the upsell banner below the members card', () => {
@@ -275,7 +257,7 @@ describe('MembersPanelContent', () => {
     })
   })
 
-  describe('team workspace - member list', () => {
+  describe('team workspace - member table', () => {
     it('shows the Role column header and member roles', () => {
       mockFilteredMembers.value = [
         createMember({ role: 'owner', email: 'boss@test.com' }),
@@ -285,18 +267,47 @@ describe('MembersPanelContent', () => {
       expect(
         screen.getByText('workspacePanel.members.columns.role')
       ).toBeTruthy()
-      expect(screen.getByText('workspaceSwitcher.roleOwner')).toBeTruthy()
+      expect(screen.getByText('workspaceSwitcher.roleAdmin')).toBeTruthy()
       expect(screen.getByText('workspaceSwitcher.roleMember')).toBeTruthy()
     })
 
+    it('shows the Last activity and Credits columns', () => {
+      mockFilteredMembers.value = [createMember()]
+      renderComponent()
+      expect(
+        screen.getByText('workspacePanel.members.columns.lastActivity')
+      ).toBeTruthy()
+      expect(
+        screen.getByText('workspacePanel.members.columns.creditsUsed')
+      ).toBeTruthy()
+    })
+
+    it('renders the monthly credits for a member', () => {
+      mockFilteredMembers.value = [createMember({ creditsUsedThisMonth: 6532 })]
+      renderComponent()
+      expect(screen.getByText('6,532')).toBeTruthy()
+    })
+
+    it('labels the original owner as Owner and other owners as Admin', () => {
+      mockOriginalOwnerId.value = 'creator-1'
+      mockFilteredMembers.value = [
+        createMember({
+          id: 'creator-1',
+          email: 'creator@test.com',
+          role: 'owner',
+          isOriginalOwner: true
+        }),
+        createMember({ id: '2', email: 'admin@test.com', role: 'owner' })
+      ]
+      renderComponent()
+      expect(screen.getByText('workspaceSwitcher.roleOwner')).toBeTruthy()
+      expect(screen.getByText('workspaceSwitcher.roleAdmin')).toBeTruthy()
+    })
+
     it('renders filtered members', () => {
       mockFilteredMembers.value = [
         createMember({ name: 'Alice', email: 'alice@test.com' }),
-        createMember({
-          id: '2',
-          name: 'Bob',
-          email: 'bob@test.com'
-        })
+        createMember({ id: '2', name: 'Bob', email: 'bob@test.com' })
       ]
       renderComponent()
       expect(screen.getByText('Alice')).toBeTruthy()
@@ -388,34 +399,20 @@ describe('MembersPanelContent', () => {
   describe('member role', () => {
     beforeEach(() => {
       mockPermissions.value = {
-        canViewOtherMembers: true,
-        canViewPendingInvites: false,
+        canViewPendingInvites: true,
         canInviteMembers: false,
         canManageInvites: false,
-        canManageMembers: false,
-        canLeaveWorkspace: true,
-        canAccessWorkspaceMenu: true,
-        canManageSubscription: false,
-        canTopUp: false
+        canManageMembers: false
       }
-      mockUiConfig.value.showPendingTab = false
+      mockUiConfig.value.showPendingTab = true
     })
 
-    it('hides the pending tab button', () => {
+    it('shows the pending tab button (view-only)', () => {
       mockPendingInvites.value = [createInvite()]
       renderComponent()
       expect(
-        screen.queryByText(/workspacePanel\.members\.tabs\.pendingCount/)
-      ).toBeNull()
-    })
-
-    it('does not show the pending invites header', () => {
-      mockActiveView.value = 'pending'
-      mockPendingInvites.value = [createInvite()]
-      renderComponent()
-      expect(
-        screen.queryByText(/workspacePanel\.members\.pendingInvitesCount/)
-      ).toBeNull()
+        screen.getByText(/workspacePanel\.members\.tabs\.pendingCount/)
+      ).toBeTruthy()
     })
 
     it('shows no action menus on member rows', () => {
@@ -451,15 +448,6 @@ describe('MembersPanelContent', () => {
       ).toBeNull()
     })
 
-    it('opens subscription dialog on upgrade click', async () => {
-      renderComponent()
-      const upgradeBtn = screen.getByRole('button', {
-        name: /workspacePanel\.members\.upgradeToTeam/
-      })
-      await userEvent.click(upgradeBtn)
-      expect(mockShowTeamPlans).toHaveBeenCalled()
-    })
-
     it('hides search input', () => {
       renderComponent()
       expect(screen.queryByRole('textbox')).toBeNull()
@@ -472,17 +460,15 @@ describe('MembersPanelContent', () => {
   })
 
   describe('contact us footer', () => {
-    it('opens discord in a new tab for team workspaces on a team plan', async () => {
+    it('opens the team-plan request form in a new tab for team workspaces on a team plan', async () => {
       const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
       renderComponent()
-      expect(
-        screen.getByText('workspacePanel.members.needMoreMembers')
-      ).toBeTruthy()
+      expect(screen.getByText(/needMoreMembers/)).toBeTruthy()
       await userEvent.click(
         screen.getByText('workspacePanel.members.contactUs')
       )
       expect(openSpy).toHaveBeenCalledWith(
-        'https://www.comfy.org/discord',
+        'https://comfy-org.portal.usepylon.com/forms/team-plan-requests',
         '_blank',
         'noopener,noreferrer'
       )
@@ -496,16 +482,12 @@ describe('MembersPanelContent', () => {
     })
   })
 
-  describe('member count display', () => {
-    it('shows member count header for team workspace', () => {
-      mockFilteredMembers.value = [
-        createMember({ id: '1' }),
-        createMember({ id: '2' })
-      ]
-      mockMembers.value = mockFilteredMembers.value
+  describe('member count tab', () => {
+    it('shows the members count tab for team workspace', () => {
+      mockMembers.value = [createMember({ id: '1' }), createMember({ id: '2' })]
       renderComponent()
       expect(
-        screen.getByText(/workspacePanel\.members\.membersCount/)
+        screen.getByText(/workspacePanel\.members\.tabs\.membersCount/)
       ).toBeTruthy()
     })
   })
@@ -540,10 +522,7 @@ describe('MembersPanelContent', () => {
       mockShowViewTabs.value = false
       renderComponent()
       expect(
-        screen.queryByText('workspacePanel.members.tabs.active')
-      ).toBeNull()
-      expect(
-        screen.queryByText('workspacePanel.members.columns.role')
+        screen.queryByText(/workspacePanel\.members\.tabs\.pendingCount/)
       ).toBeNull()
     })
   })

src/platform/workspace/components/dialogs/settings/MembersPanelContent.vue

@@ -1,209 +1,215 @@
 <template>
-  <div class="grow overflow-auto pt-6">
+  <div class="@container flex min-h-0 flex-1 flex-col gap-4 pb-6">
+    <!-- Header: tabs (left) + search / invite (right), above the card -->
     <div
-      class="border-inter flex size-full flex-col gap-2 rounded-2xl border border-interface-stroke p-6"
+      class="flex w-full flex-col gap-3 @2xl:flex-row @2xl:items-center @2xl:gap-9"
     >
-      <!-- Section Header -->
-      <div class="flex w-full items-center gap-9">
-        <div class="flex min-w-0 flex-1 items-baseline gap-2">
-          <span class="text-base font-semibold text-base-foreground">
-            <template v-if="activeView === 'active'">
-              <template v-if="isOnTeamPlan && !isPersonalWorkspace">
-                {{
-                  $t('workspacePanel.members.membersCount', {
-                    count: members.length,
-                    maxSeats: maxSeats
-                  })
-                }}
-              </template>
-              <template v-else>
-                {{ $t('workspacePanel.members.header') }}
-              </template>
-            </template>
-            <template v-else-if="permissions.canViewPendingInvites">
-              {{
-                $t(
-                  'workspacePanel.members.pendingInvitesCount',
-                  pendingInvites.length
-                )
-              }}
-            </template>
-          </span>
-        </div>
-        <div class="flex items-center gap-2">
-          <SearchInput
-            v-if="showSearch"
-            v-model="searchQuery"
-            :placeholder="$t('workspacePanel.members.searchPlaceholder')"
-            size="lg"
-            class="w-64"
-          />
+      <div class="flex min-w-0 flex-1 items-center gap-2">
+        <template v-if="showViewTabs">
           <Button
-            v-if="showInviteButton"
-            v-tooltip="
-              inviteTooltip
-                ? { value: inviteTooltip, showDelay: 0 }
-                : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
-            "
-            variant="secondary"
+            :variant="activeView === 'active' ? 'secondary' : 'muted-textonly'"
             size="lg"
-            :disabled="isInviteDisabled"
-            :aria-label="$t('workspacePanel.inviteMember')"
-            @click="handleInviteMember"
+            @click="activeView = 'active'"
           >
-            {{ $t('workspacePanel.invite') }}
-            <i class="pi pi-plus text-sm" />
+            {{ $t('workspacePanel.members.tabs.membersCount', memberCount) }}
           </Button>
-          <WorkspaceMenuButton v-if="permissions.canAccessWorkspaceMenu" />
-        </div>
+          <Button
+            v-if="uiConfig.showPendingTab"
+            :variant="activeView === 'pending' ? 'secondary' : 'muted-textonly'"
+            size="lg"
+            @click="activeView = 'pending'"
+          >
+            {{
+              pendingInvites.length > 0
+                ? $t(
+                    'workspacePanel.members.tabs.pendingCount',
+                    pendingInvites.length
+                  )
+                : $t('workspacePanel.members.tabs.pending')
+            }}
+          </Button>
+        </template>
+        <span v-else class="text-base font-normal text-base-foreground">
+          {{ $t('workspacePanel.members.tabs.membersCount', memberCount) }}
+        </span>
       </div>
-
-      <!-- Members Content -->
-      <div class="flex min-h-0 flex-1 flex-col">
-        <!-- Table Header with Tab Buttons and Column Headers -->
-        <div
-          v-if="uiConfig.showMembersList && showViewTabs"
-          :class="
-            cn(
-              'grid w-full items-center py-2',
-              activeView === 'pending'
-                ? uiConfig.pendingGridCols
-                : uiConfig.headerGridCols
-            )
+      <div class="flex w-full items-center gap-2 @2xl:w-auto">
+        <SearchInput
+          v-if="showSearch"
+          v-model="searchQuery"
+          :placeholder="$t('workspacePanel.members.searchPlaceholder')"
+          size="lg"
+          class="min-w-0 flex-1 @2xl:w-64 @2xl:flex-none"
+        />
+        <Button
+          v-if="showInviteButton"
+          v-tooltip="
+            inviteTooltip
+              ? { value: inviteTooltip, showDelay: 0 }
+              : { value: $t('workspacePanel.inviteMember'), showDelay: 300 }
           "
+          variant="secondary"
+          size="lg"
+          class="shrink-0"
+          :disabled="isInviteDisabled"
+          :aria-label="$t('workspacePanel.inviteMember')"
+          @click="handleInviteMember"
         >
-          <!-- Tab buttons in first column -->
-          <div class="flex items-center gap-2">
-            <Button
-              :variant="
-                activeView === 'active' ? 'secondary' : 'muted-textonly'
-              "
-              size="md"
-              @click="activeView = 'active'"
+          {{ $t('workspacePanel.invite') }}
+          <i class="icon-[lucide--plus] size-4" />
+        </Button>
+      </div>
+    </div>
+
+    <!-- Card: fills height, table scrolls inside -->
+    <div
+      class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-interface-stroke/60"
+    >
+      <Table v-if="activeView === 'active'" class="min-h-0 flex-1 px-4">
+        <TableHeader class="sticky top-0 z-10 bg-base-background">
+          <TableRow
+            class="hover:bg-transparent [&>th]:h-14 [&>th]:border-b [&>th]:border-interface-stroke/60"
+          >
+            <TableHead :aria-sort="ariaSort('email')">
+              <button :class="sortHeaderClass" @click="toggleSort('email')">
+                {{ $t('workspacePanel.members.columns.email') }}
+                <i :class="sortIcon('email')" />
+              </button>
+            </TableHead>
+            <TableHead
+              :class="permissions.canManageMembers ? 'w-40' : undefined"
+              :aria-sort="ariaSort('role')"
             >
-              {{ $t('workspacePanel.members.tabs.active') }}
-            </Button>
-            <Button
-              v-if="uiConfig.showPendingTab"
-              :variant="
-                activeView === 'pending' ? 'secondary' : 'muted-textonly'
-              "
-              size="md"
-              @click="activeView = 'pending'"
+              <button :class="sortHeaderClass" @click="toggleSort('role')">
+                {{ $t('workspacePanel.members.columns.role') }}
+                <i :class="sortIcon('role')" />
+              </button>
+            </TableHead>
+            <TableHead
+              v-if="permissions.canManageMembers"
+              class="w-40"
+              :aria-sort="ariaSort('lastActivity')"
             >
-              {{
-                $t(
-                  'workspacePanel.members.tabs.pendingCount',
-                  pendingInvites.length
-                )
-              }}
-            </Button>
-          </div>
-          <!-- Date column headers -->
-          <template v-if="activeView === 'pending'">
-            <Button
-              variant="muted-textonly"
-              size="sm"
-              class="justify-start"
-              @click="toggleSort('inviteDate')"
+              <button
+                :class="sortHeaderClass"
+                @click="toggleSort('lastActivity')"
+              >
+                {{ $t('workspacePanel.members.columns.lastActivity') }}
+                <i :class="sortIcon('lastActivity')" />
+              </button>
+            </TableHead>
+            <TableHead
+              v-if="permissions.canManageMembers"
+              class="w-64"
+              :aria-sort="ariaSort('credits')"
             >
-              {{ $t('workspacePanel.members.columns.inviteDate') }}
-              <i class="icon-[lucide--chevrons-up-down] size-4" />
-            </Button>
-            <Button
-              variant="muted-textonly"
-              size="sm"
-              class="justify-start"
-              @click="toggleSort('expiryDate')"
-            >
-              {{ $t('workspacePanel.members.columns.expiryDate') }}
-              <i class="icon-[lucide--chevrons-up-down] size-4" />
-            </Button>
-            <div />
-          </template>
+              <button
+                :class="cn(sortHeaderClass, 'ml-auto')"
+                @click="toggleSort('credits')"
+              >
+                <i class="icon-[lucide--coins] size-4" />
+                {{ $t('workspacePanel.members.columns.creditsUsed') }}
+                <i :class="sortIcon('credits')" />
+              </button>
+            </TableHead>
+            <TableHead v-if="permissions.canManageMembers" class="w-12" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <MemberTableRow
+            v-if="isPersonalWorkspace"
+            :member="personalWorkspaceMember"
+            :is-current-user="true"
+          />
           <template v-else>
-            <Button
-              variant="muted-textonly"
-              size="sm"
-              class="justify-end"
-              @click="toggleSort('role')"
-            >
-              {{ $t('workspacePanel.members.columns.role') }}
-              <i class="icon-[lucide--chevrons-up-down] size-4" />
-            </Button>
-            <!-- Empty cell for action column header (OWNER only) -->
-            <div v-if="permissions.canManageMembers" />
+            <MemberTableRow
+              v-for="member in filteredMembers"
+              :key="member.id"
+              :member="member"
+              :is-current-user="isCurrentUser(member)"
+              :can-manage-members="permissions.canManageMembers"
+              :is-original-owner="isOriginalOwner(member)"
+              :menu-items="memberMenus.get(member.id)"
+            />
           </template>
-        </div>
+        </TableBody>
+      </Table>
 
-        <!-- Members List -->
-        <div class="min-h-0 flex-1 overflow-y-auto">
-          <!-- Active Members -->
-          <template v-if="activeView === 'active'">
-            <!-- Personal Workspace: show only current user -->
-            <template v-if="isPersonalWorkspace">
-              <MemberListItem
-                :member="personalWorkspaceMember"
-                :is-current-user="true"
-                :photo-url="userPhotoUrl ?? undefined"
-                :grid-cols="uiConfig.membersGridCols"
-              />
-            </template>
-
-            <!-- Team Workspace: sorted list -->
-            <template v-else>
-              <MemberListItem
-                v-for="(member, index) in filteredMembers"
-                :key="member.id"
-                :member="member"
-                :is-current-user="isCurrentUser(member)"
-                :photo-url="
-                  isCurrentUser(member)
-                    ? (userPhotoUrl ?? undefined)
-                    : undefined
-                "
-                :grid-cols="uiConfig.membersGridCols"
-                :show-role-column="
-                  uiConfig.showRoleColumn && hasMultipleMembers
-                "
-                :can-manage-members="permissions.canManageMembers"
-                :is-single-seat-plan="!isOnTeamPlan"
-                :is-original-owner="isOriginalOwner(member)"
-                :striped="index % 2 === 1"
-                :menu-items="memberMenus.get(member.id)"
-              />
-            </template>
-          </template>
-
-          <!-- Pending Invites -->
-          <PendingInvitesList
-            v-if="activeView === 'pending'"
-            :invites="filteredPendingInvites"
-            :grid-cols="uiConfig.pendingGridCols"
+      <Table v-else class="min-h-0 flex-1 px-4">
+        <TableHeader class="sticky top-0 z-10 bg-base-background">
+          <TableRow
+            class="hover:bg-transparent [&>th]:h-14 [&>th]:border-b [&>th]:border-interface-stroke/60"
+          >
+            <TableHead>
+              <span :class="sortHeaderClass">
+                {{ $t('workspacePanel.members.columns.email') }}
+              </span>
+            </TableHead>
+            <TableHead class="w-40" :aria-sort="ariaSort('inviteDate')">
+              <button
+                :class="sortHeaderClass"
+                @click="toggleSort('inviteDate')"
+              >
+                {{ $t('workspacePanel.members.columns.inviteDate') }}
+                <i :class="sortIcon('inviteDate')" />
+              </button>
+            </TableHead>
+            <TableHead class="w-40" :aria-sort="ariaSort('expiryDate')">
+              <button
+                :class="sortHeaderClass"
+                @click="toggleSort('expiryDate')"
+              >
+                {{ $t('workspacePanel.members.columns.expiryDate') }}
+                <i :class="sortIcon('expiryDate')" />
+              </button>
+            </TableHead>
+            <TableHead v-if="permissions.canManageInvites" class="w-12" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <PendingInviteRow
+            v-for="invite in filteredPendingInvites"
+            :key="invite.id"
+            :invite="invite"
+            :can-manage="permissions.canManageInvites"
             @resend="handleResendInvite"
             @revoke="handleRevokeInvite"
           />
-        </div>
-      </div>
+          <TableRow
+            v-if="filteredPendingInvites.length === 0"
+            class="hover:bg-transparent"
+          >
+            <TableCell
+              :colspan="permissions.canManageInvites ? 4 : 3"
+              class="py-6 text-center text-sm text-muted-foreground"
+            >
+              {{ $t('workspacePanel.members.noInvites') }}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </div>
-    <!-- Upsell Banner -->
+
     <MemberUpsellBanner
       v-if="!isOnTeamPlan"
       :reactivate="hasLapsedTeamPlan"
       @show-plans="showTeamPlans()"
     />
-    <!-- Need More Members Footer -->
     <div
       v-if="isOnTeamPlan && !isPersonalWorkspace"
-      class="flex items-center pt-2"
+      class="flex h-8 items-center"
     >
       <p class="text-sm text-muted-foreground">
-        {{ $t('workspacePanel.members.needMoreMembers') }}
+        {{ membersUsageLabel }}
+        <template v-if="permissions.canInviteMembers">
+          {{ $t('workspacePanel.members.needMoreMembers') }}
+        </template>
       </p>
       <Button
+        v-if="permissions.canInviteMembers"
         variant="muted-textonly"
-        size="sm"
-        class="text-base-foreground"
+        size="md"
+        class="text-sm text-base-foreground"
         @click="handleContactUs"
       >
         {{ $t('workspacePanel.members.contactUs') }}
@@ -215,21 +221,30 @@
 <script setup lang="ts">
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
+import Table from '@/components/ui/table/Table.vue'
+import TableBody from '@/components/ui/table/TableBody.vue'
+import TableCell from '@/components/ui/table/TableCell.vue'
+import TableHead from '@/components/ui/table/TableHead.vue'
+import TableHeader from '@/components/ui/table/TableHeader.vue'
+import TableRow from '@/components/ui/table/TableRow.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import MemberListItem from '@/platform/workspace/components/dialogs/settings/MemberListItem.vue'
+import MemberTableRow from '@/platform/workspace/components/dialogs/settings/MemberTableRow.vue'
 import MemberUpsellBanner from '@/platform/workspace/components/dialogs/settings/MemberUpsellBanner.vue'
-import PendingInvitesList from '@/platform/workspace/components/dialogs/settings/PendingInvitesList.vue'
-import WorkspaceMenuButton from '@/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue'
+import PendingInviteRow from '@/platform/workspace/components/dialogs/settings/PendingInviteRow.vue'
 import { useMembersPanel } from '@/platform/workspace/composables/useMembersPanel'
 import { cn } from '@comfyorg/tailwind-utils'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const {
   searchQuery,
   activeView,
+  sortField,
+  sortDirection,
   maxSeats,
+  memberCount,
   isOnTeamPlan,
   hasLapsedTeamPlan,
-  hasMultipleMembers,
   showSearch,
   showViewTabs,
   showInviteButton,
@@ -241,11 +256,10 @@ const {
   filteredPendingInvites,
   memberMenus,
   isPersonalWorkspace,
-  members,
   pendingInvites,
   permissions,
   uiConfig,
-  userPhotoUrl,
+  fetchBalance,
   isCurrentUser,
   isOriginalOwner,
   toggleSort,
@@ -255,8 +269,38 @@ const {
 } = useMembersPanel()
 
 const { staticUrls } = useExternalLink()
+const { t } = useI18n()
+
+// Owners get "Need more members?" after the count, where the period reads as a
+// separator; members see just the count, so drop the trailing period.
+const membersUsageLabel = computed(() => {
+  const label = t('workspacePanel.members.membersUsage', {
+    count: memberCount.value,
+    max: maxSeats.value
+  })
+  return permissions.value.canInviteMembers ? label : label.replace(/\.$/, '')
+})
+
+const sortHeaderClass =
+  'flex cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left font-[inherit] text-sm text-muted-foreground'
+
+function sortIcon(field: string) {
+  if (sortField.value !== field) return 'icon-[lucide--chevrons-up-down] size-3'
+  return sortDirection.value === 'asc'
+    ? 'icon-[lucide--chevron-up] size-3'
+    : 'icon-[lucide--chevron-down] size-3'
+}
+
+function ariaSort(field: string): 'ascending' | 'descending' | 'none' {
+  if (sortField.value !== field) return 'none'
+  return sortDirection.value === 'asc' ? 'ascending' : 'descending'
+}
 
 function handleContactUs() {
-  window.open(staticUrls.discord, '_blank', 'noopener,noreferrer')
+  window.open(staticUrls.teamPlanRequests, '_blank', 'noopener,noreferrer')
 }
+
+onMounted(() => {
+  void fetchBalance()
+})
 </script>

src/platform/workspace/components/dialogs/settings/PendingInviteRow.vue

@@ -0,0 +1,88 @@
+<template>
+  <TableRow
+    :data-testid="`invite-row-${invite.id}`"
+    class="group hover:bg-transparent"
+  >
+    <TableCell>
+      <div class="flex items-center gap-3">
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-full"
+          :style="{ backgroundColor: userBadgeColor(invite.email) }"
+        >
+          <span class="text-sm font-bold text-base-foreground">
+            {{ inviteInitial }}
+          </span>
+        </span>
+        <span class="min-w-0 flex-1 truncate text-sm text-base-foreground">
+          {{ invite.email }}
+        </span>
+      </div>
+    </TableCell>
+    <TableCell class="text-sm text-muted-foreground">
+      {{ formatDate(invite.inviteDate) }}
+    </TableCell>
+    <TableCell class="text-sm text-muted-foreground">
+      {{ formatDate(invite.expiryDate) }}
+    </TableCell>
+    <TableCell v-if="canManage" class="text-right" @click.stop>
+      <DropdownMenu
+        :entries="menuItems"
+        :modal="false"
+        content-class="min-w-44"
+      >
+        <template #button>
+          <Button
+            v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
+            variant="muted-textonly"
+            size="icon"
+            :aria-label="$t('g.moreOptions')"
+          >
+            <i class="pi pi-ellipsis-h" />
+          </Button>
+        </template>
+      </DropdownMenu>
+    </TableCell>
+  </TableRow>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import DropdownMenu from '@/components/common/DropdownMenu.vue'
+import Button from '@/components/ui/button/Button.vue'
+import TableCell from '@/components/ui/table/TableCell.vue'
+import TableRow from '@/components/ui/table/TableRow.vue'
+import type { PendingInvite } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { userBadgeColor } from '@/platform/workspace/utils/badgeColor'
+
+const { invite, canManage } = defineProps<{
+  invite: PendingInvite
+  canManage: boolean
+}>()
+
+const emit = defineEmits<{
+  resend: [invite: PendingInvite]
+  revoke: [invite: PendingInvite]
+}>()
+
+const { t, d } = useI18n()
+
+const inviteInitial = computed(() => invite.email.charAt(0).toUpperCase())
+
+const menuItems = computed<MenuItem[]>(() => [
+  {
+    label: t('workspacePanel.members.actions.resendInvite'),
+    command: () => emit('resend', invite)
+  },
+  {
+    label: t('workspacePanel.members.actions.cancelInvite'),
+    command: () => emit('revoke', invite)
+  }
+])
+
+function formatDate(date: Date): string {
+  return d(date, { dateStyle: 'medium' })
+}
+</script>

src/platform/workspace/components/dialogs/settings/PendingInvitesList.test.ts

@@ -1,85 +0,0 @@
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Slots } from 'vue'
-import { h } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import PendingInvitesList from './PendingInvitesList.vue'
-
-import type { PendingInvite } from '../../../stores/teamWorkspaceStore'
-
-const mockMenuClose = vi.hoisted(() => vi.fn())
-
-vi.mock('@/components/button/MoreButton.vue', () => ({
-  default: (_: unknown, { slots }: { slots: Slots }) =>
-    h('div', slots.default?.({ close: mockMenuClose }))
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} },
-  missingWarn: false,
-  fallbackWarn: false
-})
-
-function createInvite(overrides: Partial<PendingInvite> = {}): PendingInvite {
-  return {
-    id: 'invite-1',
-    email: 'invitee@example.com',
-    inviteDate: new Date('2025-03-01'),
-    expiryDate: new Date('2025-04-01'),
-    ...overrides
-  }
-}
-
-function renderComponent(invites: PendingInvite[]) {
-  return render(PendingInvitesList, {
-    props: {
-      invites,
-      gridCols: 'grid-cols-[50%_20%_20%_10%]'
-    },
-    global: { plugins: [i18n] }
-  })
-}
-
-describe('PendingInvitesList', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('shows the empty state without action buttons when there are no invites', () => {
-    renderComponent([])
-
-    expect(screen.getByText('workspacePanel.members.noInvites')).toBeTruthy()
-    expect(screen.queryAllByRole('button')).toHaveLength(0)
-  })
-
-  it('emits resend with the invite and closes the menu', async () => {
-    const invite = createInvite({ id: 'inv-7' })
-    const { emitted } = renderComponent([invite])
-
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'workspacePanel.members.actions.resendInvite'
-      })
-    )
-
-    expect(emitted('resend')).toEqual([[invite]])
-    expect(mockMenuClose).toHaveBeenCalled()
-  })
-
-  it('emits revoke with the invite from the cancel item', async () => {
-    const invite = createInvite({ id: 'inv-8' })
-    const { emitted } = renderComponent([invite])
-
-    await userEvent.click(
-      screen.getByRole('button', {
-        name: 'workspacePanel.members.actions.cancelInvite'
-      })
-    )
-
-    expect(emitted('revoke')).toEqual([[invite]])
-  })
-})

src/platform/workspace/components/dialogs/settings/PendingInvitesList.vue

@@ -1,112 +0,0 @@
-<template>
-  <div>
-    <div
-      v-for="(invite, index) in invites"
-      :key="invite.id"
-      :class="
-        cn(
-          'grid w-full items-center rounded-lg p-2',
-          gridCols,
-          index % 2 === 1 && 'bg-secondary-background/50'
-        )
-      "
-    >
-      <div class="flex items-center gap-3">
-        <div
-          class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary-background"
-        >
-          <span class="text-sm font-bold text-base-foreground">
-            {{ getInviteInitial(invite.email) }}
-          </span>
-        </div>
-        <div class="flex min-w-0 flex-1 flex-col gap-1">
-          <span class="text-sm text-base-foreground">
-            {{ getInviteDisplayName(invite.email) }}
-          </span>
-          <span class="text-sm text-muted-foreground">
-            {{ invite.email }}
-          </span>
-        </div>
-      </div>
-      <span class="text-sm text-muted-foreground">
-        {{ formatDate(invite.inviteDate) }}
-      </span>
-      <span class="text-sm text-muted-foreground">
-        {{ formatDate(invite.expiryDate) }}
-      </span>
-      <div class="flex items-center justify-end">
-        <MoreButton v-slot="{ close }" :aria-label="$t('g.moreOptions')">
-          <Button
-            variant="textonly"
-            size="unset"
-            :class="menuItemClass"
-            @click="
-              () => {
-                close()
-                $emit('resend', invite)
-              }
-            "
-          >
-            <i class="icon-[lucide--mail-plus] size-4" />
-            <span>{{ $t('workspacePanel.members.actions.resendInvite') }}</span>
-          </Button>
-          <Button
-            variant="textonly"
-            size="unset"
-            :class="menuItemClass"
-            @click="
-              () => {
-                close()
-                $emit('revoke', invite)
-              }
-            "
-          >
-            <i class="icon-[lucide--mail-x] size-4" />
-            <span>{{ $t('workspacePanel.members.actions.cancelInvite') }}</span>
-          </Button>
-        </MoreButton>
-      </div>
-    </div>
-    <div
-      v-if="invites.length === 0"
-      class="flex w-full items-center justify-center py-8 text-sm text-muted-foreground"
-    >
-      {{ $t('workspacePanel.members.noInvites') }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-import MoreButton from '@/components/button/MoreButton.vue'
-import Button from '@/components/ui/button/Button.vue'
-import type { PendingInvite } from '@/platform/workspace/stores/teamWorkspaceStore'
-import { cn } from '@comfyorg/tailwind-utils'
-
-const menuItemClass = 'w-full justify-start rounded-sm px-3 py-2'
-
-defineProps<{
-  invites: PendingInvite[]
-  gridCols: string
-}>()
-
-defineEmits<{
-  resend: [invite: PendingInvite]
-  revoke: [invite: PendingInvite]
-}>()
-
-const { d } = useI18n()
-
-function getInviteDisplayName(email: string): string {
-  return email.split('@')[0]
-}
-
-function getInviteInitial(email: string): string {
-  return email.charAt(0).toUpperCase()
-}
-
-function formatDate(date: Date): string {
-  return d(date, { dateStyle: 'medium' })
-}
-</script>

src/platform/workspace/components/dialogs/settings/WorkspaceMembersPanelContent.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex size-full flex-col">
+    <MembersPanelContent :key="workspaceRole" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+
+import MembersPanelContent from '@/platform/workspace/components/dialogs/settings/MembersPanelContent.vue'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+
+const { workspaceRole } = useWorkspaceUI()
+const { fetchMembers, fetchPendingInvites } = useTeamWorkspaceStore()
+
+onMounted(() => {
+  void fetchMembers()
+  void fetchPendingInvites()
+})
+</script>

src/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.test.ts

@@ -5,6 +5,7 @@ import { ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
+import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
 
 import WorkspaceMenuButton from './WorkspaceMenuButton.vue'
 
@@ -75,6 +76,25 @@ describe('WorkspaceMenuButton', () => {
     mockUiConfig.value = ownerConfig
     mockIsCurrentUserOriginalOwner.value = false
     mockIsWorkspaceSubscribed.value = false
+    useWorkspaceRename().stopRenaming()
+  })
+
+  it('offers Rename to an editor and starts inline renaming', async () => {
+    const user = userEvent.setup()
+    const { isRenaming } = useWorkspaceRename()
+    renderComponent()
+
+    await user.click(screen.getByRole('button', { name: 'Rename Workspace' }))
+    expect(isRenaming.value).toBe(true)
+  })
+
+  it('hides Rename from a member', () => {
+    mockUiConfig.value = memberConfig
+    renderComponent()
+
+    expect(
+      screen.queryByRole('button', { name: 'Rename Workspace' })
+    ).not.toBeInTheDocument()
   })
 
   it('lets a member leave and offers no destructive workspace actions', () => {

src/platform/workspace/components/dialogs/settings/WorkspaceMenuButton.vue

@@ -1,10 +1,16 @@
 <template>
-  <DropdownMenu :entries="menuItems">
+  <DropdownMenu
+    v-if="menuItems.length > 0"
+    :entries="menuItems"
+    :modal="false"
+    @close-auto-focus="onMenuCloseAutoFocus"
+  >
     <template #button>
       <Button
         v-tooltip="{ value: $t('g.moreOptions'), showDelay: 300 }"
-        variant="muted-textonly"
+        variant="secondary"
         size="icon-lg"
+        class="rounded-lg"
         :aria-label="$t('g.moreOptions')"
       >
         <i class="pi pi-ellipsis-h" />
@@ -21,20 +27,35 @@ import { useI18n } from 'vue-i18n'
 
 import DropdownMenu from '@/components/common/DropdownMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
 import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useDialogService } from '@/services/dialogService'
 
 const { t } = useI18n()
-const {
-  showLeaveWorkspaceDialog,
-  showDeleteWorkspaceDialog,
-  showEditWorkspaceDialog
-} = useDialogService()
+const { showLeaveWorkspaceDialog, showDeleteWorkspaceDialog } =
+  useDialogService()
 const { isWorkspaceSubscribed, isCurrentUserOriginalOwner } = storeToRefs(
   useTeamWorkspaceStore()
 )
 const { uiConfig } = useWorkspaceUI()
+const { startRenaming } = useWorkspaceRename()
+
+// Reka returns focus to the trigger when the menu closes, which would blur (and
+// so tear down) the rename input we're about to focus. Suppress that focus
+// restoration for the one close that kicks off a rename.
+let renameStarting = false
+
+function beginRename() {
+  renameStarting = true
+  startRenaming()
+}
+
+function onMenuCloseAutoFocus(event: Event) {
+  if (!renameStarting) return
+  renameStarting = false
+  event.preventDefault()
+}
 
 // Disable delete when the workspace has an active subscription (prevents
 // accidental deletion); uses the workspace's own status, not the global one.
@@ -51,22 +72,21 @@ const deleteTooltip = computed(() => {
 })
 
 const menuItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = []
-
-  if (uiConfig.value.showEditWorkspaceMenuItem) {
-    items.push({
-      label: t('workspacePanel.menu.editWorkspace'),
-      icon: 'pi pi-pencil',
-      command: () => showEditWorkspaceDialog()
-    })
-  }
+  const renameItems: MenuItem[] = uiConfig.value.showEditWorkspaceMenuItem
+    ? [
+        {
+          label: t('workspacePanel.menu.renameWorkspace'),
+          command: beginRename
+        }
+      ]
+    : []
 
+  const destructiveItems: MenuItem[] = []
   const action = uiConfig.value.workspaceMenuAction
   if (action === 'delete') {
-    items.push({
+    destructiveItems.push({
       label: t('workspacePanel.menu.deleteWorkspace'),
-      icon: 'pi pi-trash',
-      class: isDeleteDisabled.value ? 'text-danger/50' : 'text-danger',
+      class: isDeleteDisabled.value ? undefined : 'text-danger',
       disabled: isDeleteDisabled.value,
       tooltip: deleteTooltip.value,
       command: isDeleteDisabled.value
@@ -77,23 +97,23 @@ const menuItems = computed<MenuItem[]>(() => {
 
   // Members and non-creator owners can leave; the creator sees it disabled.
   if (action === 'leave' || action === 'delete') {
-    items.push(
+    destructiveItems.push(
       isCurrentUserOriginalOwner.value
         ? {
             label: t('workspacePanel.menu.leaveWorkspace'),
-            icon: 'pi pi-sign-out',
-            class: 'opacity-50',
             disabled: true,
             tooltip: t('workspacePanel.menu.creatorCannotLeave')
           }
         : {
             label: t('workspacePanel.menu.leaveWorkspace'),
-            icon: 'pi pi-sign-out',
             command: () => showLeaveWorkspaceDialog()
           }
     )
   }
 
-  return items
+  const divider: MenuItem[] =
+    renameItems.length && destructiveItems.length ? [{ separator: true }] : []
+
+  return [...renameItems, ...divider, ...destructiveItems]
 })
 </script>

src/platform/workspace/components/dialogs/settings/WorkspaceSettingsHeader.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="flex min-w-0 items-center gap-4">
+    <div class="group relative size-12 shrink-0">
+      <WorkspaceProfilePic
+        class="size-12 rounded-lg text-2xl"
+        :workspace-name="workspaceName"
+        :image-url="imageUrl ?? undefined"
+      />
+      <button
+        v-if="canEdit"
+        type="button"
+        class="absolute inset-0 flex cursor-pointer items-center justify-center rounded-lg border-none bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+        :aria-label="$t('workspacePanel.editWorkspaceImage')"
+        @click="pickImage"
+      >
+        <i class="icon-[lucide--pencil] size-4 text-white" />
+      </button>
+      <input
+        ref="fileInputRef"
+        type="file"
+        accept="image/*"
+        class="hidden"
+        @change="onFileChange"
+      />
+    </div>
+    <input
+      v-if="isRenaming"
+      ref="inputRef"
+      v-model="draftName"
+      :maxlength="MAX_NAME_LENGTH"
+      class="min-w-0 flex-1 appearance-none border-none bg-transparent p-0 font-[inherit] text-2xl font-semibold text-base-foreground outline-none"
+      @keydown.enter="commit"
+      @keydown.esc="cancel"
+      @blur="commit"
+    />
+    <h1
+      v-else
+      v-tooltip="
+        canEdit
+          ? { value: $t('workspacePanel.doubleClickToRename'), showDelay: 300 }
+          : undefined
+      "
+      class="truncate text-2xl font-semibold text-base-foreground"
+      @dblclick="beginRename"
+    >
+      {{ workspaceName }}
+    </h1>
+    <span
+      v-if="isRenaming && remaining <= 10"
+      class="shrink-0 text-sm text-muted-foreground tabular-nums"
+    >
+      {{ $t('workspacePanel.charactersLeft', remaining) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'primevue/usetoast'
+import { storeToRefs } from 'pinia'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceProfilePic from '@/platform/workspace/components/WorkspaceProfilePic.vue'
+import { useWorkspaceRename } from '@/platform/workspace/composables/useWorkspaceRename'
+import { useWorkspaceUI } from '@/platform/workspace/composables/useWorkspaceUI'
+import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
+import { WORKSPACE_NAME_MAX_LENGTH } from '@/platform/workspace/workspaceConstants'
+
+const { t } = useI18n()
+const toast = useToast()
+const store = useTeamWorkspaceStore()
+const { workspaceName } = storeToRefs(store)
+const { uiConfig } = useWorkspaceUI()
+
+const MAX_NAME_LENGTH = WORKSPACE_NAME_MAX_LENGTH
+
+// Renaming is gated to Owner + Admins (and the sole owner of a personal
+// workspace); Members never see the affordance.
+const canEdit = computed(() => uiConfig.value.showEditWorkspaceMenuItem)
+
+const { isRenaming, startRenaming, stopRenaming } = useWorkspaceRename()
+const draftName = ref('')
+const inputRef = ref<HTMLInputElement | null>(null)
+
+// A single entry point (double-click here or the "Rename" menu item) flips
+// `isRenaming`; seed the draft and focus the field once the input mounts.
+watch(isRenaming, (renaming) => {
+  if (!renaming) return
+  draftName.value = workspaceName.value
+  void nextTick(() => {
+    inputRef.value?.focus()
+    inputRef.value?.select()
+  })
+})
+
+// Surface the limit only as the user approaches it, to keep the header quiet.
+const remaining = computed(() => MAX_NAME_LENGTH - draftName.value.length)
+
+// Client-side only preview (prototype): the picked image is held locally, not
+// uploaded or persisted. Resets on reload.
+const imageUrl = ref<string | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+function pickImage() {
+  fileInputRef.value?.click()
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = () => {
+    imageUrl.value = reader.result as string
+  }
+  reader.readAsDataURL(file)
+}
+
+function beginRename() {
+  if (!canEdit.value) return
+  startRenaming()
+}
+
+async function commit() {
+  if (!isRenaming.value) return
+  stopRenaming()
+  const name = draftName.value.trim()
+  if (!name || name === workspaceName.value) return
+  try {
+    await store.updateWorkspaceName(name)
+  } catch {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToUpdateWorkspace')
+    })
+  }
+}
+
+function cancel() {
+  stopRenaming()
+}
+</script>