fix(website): correct donwload typo in MCP FAQ answer

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.github/workflows/cla.yml

@@ -38,9 +38,11 @@ jobs:
           PR_NUMBER: ${{ github.event.pull_request.number || github.event.issue.number }}
           PR_AUTHOR: ${{ github.event.pull_request.user.login || github.event.issue.user.login }}
           BASE_ALLOWLIST: action@github.com,actions-user,ampagent,claude,comfy-pr-bot,GitHub Action,github-actions,github-actions[bot],Glary Bot,Glary-Bot,*[bot]
+        # For each commit emit the GitHub login when the author/committer email resolves to a GitHub account
+        # otherwise fall back to the raw git name.
         run: |
           others=$(gh api "repos/${{ github.repository }}/pulls/${PR_NUMBER}/commits" --paginate \
-            --jq '.[] | (.author.login // empty), (.committer.login // empty)' \
+            --jq '.[] | (.author.login // .commit.author.name // empty), (.committer.login // .commit.committer.name // empty)' \
             | sort -u | grep -vix "${PR_AUTHOR}" | paste -sd, -)
           if [ -n "$others" ]; then
             echo "allowlist=${BASE_ALLOWLIST},${others}" >> "$GITHUB_OUTPUT"

.github/workflows/pr-backport.yaml

@@ -278,32 +278,49 @@ jobs:
               continue
             fi
 
-            # Create backport branch
-            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
+            # Create backport branch. A failure here (e.g. dirty state left
+            # by a prior target) must not abort the loop and skip remaining
+            # targets, so fall back to a clean checkout and record the error.
+            if ! git checkout -B "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"; then
+              echo "::error::Failed to create branch ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
+              FAILED="${FAILED}${TARGET_BRANCH}:branch-create-failed "
+              git checkout main || git checkout -f main
+              echo "::endgroup::"
+              continue
+            fi
 
             # Try cherry-pick
             if git cherry-pick "${MERGE_COMMIT}"; then
               if [ "$REMOTE_BACKPORT_EXISTS" = true ]; then
-                git push --force-with-lease origin "${BACKPORT_BRANCH}"
+                PUSH_CMD=(git push --force-with-lease origin "${BACKPORT_BRANCH}")
               else
-                git push origin "${BACKPORT_BRANCH}"
+                PUSH_CMD=(git push origin "${BACKPORT_BRANCH}")
               fi
-              echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
-              SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
-              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+
+              # A push failure for one target must not abort the loop and
+              # prevent remaining targets from being attempted.
+              if "${PUSH_CMD[@]}"; then
+                echo "${BACKPORT_BRANCH}" >> "$CREATED_BRANCHES_FILE"
+                SUCCESS="${SUCCESS}${TARGET_BRANCH}:${BACKPORT_BRANCH} "
+                echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+              else
+                echo "::error::Failed to push ${BACKPORT_BRANCH} for ${TARGET_BRANCH}"
+                FAILED="${FAILED}${TARGET_BRANCH}:push-failed "
+              fi
+
               # Return to main (keep the branch, we need it for PR)
-              git checkout main
+              git checkout main || git checkout -f main
             else
               # Get conflict info
               CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
-              git cherry-pick --abort
+              git cherry-pick --abort || true
 
               echo "::error::Cherry-pick failed due to conflicts"
               FAILED="${FAILED}${TARGET_BRANCH}:conflicts:${CONFLICTS} "
 
               # Clean up the failed branch
-              git checkout main
-              git branch -D "${BACKPORT_BRANCH}"
+              git checkout main || git checkout -f main
+              git branch -D "${BACKPORT_BRANCH}" || true
             fi
 
             echo "::endgroup::"
@@ -384,6 +401,10 @@ jobs:
 
             **Reason:** Merge conflicts detected during cherry-pick of `${MERGE_COMMIT_SHORT}`
 
+            The auto-backport could not be completed automatically. Please backport
+            manually onto branch `${BACKPORT_BRANCH}` (from `origin/${target}`) and
+            open a PR to `${target}`.
+
             <details>
             <summary>📄 Conflicting files</summary>
 
@@ -416,19 +437,37 @@ jobs:
             MERGE_COMMIT=$(jq -r '.pull_request.merge_commit_sha' "$GITHUB_EVENT_PATH")
           fi
 
+          # Post a comment without letting a single failed `gh pr comment` (e.g.
+          # a locked issue, as happened for PR #13359, or a transient API error)
+          # abort the step under `set -e` and swallow the remaining failures.
+          post_comment() {
+            local body="$1"
+            local context="$2"
+            if ! gh pr comment "${PR_NUMBER}" --body "${body}"; then
+              echo "::warning::Could not comment on PR #${PR_NUMBER} about ${context}. Manual backport required."
+            fi
+          }
+
           for failure in ${{ steps.backport.outputs.failed }}; do
             IFS=':' read -r target reason conflicts <<< "${failure}"
 
