fix(website): remove opacity-80 washing out footer logo colors (#13648)

## Problem
The animated logo in the site footer (a webp frame sequence drawn to a
`<canvas>`) renders with dull, darkened colors. The brand neon yellow
`rgb(242, 255, 90)` shows up as a muddy olive `≈ rgb(198, 209, 80)`, and
the gray/pastel faces are darkened and purple-tinted.

## Cause
The footer `<canvas>` carried an `opacity-80` Tailwind class. At 80%
opacity the browser composites the animation 20% over the dark purple
footer background (`rgb(33, 25, 39)`), shifting every color. The source
webp frames themselves are correct — the shift only happens at display
time.

## Fix
Remove `opacity-80` from the canvas in `SiteFooter.vue` so it renders
the authored frame colors at full opacity.

## Verify
- Pre-check (no deploy): in DevTools, select the footer `<canvas>` and
untick `opacity: 0.8` — colors pop back immediately.
- After change: sample a yellow cube face in the footer animation with a
color picker — it should read `#F2FF5A` / `rgb(242, 255, 90)`, not
`rgb(198, 209, 80)`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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
 

.github/workflows/release-biweekly-comfyui.yaml

@@ -23,6 +23,10 @@ on:
         required: false
         default: 'Comfy-Org/ComfyUI'
         type: string
+      target_branch:
+        description: 'Optional: force a specific release branch, e.g. core/1.47 or core/2.0. Overrides the pin-derived target — use to skip a dead minor or do an out-of-cadence / major release.'
+        required: false
+        type: string
 
 jobs:
   check-release-week:
@@ -49,12 +53,15 @@ jobs:
           fi
 
       - name: Summary
+        env:
+          TARGET_BRANCH_OVERRIDE: ${{ inputs.target_branch }}
         run: |
           echo "## Release Check" >> $GITHUB_STEP_SUMMARY
           echo "" >> $GITHUB_STEP_SUMMARY
           echo "- Is release week: ${{ steps.check.outputs.is_release_week }}" >> $GITHUB_STEP_SUMMARY
           echo "- Manual trigger: ${{ github.event_name == 'workflow_dispatch' }}" >> $GITHUB_STEP_SUMMARY
           echo "- Release type: ${{ inputs.release_type || 'minor (scheduled)' }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Target branch override: ${TARGET_BRANCH_OVERRIDE:-(none — pin-derived)}" >> $GITHUB_STEP_SUMMARY
 
   resolve-version:
     needs: check-release-week
@@ -103,6 +110,7 @@ jobs:
         working-directory: frontend
         env:
           RELEASE_TYPE: ${{ inputs.release_type || 'minor' }}
+          TARGET_BRANCH: ${{ inputs.target_branch }}
         run: |
           set -euo pipefail
 

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/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/SiteFooter.vue

@@ -175,10 +175,7 @@ const contactColumn: { title: string; links: FooterLink[] } = {
       </div>
 
       <!-- Logo -->
-      <canvas
-        ref="canvasRef"
-        class="pointer-events-none size-52 opacity-80 lg:mt-28"
-      />
+      <canvas ref="canvasRef" class="pointer-events-none size-52 lg:mt-28" />
     </div>
   </footer>
 </template>

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/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.',
@@ -3483,8 +3483,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 +3896,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 +4361,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 +4387,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>

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
 
@@ -322,6 +322,9 @@ export class AssetsSidebarTab extends SidebarTab {
   // --- Folder view ---
   public readonly backToAssetsButton: Locator
 
+  // --- Panel chrome ---
+  public readonly panelHeader: Locator
+
   // --- Loading ---
   public readonly skeletonLoaders: Locator
 
@@ -358,6 +361,7 @@ export class AssetsSidebarTab extends SidebarTab {
     this.deleteSelectedButton = page.getByTestId('assets-delete-selected')
     this.downloadSelectedButton = page.getByTestId('assets-download-selected')
     this.backToAssetsButton = page.getByText('Back to all assets')
+    this.panelHeader = page.locator('.comfy-vue-side-bar-header')
     this.skeletonLoaders = page.locator(
       '.sidebar-content-container .animate-pulse'
     )
@@ -418,28 +422,26 @@ export class AssetsSidebarTab extends SidebarTab {
   async openSettingsMenu() {
     await this.dismissToasts()
     await this.settingsButton.click()
-    // Wait for the popover content to render. Use the default timeout so slower
-    // (e.g. cloud) app inits don't burst-fail a tight explicit timeout.
-    await expect(
-      this.listViewOption.or(this.gridViewOption).first()
-    ).toBeVisible()
+    // Wait for popover content to render
+    await this.listViewOption
+      .or(this.gridViewOption)
+      .first()
+      .waitFor({ state: 'visible', timeout: 3000 })
   }
 
   async openFilterMenu() {
     await this.dismissToasts()
     await this.filterButton.click()
-    // Wait for the filter popover to open. Use the default timeout so slower
-    // (e.g. cloud) app inits don't burst-fail a tight explicit timeout.
-    await expect(this.filterCheckbox('Image')).toBeVisible()
+    await this.filterCheckbox('Image').waitFor({
+      state: 'visible',
+      timeout: 3000
+    })
   }
 
   async toggleMediaTypeFilter(
     filter: MediaFilterKind | MediaFilterLabel
   ): Promise<void> {
     const checkbox = this.filterCheckbox(filter)
-    // Ensure the popover has finished opening before reading its state; a stale
-    // read here races the reka-ui slide/fade animation.
-    await expect(checkbox).toBeVisible()
     const before = await checkbox.getAttribute('aria-checked')
     await checkbox.click()
     const expected = before === 'true' ? 'false' : 'true'

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'] }, () => {

browser_tests/tests/sidebar/assetsSidebarTab.spec.ts

@@ -276,3 +276,255 @@ test.describe('FE-130 assets sidebar route mocks', () => {
     )
   })
 })
+
+test.describe('FE-910 marquee selection and select all', () => {
+  test.beforeEach(async ({ jobsRoutes, page, comfyPage }) => {
+    await jobsRoutes.mockJobsQueue([])
+    await jobsRoutes.mockJobsHistory(generatedJobs)
+    await mockInputFiles(page, ['imported.png'])
+    await mockViewFiles(page, viewFiles)
+    await comfyPage.setup()
+    await comfyPage.menu.assetsTab.open()
+  })
+
+  test('Ctrl/Cmd+A selects every asset while the panel is hovered', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    await tab.getAssetCardByName('alpha').hover()
+    await comfyPage.page.keyboard.press('ControlOrMeta+a')
+
+    await expect(tab.selectedCards).toHaveCount(2)
+  })
+
+  test('a marquee that begins in the panel header selects the cards', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+    await expect(tab.selectedCards).toHaveCount(0)
+
+    const header = await tab.panelHeader.boundingBox()
+    const beta = await tab.getAssetCardByName('beta').boundingBox()
+    if (!header || !beta) {
+      throw new Error('panel header or asset card has no layout box')
+    }
+
+    // Begin the rubber-band in the header (above the grid), then drag down
+    // across both cards.
+    await page.mouse.move(header.x + 24, header.y + 20)
+    await page.mouse.down()
+    await page.mouse.move(beta.x + 8, beta.y + beta.height - 8, { steps: 14 })
+    await page.mouse.up()
+
+    await expect(tab.selectedCards).toHaveCount(2)
+    await expect(tab.selectionFooter).toBeVisible()
+  })
+
+  test('Ctrl/Cmd+A leaves assets unselected while the canvas is hovered', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    const viewport = page.viewportSize()
+    if (!viewport) throw new Error('viewport size is unavailable')
+
+    // Hover the canvas (not the panel); Ctrl/Cmd+A must yield to the canvas.
+    await page.mouse.move(viewport.width - 100, viewport.height / 2)
+    await page.keyboard.press('ControlOrMeta+a')
+
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('a modifier-held marquee adds to the existing selection', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    await tab.getAssetCardByName('alpha').click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    const beta = await tab.getAssetCardByName('beta').boundingBox()
+    if (!beta) throw new Error('beta card has no layout box')
+
+    // Hold a modifier so the marquee is additive, then rubber-band over beta.
+    await page.keyboard.down('Control')
+    await page.mouse.move(beta.x + 12, beta.y + 12)
+    await page.mouse.down()
+    await page.mouse.move(beta.x + beta.width - 12, beta.y + beta.height - 12, {
+      steps: 12
+    })
+    await page.mouse.up()
+    await page.keyboard.up('Control')
+
+    await expect(tab.selectedCards).toHaveCount(2)
+  })
+
+  test('a Ctrl/Cmd+Shift marquee removes the covered cards from the selection', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    await tab.getAssetCardByName('alpha').hover()
+    await page.keyboard.press('ControlOrMeta+a')
+    await expect(tab.selectedCards).toHaveCount(2)
+
+    const beta = await tab.getAssetCardByName('beta').boundingBox()
+    if (!beta) throw new Error('beta card has no layout box')
+
+    // Ctrl+Shift makes the marquee subtractive: rubber-band over beta only.
+    await page.keyboard.down('Control')
+    await page.keyboard.down('Shift')
+    await page.mouse.move(beta.x + 12, beta.y + 12)
+    await page.mouse.down()
+    await page.mouse.move(beta.x + beta.width - 12, beta.y + beta.height - 12, {
+      steps: 12
+    })
+    await page.mouse.up()
+    await page.keyboard.up('Shift')
+    await page.keyboard.up('Control')
+
+    await expect(tab.selectedCards).toHaveCount(1)
+    await expect(tab.getAssetCardByName('alpha')).toHaveAttribute(
+      'data-selected',
+      'true'
+    )
+  })
+
+  test('Ctrl/Cmd-dragging from an asset card starts a marquee selection', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+    await expect(tab.selectedCards).toHaveCount(0)
+
+    const alpha = await tab.getAssetCardByName('alpha').boundingBox()
+    const beta = await tab.getAssetCardByName('beta').boundingBox()
+    if (!alpha || !beta) throw new Error('asset cards have no layout box')
+
+    // Ctrl bypasses card drag, so a press that begins on a card rubber-bands.
+    await page.keyboard.down('Control')
+    await page.mouse.move(alpha.x + alpha.width / 2, alpha.y + alpha.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(beta.x + beta.width - 6, beta.y + beta.height - 6, {
+      steps: 12
+    })
+    await page.mouse.up()
+    await page.keyboard.up('Control')
+
+    await expect(tab.selectedCards).toHaveCount(2)
+    await expect(tab.selectionFooter).toBeVisible()
+  })
+
+  test('Ctrl/Cmd-dragging within a single card selects only that card', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    const alpha = tab.getAssetCardByName('alpha')
+    const box = await alpha.boundingBox()
+    if (!box) throw new Error('alpha card has no layout box')
+
+    const start = { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+    await page.keyboard.down('Control')
+    await page.mouse.move(start.x, start.y)
+    await page.mouse.down()
+    await page.mouse.move(start.x + 12, start.y + 12, { steps: 4 })
+    await page.mouse.up()
+    await page.keyboard.up('Control')
+
+    await expect(tab.selectedCards).toHaveCount(1)
+    await expect(alpha).toHaveAttribute('data-selected', 'true')
+  })
+
+  test('Ctrl/Cmd+A in the focused search input does not select assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const query = 'alpha'
+
+    await tab.searchInput.fill(query)
+    await expect(tab.assetCards).toHaveCount(1)
+
+    await tab.searchInput.focus()
+    await comfyPage.page.keyboard.press('ControlOrMeta+a')
+
+    await expect(tab.selectedCards).toHaveCount(0)
+    await expect
+      .poll(() =>
+        tab.searchInput.evaluate((el: HTMLInputElement) => {
+          return { start: el.selectionStart, end: el.selectionEnd }
+        })
+      )
+      .toEqual({ start: 0, end: query.length })
+  })
+
+  test('a drag starting in the search input does not marquee-select assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    const { page } = comfyPage
+
+    await expect(tab.assetCards).toHaveCount(2)
+
+    const search = await tab.searchInput.boundingBox()
+    const beta = await tab.getAssetCardByName('beta').boundingBox()
+    if (!search || !beta)
+      throw new Error('search box or card has no layout box')
+
+    await page.mouse.move(
+      search.x + search.width / 2,
+      search.y + search.height / 2
+    )
+    await page.mouse.down()
+    await page.mouse.move(beta.x + beta.width / 2, beta.y + beta.height / 2, {
+      steps: 12
+    })
+    await page.mouse.up()
+
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('Ctrl/Cmd+A does not select assets while an aria-modal dialog is open', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await expect(tab.assetCards).toHaveCount(2)
+
+    await comfyPage.page.evaluate(() => {
+      const dialog = document.createElement('div')
+      dialog.id = 'test-modal'
+      dialog.setAttribute('role', 'dialog')
+      dialog.setAttribute('aria-modal', 'true')
+      document.body.appendChild(dialog)
+    })
+
+    await tab.getAssetCardByName('alpha').hover()
+    await comfyPage.page.keyboard.press('ControlOrMeta+a')
+
+    await expect(tab.selectedCards).toHaveCount(0)
+
+    await comfyPage.page.evaluate(() => {
+      document.getElementById('test-modal')?.remove()
+    })
+  })
+})