+            SAFE_TARGET=$(echo "$target" | tr '/' '-')
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
+
             if [ "${reason}" = "branch-missing" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist"
+              post_comment "@${PR_AUTHOR} Backport failed: Branch \`${target}\` does not exist" "missing branch ${target}"
 
             elif [ "${reason}" = "already-exists" ]; then
-              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed."
+              post_comment "@${PR_AUTHOR} Commit \`${MERGE_COMMIT}\` already exists on branch \`${target}\`. No backport needed." "already-backported ${target}"
+
+            elif [ "${reason}" = "branch-create-failed" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` failed: could not create the backport branch. Please retry or backport manually."
+
+            elif [ "${reason}" = "push-failed" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport to \`${target}\` cherry-picked cleanly but the push failed. Please retry or push the backport branch manually."
 
             elif [ "${reason}" = "conflicts" ]; then
               CONFLICTS_INLINE=$(echo "${conflicts}" | tr ',' ' ')
-              SAFE_TARGET=$(echo "$target" | tr '/' '-')
-              BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${SAFE_TARGET}"
               PR_URL="${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}"
 
               export PR_NUMBER PR_URL MERGE_COMMIT target BACKPORT_BRANCH CONFLICTS_INLINE
@@ -444,10 +483,10 @@ jobs:
               CONFLICTS_BLOCK=$(echo "${conflicts}" | tr ',' '\n')
               MERGE_COMMIT_SHORT="${MERGE_COMMIT:0:7}"
 
-              export target MERGE_COMMIT_SHORT CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
-              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
+              export target MERGE_COMMIT_SHORT BACKPORT_BRANCH CONFLICTS_BLOCK AGENT_PROMPT PR_AUTHOR
+              COMMENT_BODY=$(envsubst '${target} ${MERGE_COMMIT_SHORT} ${BACKPORT_BRANCH} ${CONFLICTS_BLOCK} ${AGENT_PROMPT} ${PR_AUTHOR}' <<<"$COMMENT_BODY_TEMPLATE")
 
-              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
+              post_comment "${COMMENT_BODY}" "cherry-pick conflict on ${target} (backport manually onto ${BACKPORT_BRANCH})"
             fi
           done
 

apps/website/e2e/careers.spec.ts

@@ -8,7 +8,7 @@ test.describe('Careers page @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Careers — Comfy')
+    await expect(page).toHaveTitle('Careers - Comfy')
   })
 
   test('Roles section heading is visible', async ({ page }) => {
@@ -72,7 +72,7 @@ test.describe('Careers page role links', () => {
 test.describe('Careers page (zh-CN) @smoke', () => {
   test('renders localized heading and roles', async ({ page }) => {
     await page.goto('/zh-CN/careers')
-    await expect(page).toHaveTitle('招聘 — Comfy')
+    await expect(page).toHaveTitle('招聘 - Comfy')
     await expect(
       page.getByRole('heading', { name: '职位', level: 2 })
     ).toBeVisible()

apps/website/e2e/cloud-nodes.spec.ts

@@ -9,7 +9,7 @@ test.describe('Cloud nodes page @smoke', () => {
 
   test('has correct title', async ({ page }) => {
     await expect(page).toHaveTitle(
-      'Custom-node packs on Comfy Cloud — supported by default'
+      'Custom-node packs on Comfy Cloud - supported by default'
     )
   })
 

apps/website/e2e/cloud.spec.ts

@@ -8,7 +8,7 @@ test.describe('Cloud page @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Comfy Cloud — AI in the Cloud')
+    await expect(page).toHaveTitle('Comfy Cloud - AI in the Cloud')
   })
 
   test('HeroSection heading and subtitle are visible', async ({ page }) => {

apps/website/e2e/download.spec.ts

@@ -16,7 +16,7 @@ test.describe('Download page @smoke', () => {
 
   test('has correct title', async ({ page }) => {
     await expect(page).toHaveTitle(
-      'Download Comfy Desktop — Run AI on Your Hardware'
+      'Download Comfy Desktop - Run AI on Your Hardware'
     )
   })
 

apps/website/e2e/homepage.spec.ts

@@ -17,7 +17,7 @@ test.describe('Homepage @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Comfy — Professional Control of Visual AI')
+    await expect(page).toHaveTitle('Comfy - Professional Control of Visual AI')
   })
 
   test('HeroSection heading is visible', async ({ page }) => {

apps/website/e2e/learning.spec.ts

@@ -13,7 +13,7 @@ test.describe('Learning page @smoke', () => {
   })
 
   test('has correct title', async ({ page }) => {
-    await expect(page).toHaveTitle('Learning — Comfy')
+    await expect(page).toHaveTitle('Learning - Comfy')
   })
 
   test('hero headline references ComfyUI', async ({ page }) => {
@@ -137,7 +137,7 @@ 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).toHaveTitle('学习 - Comfy')
     await expect(page.getByRole('heading', { level: 1 })).toContainText(
       /[一-鿿]/
     )

apps/website/e2e/navigation.spec.ts

@@ -31,6 +31,26 @@ test.describe('Desktop navigation @smoke', () => {
     }
   })
 
+  test('NEW badge shows on Products and Community only', async ({ page }) => {
+    const nav = page.getByRole('navigation', { name: 'Main navigation' })
+    const desktopLinks = nav.getByTestId('desktop-nav-links')
+
+    for (const label of ['Products', 'Community']) {
+      await expect(
+        desktopLinks
+          .getByRole('button', { name: label })
+          .getByText('NEW', { exact: true })
+      ).toBeVisible()
+    }
+
+    await expect(
+      desktopLinks.getByRole('button', { name: 'Company' }).getByText('NEW')
+    ).toHaveCount(0)
+    await expect(
+      desktopLinks.getByRole('link', { name: 'Pricing' }).getByText('NEW')
+    ).toHaveCount(0)
+  })
+
   test('CTA buttons are visible', async ({ page }) => {
     const nav = page.getByRole('navigation', { name: 'Main navigation' })
     const desktopCTA = nav.getByTestId('desktop-nav-cta')
@@ -117,6 +137,27 @@ test.describe('Mobile menu @mobile', () => {
     }
   })
 
+  test('NEW badge shows on Products and Community only', async ({ page }) => {
+    await page.getByRole('button', { name: 'Toggle menu' }).click()
+
+    const menu = page.getByRole('dialog')
+
+    for (const label of ['Products', 'Community']) {
+      await expect(
+        menu.getByRole('button', { name: label }).getByText('NEW', {
+          exact: true
+        })
+      ).toBeVisible()
+    }
+
+    await expect(
+      menu.getByRole('button', { name: 'Company' }).getByText('NEW')
+    ).toHaveCount(0)
+    await expect(
+      menu.getByRole('link', { name: 'Pricing' }).getByText('NEW')
+    ).toHaveCount(0)
+  })
+
   test('clicking section with subitems drills down and back works', async ({
     page
   }) => {

apps/website/e2e/payment.spec.ts

@@ -22,7 +22,7 @@ test.describe('Payment success page @smoke', () => {
   })
 
   test('has correct title and is noindex', async ({ page }) => {
-    await expect(page).toHaveTitle('Payment Successful — Comfy')
+    await expect(page).toHaveTitle('Payment Successful - Comfy')
     await expectNoIndex(page)
   })
 
@@ -54,7 +54,7 @@ test.describe('Payment failed page @smoke', () => {
   })
 
   test('has correct title and is noindex', async ({ page }) => {
-    await expect(page).toHaveTitle('Payment Failed — Comfy')
+    await expect(page).toHaveTitle('Payment Failed - Comfy')
     await expectNoIndex(page)
   })
 
@@ -84,7 +84,7 @@ test.describe('Payment failed page @smoke', () => {
 test.describe('Payment pages zh-CN @smoke', () => {
   test('zh-CN success page renders and links correctly', async ({ page }) => {
     await page.goto('/zh-CN/payment/success')
-    await expect(page).toHaveTitle('支付成功 — Comfy')
+    await expect(page).toHaveTitle('支付成功 - Comfy')
     await expectNoIndex(page)
     await expect(
       page.getByRole('heading', { name: '支付成功', level: 1 })
@@ -99,7 +99,7 @@ test.describe('Payment pages zh-CN @smoke', () => {
 
   test('zh-CN failed page renders and links correctly', async ({ page }) => {
     await page.goto('/zh-CN/payment/failed')
-    await expect(page).toHaveTitle('支付失败 — Comfy')
+    await expect(page).toHaveTitle('支付失败 - Comfy')
     await expectNoIndex(page)
     await expect(
       page.getByRole('heading', { name: '无法完成支付', level: 1 })

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
-import { reactive, watch } from 'vue'
+import { computed, reactive, watch } from 'vue'
 
 type Faq = { id: string; question: string; answer: string }
 
@@ -9,6 +9,31 @@ const { faqs } = defineProps<{
   faqs: readonly Faq[]
 }>()
 
+type AnswerPart = { type: 'text' | 'link'; value: string }
+
+function parseAnswer(answer: string): AnswerPart[] {
+  const urlPattern = /https?:\/\/[\w\-./?=&#%~:@+,;]+/g
+  const parts: AnswerPart[] = []
+  let lastIndex = 0
+  for (const match of answer.matchAll(urlPattern)) {
+    const start = match.index ?? 0
+    const url = match[0].replace(/[.,;:]+$/, '')
+    if (start > lastIndex) {
+      parts.push({ type: 'text', value: answer.slice(lastIndex, start) })
+    }
+    parts.push({ type: 'link', value: url })
+    lastIndex = start + url.length
+  }
+  if (lastIndex < answer.length) {
+    parts.push({ type: 'text', value: answer.slice(lastIndex) })
+  }
+  return parts
+}
+
+const parsedFaqs = computed(() =>
+  faqs.map((faq) => ({ ...faq, answerParts: parseAnswer(faq.answer) }))
+)
+
 const expanded = reactive<boolean[]>(faqs.map(() => false))
 
 watch(
@@ -40,7 +65,7 @@ function toggle(index: number) {
       <!-- Right FAQ list -->
       <div class="flex-1">
         <div
-          v-for="(faq, index) in faqs"
+          v-for="(faq, index) in parsedFaqs"
           :key="faq.id"
           class="border-b border-primary-comfy-canvas/20"
         >
@@ -83,8 +108,23 @@ function toggle(index: number) {
             :aria-labelledby="`faq-trigger-${faq.id}`"
             class="pb-6"
           >
-            <p class="text-sm whitespace-pre-line text-primary-comfy-canvas/70">
-              {{ faq.answer }}
+            <p
+              class="text-sm wrap-break-word whitespace-pre-line text-primary-comfy-canvas/70"
+            >
+              <template
+                v-for="(part, partIndex) in faq.answerParts"
+                :key="partIndex"
+              >
+                <a
+                  v-if="part.type === 'link'"
+                  :href="part.value"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-primary-comfy-yellow underline underline-offset-2 transition-opacity hover:opacity-70"
+                  >{{ part.value }}</a
+                >
+                <template v-else>{{ part.value }}</template>
+              </template>
             </p>
           </section>
         </div>

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

@@ -8,23 +8,21 @@ import CopyableField from '@/components/ui/copyable-field/CopyableField.vue'
 
 import SectionHeader from '../common/SectionHeader.vue'
 
-type CardAction =
-  | {
-      type: 'link'
-      label: string
-      href: string
-      target?: '_blank'
-      icon?: Component
-      variant?: 'default' | 'outline'
-    }
-  | { type: 'code'; value: string }
+type CardLink = {
+  label: string
+  href: string
+  target?: '_blank'
+  icon?: Component
+  variant?: 'default' | 'outline'
+}
 
 export interface FeatureCard {
   id: string
   label?: string
   title: string
   description: string
-  action?: CardAction
+  copyable?: string
+  link?: CardLink
 }
 
 type ColumnCount = 2 | 3 | 4
@@ -91,28 +89,30 @@ const columnClass: Record<ColumnCount, string> = {
           {{ card.description }}
         </p>
 
-        <div v-if="card.action" class="mt-6">
-          <Button
-            v-if="card.action.type === 'link'"
-            as="a"
-            :href="card.action.href"
-            :target="card.action.target"
-            :rel="
-              card.action.target === '_blank'
-                ? 'noopener noreferrer'
-                : undefined
-            "
-            :variant="card.action.variant ?? 'outline'"
-            :append-icon="card.action.icon"
-          >
-            {{ card.action.label }}
-          </Button>
+        <div
+          v-if="card.copyable || card.link"
+          class="mt-6 flex flex-col items-start gap-4"
+        >
           <CopyableField
-            v-else
-            :value="card.action.value"
+            v-if="card.copyable"
+            class="w-full"
+            :value="card.copyable"
             :copy-label="copyLabel"
             :copied-label="copiedLabel"
           />
+          <Button
+            v-if="card.link"
+            as="a"
+            :href="card.link.href"
+            :target="card.link.target"
+            :rel="
+              card.link.target === '_blank' ? 'noopener noreferrer' : undefined
+            "
+            :variant="card.link.variant ?? 'outline'"
+            :append-icon="card.link.icon"
+          >
+            {{ card.link.label }}
+          </Button>
         </div>
       </div>
     </div>

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

@@ -8,7 +8,7 @@ import VideoPlayer from '../common/VideoPlayer.vue'
 import type { VideoTrack } from '../common/VideoPlayer.vue'
 
 type RowMedia =
-  | { type: 'image'; src: string; alt?: string }
+  | { type: 'image'; src: string; alt?: string; fit?: 'cover' | 'contain' }
   | {
       type: 'video'
       src: string
@@ -33,12 +33,14 @@ const {
   heading,
   eyebrow,
   locale = 'en',
-  rows
+  rows,
+  mediaFit = 'cover'
 } = defineProps<{
   heading: string
   eyebrow?: string
   locale?: Locale
   rows: readonly FeatureRow[]
+  mediaFit?: 'cover' | 'contain'
 }>()
 </script>
 
@@ -58,7 +60,7 @@ const {
         <div
           :class="
             cn(
-              'order-2 flex flex-col justify-center gap-4 p-6 lg:w-1/2 lg:p-12',
+              'order-2 flex flex-col justify-center gap-4 p-6 lg:flex-1 lg:p-12',
               i % 2 === 0 ? 'lg:order-1' : 'lg:order-2'
             )
           "
@@ -75,7 +77,7 @@ const {
         <div
           :class="
             cn(
-              'order-1 flex lg:w-1/2',
+              'relative order-1 aspect-620/364 w-full lg:w-155 lg:shrink-0',
               i % 2 === 0 ? 'lg:order-2' : 'lg:order-1'
             )
           "
@@ -86,7 +88,14 @@ const {
             :alt="row.media.alt ?? row.title"
             loading="lazy"
             decoding="async"
-            class="aspect-4/3 w-full rounded-4xl object-cover"
+            :class="
+              cn(
+                'absolute inset-0 size-full rounded-4xl',
+                (row.media.fit ?? mediaFit) === 'contain'
+                  ? 'object-contain'
+                  : 'object-cover'
+              )
+            "
           />
           <VideoPlayer
             v-else
@@ -99,7 +108,8 @@ const {
             :loop="row.media.loop"
             :minimal="row.media.minimal"
             :hide-controls="row.media.hideControls"
-            class="w-full"
+            :fit="mediaFit"
+            class="absolute inset-0 size-full"
           />
         </div>
       </GlassCard>

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

@@ -16,6 +16,7 @@ import type { NavItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
 import NavColumn from './NavColumn.vue'
 import NavFeaturedCard from './NavFeaturedCard.vue'
+import NewBadge from './NewBadge.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 const mainNavigation = getMainNavigation(locale)
@@ -42,7 +43,10 @@ function isNavItemActive(navItem: NavItem, path: string): boolean {
           <NavigationMenuTrigger
             :active="isNavItemActive(navItem, currentPath)"
           >
-            {{ navItem.label }}
+            <span class="inline-flex items-center gap-1">
+              <span class="ppformula-text-center">{{ navItem.label }}</span>
+              <NewBadge v-if="navItem.badge" :locale="locale" size="xxs" />
+            </span>
           </NavigationMenuTrigger>
           <NavigationMenuContent class="w-auto" data-testid="nav-dropdown">
             <ul class="flex w-max gap-16">

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

@@ -8,6 +8,7 @@ import { lockScroll, unlockScroll } from '../../../composables/scrollLock'
 import type { Locale } from '../../../i18n/translations.ts'
 import { t } from '../../../i18n/translations.ts'
 import NavLinkContent from './NavLinkContent.vue'
+import NewBadge from './NewBadge.vue'
 import Sheet from '@/components/ui/sheet/Sheet.vue'
 import SheetContent from '@/components/ui/sheet/SheetContent.vue'
 import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
@@ -96,7 +97,8 @@ onUnmounted(() => {
                   :href="item.columns ? undefined : item.href"
                   @click="item.columns && (activeSection = item.label)"
                 >
-                  {{ item.label }}
+                  <span class="ppformula-text-center">{{ item.label }}</span>
+                  <NewBadge v-if="item.badge" :locale="locale" size="xxs" />
                   <template #append>
                     <ChevronRight class="size-7" />
                   </template>

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import Badge from '@/components/ui/badge/Badge.vue'
 import { ArrowUpRight } from '@lucide/vue'
 
 import type { NavColumnItem } from '../../../data/mainNavigation'
 import type { Locale } from '../../../i18n/translations'
-import { t } from '../../../i18n/translations'
+import NewBadge from './NewBadge.vue'
 
 defineProps<{ item: NavColumnItem; locale: Locale }>()
 </script>
@@ -12,9 +11,7 @@ defineProps<{ item: NavColumnItem; locale: Locale }>()
 <template>
   <span class="flex items-center gap-2">
     <span class="ppformula-text-center">{{ item.label }}</span>
-    <Badge v-if="item.badge" size="xs" variant="accent">
-      {{ t('nav.badgeNew', locale) }}
-    </Badge>
+    <NewBadge v-if="item.badge" :locale="locale" size="xs" />
     <ArrowUpRight
       v-if="item.external"
       class="text-primary-comfy-yellow size-4"

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import Badge from '@/components/ui/badge/Badge.vue'
+
+import type { BadgeVariants } from '@/components/ui/badge'
+import type { Locale } from '../../../i18n/translations'
+import { t } from '../../../i18n/translations'
+
+defineProps<{ locale: Locale; size?: BadgeVariants['size'] }>()
+</script>
+
+<template>
+  <Badge :size="size" variant="accent">
+    {{ t('nav.badgeNew', locale) }}
+  </Badge>
+</template>

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

@@ -30,7 +30,8 @@ const {
   autoplay = false,
   loop = false,
   minimal = false,
-  hideControls = false
+  hideControls = false,
+  fit = 'cover'
 } = defineProps<{
   locale?: Locale
   src?: string
@@ -40,6 +41,7 @@ const {
   loop?: boolean
   minimal?: boolean
   hideControls?: boolean
+  fit?: 'cover' | 'contain'
 }>()
 
 const playerEl = useTemplateRef<HTMLDivElement>('playerEl')
@@ -197,7 +199,9 @@ function toggleFullscreen() {
     <video
       v-if="src"
       ref="videoEl"
-      class="size-full object-cover"
+      :class="
+        cn('size-full', fit === 'contain' ? 'object-contain' : 'object-cover')
+      "
       :src
       :poster
       :preload="autoplay ? 'auto' : 'metadata'"

apps/website/src/components/ui/badge/index.ts

@@ -6,14 +6,15 @@ export const badgeVariants = cva({
   variants: {
     size: {
       md: 'px-4 py-1 text-xs',
-      xs: 'px-2 py-0.5 text-[9px]'
+      xs: 'px-2 py-0.5 text-[9px]',
+      xxs: 'px-1.5 py-px text-[8px]'
     },
     variant: {
       default: 'bg-transparency-ink-t80',
       subtle: 'bg-transparency-white-t4 text-primary-comfy-canvas',
       category: 'text-primary-comfy-yellow px-0 font-semibold uppercase',
       accent:
-        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent px-2 py-0.5 text-[9px] font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
+        'before:bg-primary-comfy-yellow relative isolate overflow-visible rounded-none bg-transparent font-bold tracking-wide text-primary-comfy-ink uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm'
     }
   },
   defaultVariants: {

apps/website/src/config/routes.ts

@@ -76,6 +76,7 @@ export const externalLinks = {
   apiKeys: 'https://platform.comfy.org/profile/api-keys',
   blog: 'https://blog.comfy.org/',
   cloud: 'https://cloud.comfy.org',
+  cloudMcpServer: 'https://cloud.comfy.org/mcp',
   cloudStatus: 'https://status.comfy.org',
   discord: 'https://discord.com/invite/comfyorg',
   docs: 'https://docs.comfy.org/',

apps/website/src/data/mainNavigation.ts

@@ -30,15 +30,23 @@ export type NavItem =
       label: string
       columns: NavColumn[]
       featured?: NavFeatured
+      badge?: 'new'
       href?: never
     }
-  | { label: string; href: string; columns?: never; featured?: never }
+  | {
+      label: string
+      href: string
+      badge?: 'new'
+      columns?: never
+      featured?: never
+    }
 
 export function getMainNavigation(locale: Locale): NavItem[] {
   const routes = getRoutes(locale)
   return [
     {
       label: t('nav.products', locale),
+      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/mcp-card.webp',
         imageAlt: t('nav.featuredProductsAlt', locale),
@@ -95,6 +103,7 @@ export function getMainNavigation(locale: Locale): NavItem[] {
     { label: t('nav.pricing', locale), href: routes.cloudPricing },
     {
       label: t('nav.community', locale),
+      badge: 'new',
       featured: {
         imageSrc: 'https://media.comfy.org/website/nav/featured-demo-card.jpg',
         imageAlt: t('nav.featuredCommunityAlt', locale),

apps/website/src/i18n/translations.ts

@@ -823,7 +823,7 @@ const translations = {
     'zh-CN': 'Comfy Cloud 支持的自定义节点包'
   },
   'cloudNodes.meta.title': {
-    en: 'Custom-node packs on Comfy Cloud — supported by default',
+    en: 'Custom-node packs on Comfy Cloud - supported by default',
     'zh-CN': 'Comfy Cloud 自定义节点包合集——开箱即用'
   },
   'cloudNodes.meta.description': {
@@ -1845,8 +1845,8 @@ const translations = {
 
   // MCP – Meta
   'mcp.meta.title': {
-    en: 'Comfy MCP — Drive ComfyUI from any AI agent',
-    'zh-CN': 'Comfy MCP — 让任何 AI 智能体驱动 ComfyUI'
+    en: 'Comfy MCP - Drive ComfyUI from any AI agent',
+    'zh-CN': 'Comfy MCP - 让任何 AI 智能体驱动 ComfyUI'
   },
   'mcp.meta.description': {
     en: 'Comfy MCP exposes the full ComfyUI engine over the Model Context Protocol. Generate images, video, audio, and 3D from Claude Code, Claude Desktop, and any MCP-compatible client.',
@@ -1931,9 +1931,9 @@ const translations = {
     'zh-CN': '或手动添加'
   },
   'mcp.setup.step2.description': {
-    en: 'Prefer manual setup? Add Comfy Cloud as a custom connector with the MCP URL. The docs cover every client.',
+    en: 'Prefer manual setup? Add this URL as a custom connector or remote MCP server in any client, then sign in when prompted. The docs cover every client.',
     'zh-CN':
-      '想手动配置？用 MCP URL 将 Comfy Cloud 添加为自定义连接器。文档涵盖各类客户端。'
+      '想手动配置？在任意客户端中将此 URL 添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。文档涵盖各类客户端。'
   },
   'mcp.setup.step2.cta': {
     en: 'COMFY CLOUD MCP DOCS',
@@ -2037,14 +2037,53 @@ const translations = {
     'zh-CN': '运行真实工作流'
   },
   'mcp.tools.3.description': {
-    en: 'Turn any ComfyUI workflow into a callable tool. The full power of the engine, driven by your agent.',
+    en: 'Submit graphs, track jobs, and pull outputs back. Save and share workflows, reuse a saved one, or open any run on the ComfyUI canvas — the full engine, driven by tool calls.',
     'zh-CN':
-      '将任何 ComfyUI 工作流转换为可调用的工具。由你的智能体驱动完整的引擎能力。'
+      '提交计算图、跟踪任务并取回输出。保存和分享工作流，复用已保存的工作流，或在 ComfyUI 画布上打开任意运行——完整的引擎，由工具调用驱动。'
   },
   'mcp.tools.3.alt': {
     en: 'Comfy MCP running a ComfyUI workflow as a callable tool from a chat',
     'zh-CN': 'Comfy MCP 在对话中将 ComfyUI 工作流作为可调用工具运行'
   },
+  'mcp.tools.4.title': {
+    en: 'Direct any model',
+    'zh-CN': '直接调用任意模型'
+  },
+  'mcp.tools.4.description': {
+    en: 'Kling, Veo, Seedance, Flux, GPT-Image, Nano Banana, and ElevenLabs. Closed partner APIs and open-source models, reached through one set of tools.',
+    'zh-CN':
+      'Kling、Veo、Seedance、Flux、GPT-Image、Nano Banana 和 ElevenLabs。封闭的合作伙伴 API 与开源模型，通过同一套工具即可调用。'
+  },
+  'mcp.tools.4.alt': {
+    en: 'Comfy MCP directing closed partner APIs and open-source models through one set of tools',
+    'zh-CN': 'Comfy MCP 通过同一套工具调用封闭合作伙伴 API 和开源模型'
+  },
+  'mcp.tools.5.title': {
+    en: 'Generate in batches',
+    'zh-CN': '批量生成'
+  },
+  'mcp.tools.5.description': {
+    en: 'Stack a batch on the Queue, track it, and pull back every output. Dozens of runs from a single call.',
+    'zh-CN':
+      '将一批任务加入队列，跟踪进度，并取回每一个输出。一次调用即可完成数十次运行。'
+  },
+  'mcp.tools.5.alt': {
+    en: 'Comfy MCP stacking a batch on the Queue and pulling back every output',
+    'zh-CN': 'Comfy MCP 将一批任务加入队列并取回每个输出'
+  },
+  'mcp.tools.6.title': {
+    en: 'Ship it as an app',
+    'zh-CN': '作为应用发布'
+  },
+  'mcp.tools.6.description': {
+    en: 'Turn any workflow into an app with a shareable URL. Collaborators run it in the browser — only the inputs you expose, nothing to install.',
+    'zh-CN':
+      '将任意工作流变成带可分享链接的应用。协作者在浏览器中运行——只暴露你开放的输入，无需安装任何东西。'
+  },
+  'mcp.tools.6.alt': {
+    en: 'Comfy MCP turning a workflow into a shareable browser app',
+    'zh-CN': 'Comfy MCP 将工作流变成可在浏览器中分享的应用'
+  },
 
   // MCP – HowItWorksSection
   'mcp.howItWorks.heading': {
@@ -2091,71 +2130,80 @@ const translations = {
     'zh-CN': '支持哪些客户端？'
   },
   'mcp.faq.1.a': {
-    en: 'Claude Code and Claude Desktop today, both signing in with OAuth. Support for more clients is coming.',
+    en: 'For Claude Code, Claude Desktop, or Codex, add https://cloud.comfy.org/mcp as a custom connector or remote MCP server in any client, then sign in when prompted.\nFor any other agents, you need to connect with an API key. Send the docs https://docs.comfy.org/agent-tools/cloud to your agent and it will figure out the installation for you.',
     'zh-CN':
-      '目前支持 Claude Code 和 Claude Desktop，均通过 OAuth 登录。更多客户端的支持即将推出。'
+      '对于 Claude Code、Claude Desktop 或 Codex，在任意客户端中将 https://cloud.comfy.org/mcp 添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。\n对于其他智能体，你需要使用 API 密钥连接。将文档 https://docs.comfy.org/agent-tools/cloud 发送给你的智能体，它会为你完成安装。'
   },
   'mcp.faq.2.q': {
+    en: "What's the server URL?",
+    'zh-CN': '服务器 URL 是什么？'
+  },
+  'mcp.faq.2.a': {
+    en: 'https://cloud.comfy.org/mcp — add it as a custom connector or remote MCP server in any client, then sign in when prompted.',
+    'zh-CN':
+      'https://cloud.comfy.org/mcp——在任意客户端中将它添加为自定义连接器或远程 MCP 服务器，然后在提示时登录。'
+  },
+  'mcp.faq.3.q': {
     en: 'Do I need an API key?',
     'zh-CN': '我需要 API 密钥吗？'
   },
-  'mcp.faq.2.a': {
-    en: 'Not for Claude Code or Claude Desktop. They use OAuth. An API key is only needed for headless or CI setups with no browser.',
-    'zh-CN':
-      'Claude Code 和 Claude Desktop 不需要，它们使用 OAuth。仅在没有浏览器的无头或 CI 环境中才需要 API 密钥。'
-  },
-  'mcp.faq.3.q': {
-    en: 'Do the slash commands work in Claude Desktop?',
-    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
-  },
   'mcp.faq.3.a': {
-    en: 'No. They ship in the Claude Code plugin. Desktop connects to the same MCP server, so the tools work; just ask in plain language.',
+    en: 'Not for Claude Code, Claude Desktop, or Codex. You need a Comfy API key for Cursor, Hermes, and OpenClaw for now. Just copy https://docs.comfy.org/agent-tools/cloud and your agent will figure out the installation for you.',
     'zh-CN':
-      '不可以。斜杠命令包含在 Claude Code 插件中。Claude Desktop 连接的是同一个 MCP 服务器，因此工具可以正常使用；直接用自然语言提问即可。'
+      'Claude Code、Claude Desktop 和 Codex 不需要。Cursor、Hermes 和 OpenClaw 目前需要 Comfy API 密钥。只需复制 https://docs.comfy.org/agent-tools/cloud，你的智能体就会为你完成安装。'
   },
   'mcp.faq.4.q': {
-    en: "The sign-in didn't open a browser.",
-    'zh-CN': '登录时没有打开浏览器。'
+    en: 'Does it cost anything?',
+    'zh-CN': '需要付费吗？'
   },
   'mcp.faq.4.a': {
-    en: 'In Claude Code, run /mcp, select comfy-cloud, and choose Authenticate. In Claude Desktop, reopen the connector from Customize → Connectors.',
+    en: "Connecting is free with a Comfy account, and searching models, nodes, and templates doesn't cost credits. Running a generation uses Comfy Cloud credits and needs a subscription or credit balance. Your agent confirms with you before it spends.",
     'zh-CN':
-      '在 Claude Code 中，运行 /mcp，选择 comfy-cloud，然后选择 Authenticate（授权）。在 Claude Desktop 中，从“自定义 → 连接器”重新打开该连接器。'
+      '使用 Comfy 账户连接是免费的，搜索模型、节点和模板也不消耗积分。运行生成会使用 Comfy Cloud 积分，需要订阅或积分余额。智能体在消费前会先与你确认。'
   },
   'mcp.faq.5.q': {
-    en: 'How do I connect in Claude Code?',
-    'zh-CN': '如何在 Claude Code 中连接？'
+    en: 'Can I use it with my local ComfyUI?',
+    'zh-CN': '可以配合我的本地 ComfyUI 使用吗？'
   },
   'mcp.faq.5.a': {
-    en: 'Add the marketplace and install the comfy-cloud plugin, then run /mcp → comfy-cloud → Authenticate. It adds the connection and slash commands in one step.',
-    'zh-CN':
-      '添加插件市场并安装 comfy-cloud 插件，然后运行 /mcp → comfy-cloud → Authenticate（授权）。一步即可添加连接和斜杠命令。'
+    en: 'Coming soon. Today, to drive a local ComfyUI, you can use comfy-cli.',
+    'zh-CN': '即将推出。目前，若要操作本地 ComfyUI，你可以使用 comfy-cli。'
   },
   'mcp.faq.6.q': {
-    en: "What's the server URL for Claude Desktop?",
-    'zh-CN': 'Claude Desktop 的服务器 URL 是什么？'
-  },
-  'mcp.faq.6.a': {
-    en: 'Add a custom connector in Customize → Connectors pointing to https://cloud.comfy.org/mcp, then sign in when prompted.',
-    'zh-CN':
-      '在“自定义 → 连接器”中添加一个指向 https://cloud.comfy.org/mcp 的自定义连接器，然后在提示时登录。'
-  },
-  'mcp.faq.7.q': {
     en: 'What can my agent do once connected?',
     'zh-CN': '连接后我的智能体能做什么？'
   },
-  'mcp.faq.7.a': {
-    en: 'Generate images, video, audio, and 3D; search models, nodes, and templates; and run ComfyUI workflows, all from a chat.',
+  'mcp.faq.6.a': {
+    en: "• Generate images, video, audio, and 3D — including all open-source workflows and partner models like Seedance, GPT-Image, Nano Banana, and Kling\n• Build, edit, and run workflows; save and re-run workflows\n• Run and read in large batches\n• Search models, nodes, and template workflows\n• Read and execute shared workflow URLs\n• Upload and download assets for you\n\nEverything is now in natural language. No nodes, no downloads, no GPU, no node graphs if you don't want them.",
     'zh-CN':
-      '生成图像、视频、音频和 3D；搜索模型、节点和模板；并运行 ComfyUI 工作流——全部在对话中完成。'
+      '• 生成图像、视频、音频和 3D——包括所有开源工作流以及 Seedance、GPT-Image、Nano Banana 和 Kling 等合作伙伴模型\n• 构建、编辑和运行工作流；保存并重新运行工作流\n• 大批量运行和读取\n• 搜索模型、节点和模板工作流\n• 读取并执行分享的工作流链接\n• 为你上传和下载资产\n\n现在一切都用自然语言完成。如果你愿意，无需节点、无需下载、无需 GPU、无需节点图。'
+  },
+  'mcp.faq.7.q': {
+    en: 'Where do my outputs go?',
+    'zh-CN': '我的输出会保存到哪里？'
+  },
+  'mcp.faq.7.a': {
+    en: 'Into your Comfy Cloud asset library, so you can reuse, remix, and share them — and open any run on the canvas to keep editing. You can also ask your agent to download the assets to local for you.',
+    'zh-CN':
+      '保存到你的 Comfy Cloud 资产库，你可以复用、二次创作和分享——还能在画布上打开任意运行继续编辑。你也可以让智能体把资产下载到本地。'
   },
   'mcp.faq.8.q': {
+    en: 'Do slash commands work in Claude Desktop?',
+    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
+  },
+  'mcp.faq.8.a': {
+    en: 'No. They ship with the Claude Code comfy-cloud plugin. Desktop connects to the same MCP server, so every tool works; just ask in plain language.',
+    'zh-CN':
+      '不可以。斜杠命令随 Claude Code 的 comfy-cloud 插件一起提供。Claude Desktop 连接的是同一个 MCP 服务器，因此所有工具都能使用；直接用自然语言提问即可。'
+  },
+  'mcp.faq.9.q': {
     en: 'Is it generally available?',
     'zh-CN': '现已正式发布了吗？'
   },
-  'mcp.faq.8.a': {
-    en: 'Comfy Cloud MCP is in open beta and available to everyone.',
-    'zh-CN': 'Comfy Cloud MCP 目前处于公开测试阶段，所有人均可使用。'
+  'mcp.faq.9.a': {
+    en: 'Yes. Comfy Cloud MCP is in open beta and available to everyone with a Comfy account.',
+    'zh-CN':
+      '是的。Comfy Cloud MCP 目前处于公开测试阶段，任何拥有 Comfy 账户的人都可以使用。'
   },
 
   // SiteNav
@@ -3483,8 +3531,8 @@ const translations = {
   },
 
   'affiliate-terms.page.title': {
-    en: 'Affiliate Terms — Comfy',
-    'zh-CN': 'Affiliate Terms — Comfy'
+    en: 'Affiliate Terms - Comfy',
+    'zh-CN': 'Affiliate Terms - Comfy'
   },
   'affiliate-terms.page.description': {
     en: 'Comfy.org Affiliate Program Terms and Conditions.',
@@ -3896,8 +3944,8 @@ const translations = {
       'This document reproduces the current template of the Enterprise Customer Agreement for reference only. The executed Agreement between Comfy and Customer, together with any signed Order Forms, governs the relationship between the parties. To request an executable copy, please contact <a href="mailto:sales@comfy.org" class="text-white underline">sales@comfy.org</a>.'
   },
   'enterprise-msa.page.title': {
-    en: 'Enterprise MSA — Comfy',
-    'zh-CN': 'Enterprise MSA — Comfy'
+    en: 'Enterprise MSA - Comfy',
+    'zh-CN': 'Enterprise MSA - Comfy'
   },
   'enterprise-msa.page.description': {
     en: 'Comfy Enterprise Customer Agreement — the master services agreement that governs Comfy Enterprise deployments of Comfy Cloud, Comfy API, and related products.',
@@ -4361,8 +4409,8 @@ const translations = {
 
   // Affiliate page (/affiliates) — head metadata
   'affiliate.page.title': {
-    en: 'Comfy.org Affiliate Program — Become a Partner',
-    'zh-CN': 'Comfy.org 联盟计划 — 成为合作伙伴'
+    en: 'Comfy.org Affiliate Program - Become a Partner',
+    'zh-CN': 'Comfy.org 联盟计划 - 成为合作伙伴'
   },
   'affiliate.page.description': {
     en: 'Earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer. Apply to become a Comfy Partner.',
@@ -4387,8 +4435,8 @@ const translations = {
   // Launches page (/launches) — head metadata
   // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
   'launches.page.title': {
-    en: 'ComfyUI Live Demo & Q&A — June 29 Launch Livestream',
-    'zh-CN': 'ComfyUI 直播演示与问答 — 6 月 29 日发布直播'
+    en: 'ComfyUI Live Demo & Q&A - June 29 Launch Livestream',
+    'zh-CN': 'ComfyUI 直播演示与问答 - 6 月 29 日发布直播'
   },
   'launches.page.description': {
     en: 'Join the ComfyUI livestream on June 29 for a hands-on product demo and live Q&A. See what’s new across desktop, cloud, and community, and get your questions answered.',

apps/website/src/pages/404.astro

@@ -3,7 +3,7 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 ---
 
 <BaseLayout
-  title="404 — Page Not Found — Comfy"
+  title="404 - Page Not Found - Comfy"
   noindex>
   <div
     class="flex w-full flex-col items-center p-4 h-[calc(100dvh-12rem)]">

apps/website/src/pages/about.astro

@@ -16,7 +16,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="About Us — Comfy"
+  title="About Us - Comfy"
   pageType="AboutPage"
   mainEntityId={organizationId(siteUrl)}
   breadcrumbs={[

apps/website/src/pages/careers.astro

@@ -42,7 +42,7 @@ const roles = itemListNode(
 ---
 
 <BaseLayout
-  title="Careers — Comfy"
+  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')}

apps/website/src/pages/case-studies.astro

@@ -3,6 +3,6 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 import ComingSoon from '../components/common/ComingSoon.astro'
 ---
 
-<BaseLayout title="Case Studies — Comfy">
+<BaseLayout title="Case Studies - Comfy">
   <ComingSoon />
 </BaseLayout>

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

@@ -11,7 +11,7 @@ import { t } from '../../i18n/translations'
 ---
 
 <BaseLayout
-  title="Comfy Cloud — AI in the Cloud"
+  title="Comfy Cloud - AI in the Cloud"
   description={t('cloud.hero.subtitle', 'en')}
   keywords={['comfyui web app', 'comfyui app', 'comfyui online', 'comfyui cloud', 'comfy cloud', 'comfy ui application', 'comfyui browser', 'cloud comfyui', 'managed comfyui']}
 >

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

@@ -20,7 +20,7 @@ const productId = jsonLdId(url, 'product')
 ---
 
 <BaseLayout
-  title="Pricing — Comfy Cloud"
+  title="Pricing - Comfy Cloud"
   mainEntityId={productId}
   breadcrumbs={[
     { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },

apps/website/src/pages/contact.astro

@@ -13,7 +13,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="Contact — Comfy"
+  title="Contact - Comfy"
   pageType="ContactPage"
   mainEntityId={organizationId(siteUrl)}
   breadcrumbs={[

apps/website/src/pages/customers.astro

@@ -11,7 +11,7 @@ import { loadStories } from '../utils/loadStories'
 const stories = (await loadStories('en')).map(toCardProps)
 ---
 
-<BaseLayout title="Customer Stories — Comfy">
+<BaseLayout title="Customer Stories - Comfy">
   <HeroSection client:load />
   <StorySection stories={stories} />
   <FeedbackSection client:load />

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

@@ -17,7 +17,7 @@ export async function getStaticPaths() {
 const { entry, next } = Astro.props
 ---
 
-<BaseLayout title={`${entry.data.title} — Comfy`}>
+<BaseLayout title={`${entry.data.title} - Comfy`}>
   <DetailHeroSection
     label={entry.data.category}
     title={entry.data.title}

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

@@ -58,7 +58,7 @@ const learningResource: JsonLdNode = {
 ---
 
 <BaseLayout
-  title={`${title} — Comfy`}
+  title={`${title} - Comfy`}
   description={description}
   ogImage={demo.ogImage}
   mainEntityId={learningId}

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

@@ -3,6 +3,6 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import ComingSoon from '../../components/common/ComingSoon.astro'
 ---
 
-<BaseLayout title="Demos — Comfy" description="Interactive demos and tutorials for ComfyUI.">
+<BaseLayout title="Demos - Comfy" description="Interactive demos and tutorials for ComfyUI.">
   <ComingSoon />
 </BaseLayout>

apps/website/src/pages/download.astro

@@ -23,7 +23,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="Download Comfy Desktop — Run AI on Your Hardware"
+  title="Download Comfy Desktop - Run AI on Your Hardware"
   description={t('download.hero.subtitle', 'en')}
   mainEntityId={comfyUiSoftwareId(siteUrl)}
   breadcrumbs={[

apps/website/src/pages/gallery.astro

@@ -5,7 +5,7 @@ import GallerySection from '../components/gallery/GallerySection.vue'
 import ContactSection from '../components/gallery/ContactSection.vue'
 ---
 
-<BaseLayout title="Gallery — Comfy">
+<BaseLayout title="Gallery - Comfy">
   <HeroSection />
   <GallerySection client:load />
   <ContactSection />

apps/website/src/pages/index.astro

@@ -24,7 +24,7 @@ const { siteUrl } = pageContext(
 ---
 
 <BaseLayout
-  title="Comfy — Professional Control of Visual AI"
+  title="Comfy - Professional Control of Visual AI"
   description={t("hero.subtitle", "en")}
   mainEntityId={comfyUiSoftwareId(siteUrl)}
   extraJsonLd={[

apps/website/src/pages/learning.astro

@@ -12,7 +12,7 @@ import { externalLinks } from '../config/routes'
 const routes = getRoutes('en')
 ---
 
-<BaseLayout title="Learning — Comfy">
+<BaseLayout title="Learning - Comfy">
   <HeroSection client:load />
   <FeaturedWorkflowSection client:visible />
   <TutorialsSection client:visible />

apps/website/src/pages/models.astro

@@ -7,7 +7,7 @@ import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vu
 ---
 
 <BaseLayout
-  title="Models — Comfy"
+  title="Models - Comfy"
   description="Run the world's leading AI models in ComfyUI. Browse every supported model with community workflow templates ready to run."
 >
   <ModelsHeroSection

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

@@ -103,7 +103,7 @@ const faqPage: JsonLdNode = {
 ---
 
 <BaseLayout
-  title={`${pageTitle} — Comfy`}
+  title={`${pageTitle} - Comfy`}
   description={pageDescription}
   ogImage={model.thumbnailUrl}
   mainEntityId={softwareId}

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

@@ -43,7 +43,7 @@ const dirLabel: Record<string, string> = {
 ---
 
 <BaseLayout
-  title={`${title} — Comfy`}
+  title={`${title} - Comfy`}
   description={subtitle}
   pageType="CollectionPage"
   mainEntityId={jsonLdId(url, 'itemlist')}

apps/website/src/pages/payment/failed.astro

@@ -4,7 +4,7 @@ import PaymentStatusSection from '../../components/payment/PaymentStatusSection.
 ---
 
 <BaseLayout
-  title="Payment Failed — Comfy"
+  title="Payment Failed - Comfy"
   description="Your payment was not completed."
   noindex
 >

apps/website/src/pages/payment/success.astro

@@ -4,7 +4,7 @@ import PaymentStatusSection from '../../components/payment/PaymentStatusSection.
 ---
 
 <BaseLayout
-  title="Payment Successful — Comfy"
+  title="Payment Successful - Comfy"
   description="Your payment was processed successfully."
   noindex
 >

apps/website/src/pages/privacy-policy.astro

@@ -5,7 +5,7 @@ import HeroSection from '../components/legal/HeroSection.vue'
 ---
 
 <BaseLayout
-  title="Privacy Policy — Comfy"
+  title="Privacy Policy - Comfy"
   description="Comfy privacy policy. Learn how we collect, use, and protect your personal information."
   noindex
 >

apps/website/src/pages/privacy/desktop.astro

@@ -5,7 +5,7 @@ import HeroSection from '../../components/legal/HeroSection.vue'
 ---
 
 <BaseLayout
-  title="Desktop Privacy Policy — Comfy"
+  title="Desktop Privacy Policy - Comfy"
   description="Privacy policy for Comfy Desktop. Named processors, lawful basis under GDPR/UK GDPR, retention periods, and your rights."
 >
   <HeroSection title="Desktop Privacy Policy" />

apps/website/src/pages/terms-of-service.astro

@@ -6,7 +6,7 @@ import { t } from '../i18n/translations'
 ---
 
 <BaseLayout
-  title="Terms of Service — Comfy"
+  title="Terms of Service - Comfy"
   description="Terms of Service governing use of the Comfy Products, including Comfy Cloud, Comfy API, and Comfy Enterprise."
   noindex
 >

apps/website/src/pages/videos.astro

@@ -3,6 +3,6 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 import ComingSoon from '../components/common/ComingSoon.astro'
 ---
 
-<BaseLayout title="Videos — Comfy">
+<BaseLayout title="Videos - Comfy">
   <ComingSoon />
 </BaseLayout>

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

@@ -16,7 +16,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="关于我们 — Comfy"
+  title="关于我们 - Comfy"
   description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。"
   pageType="AboutPage"
   mainEntityId={organizationId(siteUrl)}

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

@@ -42,7 +42,7 @@ const roles = itemListNode(
 ---
 
 <BaseLayout
-  title="招聘 — Comfy"
+  title="招聘 - Comfy"
   description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
   pageType="CollectionPage"
   mainEntityId={jsonLdId(url, 'itemlist')}

apps/website/src/pages/zh-CN/case-studies.astro

@@ -3,6 +3,6 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import ComingSoon from '../../components/common/ComingSoon.astro'
 ---
 
-<BaseLayout title="案例研究 — Comfy">
+<BaseLayout title="案例研究 - Comfy">
   <ComingSoon />
 </BaseLayout>

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

@@ -11,7 +11,7 @@ import { t } from '../../../i18n/translations'
 ---
 
 <BaseLayout
-  title="Comfy Cloud — 云端 AI"
+  title="Comfy Cloud - 云端 AI"
   description={t('cloud.hero.subtitle', 'zh-CN')}
   keywords={['comfyui web app', 'comfyui app', 'comfyui online', 'comfyui cloud', 'ComfyUI 网页版', 'ComfyUI 云端', 'ComfyUI 应用', 'Comfy Cloud', '云端 ComfyUI']}
 >

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

@@ -20,7 +20,7 @@ const productId = jsonLdId(url, 'product')
 ---
 
 <BaseLayout
-  title="定价 — Comfy Cloud"
+  title="定价 - Comfy Cloud"
   mainEntityId={productId}
   breadcrumbs={[
     {

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

@@ -13,7 +13,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="联系我们 — Comfy"
+  title="联系我们 - Comfy"
   pageType="ContactPage"
   mainEntityId={organizationId(siteUrl)}
   breadcrumbs={[

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

@@ -11,7 +11,7 @@ import { loadStories } from '../../utils/loadStories'
 const stories = (await loadStories('zh-CN')).map(toCardProps)
 ---
 
-<BaseLayout title="客户故事 — Comfy">
+<BaseLayout title="客户故事 - Comfy">
   <HeroSection locale="zh-CN" client:load />
   <StorySection stories={stories} locale="zh-CN" />
   <FeedbackSection locale="zh-CN" client:load />

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

@@ -17,7 +17,7 @@ export async function getStaticPaths() {
 const { entry, next } = Astro.props
 ---
 
-<BaseLayout title={`${entry.data.title} — Comfy`}>
+<BaseLayout title={`${entry.data.title} - Comfy`}>
   <DetailHeroSection
     label={entry.data.category}
     title={entry.data.title}

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

@@ -58,7 +58,7 @@ const learningResource: JsonLdNode = {
 ---
 
 <BaseLayout
-  title={`${title} — Comfy`}
+  title={`${title} - Comfy`}
   description={description}
   ogImage={demo.ogImage}
   mainEntityId={learningId}

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

@@ -3,7 +3,7 @@ import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { t } from '../../../i18n/translations'
 ---
 
-<BaseLayout title="演示 — Comfy" description="ComfyUI 的互动演示和教程。">
+<BaseLayout title="演示 - Comfy" description="ComfyUI 的互动演示和教程。">
   <section class="flex min-h-[60vh] items-center justify-center px-6">
     <div class="text-center">
       <h1 class="text-primary-comfy-canvas text-4xl font-light">

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

@@ -23,7 +23,7 @@ const { siteUrl, locale } = pageContext(
 ---
 
 <BaseLayout
-  title="下载 Comfy 桌面版 — 在您的硬件上运行 AI"
+  title="下载 Comfy 桌面版 - 在您的硬件上运行 AI"
   description={t('download.hero.subtitle', 'zh-CN')}
   mainEntityId={comfyUiSoftwareId(siteUrl)}
   breadcrumbs={[

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

@@ -5,7 +5,7 @@ import GallerySection from '../../components/gallery/GallerySection.vue'
 import ContactSection from '../../components/gallery/ContactSection.vue'
 ---
 
-<BaseLayout title="作品集 — Comfy">
+<BaseLayout title="作品集 - Comfy">
   <HeroSection locale="zh-CN" />
   <GallerySection locale="zh-CN" client:load />
   <ContactSection locale="zh-CN" />

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

@@ -24,7 +24,7 @@ const { siteUrl } = pageContext(
 ---
 
 <BaseLayout
-  title="Comfy — 视觉 AI 的最强可控性"
+  title="Comfy - 视觉 AI 的最强可控性"
   description={t('hero.subtitle', 'zh-CN')}
   mainEntityId={comfyUiSoftwareId(siteUrl)}
   extraJsonLd={[comfyUiApplicationNode(siteUrl), comfyUiSourceCodeNode(siteUrl)]}

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

@@ -11,7 +11,7 @@ import { learningEvents } from '../../data/events'
 const routes = getRoutes('zh-CN')
 ---
 
-<BaseLayout title="学习 — Comfy">
+<BaseLayout title="学习 - Comfy">
   <HeroSection locale="zh-CN" client:load />
   <FeaturedWorkflowSection locale="zh-CN" client:visible />
   <TutorialsSection locale="zh-CN" client:visible />

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

@@ -7,7 +7,7 @@ import ProductShowcaseSection from '../../components/home/ProductShowcaseSection
 ---
 
 <BaseLayout
-  title="模型 — Comfy"
+  title="模型 - Comfy"
   description="在 ComfyUI 中运行世界领先的 AI 模型。浏览所有支持的模型及社区工作流模板。"
 >
   <ModelsHeroSection

apps/website/src/pages/zh-CN/payment/failed.astro

@@ -3,6 +3,6 @@ import BaseLayout from '../../../layouts/BaseLayout.astro'
 import PaymentStatusSection from '../../../components/payment/PaymentStatusSection.vue'
 ---
 
-<BaseLayout title="支付失败 — Comfy" description="您的支付未能完成。" noindex>
+<BaseLayout title="支付失败 - Comfy" description="您的支付未能完成。" noindex>
   <PaymentStatusSection status="failed" locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/payment/success.astro

@@ -3,6 +3,6 @@ import BaseLayout from '../../../layouts/BaseLayout.astro'
 import PaymentStatusSection from '../../../components/payment/PaymentStatusSection.vue'
 ---
 
-<BaseLayout title="支付成功 — Comfy" description="您的支付已成功完成。" noindex>
+<BaseLayout title="支付成功 - Comfy" description="您的支付已成功完成。" noindex>
   <PaymentStatusSection status="success" locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/privacy-policy.astro

@@ -5,7 +5,7 @@ import HeroSection from '../../components/legal/HeroSection.vue'
 ---
 
 <BaseLayout
-  title="隐私政策 — Comfy"
+  title="隐私政策 - Comfy"
   description="Comfy 隐私政策。了解我们如何收集、使用和保护您的个人信息。"
   noindex
 >

apps/website/src/pages/zh-CN/privacy/desktop.astro

@@ -5,7 +5,7 @@ import HeroSection from '../../../components/legal/HeroSection.vue'
 ---
 
 <BaseLayout
-  title="Desktop 隐私政策 — Comfy"
+  title="Desktop 隐私政策 - Comfy"
   description="Comfy Desktop 隐私政策。命名的数据处理方、GDPR/UK GDPR 下的合法依据、保留期限和您的权利。"
 >
   <HeroSection title="Desktop 隐私政策" />

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

@@ -3,6 +3,6 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import ComingSoon from '../../components/common/ComingSoon.astro'
 ---
 
-<BaseLayout title="视频 — Comfy">
+<BaseLayout title="视频 - Comfy">
   <ComingSoon />
 </BaseLayout>

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

@@ -61,7 +61,12 @@ const { drop, locale } = defineProps<{
             class="size-full object-cover object-center transition-transform duration-500 ease-out group-hover/pill-trigger:scale-105"
           />
         </div>
-        <Badge v-if="drop.badge" variant="accent" class="absolute top-6 left-8">
+        <Badge
+          v-if="drop.badge"
+          size="xs"
+          variant="accent"
+          class="absolute top-6 left-8"
+        >
           {{ drop.badge[locale] }}
         </Badge>
       </CardContent>

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

@@ -5,7 +5,7 @@ import { t } from '../../i18n/translations'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8] as const
+const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9] as const
 
 const faqs = faqNumbers.map((n) => ({
   id: String(n),

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

@@ -15,21 +15,18 @@ const cards: FeatureCard[] = [
     label: t('mcp.setup.step1.label', locale),
     title: t('mcp.setup.step1.title', locale),
     description: t('mcp.setup.step1.description', locale),
-    action: {
-      type: 'code',
-      value: t('mcp.setup.step1.command', locale).replace(
-        '{url}',
-        externalLinks.docsMcp
-      )
-    }
+    copyable: t('mcp.setup.step1.command', locale).replace(
+      '{url}',
+      externalLinks.docsMcp
+    )
   },
   {
     id: 'step2',
     label: t('mcp.setup.step2.label', locale),
     title: t('mcp.setup.step2.title', locale),
     description: t('mcp.setup.step2.description', locale),
-    action: {
-      type: 'link',
+    copyable: externalLinks.cloudMcpServer,
+    link: {
       label: t('mcp.setup.step2.cta', locale),
       href: externalLinks.docsMcp,
       target: '_blank',
@@ -42,8 +39,7 @@ const cards: FeatureCard[] = [
     label: t('mcp.setup.step3.label', locale),
     title: t('mcp.setup.step3.title', locale),
     description: t('mcp.setup.step3.description', locale),
-    action: {
-      type: 'link',
+    link: {
       label: t('mcp.setup.step3.cta', locale),
       href: externalLinks.mcpSkills,
       target: '_blank',

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

@@ -7,7 +7,7 @@ import { t } from '../../i18n/translations'
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 type ToolMedia =
-  | { type: 'image'; src: string }
+  | { type: 'image'; src: string; fit?: 'cover' | 'contain' }
   | {
       type: 'video'
       src: string
@@ -16,12 +16,17 @@ type ToolMedia =
       hideControls?: boolean
     }
 
-const tools: { n: 1 | 2 | 3; media: ToolMedia; altKey?: TranslationKey }[] = [
+const tools: {
+  n: 1 | 2 | 3 | 4 | 5 | 6
+  media: ToolMedia
+  altKey?: TranslationKey
+}[] = [
   {
     n: 1,
     media: {
       type: 'image',
-      src: 'https://media.comfy.org/website/mcp/generate-everything.gif'
+      src: 'https://media.comfy.org/website/mcp/generate-everything.gif',
+      fit: 'cover'
     },
     altKey: 'mcp.tools.1.alt'
   },
@@ -29,7 +34,8 @@ const tools: { n: 1 | 2 | 3; media: ToolMedia; altKey?: TranslationKey }[] = [
     n: 2,
     media: {
       type: 'image',
-      src: 'https://media.comfy.org/website/mcp/search-ecosystem.png'
+      src: 'https://media.comfy.org/website/mcp/search-ecosystem.png',
+      fit: 'cover'
     },
     altKey: 'mcp.tools.2.alt'
   },
@@ -43,6 +49,35 @@ const tools: { n: 1 | 2 | 3; media: ToolMedia; altKey?: TranslationKey }[] = [
       hideControls: true
     },
     altKey: 'mcp.tools.3.alt'
+  },
+  {
+    n: 4,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/direct-any-model.png',
+      fit: 'cover'
+    },
+    altKey: 'mcp.tools.4.alt'
+  },
+  {
+    n: 5,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/generate-in-batches.png',
+      fit: 'cover'
+    },
+    altKey: 'mcp.tools.5.alt'
+  },
+  {
+    n: 6,
+    media: {
+      type: 'video',
+      src: 'https://media.comfy.org/website/homepage/showcase/ui-overview.webm',
+      autoplay: true,
+      loop: true,
+      hideControls: true
+    },
+    altKey: 'mcp.tools.6.alt'
   }
 ]
 
@@ -62,5 +97,6 @@ const rows: FeatureRow[] = tools.map(({ n, media, altKey }) => {
     :locale="locale"
     :heading="t('mcp.tools.heading', locale)"
     :rows="rows"
+    media-fit="contain"
   />
 </template>

browser_tests/fixtures/ComfyPage.ts

@@ -28,6 +28,7 @@ import {
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
+  SidebarTab,
   WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -70,6 +71,7 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
+  private _appsTab: SidebarTab | null = null
   private _assetsTab: AssetsSidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
@@ -104,6 +106,11 @@ class ComfyMenu {
     return this._nodeLibraryTabV2
   }
 
+  get appsTab() {
+    this._appsTab ??= new SidebarTab(this.page, 'apps')
+    return this._appsTab
+  }
+
   get assetsTab() {
     this._assetsTab ??= new AssetsSidebarTab(this.page)
     return this._assetsTab

browser_tests/fixtures/components/SidebarTab.ts

@@ -4,7 +4,7 @@ import { expect } from '@playwright/test'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-class SidebarTab {
+export class SidebarTab {
   public readonly tabButton: Locator
   public readonly selectedTabButton: Locator
 

browser_tests/fixtures/components/WorkflowActionsDropdown.ts

@@ -0,0 +1,40 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * The graph/app view-mode toggle and its workflow actions dropdown.
+ * A separate instance mounts in each host - the subgraph breadcrumb (graph
+ * mode) and the app-mode center panel - and unmounts as the mode flips.
+ */
+export class WorkflowActionsDropdown {
+  /** The segmented graph/app toggle hosting the workflow actions trigger. */
+  public readonly viewModeToggle: Locator
+  /** The active segment; opens the workflow actions menu. */
+  public readonly trigger: Locator
+  /** The inactive segment that switches into app mode. */
+  public readonly enterAppModeSegment: Locator
+  /** The inactive segment that switches back to the node graph. */
+  public readonly enterGraphSegment: Locator
+  /** The workflow actions dropdown menu. */
+  public readonly menu: Locator
+
+  constructor(page: Page) {
+    this.viewModeToggle = page.getByTestId(
+      TestIds.workflowActions.viewModeToggle
+    )
+    this.trigger = this.triggerIn(this.viewModeToggle)
+    this.enterAppModeSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter app mode'
+    })
+    this.enterGraphSegment = this.viewModeToggle.getByRole('button', {
+      name: 'Enter node graph'
+    })
+    this.menu = page.getByRole('menu', { name: 'Workflow actions' })
+  }
+
+  /** The trigger as rendered inside a specific mode's host. */
+  triggerIn(host: Locator): Locator {
+    return host.getByRole('button', { name: 'Workflow actions' })
+  }
+}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -4,6 +4,7 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 import { OutputHistoryComponent } from '@e2e/fixtures/components/OutputHistory'
+import { WorkflowActionsDropdown } from '@e2e/fixtures/components/WorkflowActionsDropdown'
 import { AppModeWidgetHelper } from '@e2e/fixtures/helpers/AppModeWidgetHelper'
 import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
@@ -19,6 +20,7 @@ export class AppModeHelper {
   readonly outputHistory: OutputHistoryComponent
   readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
+  readonly workflowActions: WorkflowActionsDropdown
 
   /** The "Connect an output" popover shown when saving without outputs. */
   public readonly connectOutputPopover: Locator
@@ -77,6 +79,7 @@ export class AppModeHelper {
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
     this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
+    this.workflowActions = new WorkflowActionsDropdown(comfyPage.page)
 
     this.connectOutputPopover = this.page.getByTestId(
       TestIds.builder.connectOutputPopover
@@ -185,10 +188,7 @@ export class AppModeHelper {
       .waitFor({ state: 'hidden', timeout: 5000 })
       .catch(() => {})
 
-    await this.page
-      .getByRole('button', { name: 'Workflow actions' })
-      .first()
-      .click()
+    await this.workflowActions.trigger.click()
     await this.page
       .getByRole('menuitem', { name: /Build app|Edit app/ })
       .click()

browser_tests/fixtures/selectors.ts

@@ -239,6 +239,9 @@ export const TestIds = {
     renameInput: 'subgraph-breadcrumb-rename-input',
     menu: (key: string) => `subgraph-breadcrumb-menu-${key}`
   },
+  workflowActions: {
+    viewModeToggle: 'view-mode-toggle'
+  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -276,6 +279,7 @@ export const TestIds = {
     overlay: 'loading-overlay'
   },
   load3d: {
+    categoryMenu: 'load3d-category-menu',
     recordingDuration: 'load3d-recording-duration'
   },
   load3dViewer: {

browser_tests/tests/appMode.spec.ts

@@ -1,9 +1,14 @@
+import { mergeTests } from '@playwright/test'
+
 import {
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import { subgraphBreadcrumbFixture } from '@e2e/fixtures/helpers/SubgraphBreadcrumbHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+const test = mergeTests(comfyPageFixture, subgraphBreadcrumbFixture)
+
 test.describe('App mode usage', () => {
   test('Drag and Drop @vue-nodes', async ({ comfyPage, comfyFiles }) => {
     const { centerPanel } = comfyPage.appMode
@@ -137,6 +142,117 @@ test.describe('App mode usage', () => {
     await expect.poll(() => fileComboWidget.getValue()).toBe(targetImage)
   })
 
+  test('Shows a single side toolbar per mode, filtered to assets + apps in app mode', async ({
+    comfyPage
+  }) => {
+    const { sideToolbar, nodeLibraryTab, assetsTab, appsTab } = comfyPage.menu
+
+    await test.step('Graph mode shows the full toolbar', async () => {
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(nodeLibraryTab.tabButton).toBeVisible()
+    })
+
+    await test.step('App mode shows only assets + apps', async () => {
+      await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+      await expect(comfyPage.appMode.centerPanel).toBeVisible()
+
+      await expect(sideToolbar).toHaveCount(1)
+      await expect(assetsTab.tabButton).toBeVisible()
+      await expect(appsTab.tabButton).toBeVisible()
+      await expect(nodeLibraryTab.tabButton).toBeHidden()
+    })
+  })
+
+  test('Workflow actions menu keeps the same position across graph/app mode', async ({
+    comfyPage,
+    subgraphBreadcrumb
+  }) => {
+    const { workflowActions, centerPanel } = comfyPage.appMode
+
+    // Toggling graph<->app mode happens from this control, so it must not move
+    // out from under the cursor as the mode flips.
+    const graphActions = workflowActions.triggerIn(
+      subgraphBreadcrumb.panel.root
+    )
+    await expect(graphActions).toBeVisible()
+    const graphBox = await graphActions.boundingBox()
+
+    expect(graphBox).not.toBeNull()
+
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(centerPanel).toBeVisible()
+
+    const appActions = workflowActions.triggerIn(centerPanel)
+    await expect(appActions).toBeVisible()
+
+    // The toggle segments reorder (morph) as the mode flips, so poll until the
+    // active control settles at the same x it occupied in graph mode.
+    await expect
+      .poll(async () => {
+        const box = await appActions.boundingBox()
+        return box ? Math.abs(box.x - graphBox!.x) : Infinity
+      })
+      .toBeLessThanOrEqual(1)
+  })
+
+  test('Toggle segment flips mode without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+
+    await workflowActions.enterAppModeSegment.click()
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    // The inactive segment switches mode; it must not also open the actions menu.
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.viewModeToggle).toBeVisible()
+  })
+
+  test('Toggle segment flips mode via keyboard without opening the menu', async ({
+    comfyPage
+  }) => {
+    const { workflowActions } = comfyPage.appMode
+    await workflowActions.enterAppModeSegment.focus()
+    await workflowActions.enterAppModeSegment.press('Enter')
+
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(workflowActions.menu).toBeHidden()
+    await expect(workflowActions.trigger).toBeFocused()
+  })
+
+  test('Mode toggle re-appears after exiting the builder to graph mode', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enableLinearMode()
+    await expect(toggle).toBeVisible()
+
+    await comfyPage.appMode.enterBuilder()
+    await expect(toggle).toBeHidden()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+
+    await comfyPage.appMode.footer.exitButton.click()
+    // Exiting the builder lands in graph mode: the app-mode-only center panel
+    // stays hidden while the graph-mode toggle host re-mounts and the toggle
+    // re-appears.
+    await expect(toggle).toBeVisible()
+    await expect(comfyPage.appMode.centerPanel).toBeHidden()
+  })
+
+  test('Mode toggle survives a sidebar tab remounting the app panel', async ({
+    comfyPage
+  }) => {
+    const toggle = comfyPage.appMode.workflowActions.viewModeToggle
+    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
+    await expect(comfyPage.appMode.centerPanel).toBeVisible()
+    await expect(toggle).toBeVisible()
+
+    // Opening a sidebar tab remounts the app panel; the toggle re-renders with it.
+    await comfyPage.menu.assetsTab.tabButton.click()
+    await expect(toggle).toBeVisible()
+  })
+
   test.describe('Mobile', { tag: ['@mobile'] }, () => {
     test('panel navigation', async ({ comfyPage }) => {
       const { mobile } = comfyPage.appMode

browser_tests/tests/load3d/Load3DHelper.ts

@@ -11,39 +11,47 @@ export class Load3DHelper {
   }
 
   get menuButton(): Locator {
-    return this.node.getByRole('button', { name: /show menu/i })
+    return this.node.getByTestId(TestIds.load3d.categoryMenu)
+  }
+
+  private get menuPanel(): Locator {
+    return this.node.page().getByRole('dialog')
   }
 
   get recordingButton(): Locator {
-    return this.node.getByRole('button', { name: /start recording/i })
+    return this.node.getByRole('button', { name: 'Record', exact: true })
   }
 
   get stopRecordingButton(): Locator {
     return this.node.getByRole('button', { name: /stop recording/i })
   }
 
-  get exportRecordingButton(): Locator {
-    return this.node.getByRole('button', { name: /export recording/i })
-  }
-
-  get clearRecordingButton(): Locator {
-    return this.node.getByRole('button', { name: /clear recording/i })
-  }
-
-  get recordingDuration(): Locator {
+  get recordingMenuButton(): Locator {
     return this.node.getByTestId(TestIds.load3d.recordingDuration)
   }
 
+  get downloadRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Download Recording' })
+  }
+
+  get startNewRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Start New Recording' })
+  }
+
+  get deleteRecordingMenuItem(): Locator {
+    return this.menuPanel.getByRole('button', { name: 'Delete Recording' })
+  }
+
   get gridToggleButton(): Locator {
     return this.node.getByRole('button', { name: /show grid/i })
   }
 
   get uploadBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: /upload background image/i })
+    return this.node.getByRole('button', { name: 'BG Image' })
   }
 
   get removeBackgroundImageButton(): Locator {
-    return this.node.getByRole('button', { name: /remove background image/i })
+    return this.node.getByRole('button', { name: 'Remove BG' })
   }
 
   get panoramaModeButton(): Locator {
@@ -54,6 +62,10 @@ export class Load3DHelper {
     return this.node.locator('input[type="color"]')
   }
 
+  get exportButton(): Locator {
+    return this.node.getByRole('button', { name: 'Export', exact: true })
+  }
+
   get openViewerButton(): Locator {
     return this.node.getByRole('button', { name: /open in 3d viewer/i })
   }
@@ -63,11 +75,15 @@ export class Load3DHelper {
   }
 
   getMenuCategory(name: string): Locator {
-    return this.node.getByText(name, { exact: true })
+    return this.menuPanel.getByRole('button', { name, exact: true })
   }
 
   get gizmoToggleButton(): Locator {
-    return this.node.getByRole('button', { name: 'Gizmo' })
+    // The category chip is also named "Gizmo" once that category is active;
+    // only the toggle carries aria-pressed.
+    return this.node
+      .getByRole('button', { name: 'Gizmo' })
+      .and(this.node.locator('[aria-pressed]'))
   }
 
   get gizmoTranslateButton(): Locator {
@@ -83,13 +99,17 @@ export class Load3DHelper {
   }
 
   get gizmoResetButton(): Locator {
-    return this.node.getByRole('button', { name: 'Reset Transform' })
+    return this.node.getByRole('button', { name: 'Reset', exact: true })
   }
 
   async openMenu(): Promise<void> {
     await this.menuButton.click()
   }
 
+  async openRecordingMenu(): Promise<void> {
+    await this.recordingMenuButton.click()
+  }
+
   async openGizmoCategory(): Promise<void> {
     await this.openMenu()
     await this.getMenuCategory('Gizmo').click()

browser_tests/tests/load3d/load3d.spec.ts

@@ -47,10 +47,12 @@ test.describe('Load3D', () => {
       await load3d.openMenu()
 
       await expect(load3d.getMenuCategory('Scene')).toBeVisible()
-      await expect(load3d.getMenuCategory('Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('3D Model')).toBeVisible()
       await expect(load3d.getMenuCategory('Camera')).toBeVisible()
       await expect(load3d.getMenuCategory('Light')).toBeVisible()
-      await expect(load3d.getMenuCategory('Export')).toBeVisible()
+      await expect(load3d.getMenuCategory('HDRI')).toBeVisible()
+      await expect(load3d.getMenuCategory('Gizmo')).toBeVisible()
+      await expect(load3d.exportButton).toBeVisible()
 
       await expect(load3d.node).toHaveScreenshot(
         'load3d-controls-menu-open.png',
@@ -253,7 +255,7 @@ test.describe('Load3D', () => {
     }
   )
 
-  test('Recording controls show stop/export/clear buttons after a recording', async ({
+  test('Recording controls collapse into a duration chip with a menu after a recording', async ({
     comfyPage,
     load3d
   }) => {
@@ -265,20 +267,25 @@ test.describe('Load3D', () => {
       await expect(load3d.stopRecordingButton).toBeVisible()
     })
 
-    await test.step('Stop recording surfaces export/clear controls and a 1s duration', async () => {
+    await test.step('Stop recording surfaces the duration chip with a 1s duration', async () => {
       // Record for 1s wall-clock so the duration display settles on 00:01.
       await comfyPage.delay(1000)
       await load3d.stopRecordingButton.click()
-      await expect(load3d.recordingButton).toBeVisible()
-      await expect(load3d.exportRecordingButton).toBeVisible()
-      await expect(load3d.clearRecordingButton).toBeVisible()
-      await expect(load3d.recordingDuration).toHaveText('00:01')
+      await expect(load3d.recordingMenuButton).toBeVisible()
+      await expect(load3d.recordingMenuButton).toHaveText('00:01')
     })
 
-    await test.step('Clear recording removes export and clear controls', async () => {
-      await load3d.clearRecordingButton.click()
-      await expect(load3d.exportRecordingButton).toHaveCount(0)
-      await expect(load3d.clearRecordingButton).toHaveCount(0)
+    await test.step('Chip menu offers download, re-record and delete actions', async () => {
+      await load3d.openRecordingMenu()
+      await expect(load3d.downloadRecordingMenuItem).toBeVisible()
+      await expect(load3d.startNewRecordingMenuItem).toBeVisible()
+      await expect(load3d.deleteRecordingMenuItem).toBeVisible()
+    })
+
+    await test.step('Deleting the recording restores the record button', async () => {
+      await load3d.deleteRecordingMenuItem.click()
+      await expect(load3d.recordingMenuButton).toHaveCount(0)
+      await expect(load3d.recordingButton).toBeVisible()
     })
   })
 })

browser_tests/tests/maskEditor.spec.ts

@@ -46,7 +46,10 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     { tag: ['@smoke', '@screenshot'] },
     async ({ comfyPage, maskEditor }) => {
       const { nodeId } = await maskEditor.loadImageOnNode()
-      await comfyPage.canvasOps.pan({ x: 0, y: 40 }, { x: 300, y: 300 })
+      // Center the node so its header clears the view-mode toggle floating
+      // at the top-left of the canvas.
+      const nodeRef = await comfyPage.nodeOps.getNodeRefById(nodeId)
+      await nodeRef.centerOnNode()
 
       const nodeHeader = comfyPage.vueNodes
         .getNodeLocator(nodeId)

browser_tests/tests/minimap.spec.ts

@@ -476,6 +476,37 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
       })
       .toBe(true)
   })
+
+  test(
+    'Closing minimap after subgraph navigation keeps Vue render in sync',
+    { tag: '@vue-nodes' },
+    async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+      const subgraphNodeId = await comfyPage.subgraph.findSubgraphNodeId()
+
+      // Round-trip layers Vue's onNodeAdded wrapper on top of the minimap's.
+      await comfyPage.vueNodes.enterSubgraph(subgraphNodeId)
+      await comfyPage.subgraph.exitViaBreadcrumb()
+
+      // Minimap unmount must not clobber the Vue wrapper layered above it.
+      await comfyPage.page
+        .getByTestId(TestIds.canvas.closeMinimapButton)
+        .click()
+
+      const subgraphFixture =
+        await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+      await comfyPage.contextMenu.openForVueNode(subgraphFixture.header)
+      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
+      await comfyPage.contextMenu.waitForHidden()
+
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(2)
+      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(2)
+      await expect(
+        comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+      ).toHaveCount(0)
+    }
+  )
 })
 
 test.describe('Minimap mobile', { tag: ['@mobile', '@canvas'] }, () => {