refactor(website): wire ModelCreationsSection through the gallery collection

Move the five Grok showcase items previously hardcoded inside
ModelCreationsSection.vue into the canonical gallery Content Collection
as visible: false entries (subway-swan, milos-little-wonder,
amber-passage, neon-revenant, midnight-umami). Curation moves to the
.astro page: featuredCreationSlugs is declared inline and resolved
through getGalleryByIds — the helper added in slice 1, which preserves
input slug order.

ModelCreationsSection.vue is now a generic "render these items" view
that accepts items: readonly GalleryItem[] as a prop. Section copy
(modelName, ctaHref) stays inline — only the gallery-shaped data
moves out.

zh-CN/models.astro queries 'en' to preserve current behavior, since
the original hardcoded titles were English-only plain strings.
Translating these four/five items is explicitly out of scope per the
issue.

Note: the issue body says "four" Grok items, but the inline array has
five — neon-revenant by Eric Solorio. Slice 1's browser verification
confirmed five cards rendering today. The migration includes all five
to preserve current rendering; the AC's "same creations in same order
with same media as before" requires it.

No new tests are added (per the issue's AC #8): this slice reuses the
getGalleryByIds tracer test and gallery schema coverage from slice 1.

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

@@ -1,20 +1,10 @@
 <script setup lang="ts">
-import type {
-  Locale,
-  LocalizedText,
-  TranslationKey
-} from '../../i18n/translations'
+import type { EventItem } from '../../content.config'
+import type { Locale, TranslationKey } from '../../i18n/translations'
 
 import { t } from '../../i18n/translations'
 import BrandButton from './BrandButton.vue'
 
-export type EventItem = {
-  label: LocalizedText
-  title: LocalizedText
-  cta: LocalizedText
-  href: string
-}
-
 const {
   locale = 'en',
   headingKey,
@@ -40,12 +30,12 @@ const {
       <div class="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
         <div class="flex flex-col gap-8">
           <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+            class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
           >
             {{ t(headingKey, locale) }}
           </h2>
           <p
-            class="text-primary-comfy-canvas max-w-sm text-sm/relaxed lg:text-base"
+            class="max-w-sm text-sm/relaxed text-primary-comfy-canvas lg:text-base"
           >
             {{ t(descriptionKey, locale) }}
           </p>
@@ -66,20 +56,20 @@ const {
             v-for="(event, i) in events"
             :key="i"
             :href="event.href"
-            class="group border-primary-comfy-canvas/15 flex items-center gap-4 border-b py-6 lg:gap-8"
+            class="group flex items-center gap-4 border-b border-primary-comfy-canvas/15 py-6 lg:gap-8"
           >
             <span
-              class="text-primary-comfy-canvas shrink-0 text-sm font-medium"
+              class="shrink-0 text-sm font-medium text-primary-comfy-canvas"
             >
-              {{ event.label[locale] }}
+              {{ event.label }}
             </span>
             <span class="text-primary-warm-gray flex-1 text-sm">
-              {{ event.title[locale] }}
+              {{ event.title }}
             </span>
             <span
               class="text-primary-comfy-yellow flex shrink-0 items-center gap-2 text-sm"
             >
-              {{ event.cta[locale] }}
+              {{ event.cta }}
               <svg
                 class="size-4 transition-transform group-hover:translate-x-0.5"
                 viewBox="0 0 24 24"

apps/website/src/components/gallery/GalleryCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { GalleryItem } from '../../data/gallery'
+import type { GalleryItem } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 import GalleryItemAttribution from './GalleryItemAttribution.vue'
 
@@ -53,7 +53,7 @@ defineEmits<{ click: [] }>()
         <div class="flex w-full items-end justify-between p-4">
           <div class="gap-2">
             <p class="text-sm font-bold text-white">{{ item.title }}</p>
-            <p class="text-primary-comfy-canvas text-xs">
+            <p class="text-xs text-primary-comfy-canvas">
               <GalleryItemAttribution :item :locale />
             </p>
           </div>
@@ -82,7 +82,7 @@ defineEmits<{ click: [] }>()
     <!-- Mobile metadata -->
     <div v-if="mobile" class="mt-2 gap-2">
       <p class="text-sm font-bold text-white">{{ item.title }}</p>
-      <p class="text-primary-comfy-canvas text-xs">
+      <p class="text-xs text-primary-comfy-canvas">
         <GalleryItemAttribution :item :locale />
       </p>
     </div>

apps/website/src/components/gallery/GalleryDetailModal.vue

@@ -12,7 +12,7 @@ import {
 
 import { lockScroll, unlockScroll } from '../../composables/scrollLock'
 import { prefersReducedMotion } from '../../composables/useReducedMotion'
-import type { GalleryItem } from '../../data/gallery'
+import type { GalleryItem } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
 import BrandButton from '../common/BrandButton.vue'
@@ -123,11 +123,11 @@ onUnmounted(() => {
       <!-- Close button -->
       <button
         :aria-label="t('gallery.detail.close', locale)"
-        class="border-primary-comfy-yellow bg-primary-comfy-ink hover:bg-primary-comfy-yellow group absolute right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 transition-colors lg:top-8 lg:right-26"
+        class="border-primary-comfy-yellow hover:bg-primary-comfy-yellow group absolute right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 bg-primary-comfy-ink transition-colors lg:top-8 lg:right-26"
         @click="emit('close')"
       >
         <span
-          class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors"
+          class="bg-primary-comfy-yellow size-5 transition-colors group-hover:bg-primary-comfy-ink"
           style="mask: url('/icons/close.svg') center / contain no-repeat"
         />
       </button>
@@ -136,7 +136,7 @@ onUnmounted(() => {
       <div class="relative hidden min-h-0 w-full flex-1 pt-12 lg:flex">
         <!-- Left: info card -->
         <div
-          class="bg-primary-comfy-yellow text-primary-comfy-ink rounded-5xl relative z-10 flex w-80 shrink-0 flex-col justify-between self-start p-8"
+          class="bg-primary-comfy-yellow rounded-5xl relative z-10 flex w-80 shrink-0 flex-col justify-between self-start p-8 text-primary-comfy-ink"
         >
           <div
             :class="transitioning ? 'opacity-0' : 'opacity-100'"
@@ -170,7 +170,7 @@ onUnmounted(() => {
 
         <!-- Right: large image -->
         <div
-          class="border-primary-comfy-yellow bg-primary-comfy-ink rounded-5xl flex max-h-full min-h-0 flex-1 items-center justify-center overflow-hidden border-2 p-4"
+          class="border-primary-comfy-yellow rounded-5xl flex max-h-full min-h-0 flex-1 items-center justify-center overflow-hidden border-2 bg-primary-comfy-ink p-4"
         >
           <component
             :is="activeItem.video ? 'video' : 'img'"
@@ -197,7 +197,7 @@ onUnmounted(() => {
       >
         <!-- Image -->
         <div
-          class="border-primary-comfy-yellow bg-primary-comfy-ink flex w-full flex-1 items-center overflow-hidden rounded-4xl border-2 p-3"
+          class="border-primary-comfy-yellow flex w-full flex-1 items-center overflow-hidden rounded-4xl border-2 bg-primary-comfy-ink p-3"
         >
           <component
             :is="activeItem.video ? 'video' : 'img'"
@@ -223,7 +223,7 @@ onUnmounted(() => {
 
         <!-- Info card -->
         <div
-          class="bg-primary-comfy-yellow text-primary-comfy-ink w-full rounded-4xl p-6"
+          class="bg-primary-comfy-yellow w-full rounded-4xl p-6 text-primary-comfy-ink"
         >
           <div
             :class="transitioning ? 'opacity-0' : 'opacity-100'"

apps/website/src/components/gallery/GalleryItemAttribution.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { GalleryItem } from '../../data/gallery'
+import type { GalleryItem } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
 

apps/website/src/components/gallery/GallerySection.vue

@@ -2,13 +2,15 @@
 import { cn } from '@comfyorg/tailwind-utils'
 import { ref } from 'vue'
 
-import { visibleGalleryItems as items } from '../../data/gallery'
-import type { GalleryItem } from '../../data/gallery'
+import type { GalleryItem } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 import GalleryCard from './GalleryCard.vue'
 import GalleryDetailModal from './GalleryDetailModal.vue'
 
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const { items, locale = 'en' } = defineProps<{
+  items: GalleryItem[]
+  locale?: Locale
+}>()
 
 const modalOpen = ref(false)
 const modalIndex = ref(0)

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 
-import type { LearningTutorial } from '../../data/learningTutorials'
+import type { ResolvedTutorial } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 
 import { lockScroll, unlockScroll } from '../../composables/scrollLock'
@@ -9,7 +9,7 @@ import { t } from '../../i18n/translations'
 import VideoPlayer from '../common/VideoPlayer.vue'
 
 const { tutorial, locale = 'en' } = defineProps<{
-  tutorial: LearningTutorial
+  tutorial: ResolvedTutorial
   locale?: Locale
 }>()
 
@@ -39,7 +39,7 @@ onUnmounted(() => {
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      :aria-label="tutorial.title[locale]"
+      :aria-label="tutorial.title"
       class="fixed inset-0 z-50 flex size-full max-h-none max-w-none flex-col items-center justify-center border-0 bg-transparent px-4 py-8 backdrop-blur-xl backdrop:bg-transparent lg:px-20 lg:py-8"
       @click="handleBackdropClick"
       @keydown="handleKeydown"
@@ -60,7 +60,7 @@ onUnmounted(() => {
         class="border-primary-comfy-yellow rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 bg-primary-comfy-ink p-3 lg:p-4"
       >
         <VideoPlayer
-          :key="tutorial.id"
+          :key="tutorial.slug"
           :locale
           :src="tutorial.videoSrc"
           :poster="tutorial.poster"
@@ -73,7 +73,7 @@ onUnmounted(() => {
         class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
       >
         {{ t('learning.tutorials.titlePrefix', locale) }}
-        {{ tutorial.title[locale] }}
+        {{ tutorial.title }}
       </h2>
     </dialog>
   </Teleport>

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

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import type { ResolvedTutorial } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 
-import {
-  getTutorialPosterSrc,
-  learningTutorials
-} from '../../data/learningTutorials'
 import { t } from '../../i18n/translations'
+import { getTutorialPosterSrc } from '../../utils/tutorial'
 import Badge from '../common/Badge.vue'
 import MaskRevealButton from '../common/MaskRevealButton.vue'
 import TutorialDetailDialog from './TutorialDetailDialog.vue'
 
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const { tutorials, locale = 'en' } = defineProps<{
+  tutorials: readonly ResolvedTutorial[]
+  locale?: Locale
+}>()
 
-const activeTutorialId = ref<string | null>(null)
+const activeTutorialSlug = ref<string | null>(null)
 const activeTutorial = () =>
-  learningTutorials.find((tutorial) => tutorial.id === activeTutorialId.value)
+  tutorials.find((tutorial) => tutorial.slug === activeTutorialSlug.value)
 </script>
 
 <template>
@@ -31,15 +32,15 @@ const activeTutorial = () =>
       class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
     >
       <li
-        v-for="tutorial in learningTutorials"
-        :key="tutorial.id"
+        v-for="tutorial in tutorials"
+        :key="tutorial.slug"
         class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
       >
         <button
           type="button"
           class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
-          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
-          @click="activeTutorialId = tutorial.id"
+          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title}`"
+          @click="activeTutorialSlug = tutorial.slug"
         >
           <video
             :src="getTutorialPosterSrc(tutorial)"
@@ -74,7 +75,7 @@ const activeTutorial = () =>
               class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
             >
               {{ t('learning.tutorials.titlePrefix', locale) }}<br />
-              {{ tutorial.title[locale] }}
+              {{ tutorial.title }}
             </h3>
             <MaskRevealButton
               v-if="tutorial.href"
@@ -103,7 +104,7 @@ const activeTutorial = () =>
 
           <ul class="flex flex-wrap gap-2">
             <li v-for="tag in tutorial.tags" :key="tag">
-              <Badge>{{ t(tag, locale) }}</Badge>
+              <Badge>{{ tag }}</Badge>
             </li>
           </ul>
         </div>
@@ -114,7 +115,7 @@ const activeTutorial = () =>
       v-if="activeTutorial()"
       :tutorial="activeTutorial()!"
       :locale="locale"
-      @close="activeTutorialId = null"
+      @close="activeTutorialSlug = null"
     />
   </section>
 </template>

apps/website/src/components/models/ModelCreationsSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import type { GalleryItem } from '../../data/gallery'
+import type { GalleryItem } from '../../content.config'
 import type { Locale } from '../../i18n/translations'
 
 import { t } from '../../i18n/translations'
@@ -9,64 +9,14 @@ import BrandButton from '../common/BrandButton.vue'
 import GalleryCard from '../gallery/GalleryCard.vue'
 import GalleryDetailModal from '../gallery/GalleryDetailModal.vue'
 
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+const { items, locale = 'en' } = defineProps<{
+  items: readonly GalleryItem[]
+  locale?: Locale
+}>()
 
 const modelName = 'Grok'
 const ctaHref = 'https://comfy.org/workflows/model/grok'
 
-const items: GalleryItem[] = [
-  {
-    id: 'subway-swan',
-    image: 'https://media.comfy.org/website/gallery/subway-swan_compressed.png',
-    title: 'Subway Swan',
-    userAlias: 'Purz Beats',
-    teamAlias: 'Comfy',
-    tool: 'Grok Imagine',
-    href: 'https://www.youtube.com/@PurzBeats'
-  },
-  {
-    id: 'milos-little-wonder',
-    video:
-      'https://media.comfy.org/website/gallery/milos-little-wonder_compressed.mp4',
-    title: 'Milos Little Wonder',
-    userAlias: 'Purz Beats',
-    teamAlias: 'Comfy',
-    tool: 'Grok Imagine',
-    href: 'https://www.youtube.com/@PurzBeats'
-  },
-  {
-    id: 'amber-passage',
-    image:
-      'https://media.comfy.org/website/gallery/amber-passage_compressed.jpg',
-    title: 'Amber Passage',
-    userAlias: 'Purz Beats',
-    teamAlias: 'Comfy',
-    tool: 'Grok Imagine',
-    href: 'https://www.youtube.com/@PurzBeats',
-    objectPosition: 'bottom'
-  },
-  {
-    id: 'neon-revenant',
-    video:
-      'https://media.comfy.org/website/gallery/neon-revenant_compressed.mp4',
-    title: 'Neon Revenant',
-    userAlias: 'Eric Solorio',
-    teamAlias: 'Comfy',
-    tool: 'Grok Imagine',
-    href: 'https://www.instagram.com/enigmatic_e'
-  },
-  {
-    id: 'midnight-umami',
-    image:
-      'https://media.comfy.org/website/gallery/midnight_umami_compressed.png',
-    title: 'Midnight Umami',
-    userAlias: 'Purz Beats',
-    teamAlias: 'Comfy',
-    tool: 'Grok Imagine',
-    href: 'https://www.youtube.com/@PurzBeats'
-  }
-]
-
 const modalOpen = ref(false)
 const modalIndex = ref(0)
 

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

@@ -0,0 +1,131 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('astro:content', () => ({
+  defineCollection: (config: unknown) => config
+}))
+vi.mock('astro/loaders', () => ({
+  glob: () => ({})
+}))
+
+import { eventsSchema, gallerySchema, tutorialsSchema } from './content.config'
+
+const validEntry = {
+  order: 1,
+  title: 'Until Our Eye Interlink harajuku',
+  userAlias: 'ShaneF Motion Design',
+  teamAlias: 'ThinkDiffusion',
+  tool: 'ComfyUI',
+  video: 'https://media.comfy.org/videos/compressed_512/eye.webm',
+  href: 'https://www.thinkdiffusion.com/studio'
+}
+
+describe('gallerySchema', () => {
+  it('accepts a valid entry', () => {
+    const result = gallerySchema.safeParse(validEntry)
+    expect(result.success).toBe(true)
+  })
+
+  it('rejects an entry missing a required field with a Zod error naming the field', () => {
+    const { title: _omit, ...withoutTitle } = validEntry
+    const result = gallerySchema.safeParse(withoutTitle)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      const paths = result.error.issues.map((issue) => issue.path.join('.'))
+      expect(paths).toContain('title')
+    }
+  })
+
+  it('defaults visible to true when omitted', () => {
+    const result = gallerySchema.safeParse(validEntry)
+    expect(result.success).toBe(true)
+    if (result.success) {
+      expect(result.data.visible).toBe(true)
+    }
+  })
+
+  it('preserves an explicit visible: false', () => {
+    const result = gallerySchema.safeParse({ ...validEntry, visible: false })
+    expect(result.success).toBe(true)
+    if (result.success) {
+      expect(result.data.visible).toBe(false)
+    }
+  })
+
+  it('rejects an invalid URL in image/video/href', () => {
+    const result = gallerySchema.safeParse({
+      ...validEntry,
+      href: 'not a url'
+    })
+    expect(result.success).toBe(false)
+  })
+})
+
+const validEvent = {
+  order: 1,
+  label: 'Live Stream:',
+  title: 'Zero to Node: Building Your First Workflow',
+  cta: 'Link',
+  href: 'https://example.com/event'
+}
+
+describe('eventsSchema', () => {
+  it('accepts a valid entry', () => {
+    const result = eventsSchema.safeParse(validEvent)
+    expect(result.success).toBe(true)
+  })
+
+  it('rejects an entry missing a required field with a Zod error naming the field', () => {
+    const { title: _omit, ...withoutTitle } = validEvent
+    const result = eventsSchema.safeParse(withoutTitle)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      const paths = result.error.issues.map((issue) => issue.path.join('.'))
+      expect(paths).toContain('title')
+    }
+  })
+
+  it('accepts "#" as a placeholder href', () => {
+    const result = eventsSchema.safeParse({ ...validEvent, href: '#' })
+    expect(result.success).toBe(true)
+  })
+
+  it('rejects a truly malformed href that is neither a URL nor "#"', () => {
+    const result = eventsSchema.safeParse({ ...validEvent, href: 'not a url' })
+    expect(result.success).toBe(false)
+  })
+})
+
+const validTutorial = {
+  order: 1,
+  tags: ['Partner Nodes', 'Image To Video'],
+  title: 'Cleanplate Walkthrough',
+  videoSrc:
+    'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4',
+  poster:
+    'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg'
+}
+
+describe('tutorialsSchema', () => {
+  it('accepts a valid entry', () => {
+    const result = tutorialsSchema.safeParse(validTutorial)
+    expect(result.success).toBe(true)
+  })
+
+  it('rejects an entry missing a required field with a Zod error naming the field', () => {
+    const { title: _omit, ...withoutTitle } = validTutorial
+    const result = tutorialsSchema.safeParse(withoutTitle)
+    expect(result.success).toBe(false)
+    if (!result.success) {
+      const paths = result.error.issues.map((issue) => issue.path.join('.'))
+      expect(paths).toContain('title')
+    }
+  })
+
+  it('rejects an invalid videoSrc URL', () => {
+    const result = tutorialsSchema.safeParse({
+      ...validTutorial,
+      videoSrc: 'not a url'
+    })
+    expect(result.success).toBe(false)
+  })
+})

apps/website/src/content.config.ts

@@ -0,0 +1,78 @@
+import { defineCollection } from 'astro:content'
+import { glob } from 'astro/loaders'
+import { z } from 'astro/zod'
+
+export const gallerySchema = z.object({
+  order: z.number().int(),
+  image: z.string().url().optional(),
+  video: z.string().url().optional(),
+  title: z.string(),
+  userAlias: z.string(),
+  teamAlias: z.string(),
+  tool: z.string(),
+  href: z.string().url().optional(),
+  objectPosition: z.string().optional(),
+  objectFit: z.string().optional(),
+  visible: z.boolean().default(true)
+})
+
+export type GalleryItem = z.infer<typeof gallerySchema>
+
+export const eventsSchema = z.object({
+  order: z.number().int(),
+  label: z.string(),
+  title: z.string(),
+  cta: z.string(),
+  href: z.string().url().or(z.literal('#'))
+})
+
+export type EventItem = z.infer<typeof eventsSchema>
+
+export const tutorialsSchema = z.object({
+  order: z.number().int(),
+  tags: z.array(z.string()),
+  title: z.string(),
+  videoSrc: z.string().url(),
+  href: z.string().url().optional(),
+  poster: z.string().url().optional(),
+  posterTime: z.number().optional()
+})
+
+export type LearningTutorial = z.infer<typeof tutorialsSchema>
+export type ResolvedTutorial = LearningTutorial & { slug: string }
+
+// The default `generateId` lowercases path segments (e.g. `zh-CN/foo` becomes
+// `zh-cn/foo`), which collides with the BCP-47 locale codes Astro's i18n
+// config uses elsewhere. Strip the file extension to keep the path — and
+// therefore the locale prefix — verbatim.
+const preservePathId = ({ entry }: { entry: string }): string =>
+  entry.replace(/\.[^.]+$/, '')
+
+const gallery = defineCollection({
+  loader: glob({
+    pattern: '**/*.json',
+    base: './src/content/gallery',
+    generateId: preservePathId
+  }),
+  schema: gallerySchema
+})
+
+const events = defineCollection({
+  loader: glob({
+    pattern: '**/*.json',
+    base: './src/content/events',
+    generateId: preservePathId
+  }),
+  schema: eventsSchema
+})
+
+const tutorials = defineCollection({
+  loader: glob({
+    pattern: '**/*.md',
+    base: './src/content/tutorials',
+    generateId: preservePathId
+  }),
+  schema: tutorialsSchema
+})
+
+export const collections = { gallery, events, tutorials }

apps/website/src/content/events/en/event-london.json

@@ -0,0 +1,7 @@
+{
+  "order": 2,
+  "label": "Event 1",
+  "title": "Lorem ipsum dollar sita met",
+  "cta": "London, UK",
+  "href": "#"
+}

apps/website/src/content/events/en/event-san-francisco.json

@@ -0,0 +1,7 @@
+{
+  "order": 3,
+  "label": "Event 2",
+  "title": "Lorem ipsum dollar sita met",
+  "cta": "San Francisco",
+  "href": "#"
+}

apps/website/src/content/events/en/zero-to-node.json

@@ -0,0 +1,7 @@
+{
+  "order": 1,
+  "label": "Live Stream:",
+  "title": "Zero to Node: Building Your First Workflow",
+  "cta": "Link",
+  "href": "#"
+}

apps/website/src/content/events/zh-CN/event-london.json

@@ -0,0 +1,7 @@
+{
+  "order": 2,
+  "label": "活动 1",
+  "title": "此处为活动描述的占位文本",
+  "cta": "英国伦敦",
+  "href": "#"
+}

apps/website/src/content/events/zh-CN/event-san-francisco.json

@@ -0,0 +1,7 @@
+{
+  "order": 3,
+  "label": "活动 2",
+  "title": "此处为活动描述的占位文本",
+  "cta": "旧金山",
+  "href": "#"
+}

apps/website/src/content/events/zh-CN/zero-to-node.json

@@ -0,0 +1,7 @@
+{
+  "order": 1,
+  "label": "直播：",
+  "title": "从零到节点：构建你的第一个工作流",
+  "cta": "链接",
+  "href": "#"
+}

apps/website/src/content/gallery/en/amber-astronaut.json

@@ -0,0 +1,9 @@
+{
+  "order": 17,
+  "image": "https://media.comfy.org/website/gallery/gallery.webp",
+  "title": "Amber Astronaut",
+  "userAlias": "Yogo",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://de.linkedin.com/in/milan-kastenmueller-18778a174"
+}

apps/website/src/content/gallery/en/amber-passage.json

@@ -0,0 +1,11 @@
+{
+  "order": 21,
+  "image": "https://media.comfy.org/website/gallery/amber-passage_compressed.jpg",
+  "title": "Amber Passage",
+  "userAlias": "Purz Beats",
+  "teamAlias": "Comfy",
+  "tool": "Grok Imagine",
+  "href": "https://www.youtube.com/@PurzBeats",
+  "objectPosition": "bottom",
+  "visible": false
+}

apps/website/src/content/gallery/en/animation-reel.json

@@ -0,0 +1,9 @@
+{
+  "order": 16,
+  "video": "https://media.comfy.org/videos/compressed_512/clouds_statue.webm",
+  "title": "Animation Reel",
+  "userAlias": "Andidea",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.youtube.com/watch?v=qu3eIQ1uln8"
+}

apps/website/src/content/gallery/en/autopoiesis.json

@@ -0,0 +1,9 @@
+{
+  "order": 5,
+  "video": "https://media.comfy.org/videos/compressed_512/cigarette.webm",
+  "title": "Autopoiesis",
+  "userAlias": "Yogo",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/visualfrisson/?hl=en"
+}

apps/website/src/content/gallery/en/cuco-love-letter-to-la.json

@@ -0,0 +1,9 @@
+{
+  "order": 13,
+  "video": "https://media.comfy.org/videos/compressed_512/paul_trillo.webm",
+  "title": "Cuco - A Love Letter To LA",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "CoffeeVectors",
+  "tool": "ComfyUI",
+  "href": "https://vimeo.com/1062859798"
+}

apps/website/src/content/gallery/en/ddu-du-ddu-du.json

@@ -0,0 +1,9 @@
+{
+  "order": 12,
+  "video": "https://media.comfy.org/videos/compressed_512/dududu.webm",
+  "title": "DDU-DU DDU-DU",
+  "userAlias": "Purz",
+  "teamAlias": "Andidea",
+  "tool": "Animatediff",
+  "href": "https://vimeo.com/1019924290"
+}

apps/website/src/content/gallery/en/desert-landing.json

@@ -0,0 +1,9 @@
+{
+  "order": 18,
+  "image": "https://media.comfy.org/website/gallery/desert.webp",
+  "title": "Desert Landing",
+  "userAlias": "Yogo",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://de.linkedin.com/in/milan-kastenmueller-18778a174"
+}

apps/website/src/content/gallery/en/eat-it-dance.json

@@ -0,0 +1,9 @@
+{
+  "order": 6,
+  "video": "https://media.comfy.org/videos/compressed_512/Eat%20It%20-%20Dance%20%5BWanAnimate%5D2.webm",
+  "title": "Eat It - Dance",
+  "userAlias": "Johana Lyu",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.joannalyu.com/"
+}

apps/website/src/content/gallery/en/fall.json

@@ -0,0 +1,9 @@
+{
+  "order": 7,
+  "video": "https://media.comfy.org/videos/compressed_512/flower.webm",
+  "title": "Fall",
+  "userAlias": "Nathan Shipley",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C3k9t_6vH5F/"
+}

apps/website/src/content/gallery/en/good-good-summer.json

@@ -0,0 +1,9 @@
+{
+  "order": 11,
+  "video": "https://media.comfy.org/videos/compressed_512/clouds.webm",
+  "title": "It's gonna be a good good summer",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "",
+  "tool": "CogvideoX",
+  "href": "https://vimeo.com/1019685900"
+}

apps/website/src/content/gallery/en/goodbye-beijing.json

@@ -0,0 +1,9 @@
+{
+  "order": 15,
+  "video": "https://media.comfy.org/videos/compressed_512/swings.webm",
+  "title": "Goodbye Beijing",
+  "userAlias": "Rui",
+  "teamAlias": "makeitrad",
+  "tool": "Animatediff",
+  "href": "https://x.com/rui40000"
+}

apps/website/src/content/gallery/en/midnight-umami.json

@@ -0,0 +1,10 @@
+{
+  "order": 23,
+  "image": "https://media.comfy.org/website/gallery/midnight_umami_compressed.png",
+  "title": "Midnight Umami",
+  "userAlias": "Purz Beats",
+  "teamAlias": "Comfy",
+  "tool": "Grok Imagine",
+  "href": "https://www.youtube.com/@PurzBeats",
+  "visible": false
+}

apps/website/src/content/gallery/en/milos-little-wonder.json

@@ -0,0 +1,10 @@
+{
+  "order": 20,
+  "video": "https://media.comfy.org/website/gallery/milos-little-wonder_compressed.mp4",
+  "title": "Milos Little Wonder",
+  "userAlias": "Purz Beats",
+  "teamAlias": "Comfy",
+  "tool": "Grok Imagine",
+  "href": "https://www.youtube.com/@PurzBeats",
+  "visible": false
+}

apps/website/src/content/gallery/en/neon-nights.json

@@ -0,0 +1,9 @@
+{
+  "order": 3,
+  "video": "https://media.comfy.org/videos/compressed_512/arcade.webm",
+  "title": "Neon Nights",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "DOGSTUDIO/DEPT\u00ae",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C1kG1oErzUV/"
+}

apps/website/src/content/gallery/en/neon-revenant.json

@@ -0,0 +1,10 @@
+{
+  "order": 22,
+  "video": "https://media.comfy.org/website/gallery/neon-revenant_compressed.mp4",
+  "title": "Neon Revenant",
+  "userAlias": "Eric Solorio",
+  "teamAlias": "Comfy",
+  "tool": "Grok Imagine",
+  "href": "https://www.instagram.com/enigmatic_e",
+  "visible": false
+}

apps/website/src/content/gallery/en/origami-world.json

@@ -0,0 +1,9 @@
+{
+  "order": 9,
+  "video": "https://media.comfy.org/videos/compressed_512/origami_shortened.webm",
+  "title": "Origami world",
+  "userAlias": "Karen X",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/karenxcheng/"
+}

apps/website/src/content/gallery/en/origins-kyrie-irving.json

@@ -0,0 +1,9 @@
+{
+  "order": 2,
+  "video": "https://media.comfy.org/videos/compressed_512/kyrie.webm",
+  "title": "Origins - Kyrie Irving",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "ThinkDiffusion",
+  "tool": "ComfyUI",
+  "href": "https://vimeo.com/1021360563"
+}

apps/website/src/content/gallery/en/shot-on-instax.json

@@ -0,0 +1,9 @@
+{
+  "order": 10,
+  "video": "https://media.comfy.org/videos/compressed_512/biking.webm",
+  "title": "Shot on InstaX",
+  "userAlias": "Karen X",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/karenxcheng/"
+}

apps/website/src/content/gallery/en/show-you-my-garden.json

@@ -0,0 +1,9 @@
+{
+  "order": 14,
+  "video": "https://media.comfy.org/videos/compressed_512/chibi_fish_tank_shortened.webm",
+  "title": "Show you my garden",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "",
+  "tool": "CogvideoX",
+  "href": "https://vimeo.com/1019685479"
+}

apps/website/src/content/gallery/en/subway-swan.json

@@ -0,0 +1,10 @@
+{
+  "order": 19,
+  "image": "https://media.comfy.org/website/gallery/subway-swan_compressed.png",
+  "title": "Subway Swan",
+  "userAlias": "Purz Beats",
+  "teamAlias": "Comfy",
+  "tool": "Grok Imagine",
+  "href": "https://www.youtube.com/@PurzBeats",
+  "visible": false
+}

apps/website/src/content/gallery/en/until-our-eye-interlink-harajuku.json

@@ -0,0 +1,9 @@
+{
+  "order": 1,
+  "video": "https://media.comfy.org/videos/compressed_512/eye.webm",
+  "title": "Until Our Eye Interlink harajuku",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "ThinkDiffusion",
+  "tool": "ComfyUI",
+  "href": "https://www.thinkdiffusion.com/studio#success-stories-anta"
+}

apps/website/src/content/gallery/en/untitled-buildings.json

@@ -0,0 +1,9 @@
+{
+  "order": 8,
+  "video": "https://media.comfy.org/videos/compressed_512/buildings.webm",
+  "title": "Untitled",
+  "userAlias": "Nathan Shipley",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C6rEuJ4p9xU/"
+}

apps/website/src/content/gallery/en/untitled-dusk-mountains.json

@@ -0,0 +1,9 @@
+{
+  "order": 4,
+  "video": "https://media.comfy.org/videos/compressed_512/dusk_mountains.webm",
+  "title": "Untitled",
+  "userAlias": "MidJourney man",
+  "teamAlias": "DOGSTUDIO/DEPT\u00ae",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/midjourney.man/?hl=fr"
+}

apps/website/src/content/gallery/zh-CN/amber-astronaut.json

@@ -0,0 +1,9 @@
+{
+  "order": 17,
+  "image": "https://media.comfy.org/website/gallery/gallery.webp",
+  "title": "Amber Astronaut",
+  "userAlias": "Yogo",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://de.linkedin.com/in/milan-kastenmueller-18778a174"
+}

apps/website/src/content/gallery/zh-CN/animation-reel.json

@@ -0,0 +1,9 @@
+{
+  "order": 16,
+  "video": "https://media.comfy.org/videos/compressed_512/clouds_statue.webm",
+  "title": "Animation Reel",
+  "userAlias": "Andidea",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.youtube.com/watch?v=qu3eIQ1uln8"
+}

apps/website/src/content/gallery/zh-CN/autopoiesis.json

@@ -0,0 +1,9 @@
+{
+  "order": 5,
+  "video": "https://media.comfy.org/videos/compressed_512/cigarette.webm",
+  "title": "Autopoiesis",
+  "userAlias": "Yogo",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/visualfrisson/?hl=en"
+}

apps/website/src/content/gallery/zh-CN/cuco-love-letter-to-la.json

@@ -0,0 +1,9 @@
+{
+  "order": 13,
+  "video": "https://media.comfy.org/videos/compressed_512/paul_trillo.webm",
+  "title": "Cuco - A Love Letter To LA",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "CoffeeVectors",
+  "tool": "ComfyUI",
+  "href": "https://vimeo.com/1062859798"
+}

apps/website/src/content/gallery/zh-CN/ddu-du-ddu-du.json

@@ -0,0 +1,9 @@
+{
+  "order": 12,
+  "video": "https://media.comfy.org/videos/compressed_512/dududu.webm",
+  "title": "DDU-DU DDU-DU",
+  "userAlias": "Purz",
+  "teamAlias": "Andidea",
+  "tool": "Animatediff",
+  "href": "https://vimeo.com/1019924290"
+}

apps/website/src/content/gallery/zh-CN/desert-landing.json

@@ -0,0 +1,9 @@
+{
+  "order": 18,
+  "image": "https://media.comfy.org/website/gallery/desert.webp",
+  "title": "Desert Landing",
+  "userAlias": "Yogo",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://de.linkedin.com/in/milan-kastenmueller-18778a174"
+}

apps/website/src/content/gallery/zh-CN/eat-it-dance.json

@@ -0,0 +1,9 @@
+{
+  "order": 6,
+  "video": "https://media.comfy.org/videos/compressed_512/Eat%20It%20-%20Dance%20%5BWanAnimate%5D2.webm",
+  "title": "Eat It - Dance",
+  "userAlias": "Johana Lyu",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.joannalyu.com/"
+}

apps/website/src/content/gallery/zh-CN/fall.json

@@ -0,0 +1,9 @@
+{
+  "order": 7,
+  "video": "https://media.comfy.org/videos/compressed_512/flower.webm",
+  "title": "Fall",
+  "userAlias": "Nathan Shipley",
+  "teamAlias": "Visual Frisson",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C3k9t_6vH5F/"
+}

apps/website/src/content/gallery/zh-CN/good-good-summer.json

@@ -0,0 +1,9 @@
+{
+  "order": 11,
+  "video": "https://media.comfy.org/videos/compressed_512/clouds.webm",
+  "title": "It's gonna be a good good summer",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "",
+  "tool": "CogvideoX",
+  "href": "https://vimeo.com/1019685900"
+}

apps/website/src/content/gallery/zh-CN/goodbye-beijing.json

@@ -0,0 +1,9 @@
+{
+  "order": 15,
+  "video": "https://media.comfy.org/videos/compressed_512/swings.webm",
+  "title": "Goodbye Beijing",
+  "userAlias": "Rui",
+  "teamAlias": "makeitrad",
+  "tool": "Animatediff",
+  "href": "https://x.com/rui40000"
+}

apps/website/src/content/gallery/zh-CN/neon-nights.json

@@ -0,0 +1,9 @@
+{
+  "order": 3,
+  "video": "https://media.comfy.org/videos/compressed_512/arcade.webm",
+  "title": "Neon Nights",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "DOGSTUDIO/DEPT\u00ae",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C1kG1oErzUV/"
+}

apps/website/src/content/gallery/zh-CN/origami-world.json

@@ -0,0 +1,9 @@
+{
+  "order": 9,
+  "video": "https://media.comfy.org/videos/compressed_512/origami_shortened.webm",
+  "title": "Origami world",
+  "userAlias": "Karen X",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/karenxcheng/"
+}

apps/website/src/content/gallery/zh-CN/origins-kyrie-irving.json

@@ -0,0 +1,9 @@
+{
+  "order": 2,
+  "video": "https://media.comfy.org/videos/compressed_512/kyrie.webm",
+  "title": "Origins - Kyrie Irving",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "ThinkDiffusion",
+  "tool": "ComfyUI",
+  "href": "https://vimeo.com/1021360563"
+}

apps/website/src/content/gallery/zh-CN/shot-on-instax.json

@@ -0,0 +1,9 @@
+{
+  "order": 10,
+  "video": "https://media.comfy.org/videos/compressed_512/biking.webm",
+  "title": "Shot on InstaX",
+  "userAlias": "Karen X",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/karenxcheng/"
+}

apps/website/src/content/gallery/zh-CN/show-you-my-garden.json

@@ -0,0 +1,9 @@
+{
+  "order": 14,
+  "video": "https://media.comfy.org/videos/compressed_512/chibi_fish_tank_shortened.webm",
+  "title": "Show you my garden",
+  "userAlias": "Paul Trillo",
+  "teamAlias": "",
+  "tool": "CogvideoX",
+  "href": "https://vimeo.com/1019685479"
+}

apps/website/src/content/gallery/zh-CN/until-our-eye-interlink-harajuku.json

@@ -0,0 +1,9 @@
+{
+  "order": 1,
+  "video": "https://media.comfy.org/videos/compressed_512/eye.webm",
+  "title": "Until Our Eye Interlink harajuku",
+  "userAlias": "ShaneF Motion Design",
+  "teamAlias": "ThinkDiffusion",
+  "tool": "ComfyUI",
+  "href": "https://www.thinkdiffusion.com/studio#success-stories-anta"
+}

apps/website/src/content/gallery/zh-CN/untitled-buildings.json

@@ -0,0 +1,9 @@
+{
+  "order": 8,
+  "video": "https://media.comfy.org/videos/compressed_512/buildings.webm",
+  "title": "Untitled",
+  "userAlias": "Nathan Shipley",
+  "teamAlias": "",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/p/C6rEuJ4p9xU/"
+}

apps/website/src/content/gallery/zh-CN/untitled-dusk-mountains.json

@@ -0,0 +1,9 @@
+{
+  "order": 4,
+  "video": "https://media.comfy.org/videos/compressed_512/dusk_mountains.webm",
+  "title": "Untitled",
+  "userAlias": "MidJourney man",
+  "teamAlias": "DOGSTUDIO/DEPT\u00ae",
+  "tool": "ComfyUI",
+  "href": "https://www.instagram.com/midjourney.man/?hl=fr"
+}

apps/website/src/content/queries.test.ts

@@ -0,0 +1,264 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { getCollection } from 'astro:content'
+
+import {
+  getEventsByLocale,
+  getGalleryByIds,
+  getTutorialsByLocale,
+  getVisibleGalleryByLocale,
+  slugOf
+} from './queries'
+
+vi.mock('astro:content', () => ({
+  getCollection: vi.fn()
+}))
+
+const getCollectionMock = vi.mocked(getCollection)
+
+interface FixtureEntry {
+  id: string
+  collection: 'gallery'
+  data: {
+    order: number
+    title: string
+    userAlias: string
+    teamAlias: string
+    tool: string
+    image?: string
+    video?: string
+    href?: string
+    objectPosition?: string
+    objectFit?: string
+    visible: boolean
+  }
+}
+
+function entry(
+  id: string,
+  overrides: Partial<FixtureEntry['data']> = {}
+): FixtureEntry {
+  return {
+    id,
+    collection: 'gallery',
+    data: {
+      order: 0,
+      title: 'Title',
+      userAlias: 'User',
+      teamAlias: 'Team',
+      tool: 'ComfyUI',
+      visible: true,
+      ...overrides
+    }
+  }
+}
+
+beforeEach(() => {
+  getCollectionMock.mockReset()
+})
+
+describe('slugOf', () => {
+  it('strips the locale prefix from an entry id', () => {
+    const entry = { id: 'en/until-our-eye-interlink-harajuku' }
+    expect(slugOf(entry)).toBe('until-our-eye-interlink-harajuku')
+  })
+
+  it('handles zh-CN prefix', () => {
+    const entry = { id: 'zh-CN/desert-landing' }
+    expect(slugOf(entry)).toBe('desert-landing')
+  })
+})
+
+describe('getVisibleGalleryByLocale', () => {
+  it('returns only entries whose id starts with the requested locale prefix', async () => {
+    getCollectionMock.mockResolvedValue([
+      entry('en/alpha'),
+      entry('en/beta'),
+      entry('zh-CN/alpha'),
+      entry('zh-CN/gamma')
+    ] as never)
+
+    const en = await getVisibleGalleryByLocale('en')
+    expect(en.map((e) => e.id)).toEqual(['en/alpha', 'en/beta'])
+
+    const zh = await getVisibleGalleryByLocale('zh-CN')
+    expect(zh.map((e) => e.id)).toEqual(['zh-CN/alpha', 'zh-CN/gamma'])
+  })
+
+  it('excludes entries with visible: false', async () => {
+    getCollectionMock.mockResolvedValue([
+      entry('en/shown', { visible: true }),
+      entry('en/hidden', { visible: false }),
+      entry('en/also-shown', { visible: true })
+    ] as never)
+
+    const result = await getVisibleGalleryByLocale('en')
+    expect(result.map((e) => e.id)).toEqual(['en/shown', 'en/also-shown'])
+  })
+
+  it('sorts entries by the order field ascending, not by id', async () => {
+    getCollectionMock.mockResolvedValue([
+      entry('en/charlie', { order: 1 }),
+      entry('en/alpha', { order: 3 }),
+      entry('en/bravo', { order: 2 })
+    ] as never)
+
+    const result = await getVisibleGalleryByLocale('en')
+    expect(result.map((e) => e.id)).toEqual([
+      'en/charlie',
+      'en/bravo',
+      'en/alpha'
+    ])
+  })
+})
+
+describe('getGalleryByIds', () => {
+  it('returns entries in the order of the input slug array', async () => {
+    getCollectionMock.mockResolvedValue([
+      entry('en/alpha'),
+      entry('en/beta'),
+      entry('en/gamma'),
+      entry('zh-CN/alpha')
+    ] as never)
+
+    const result = await getGalleryByIds(['gamma', 'alpha', 'beta'], 'en')
+    expect(result.map((e) => e.id)).toEqual(['en/gamma', 'en/alpha', 'en/beta'])
+  })
+
+  it('drops slugs with no matching entry in the requested locale', async () => {
+    getCollectionMock.mockResolvedValue([
+      entry('en/alpha'),
+      entry('zh-CN/beta')
+    ] as never)
+
+    const result = await getGalleryByIds(['alpha', 'missing', 'beta'], 'en')
+    expect(result.map((e) => e.id)).toEqual(['en/alpha'])
+  })
+})
+
+interface EventsFixtureEntry {
+  id: string
+  collection: 'events'
+  data: {
+    order: number
+    label: string
+    title: string
+    cta: string
+    href: string
+  }
+}
+
+function eventEntry(
+  id: string,
+  overrides: Partial<EventsFixtureEntry['data']> = {}
+): EventsFixtureEntry {
+  return {
+    id,
+    collection: 'events',
+    data: {
+      order: 0,
+      label: 'Label',
+      title: 'Title',
+      cta: 'CTA',
+      href: '#',
+      ...overrides
+    }
+  }
+}
+
+describe('getEventsByLocale', () => {
+  it('returns only entries whose id starts with the requested locale prefix', async () => {
+    getCollectionMock.mockResolvedValue([
+      eventEntry('en/alpha'),
+      eventEntry('en/beta'),
+      eventEntry('zh-CN/alpha')
+    ] as never)
+
+    const en = await getEventsByLocale('en')
+    expect(en.map((e) => e.id)).toEqual(['en/alpha', 'en/beta'])
+  })
+
+  it('sorts entries by the order field ascending, not by id', async () => {
+    getCollectionMock.mockResolvedValue([
+      eventEntry('en/charlie', { order: 1 }),
+      eventEntry('en/alpha', { order: 3 }),
+      eventEntry('en/bravo', { order: 2 })
+    ] as never)
+
+    const result = await getEventsByLocale('en')
+    expect(result.map((e) => e.id)).toEqual([
+      'en/charlie',
+      'en/bravo',
+      'en/alpha'
+    ])
+  })
+
+  it('returns an empty array for a locale with no entries', async () => {
+    getCollectionMock.mockResolvedValue([
+      eventEntry('en/alpha'),
+      eventEntry('en/beta')
+    ] as never)
+
+    const result = await getEventsByLocale('zh-CN')
+    expect(result).toEqual([])
+  })
+})
+
+interface TutorialsFixtureEntry {
+  id: string
+  collection: 'tutorials'
+  data: {
+    order: number
+    tags: string[]
+    title: string
+    videoSrc: string
+    href?: string
+    poster?: string
+    posterTime?: number
+  }
+}
+
+function tutorialEntry(
+  id: string,
+  overrides: Partial<TutorialsFixtureEntry['data']> = {}
+): TutorialsFixtureEntry {
+  return {
+    id,
+    collection: 'tutorials',
+    data: {
+      order: 0,
+      tags: ['Tag'],
+      title: 'Title',
+      videoSrc: 'https://example.com/video.mp4',
+      ...overrides
+    }
+  }
+}
+
+describe('getTutorialsByLocale', () => {
+  it('returns only entries whose id starts with the requested locale prefix', async () => {
+    getCollectionMock.mockResolvedValue([
+      tutorialEntry('en/alpha'),
+      tutorialEntry('en/beta'),
+      tutorialEntry('zh-CN/alpha')
+    ] as never)
+
+    const en = await getTutorialsByLocale('en')
+    expect(en.map((e) => e.id)).toEqual(['en/alpha', 'en/beta'])
+  })
+
+  it('sorts entries by the order field ascending, not by id', async () => {
+    getCollectionMock.mockResolvedValue([
+      tutorialEntry('en/charlie', { order: 1 }),
+      tutorialEntry('en/alpha', { order: 3 }),
+      tutorialEntry('en/bravo', { order: 2 })
+    ] as never)
+
+    const result = await getTutorialsByLocale('en')
+    expect(result.map((e) => e.id)).toEqual([
+      'en/charlie',
+      'en/bravo',
+      'en/alpha'
+    ])
+  })
+})

apps/website/src/content/queries.ts

@@ -0,0 +1,61 @@
+import { getCollection } from 'astro:content'
+import type { CollectionEntry } from 'astro:content'
+
+import type { Locale } from '../i18n/translations'
+
+export type GalleryEntry = CollectionEntry<'gallery'>
+export type EventsEntry = CollectionEntry<'events'>
+export type TutorialsEntry = CollectionEntry<'tutorials'>
+
+export function slugOf(entry: { id: string }): string {
+  const slash = entry.id.indexOf('/')
+  return slash === -1 ? entry.id : entry.id.slice(slash + 1)
+}
+
+export async function getVisibleGalleryByLocale(
+  locale: Locale
+): Promise<GalleryEntry[]> {
+  const prefix = `${locale}/`
+  const entries: GalleryEntry[] = await getCollection('gallery')
+  return entries
+    .filter(
+      (entry) => entry.id.startsWith(prefix) && entry.data.visible !== false
+    )
+    .sort((a, b) => a.data.order - b.data.order)
+}
+
+export async function getGalleryByIds(
+  slugs: readonly string[],
+  locale: Locale
+): Promise<GalleryEntry[]> {
+  const entries: GalleryEntry[] = await getCollection('gallery')
+  const bySlug = new Map<string, GalleryEntry>()
+  for (const entry of entries) {
+    if (entry.id.startsWith(`${locale}/`)) {
+      bySlug.set(slugOf(entry), entry)
+    }
+  }
+  return slugs
+    .map((slug) => bySlug.get(slug))
+    .filter((entry): entry is GalleryEntry => entry !== undefined)
+}
+
+export async function getEventsByLocale(
+  locale: Locale
+): Promise<EventsEntry[]> {
+  const prefix = `${locale}/`
+  const entries: EventsEntry[] = await getCollection('events')
+  return entries
+    .filter((entry) => entry.id.startsWith(prefix))
+    .sort((a, b) => a.data.order - b.data.order)
+}
+
+export async function getTutorialsByLocale(
+  locale: Locale
+): Promise<TutorialsEntry[]> {
+  const prefix = `${locale}/`
+  const entries: TutorialsEntry[] = await getCollection('tutorials')
+  return entries
+    .filter((entry) => entry.id.startsWith(prefix))
+    .sort((a, b) => a.data.order - b.data.order)
+}

apps/website/src/content/tutorials/en/cleanplate-walkthrough.md

@@ -0,0 +1,9 @@
+---
+order: 1
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Cleanplate Walkthrough
+videoSrc: https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4
+poster: https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg
+---

apps/website/src/content/tutorials/en/deaging-workflow.md

@@ -0,0 +1,10 @@
+---
+order: 2
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Deaging Workflow
+videoSrc: https://media.comfy.org/website/learning/deaging_workflow_v03.mp4
+poster: https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=93f286fbc2c8
+---

apps/website/src/content/tutorials/en/frame-adjustments-demo.md

@@ -0,0 +1,10 @@
+---
+order: 3
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Frame Adjustments Demo
+videoSrc: https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4
+poster: https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=7dca0438edf4
+---

apps/website/src/content/tutorials/en/mattes-and-utilities.md

@@ -0,0 +1,10 @@
+---
+order: 4
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Mattes and Utilities
+videoSrc: https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4
+poster: https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=be0889296f65
+---

apps/website/src/content/tutorials/en/seedance-demo-comfyui.md

@@ -0,0 +1,10 @@
+---
+order: 5
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Seedance Demo ComfyUI
+videoSrc: https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4
+poster: https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=ef543bd4a773
+---

apps/website/src/content/tutorials/en/sky-replacement.md

@@ -0,0 +1,10 @@
+---
+order: 6
+tags:
+  - Partner Nodes
+  - Image To Video
+title: Sky Replacement
+videoSrc: https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4
+poster: https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg
+href: https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/
+---

apps/website/src/content/tutorials/zh-CN/cleanplate-walkthrough.md

@@ -0,0 +1,9 @@
+---
+order: 1
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: 净板演练
+videoSrc: https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4
+poster: https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg
+---

apps/website/src/content/tutorials/zh-CN/deaging-workflow.md

@@ -0,0 +1,10 @@
+---
+order: 2
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: 减龄工作流
+videoSrc: https://media.comfy.org/website/learning/deaging_workflow_v03.mp4
+poster: https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=93f286fbc2c8
+---

apps/website/src/content/tutorials/zh-CN/frame-adjustments-demo.md

@@ -0,0 +1,10 @@
+---
+order: 3
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: 帧调整演示
+videoSrc: https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4
+poster: https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=7dca0438edf4
+---

apps/website/src/content/tutorials/zh-CN/mattes-and-utilities.md

@@ -0,0 +1,10 @@
+---
+order: 4
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: 遮罩与实用工具
+videoSrc: https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4
+poster: https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=be0889296f65
+---

apps/website/src/content/tutorials/zh-CN/seedance-demo-comfyui.md

@@ -0,0 +1,10 @@
+---
+order: 5
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: Seedance ComfyUI 演示
+videoSrc: https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4
+poster: https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg
+href: https://cloud.comfy.org/?share=ef543bd4a773
+---

apps/website/src/content/tutorials/zh-CN/sky-replacement.md

@@ -0,0 +1,10 @@
+---
+order: 6
+tags:
+  - 合作伙伴节点
+  - 图像生成视频
+title: 天空替换
+videoSrc: https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4
+poster: https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg
+href: https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/
+---

apps/website/src/data/events.ts

@@ -1,31 +0,0 @@
-import type { EventItem } from '../components/common/EventsSection.vue'
-
-export const learningEvents: readonly EventItem[] = [
-  {
-    label: { en: 'Live Stream:', 'zh-CN': '直播：' },
-    title: {
-      en: 'Zero to Node: Building Your First Workflow',
-      'zh-CN': '从零到节点：构建你的第一个工作流'
-    },
-    cta: { en: 'Link', 'zh-CN': '链接' },
-    href: '#'
-  },
-  {
-    label: { en: 'Event 1', 'zh-CN': '活动 1' },
-    title: {
-      en: 'Lorem ipsum dollar sita met',
-      'zh-CN': '此处为活动描述的占位文本'
-    },
-    cta: { en: 'London, UK', 'zh-CN': '英国伦敦' },
-    href: '#'
-  },
-  {
-    label: { en: 'Event 2', 'zh-CN': '活动 2' },
-    title: {
-      en: 'Lorem ipsum dollar sita met',
-      'zh-CN': '此处为活动描述的占位文本'
-    },
-    cta: { en: 'San Francisco', 'zh-CN': '旧金山' },
-    href: '#'
-  }
-] as const

apps/website/src/data/gallery.ts

@@ -1,191 +0,0 @@
-export interface GalleryItem {
-  id: string
-  image?: string
-  video?: string
-  title: string
-  userAlias: string
-  teamAlias: string
-  tool: string
-  href?: string
-  objectPosition?: string
-  objectFit?: string
-  /** Defaults to true. Set to false to hide this item from rendered lists. */
-  visible?: boolean
-}
-
-const galleryItems: GalleryItem[] = [
-  {
-    id: 'until-our-eye-interlink-harajuku',
-    video: 'https://media.comfy.org/videos/compressed_512/eye.webm',
-    title: 'Until Our Eye Interlink harajuku',
-    userAlias: 'ShaneF Motion Design',
-    teamAlias: 'ThinkDiffusion',
-    tool: 'ComfyUI',
-    href: 'https://www.thinkdiffusion.com/studio#success-stories-anta'
-  },
-  {
-    id: 'origins-kyrie-irving',
-    video: 'https://media.comfy.org/videos/compressed_512/kyrie.webm',
-    title: 'Origins - Kyrie Irving',
-    userAlias: 'ShaneF Motion Design',
-    teamAlias: 'ThinkDiffusion',
-    tool: 'ComfyUI',
-    href: 'https://vimeo.com/1021360563'
-  },
-  {
-    id: 'neon-nights',
-    video: 'https://media.comfy.org/videos/compressed_512/arcade.webm',
-    title: 'Neon Nights',
-    userAlias: 'ShaneF Motion Design',
-    teamAlias: 'DOGSTUDIO/DEPT®',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/p/C1kG1oErzUV/'
-  },
-  {
-    id: 'untitled-dusk-mountains',
-    video: 'https://media.comfy.org/videos/compressed_512/dusk_mountains.webm',
-    title: 'Untitled',
-    userAlias: 'MidJourney man',
-    teamAlias: 'DOGSTUDIO/DEPT®',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/midjourney.man/?hl=fr'
-  },
-  {
-    id: 'autopoiesis',
-    video: 'https://media.comfy.org/videos/compressed_512/cigarette.webm',
-    title: 'Autopoiesis',
-    userAlias: 'Yogo',
-    teamAlias: 'Visual Frisson',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/visualfrisson/?hl=en'
-  },
-  {
-    id: 'eat-it-dance',
-    video:
-      'https://media.comfy.org/videos/compressed_512/Eat%20It%20-%20Dance%20%5BWanAnimate%5D2.webm',
-    title: 'Eat It - Dance',
-    userAlias: 'Johana Lyu',
-    teamAlias: 'Visual Frisson',
-    tool: 'ComfyUI',
-    href: 'https://www.joannalyu.com/'
-  },
-  {
-    id: 'fall',
-    video: 'https://media.comfy.org/videos/compressed_512/flower.webm',
-    title: 'Fall',
-    userAlias: 'Nathan Shipley',
-    teamAlias: 'Visual Frisson',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/p/C3k9t_6vH5F/'
-  },
-  {
-    id: 'untitled-buildings',
-    video: 'https://media.comfy.org/videos/compressed_512/buildings.webm',
-    title: 'Untitled',
-    userAlias: 'Nathan Shipley',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/p/C6rEuJ4p9xU/'
-  },
-  {
-    id: 'origami-world',
-    video:
-      'https://media.comfy.org/videos/compressed_512/origami_shortened.webm',
-    title: 'Origami world',
-    userAlias: 'Karen X',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/karenxcheng/'
-  },
-  {
-    id: 'shot-on-instax',
-    video: 'https://media.comfy.org/videos/compressed_512/biking.webm',
-    title: 'Shot on InstaX',
-    userAlias: 'Karen X',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://www.instagram.com/karenxcheng/'
-  },
-  {
-    id: 'good-good-summer',
-    video: 'https://media.comfy.org/videos/compressed_512/clouds.webm',
-    title: "It's gonna be a good good summer",
-    userAlias: 'Paul Trillo',
-    teamAlias: '',
-    tool: 'CogvideoX',
-    href: 'https://vimeo.com/1019685900'
-  },
-  {
-    id: 'ddu-du-ddu-du',
-    video: 'https://media.comfy.org/videos/compressed_512/dududu.webm',
-    title: 'DDU-DU DDU-DU',
-    userAlias: 'Purz',
-    teamAlias: 'Andidea',
-    tool: 'Animatediff',
-    href: 'https://vimeo.com/1019924290'
-  },
-  {
-    id: 'cuco-love-letter-to-la',
-    video: 'https://media.comfy.org/videos/compressed_512/paul_trillo.webm',
-    title: 'Cuco - A Love Letter To LA',
-    userAlias: 'Paul Trillo',
-    teamAlias: 'CoffeeVectors',
-    tool: 'ComfyUI',
-    href: 'https://vimeo.com/1062859798'
-  },
-  {
-    id: 'show-you-my-garden',
-    video:
-      'https://media.comfy.org/videos/compressed_512/chibi_fish_tank_shortened.webm',
-    title: 'Show you my garden',
-    userAlias: 'Paul Trillo',
-    teamAlias: '',
-    tool: 'CogvideoX',
-    href: 'https://vimeo.com/1019685479'
-  },
-  {
-    id: 'goodbye-beijing',
-    video: 'https://media.comfy.org/videos/compressed_512/swings.webm',
-    title: 'Goodbye Beijing',
-    userAlias: 'Rui',
-    teamAlias: 'makeitrad',
-    tool: 'Animatediff',
-    href: 'https://x.com/rui40000'
-  },
-  {
-    id: 'animation-reel',
-    video: 'https://media.comfy.org/videos/compressed_512/clouds_statue.webm',
-    title: 'Animation Reel',
-    userAlias: 'Andidea',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://www.youtube.com/watch?v=qu3eIQ1uln8'
-  },
-  {
-    id: 'amber-astronaut',
-    image: 'https://media.comfy.org/website/gallery/gallery.webp',
-    title: 'Amber Astronaut',
-    userAlias: 'Yogo',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
-  },
-  {
-    id: 'desert-landing',
-    image: 'https://media.comfy.org/website/gallery/desert.webp',
-    title: 'Desert Landing',
-    userAlias: 'Yogo',
-    teamAlias: '',
-    tool: 'ComfyUI',
-    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
-  }
-]
-
-export const visibleGalleryItems: GalleryItem[] = galleryItems.filter(
-  (item) => item.visible !== false
-)
-
-/** @knipIgnoreUsedByStackedPR */
-export function getGalleryItemById(id: string): GalleryItem | undefined {
-  return galleryItems.find((item) => item.id === id)
-}

apps/website/src/data/learningTutorials.ts

@@ -1,84 +0,0 @@
-import type { LocalizedText, TranslationKey } from '../i18n/translations'
-
-export interface LearningTutorial {
-  id: string
-  tags: readonly TranslationKey[]
-  title: LocalizedText
-  videoSrc: string
-  href?: string
-  poster?: string
-  posterTime?: number
-}
-
-const DEFAULT_POSTER_TIME_SECONDS = 1
-
-const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
-const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
-
-export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
-  tutorial.poster
-    ? tutorial.poster
-    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
-
-export const learningTutorials: readonly LearningTutorial[] = [
-  {
-    id: 'cleanplate_walkthrough_v03',
-    title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03_thumbnail.jpg',
-    // href: '#',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'deaging_workflow_v03',
-    title: { en: 'Deaging Workflow', 'zh-CN': '减龄工作流' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/deaging_workflow_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/deaging_workflow_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=93f286fbc2c8',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'frame_adjustments_demo_v03',
-    title: { en: 'Frame Adjustments Demo', 'zh-CN': '帧调整演示' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'mattes_and_utilities_v03',
-    title: { en: 'Mattes and Utilities', 'zh-CN': '遮罩与实用工具' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/mattes_and_utilities_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=be0889296f65',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'seedance_demo_comfyui_v03',
-    title: { en: 'Seedance Demo ComfyUI', 'zh-CN': 'Seedance ComfyUI 演示' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
-    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
-    tags: [partnerNodesTag, imageToVideoTag]
-  },
-  {
-    id: 'skyreplacement_smaller_v06',
-    title: { en: 'Sky Replacement', 'zh-CN': '天空替换' },
-    videoSrc:
-      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4',
-    poster:
-      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06_thumbnail.jpg',
-    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
-    tags: [partnerNodesTag, imageToVideoTag]
-  }
-] as const

apps/website/src/pages/gallery.astro

@@ -3,10 +3,14 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 import HeroSection from '../components/gallery/HeroSection.vue'
 import GallerySection from '../components/gallery/GallerySection.vue'
 import ContactSection from '../components/gallery/ContactSection.vue'
+import { getVisibleGalleryByLocale } from '../content/queries'
+
+const entries = await getVisibleGalleryByLocale('en')
+const items = entries.map((entry) => entry.data)
 ---
 
 <BaseLayout title="Gallery — Comfy">
   <HeroSection />
-  <GallerySection client:load />
+  <GallerySection items={items} client:load />
   <ContactSection />
 </BaseLayout>

apps/website/src/pages/learning.astro

@@ -8,14 +8,20 @@ import CallToActionSection from '../components/common/CallToActionSection.vue'
 import { getRoutes } from '../config/routes'
 import { externalLinks } from '../config/routes'
 // import { learningEvents } from '../data/events'
+import { getTutorialsByLocale, slugOf } from '../content/queries'
 
 const routes = getRoutes('en')
+const tutorialEntries = await getTutorialsByLocale('en')
+const tutorials = tutorialEntries.map((entry) => ({
+  slug: slugOf(entry),
+  ...entry.data
+}))
 ---
 
 <BaseLayout title="Learning — Comfy">
   <HeroSection client:load />
   <FeaturedWorkflowSection client:visible />
-  <TutorialsSection client:visible />
+  <TutorialsSection tutorials={tutorials} client:visible />
   <CallToActionSection
     headingKey="learning.cta.heading"
     primaryLabelKey="learning.cta.contactSales"

apps/website/src/pages/models.astro

@@ -3,7 +3,18 @@ import BaseLayout from '../layouts/BaseLayout.astro'
 import ModelsHeroSection from '../components/models/ModelsHeroSection.vue'
 import ModelCreationsSection from '../components/models/ModelCreationsSection.vue'
 import AIModelsSection from '../components/product/shared/AIModelsSection.vue'
-import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue' 
+import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue'
+import { getGalleryByIds } from '../content/queries'
+
+const featuredCreationSlugs = [
+  'subway-swan',
+  'milos-little-wonder',
+  'amber-passage',
+  'neon-revenant',
+  'midnight-umami'
+]
+const featuredEntries = await getGalleryByIds(featuredCreationSlugs, 'en')
+const featuredItems = featuredEntries.map((entry) => entry.data)
 ---
 
 <BaseLayout
@@ -16,7 +27,7 @@ import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vu
     videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
     videoAriaLabel="Grok Imagine output created with ComfyUI"
   />
-  <ModelCreationsSection client:load />
+  <ModelCreationsSection items={featuredItems} client:load />
   <AIModelsSection client:load />
   <ProductShowcaseSection client:load />
 </BaseLayout>

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

@@ -3,10 +3,14 @@ import BaseLayout from '../../layouts/BaseLayout.astro'
 import HeroSection from '../../components/gallery/HeroSection.vue'
 import GallerySection from '../../components/gallery/GallerySection.vue'
 import ContactSection from '../../components/gallery/ContactSection.vue'
+import { getVisibleGalleryByLocale } from '../../content/queries'
+
+const entries = await getVisibleGalleryByLocale('zh-CN')
+const items = entries.map((entry) => entry.data)
 ---
 
 <BaseLayout title="作品集 — Comfy">
   <HeroSection locale="zh-CN" />
-  <GallerySection locale="zh-CN" client:load />
+  <GallerySection locale="zh-CN" items={items} client:load />
   <ContactSection locale="zh-CN" />
 </BaseLayout>

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

@@ -6,15 +6,34 @@ import TutorialsSection from '../../components/learning/TutorialsSection.vue'
 import CallToActionSection from '../../components/common/CallToActionSection.vue'
 import EventsSection from '../../components/common/EventsSection.vue'
 import { getRoutes, externalLinks } from '../../config/routes'
-import { learningEvents } from '../../data/events'
+import {
+  getEventsByLocale,
+  getTutorialsByLocale,
+  slugOf
+} from '../../content/queries'
 
 const routes = getRoutes('zh-CN')
+const eventEntries = await getEventsByLocale('zh-CN')
+const events = eventEntries.map((entry) => entry.data)
+const tutorialEntries = await getTutorialsByLocale('zh-CN')
+const tutorials = tutorialEntries.map((entry) => ({
+  slug: slugOf(entry),
+  ...entry.data
+}))
 ---
 
 <BaseLayout title="学习 — Comfy">
   <HeroSection locale="zh-CN" client:load />
   <FeaturedWorkflowSection locale="zh-CN" client:visible />
-  <TutorialsSection locale="zh-CN" client:visible />
+  <TutorialsSection locale="zh-CN" tutorials={tutorials} client:visible />
+  <EventsSection
+    locale="zh-CN"
+    headingKey="learning.events.heading"
+    descriptionKey="learning.events.description"
+    notifyLabelKey="learning.events.getNotified"
+    events={events}
+    client:visible
+  />
   <CallToActionSection
     locale="zh-CN"
     headingKey="learning.cta.heading"

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

@@ -4,6 +4,17 @@ import ModelsHeroSection from '../../components/models/ModelsHeroSection.vue'
 import ModelCreationsSection from '../../components/models/ModelCreationsSection.vue'
 import AIModelsSection from '../../components/product/shared/AIModelsSection.vue'
 import ProductShowcaseSection from '../../components/home/ProductShowcaseSection.vue'
+import { getGalleryByIds } from '../../content/queries'
+
+const featuredCreationSlugs = [
+  'subway-swan',
+  'milos-little-wonder',
+  'amber-passage',
+  'neon-revenant',
+  'midnight-umami'
+]
+const featuredEntries = await getGalleryByIds(featuredCreationSlugs, 'en')
+const featuredItems = featuredEntries.map((entry) => entry.data)
 ---
 
 <BaseLayout
@@ -17,7 +28,7 @@ import ProductShowcaseSection from '../../components/home/ProductShowcaseSection
     videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
     videoAriaLabel="使用 ComfyUI 创建的 Grok Imagine 作品"
   />
-  <ModelCreationsSection client:load locale="zh-CN" />
+  <ModelCreationsSection items={featuredItems} client:load locale="zh-CN" />
   <AIModelsSection client:load locale="zh-CN" />
   <ProductShowcaseSection client:load locale="zh-CN" />
 </BaseLayout>

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

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+
+import { getTutorialPosterSrc } from './tutorial'
+
+describe('getTutorialPosterSrc', () => {
+  it('returns the explicit poster URL when provided', () => {
+    expect(
+      getTutorialPosterSrc({
+        order: 1,
+        tags: [],
+        title: 'T',
+        videoSrc: 'https://example.com/v.mp4',
+        poster: 'https://example.com/poster.jpg'
+      })
+    ).toBe('https://example.com/poster.jpg')
+  })
+
+  it('falls back to videoSrc#t=<posterTime> when poster is missing', () => {
+    expect(
+      getTutorialPosterSrc({
+        order: 1,
+        tags: [],
+        title: 'T',
+        videoSrc: 'https://example.com/v.mp4',
+        posterTime: 7
+      })
+    ).toBe('https://example.com/v.mp4#t=7')
+  })
+
+  it('uses the default poster time when neither poster nor posterTime is set', () => {
+    expect(
+      getTutorialPosterSrc({
+        order: 1,
+        tags: [],
+        title: 'T',
+        videoSrc: 'https://example.com/v.mp4'
+      })
+    ).toBe('https://example.com/v.mp4#t=1')
+  })
+})

apps/website/src/utils/tutorial.ts

@@ -0,0 +1,8 @@
+import type { LearningTutorial } from '../content.config'
+
+const DEFAULT_POSTER_TIME_SECONDS = 1
+
+export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
+  tutorial.poster
+    ? tutorial.poster
+    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`

browser_tests/assets/missing/missing_nodes_same_pack.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "TEST_MISSING_PACK_NODE_A",
+      "pos": [48, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_A",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 2,
+      "type": "TEST_MISSING_PACK_NODE_B",
+      "pos": [520, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_B",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/selectors.ts

@@ -45,6 +45,8 @@ export const TestIds = {
     errorOverlayMessages: 'error-overlay-messages',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    missingNodePackExpand: 'missing-node-pack-expand',
+    missingNodePackCount: 'missing-node-pack-count',
     errorCardFindOnGithub: 'error-card-find-on-github',
     errorCardCopy: 'error-card-copy',
     errorDialog: 'error-dialog',

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -4,7 +4,7 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
-test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
+test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.RightSidePanel.ShowErrorsTab',
@@ -12,27 +12,39 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
     )
   })
 
-  test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
-    ).toBeVisible()
-  })
-
-  test('Should show missing node packs group', async ({ comfyPage }) => {
+  test('Should show missing node pack card with guidance', async ({
+    comfyPage
+  }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     const missingNodeGroup = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodePacksGroup
     )
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
     await expect(missingNodeGroup).toBeVisible()
     await expect(
       missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
     ).toHaveText(/\S/)
   })
 
-  test('Should expand pack group to reveal node type names', async ({
+  test('Should show unknown pack node rows by default', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard.getByText('Unknown pack')).toBeVisible()
+    await expect(
+      missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' })
+    ).toBeVisible()
+  })
+
+  test('Should show subgraph missing node rows by default', async ({
     comfyPage
   }) => {
     await loadWorkflowAndOpenErrorsTab(
@@ -43,66 +55,72 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await expect(missingNodeCard).toBeVisible()
-
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
     await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+      missingNodeCard.getByRole('button', {
+        name: 'MISSING_NODE_TYPE_IN_SUBGRAPH'
+      })
     ).toBeVisible()
   })
 
-  test('Should collapse expanded pack group', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(
-      comfyPage,
-      'missing/missing_nodes_in_subgraph'
-    )
+  test('Should locate missing node from the row label', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
+    await comfyPage.canvasOps.pan({ x: -800, y: -800 })
+    const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()
 
-    await missingNodeCard
-      .getByRole('button', { name: /collapse/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeHidden()
+    await missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' }).click()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getOffset())
+      .not.toEqual(offsetBeforeLocate)
   })
 
-  test('Locate node button is visible for expanded pack nodes', async ({
+  test('Should toggle grouped pack nodes from chevron and title', async ({
     comfyPage
   }) => {
     await loadWorkflowAndOpenErrorsTab(
       comfyPage,
-      'missing/missing_nodes_in_subgraph'
+      'missing/missing_nodes_same_pack'
     )
 
     const missingNodeCard = comfyPage.page.getByTestId(
       TestIds.dialogs.missingNodeCard
     )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-
-    const locateButton = missingNodeCard.getByRole('button', {
-      name: /locate/i
+    const packTitle = missingNodeCard.getByRole('button', {
+      name: 'test-missing-node-pack'
     })
-    await expect(locateButton.first()).toBeVisible()
-    // TODO: Add navigation assertion once subgraph node ID deduplication
-    // timing is fixed. Currently, collectMissingNodes runs before
-    // configure(), so execution IDs use pre-remapped node IDs that don't
-    // match the runtime graph. See PR #9510 / #8762.
+    const expandButton = missingNodeCard.getByTestId(
+      TestIds.dialogs.missingNodePackExpand
+    )
+    const firstNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_A'
+    })
+    const secondNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_B'
+    })
+
+    await expect(packTitle).toBeVisible()
+    await expect(
+      missingNodeCard.getByTestId(TestIds.dialogs.missingNodePackCount)
+    ).toHaveText('2')
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await expandButton.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
+
+    await packTitle.click()
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await packTitle.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
   })
 })

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -425,6 +425,56 @@ test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
       }
     )
 
+    test(
+      'Refreshing a resolved promoted missing model clears the combo invalid state',
+      { tag: ['@widget', '@subgraph'] },
+      async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await loadWorkflowAndOpenErrorsTab(
+          comfyPage,
+          'missing/missing_model_promoted_widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        const missingModelGroup = comfyPage.page.getByTestId(
+          TestIds.dialogs.missingModelsGroup
+        )
+        await expect(missingModelGroup).toContainText(
+          /fake_model\.safetensors\s*\(1\)/
+        )
+
+        const promotedModelCombo = comfyPage.vueNodes
+          .getNodeByTitle('Subgraph with Promoted Missing Model')
+          .getByRole('combobox', { name: 'ckpt_name', exact: true })
+        await expect(promotedModelCombo).toHaveAttribute('aria-invalid', 'true')
+
+        const objectInfoRoute = /\/object_info$/
+        try {
+          await comfyPage.page.route(objectInfoRoute, async (route) => {
+            const response = await route.fetch()
+            const objectInfo = await response.json()
+            const ckptName =
+              objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
+            ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
+            await route.fulfill({ response, json: objectInfo })
+          })
+
+          await comfyPage.page
+            .getByTestId(TestIds.dialogs.missingModelRefresh)
+            .click()
+
+          await expect(missingModelGroup).toBeHidden()
+          await expect(promotedModelCombo).toBeVisible()
+          await expect(promotedModelCombo).not.toHaveAttribute(
+            'aria-invalid',
+            'true'
+          )
+        } finally {
+          await comfyPage.page.unroute(objectInfoRoute)
+        }
+      }
+    )
+
     test('Bypassing a subgraph hides interior errors, un-bypassing restores them', async ({
       comfyPage
     }) => {

browser_tests/tests/workspaceSwitcher.spec.ts

@@ -0,0 +1,101 @@
+import { expect } from '@playwright/test'
+
+import type { RemoteConfig } from '@/platform/remoteConfig/types'
+import type { WorkspaceWithRole } from '@/platform/workspace/api/workspaceApi'
+import type { WorkspaceTokenResponse } from '@/platform/workspace/stores/workspaceAuthStore'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+
+const PERSONAL_WORKSPACE_NAME = 'Personal Workspace'
+const LONG_WORKSPACE_NAME =
+  'Quantum Renaissance Collective for Hyperdimensional Latent Diffusion Research and Experimental Workflow Engineering'
+
+// text-sm rows render a single 20px line; a wrapped name is 40px+.
+const SINGLE_LINE_MAX_HEIGHT_PX = 28
+
+const mockRemoteConfig: RemoteConfig = { team_workspaces_enabled: true }
+
+const mockListWorkspacesResponse: { workspaces: WorkspaceWithRole[] } = {
+  workspaces: [
+    {
+      id: 'ws-personal',
+      name: PERSONAL_WORKSPACE_NAME,
+      type: 'personal',
+      created_at: '2026-01-01T00:00:00Z',
+      joined_at: '2026-01-01T00:00:00Z',
+      role: 'owner'
+    },
+    {
+      id: 'ws-team-long',
+      name: LONG_WORKSPACE_NAME,
+      type: 'team',
+      created_at: '2026-01-02T00:00:00Z',
+      joined_at: '2026-01-02T00:00:00Z',
+      role: 'member'
+    }
+  ]
+}
+
+const mockTokenResponse: WorkspaceTokenResponse = {
+  token: 'mock-workspace-token',
+  expires_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  workspace: {
+    id: 'ws-personal',
+    name: PERSONAL_WORKSPACE_NAME,
+    type: 'personal'
+  },
+  role: 'owner',
+  permissions: []
+}
+
+const test = comfyPageFixture.extend({
+  page: async ({ page }, use) => {
+    await page.route('**/api/features', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockRemoteConfig)
+      })
+    )
+
+    await page.route('**/api/workspaces', async (route) => {
+      if (route.request().method() !== 'GET') {
+        await route.fallback()
+        return
+      }
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockListWorkspacesResponse)
+      })
+    })
+
+    await page.route('**/api/auth/token', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(mockTokenResponse)
+      })
+    )
+
+    await use(page)
+  }
+})
+
+test.describe('Workspace switcher', { tag: '@cloud' }, () => {
+  test('renders a long team workspace name on a single line', async ({
+    comfyPage
+  }) => {
+    const page = comfyPage.page
+
+    await comfyPage.toast.closeToasts()
+    await page.getByRole('button', { name: 'Current user' }).click()
+    await page.getByText(PERSONAL_WORKSPACE_NAME).click()
+
+    const longName = page.getByText(LONG_WORKSPACE_NAME)
+    await expect(longName).toBeVisible()
+
+    const box = await longName.boundingBox()
+    expect(box).not.toBeNull()
+    expect(box!.height).toBeLessThan(SINGLE_LINE_MAX_HEIGHT_PX)
+  })
+})

eslint.config.ts

@@ -421,6 +421,15 @@ export default defineConfig([
     }
   },
 
+  // Astro virtual modules (astro:content, astro:assets, etc.) are not
+  // resolvable by the TS resolver — they are injected by the Astro build.
+  {
+    files: ['apps/website/**/*.{ts,vue,astro}'],
+    rules: {
+      'import-x/no-unresolved': ['error', { ignore: ['^astro:'] }]
+    }
+  },
+
   // i18n import enforcement
   // Vue components must use the useI18n() composable, not the global t/d/st/te
   {

package.json

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

public/assets/images/comfy-logo-single.svg

@@ -1,9 +1,9 @@
 <svg width="520" height="520" viewBox="0 0 520 520" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_227_285" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="520" height="520">
-<path d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z" fill="#EEFF30"/>
+<path d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z" fill="#F2FF59"/>
 </mask>
 <g mask="url(#mask0_227_285)">
-<rect y="0.751831" width="520" height="520" fill="#172DD7"/>
-<path d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z" fill="#F0FF41"/>
+<rect y="0.751831" width="520" height="520" fill="#211927"/>
+<path d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z" fill="#F2FF59"/>
 </g>
 </svg>

public/assets/sorted-custom-node-map.json

@@ -2,8 +2,8 @@
   "PreviewImage": 4314,
   "LoadImage": 3474,
   "CLIPTextEncode": 2435,
+  "SaveImageAdvanced": 1763,
   "SaveImage": 1762,
-  "SaveImageAdvanced": 1762,
   "VAEDecode": 1754,
   "KSampler": 1511,
   "CheckpointLoaderSimple": 1293,
@@ -14,6 +14,7 @@
   "UpscaleModelLoader": 629,
   "UNETLoader": 606,
   "VAELoader": 604,
+  "PreviewAny": 528,
   "ShowText|pysssss": 527.5526981023964,
   "ImageUpscaleWithModel": 523,
   "ControlNetApplyAdvanced": 513,
@@ -24,10 +25,12 @@
   "VHS_LoadVideo": 440,
   "ImpactSwitch": 349,
   "Reroute": 348,
+  "ResizeImageMaskNode": 337,
+  "ResizeAndPadImage": 336,
   "ImageResizeKJv2": 335,
+  "StringConcatenate": 326,
   "Text Concatenate": 325.7030402103206,
   "SaveVideo": 321,
-  "PreviewAny": 319,
   "KSamplerAdvanced": 304,
   "SDXLPromptStyler": 297.0913411304729,
   "Note": 291,
@@ -52,6 +55,7 @@
   "CLIPLoader": 202,
   "GeminiNode": 202,
   "KSampler (Efficient)": 194.01083622636423,
+  "RemoveBackground": 187,
   "ImageRemoveBackground+": 186,
   "IPAdapterModelLoader": 184,
   "PrimitiveInt": 183,
@@ -59,7 +63,9 @@
   "LoadVideo": 179,
   "Text Concatenate (JPS)": 175.98154639522735,
   "PrimitiveNode": 175,
-  "Text Multiline": 163.04749064680308,
+  "PrimitiveStringMultiline": 166,
+  "Text Multiline": 165,
+  "GetImageSize": 164,
   "GetImageSize+": 163,
   "ImageScaleToTotalPixels": 157,
   "String Literal": 150.11343489837878,
@@ -68,15 +74,14 @@
   "DownloadAndLoadFlorence2Model": 144,
   "LoadImageOutput": 143,
   "IPAdapterUnifiedLoader": 141,
-  "FluxGuidance": 133,
+  "BatchImagesNode": 134,
   "ImageBatchMulti": 133,
+  "FluxGuidance": 132,
   "ByteDanceSeedreamNode": 130,
   "CR Text Input Switch": 128.16473423438606,
   "IPAdapterAdvanced": 128,
   "If ANY execute A else B": 127.77279315110049,
   "GeminiImage2Node": 124,
-  "GetImageSize": 121,
-  "PrimitiveStringMultiline": 120,
   "IPAdapter": 118,
   "CreateVideo": 116,
   "ConditioningZeroOut": 115,
@@ -102,6 +107,7 @@
   "DepthAnythingPreprocessor": 100,
   "CR Apply LoRA Stack": 96.02556540496816,
   "Image Filter Adjustments": 95.24168323839699,
+  "ComfyMathExpression": 96,
   "SimpleMath+": 95,
   "GroundingDinoSAMSegment (segment anything)": 93.28197782196906,
   "Image Overlay": 93.28197782196906,
@@ -147,7 +153,6 @@
   "Image Resize": 63.494455492264656,
   "Automatic CFG": 63.494455492264656,
   "Canny": 63,
-  "StringConcatenate": 63,
   "DepthAnything_V2": 61,
   "ImageCrop+": 60,
   "ModelSamplingSD3": 59,
@@ -199,6 +204,7 @@
   "BNK_CLIPTextEncodeAdvanced": 45.857106744413365,
   "CR SDXL Aspect Ratio": 45.46516566112778,
   "LoadAudio": 45,
+  "ResolutionSelector": 45,
   "smZ CLIPTextEncode": 44.68128349455661,
   "Bus Node": 44.68128349455661,
   "PreviewTextNode": 44.68128349455661,
@@ -389,7 +395,6 @@
   "SD_4XUpscale_Conditioning": 21,
   "UltimateSDUpscaleCustomSample": 21,
   "StyleModelLoader": 21,
-  "ResizeAndPadImage": 21,
   "Text Random Prompt": 20.77287741413597,
   "INPAINT_VAEEncodeInpaintConditioning": 20.77287741413597,
   "BrushNet": 20.77287741413597,

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -71,12 +71,11 @@ vi.mock('./MissingPackGroupRow.vue', () => ({
     name: 'MissingPackGroupRow',
     template: `<div class="pack-row" data-testid="pack-row"
       :data-show-info-button="String(showInfoButton)"
-      :data-show-node-id-badge="String(showNodeIdBadge)"
     >
       <button data-testid="locate-node" @click="$emit('locate-node', group.nodeTypes[0]?.nodeId)" />
       <button data-testid="open-manager-info" @click="$emit('open-manager-info', group.packId)" />
     </div>`,
-    props: ['group', 'showInfoButton', 'showNodeIdBadge'],
+    props: ['group', 'showInfoButton'],
     emits: ['locate-node', 'open-manager-info']
   }
 }))
@@ -122,7 +121,6 @@ function makePackGroups(count = 2): MissingPackGroup[] {
 function renderCard(
   props: Partial<{
     showInfoButton: boolean
-    showNodeIdBadge: boolean
     missingPackGroups: MissingPackGroup[]
   }> = {}
 ) {
@@ -130,7 +128,6 @@ function renderCard(
   const result = render(MissingNodeCard, {
     props: {
       showInfoButton: false,
-      showNodeIdBadge: false,
       missingPackGroups: makePackGroups(),
       ...props
     },
@@ -169,12 +166,10 @@ describe('MissingNodeCard', () => {
 
     it('passes props correctly to MissingPackGroupRow children', () => {
       renderCard({
-        showInfoButton: true,
-        showNodeIdBadge: true
+        showInfoButton: true
       })
       const row = screen.getAllByTestId('pack-row')[0]
       expect(row.getAttribute('data-show-info-button')).toBe('true')
-      expect(row.getAttribute('data-show-node-id-badge')).toBe('true')
     })
   })
 
@@ -256,7 +251,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onLocateNode
         },
@@ -279,7 +273,6 @@ describe('MissingNodeCard', () => {
       render(MissingNodeCard, {
         props: {
           showInfoButton: false,
-          showNodeIdBadge: false,
           missingPackGroups: makePackGroups(),
           onOpenManagerInfo
         },

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -56,27 +56,29 @@
         >
       </template>
     </i18n-t>
-    <MissingPackGroupRow
-      v-for="group in missingPackGroups"
-      :key="group.packId ?? '__unknown__'"
-      :group="group"
-      :show-info-button="showInfoButton"
-      :show-node-id-badge="showNodeIdBadge"
-      @locate-node="emit('locateNode', $event)"
-      @open-manager-info="emit('openManagerInfo', $event)"
-    />
+    <div class="flex flex-col gap-1 overflow-hidden py-2">
+      <MissingPackGroupRow
+        v-for="group in missingPackGroups"
+        :key="group.packId ?? '__unknown__'"
+        :group="group"
+        :show-info-button="showInfoButton"
+        @locate-node="emit('locateNode', $event)"
+        @open-manager-info="emit('openManagerInfo', $event)"
+      />
+    </div>
   </div>
 
   <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
   <div v-if="shouldShowManagerButtons" class="px-4">
     <Button
       v-if="hasInstalledPacksPendingRestart"
-      variant="primary"
+      variant="secondary"
+      size="sm"
       :disabled="isRestarting"
-      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
+      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
       @click="applyChanges()"
     >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
       <i
         v-else
         aria-hidden="true"
@@ -105,9 +107,8 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
 
-const { showInfoButton, showNodeIdBadge, missingPackGroups } = defineProps<{
+const { showInfoButton, missingPackGroups } = defineProps<{
   showInfoButton: boolean
-  showNodeIdBadge: boolean
   missingPackGroups: MissingPackGroup[]
 }>()
 

src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts

@@ -61,16 +61,16 @@ const i18n = createI18n({
   messages: {
     en: {
       g: {
-        loading: 'Loading'
+        install: 'Install',
+        loading: 'Loading',
+        search: 'Search'
       },
       rightSidePanel: {
         locateNode: 'Locate node on canvas',
         missingNodePacks: {
           unknownPack: 'Unknown pack',
-          installNodePack: 'Install node pack',
           installing: 'Installing...',
           installed: 'Installed',
-          searchInManager: 'Search in Node Manager',
           viewInManager: 'View in Manager',
           collapse: 'Collapse',
           expand: 'Expand'
@@ -100,7 +100,6 @@ function renderRow(
   props: Partial<{
     group: MissingPackGroup
     showInfoButton: boolean
-    showNodeIdBadge: boolean
   }> = {}
 ) {
   const user = userEvent.setup()
@@ -110,7 +109,6 @@ function renderRow(
     props: {
       group: makeGroup(),
       showInfoButton: false,
-      showNodeIdBadge: false,
       onLocateNode,
       onOpenManagerInfo,
       ...props
@@ -118,7 +116,6 @@ function renderRow(
     global: {
       plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
       stubs: {
-        TransitionCollapse: { template: '<div><slot /></div>' },
         DotSpinner: {
           template: '<span role="status" aria-label="loading" />'
         }
@@ -156,9 +153,22 @@ describe('MissingPackGroupRow', () => {
       expect(screen.getByText(/Loading/)).toBeInTheDocument()
     })
 
+    it('does not render header locate while pack metadata is resolving', () => {
+      renderRow({
+        group: makeGroup({
+          isResolving: true,
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      expect(
+        screen.queryByRole('button', { name: 'Locate node on canvas' })
+      ).not.toBeInTheDocument()
+    })
+
     it('renders node count', () => {
       renderRow()
-      expect(screen.getByText(/\(2\)/)).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
     })
 
     it('renders count of 5 for 5 nodeTypes', () => {
@@ -171,38 +181,29 @@ describe('MissingPackGroupRow', () => {
           }))
         })
       })
-      expect(screen.getByText(/\(5\)/)).toBeInTheDocument()
-    })
-  })
-
-  describe('Expand / Collapse', () => {
-    it('starts collapsed', () => {
-      renderRow()
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
-    })
-
-    it('expands when chevron is clicked', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      expect(screen.getByText('MissingB')).toBeInTheDocument()
-    })
-
-    it('collapses when chevron is clicked again', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      await user.click(screen.getByRole('button', { name: 'Collapse' }))
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.getByText('5')).toBeInTheDocument()
     })
   })
 
   describe('Node Type List', () => {
-    async function expand(user: ReturnType<typeof userEvent.setup>) {
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-    }
+    it('hides multiple nodeTypes behind the expand control by default', () => {
+      renderRow()
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.queryByText('MissingB')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+    })
 
-    it('renders all nodeTypes when expanded', async () => {
+    it('shows unknown pack nodeTypes by default', () => {
+      renderRow({ group: makeGroup({ packId: null }) })
+
+      expect(
+        screen.getByRole('button', { name: 'Collapse' })
+      ).toBeInTheDocument()
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      expect(screen.getByText('MissingB')).toBeInTheDocument()
+    })
+
+    it('renders all nodeTypes after expanding', async () => {
       const { user } = renderRow({
         group: makeGroup({
           nodeTypes: [
@@ -212,40 +213,87 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
       expect(screen.getByText('NodeA')).toBeInTheDocument()
       expect(screen.getByText('NodeB')).toBeInTheDocument()
       expect(screen.getByText('NodeC')).toBeInTheDocument()
     })
 
-    it('shows nodeId badge when showNodeIdBadge is true', async () => {
-      const { user } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
-      expect(screen.getByText('#10')).toBeInTheDocument()
+    it('hides multiple nodeTypes again after collapsing', async () => {
+      const { user } = renderRow()
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
     })
 
-    it('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const { user } = renderRow({ showNodeIdBadge: false })
-      await expand(user)
-      expect(screen.queryByText('#10')).not.toBeInTheDocument()
+    it('hides a single nodeType without an expand control', () => {
+      renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '1', isReplaceable: false }]
+        })
+      })
+
+      expect(screen.queryByText('OnlyNode')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Expand' })
+      ).not.toBeInTheDocument()
     })
 
-    it('emits locateNode when Locate button is clicked', async () => {
-      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
+    it('emits locateNode when the pack label is clicked for one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(screen.getByRole('button', { name: 'my-pack' }))
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('moves locate to the header when there is one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(
+        screen.getByRole('button', { name: 'Locate node on canvas' })
+      )
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('emits locateNode when expanded child Locate button is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
       await user.click(
         screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
       )
+
       expect(onLocateNode).toHaveBeenCalledWith('10')
     })
 
-    it('does not show Locate for nodeType without nodeId', async () => {
-      const { user } = renderRow({
+    it('emits locateNode when node label is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      await user.click(screen.getByRole('button', { name: 'MissingA' }))
+      expect(onLocateNode).toHaveBeenCalledWith('10')
+    })
+
+    it('does not show Locate for nodeType without nodeId', () => {
+      renderRow({
         group: makeGroup({
           nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
         })
       })
-      await expand(user)
       expect(
         screen.queryByRole('button', { name: 'Locate node on canvas' })
       ).not.toBeInTheDocument()
@@ -253,7 +301,6 @@ describe('MissingPackGroupRow', () => {
 
     it('handles mixed nodeTypes with and without nodeId', async () => {
       const { user } = renderRow({
-        showNodeIdBadge: true,
         group: makeGroup({
           nodeTypes: [
             { type: 'WithId', nodeId: '100', isReplaceable: false },
@@ -261,7 +308,7 @@ describe('MissingPackGroupRow', () => {
           ]
         })
       })
-      await expand(user)
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
       expect(screen.getByText('WithId')).toBeInTheDocument()
       expect(screen.getByText('WithoutId')).toBeInTheDocument()
       expect(
@@ -274,21 +321,25 @@ describe('MissingPackGroupRow', () => {
     it('hides install UI when shouldShowManagerButtons is false', () => {
       mockShouldShowManagerButtons.value = false
       renderRow()
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
     it('hides install UI when packId is null', () => {
       mockShouldShowManagerButtons.value = true
       renderRow({ group: makeGroup({ packId: null }) })
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
     })
 
-    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
+    it('shows Search when packId exists but pack not in registry', () => {
       mockShouldShowManagerButtons.value = true
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = []
       renderRow()
-      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
     })
 
     it('shows "Installed" state when pack is installed', () => {
@@ -312,7 +363,9 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       renderRow()
-      expect(screen.getByText('Install node pack')).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Install' })
+      ).toBeInTheDocument()
     })
 
     it('calls installAllPacks when Install button is clicked', async () => {
@@ -320,9 +373,7 @@ describe('MissingPackGroupRow', () => {
       mockIsPackInstalled.mockReturnValue(false)
       mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
       const { user } = renderRow()
-      await user.click(
-        screen.getByRole('button', { name: /Install node pack/ })
-      )
+      await user.click(screen.getByRole('button', { name: 'Install' }))
       expect(mockInstallAllPacks).toHaveBeenCalledOnce()
     })
 
@@ -369,7 +420,7 @@ describe('MissingPackGroupRow', () => {
   describe('Edge Cases', () => {
     it('handles empty nodeTypes array', () => {
       renderRow({ group: makeGroup({ nodeTypes: [] }) })
-      expect(screen.getByText(/\(0\)/)).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
     })
   })
 })

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -1,187 +1,221 @@
 <template>
-  <div class="mb-2 flex w-full flex-col">
-    <!-- Pack header row: pack name + info + chevron -->
-    <div class="flex h-8 w-full items-center">
-      <!-- Warning icon for unknown packs -->
-      <i
-        v-if="group.packId === null && !group.isResolving"
-        class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
-      />
-      <p
-        class="min-w-0 flex-1 truncate text-sm font-medium"
-        :class="
-          group.packId === null && !group.isResolving
-            ? 'text-warning-background'
-            : 'text-foreground'
-        "
-      >
-        <span v-if="group.isResolving" class="text-muted-foreground italic">
-          {{ t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{
-            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
-          }}
-        </span>
-      </p>
+  <div class="mb-1 flex w-full flex-col gap-0.5 last:mb-0">
+    <div class="flex min-h-8 w-full items-center gap-1">
       <Button
-        v-if="showInfoButton && group.packId !== null"
+        v-if="hasMultipleNodeTypes"
+        data-testid="missing-node-pack-expand"
         variant="textonly"
-        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
-        @click="emit('openManagerInfo', group.packId ?? '')"
-      >
-        <i class="icon-[lucide--info] size-4" />
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        :class="
-          cn(
-            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
-            { 'rotate-180': expanded }
-          )
-        "
+        size="unset"
         :aria-label="
           expanded
             ? t('rightSidePanel.missingNodePacks.collapse')
             : t('rightSidePanel.missingNodePacks.expand')
         "
+        :aria-expanded="expanded"
+        :class="
+          cn(
+            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
+            expanded && 'rotate-90'
+          )
+        "
         @click="toggleExpand"
       >
         <i
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+          aria-hidden="true"
+          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
         />
       </Button>
-    </div>
-
-    <!-- Sub-labels: individual node instances, each with their own Locate button -->
-    <TransitionCollapse>
-      <div
-        v-if="expanded"
-        class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-2"
-      >
-        <div
-          v-for="nodeType in group.nodeTypes"
-          :key="getKey(nodeType)"
-          class="flex h-7 items-center"
-        >
-          <span
-            v-if="
-              showNodeIdBadge &&
-              typeof nodeType !== 'string' &&
-              nodeType.nodeId != null
+      <i
+        v-if="isUnknownPack"
+        class="icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
+      />
+      <span class="flex min-w-0 flex-1 items-center gap-2">
+        <span class="flex min-w-0 items-center gap-2.5">
+          <button
+            v-if="hasMultipleNodeTypes && !group.isResolving"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
             "
-            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+            :aria-expanded="expanded"
+            @click="toggleExpand"
           >
-            #{{ nodeType.nodeId }}
+            {{ packDisplayName }}
+          </button>
+          <button
+            v-else-if="primaryLocatableNodeType"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
+            "
+            @click="handleLocateNode(primaryLocatableNodeType)"
+          >
+            {{ packDisplayName }}
+          </button>
+          <span
+            v-else
+            class="min-w-0 truncate text-sm/relaxed font-normal"
+            :class="
+              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
+            "
+          >
+            <span v-if="group.isResolving" class="text-muted-foreground italic">
+              {{ t('g.loading') }}...
+            </span>
+            <span v-else>
+              {{ packDisplayName }}
+            </span>
           </span>
-          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-            {{ getLabel(nodeType) }}
-          </p>
           <Button
-            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            v-if="showInfoButton && group.packId !== null"
             variant="textonly"
             size="icon-sm"
-            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click="handleLocateNode(nodeType)"
+            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
+            @click="emit('openManagerInfo', group.packId ?? '')"
           >
-            <i class="icon-[lucide--locate] size-3" />
+            <i class="icon-[lucide--info] size-4" />
           </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
-    <div
-      v-if="
-        shouldShowManagerButtons &&
-        group.packId !== null &&
-        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
-      "
-      class="flex w-full items-start py-1"
-    >
-      <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        :disabled="
-          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
-        "
-        @click="handlePackInstallClick"
-      >
-        <DotSpinner
-          v-if="isInstalling"
-          duration="1s"
-          :size="12"
-          class="mr-1.5 shrink-0"
-        />
-        <i
-          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
-          class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
-        />
-        <i
-          v-else
-          class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
-        />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{
-            isInstalling
-              ? t('rightSidePanel.missingNodePacks.installing')
-              : comfyManagerStore.isPackInstalled(group.packId)
-                ? t('rightSidePanel.missingNodePacks.installed')
-                : t('rightSidePanel.missingNodePacks.installNodePack')
-          }}
+          <span
+            v-if="showNodeCount"
+            data-testid="missing-node-pack-count"
+            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+          >
+            {{ group.nodeTypes.length }}
+          </span>
         </span>
-      </Button>
-    </div>
-
-    <!-- Registry still loading: packId known but result not yet available -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex w-full items-start py-1"
-    >
+      </span>
+      <div v-if="showInstallAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          :disabled="isPackInstalled || isInstalling"
+          @click="handlePackInstallClick"
+        >
+          <DotSpinner
+            v-if="isInstalling"
+            duration="1s"
+            :size="12"
+            class="mr-1.5 shrink-0"
+          />
+          <span class="text-foreground min-w-0 truncate">
+            {{
+              isInstalling
+                ? t('rightSidePanel.missingNodePacks.installing')
+                : isPackInstalled
+                  ? t('rightSidePanel.missingNodePacks.installed')
+                  : t('g.install')
+            }}
+          </span>
+        </Button>
+      </div>
       <div
-        class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
+        v-else-if="showLoadingAction"
+        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
       >
         <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
         <span class="text-foreground min-w-0 truncate text-sm">
           {{ t('g.loading') }}
         </span>
       </div>
-    </div>
-
-    <!-- Search in Manager: fetch done but pack not found in registry -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex w-full items-start py-1"
-    >
+      <div v-else-if="showSearchAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          @click="
+            openManager({
+              initialTab: ManagerTab.All,
+              initialPackId: group.packId!
+            })
+          "
+        >
+          <span class="text-foreground min-w-0 truncate">
+            {{ t('g.search') }}
+          </span>
+        </Button>
+      </div>
       <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        @click="
-          openManager({
-            initialTab: ManagerTab.All,
-            initialPackId: group.packId!
-          })
-        "
+        v-if="primaryLocatableNodeType"
+        variant="textonly"
+        size="icon-sm"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        :aria-label="t('rightSidePanel.locateNode')"
+        @click="handleLocateNode(primaryLocatableNodeType)"
       >
-        <i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
-        </span>
+        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
       </Button>
     </div>
+
+    <TransitionCollapse>
+      <ul
+        v-if="showNodeTypeList"
+        :class="
+          cn(
+            'm-0 list-none space-y-1 p-0',
+            (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
+          )
+        "
+      >
+        <li
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="min-w-0"
+        >
+          <div class="flex min-w-0 items-center gap-2">
+            <span class="flex min-w-0 flex-1 items-center gap-1">
+              <button
+                v-if="isLocatableNodeType(nodeType)"
+                type="button"
+                :class="
+                  cn(
+                    packTextButtonClass,
+                    'text-muted-foreground hover:text-base-foreground'
+                  )
+                "
+                @click="handleLocateNode(nodeType)"
+              >
+                {{ getLabel(nodeType) }}
+              </button>
+              <span
+                v-else
+                class="text-sm/relaxed wrap-break-word text-muted-foreground"
+              >
+                {{ getLabel(nodeType) }}
+              </span>
+            </span>
+            <Button
+              v-if="isLocatableNodeType(nodeType)"
+              variant="textonly"
+              size="icon-sm"
+              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+              :aria-label="t('rightSidePanel.locateNode')"
+              @click="handleLocateNode(nodeType)"
+            >
+              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
+            </Button>
+          </div>
+        </li>
+      </ul>
+    </TransitionCollapse>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
@@ -193,10 +227,9 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 import type { MissingNodeType } from '@/types/comfy'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-const { group, showInfoButton, showNodeIdBadge } = defineProps<{
+const { group, showInfoButton } = defineProps<{
   group: MissingPackGroup
   showInfoButton: boolean
-  showNodeIdBadge: boolean
 }>()
 
 const emit = defineEmits<{
@@ -205,6 +238,10 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const expandedOverride = ref<boolean | null>(null)
+
+const packTextButtonClass =
+  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'
 
 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
@@ -219,17 +256,73 @@ const { isInstalling, installAllPacks } = usePackInstall(() =>
   nodePack.value ? [nodePack.value] : []
 )
 
+const isUnknownPack = computed(
+  () => group.packId === null && !group.isResolving
+)
+
+const packDisplayName = computed(() => {
+  if (group.packId === null) {
+    return t('rightSidePanel.missingNodePacks.unknownPack')
+  }
+  return nodePack.value?.name ?? group.packId
+})
+
+const isPackInstalled = computed(
+  () => group.packId !== null && comfyManagerStore.isPackInstalled(group.packId)
+)
+
+const showInstallAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    (nodePack.value !== null || isPackInstalled.value)
+)
+
+const showLoadingAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    isLoading.value
+)
+
+const showSearchAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    !showLoadingAction.value
+)
+
+const hasMultipleNodeTypes = computed(() => group.nodeTypes.length > 1)
+const showNodeCount = computed(() => group.nodeTypes.length !== 1)
+const expanded = computed(
+  () =>
+    expandedOverride.value ??
+    (isUnknownPack.value && hasMultipleNodeTypes.value)
+)
+const showNodeTypeList = computed(
+  () =>
+    (isUnknownPack.value && group.nodeTypes.length === 1) ||
+    (hasMultipleNodeTypes.value && expanded.value)
+)
+const primaryLocatableNodeType = computed(() => {
+  if (group.isResolving) return null
+  if (isUnknownPack.value) return null
+  if (group.nodeTypes.length !== 1) return null
+  const [nodeType] = group.nodeTypes
+  return isLocatableNodeType(nodeType) ? nodeType : null
+})
+
 function handlePackInstallClick() {
   if (!group.packId) return
-  if (!comfyManagerStore.isPackInstalled(group.packId)) {
+  if (!isPackInstalled.value) {
     void installAllPacks()
   }
 }
 
-const expanded = ref(false)
-
 function toggleExpand() {
-  expanded.value = !expanded.value
+  expandedOverride.value = !expanded.value
 }
 
 function getKey(nodeType: MissingNodeType): string {
@@ -241,10 +334,14 @@ function getLabel(nodeType: MissingNodeType): string {
   return typeof nodeType === 'string' ? nodeType : nodeType.type
 }
 
+function isLocatableNodeType(
+  nodeType: MissingNodeType
+): nodeType is Exclude<MissingNodeType, string> & { nodeId: string | number } {
+  return typeof nodeType !== 'string' && nodeType.nodeId != null
+}
+
 function handleLocateNode(nodeType: MissingNodeType) {
-  if (typeof nodeType === 'string') return
-  if (nodeType.nodeId != null) {
-    emit('locateNode', String(nodeType.nodeId))
-  }
+  if (!isLocatableNodeType(nodeType)) return
+  emit('locateNode', String(nodeType.nodeId))
 }
 </script>

src/components/rightSidePanel/errors/TabErrors.vue

@@ -148,7 +148,6 @@
           <MissingNodeCard
             v-if="group.type === 'missing_node'"
             :show-info-button="shouldShowManagerButtons"
-            :show-node-id-badge="showNodeIdBadge"
             :missing-pack-groups="missingPackGroups"
             @locate-node="handleLocateMissingNode"
             @open-manager-info="handleOpenManagerInfo"

src/locales/ar/main.json

@@ -951,6 +951,7 @@
     "missingErrors": {
       "missing_media": {
         "displayMessage": "مدخل وسائط مطلوب لم يتم تحديد ملف له.",
+        "itemLabel": "{nodeName} - {inputName}",
         "toastMessageMany": "يرجى تحديد مدخلات الوسائط المفقودة قبل تشغيل سير العمل هذا.",
         "toastMessageWithNode": "{nodeName} يفتقد ملف وسائط مطلوب.",
         "toastTitleMany": "مدخلات الوسائط المفقودة",
@@ -2771,6 +2772,7 @@
     "qwen": "تشي وين",
     "samplers": "أجهزة التجميع",
     "sampling": "التجميع",
+    "scail": "scail",
     "schedulers": "الجدولة",
     "scheduling": "الجدولة",
     "sd3": "sd3",
@@ -3050,21 +3052,7 @@
     "locateNode": "تحديد موقع العقدة على اللوحة",
     "locateNodeFor": "تحديد موقع {item}",
     "missingMedia": {
-      "audio": "الصوتيات",
-      "cancelSelection": "إلغاء الاختيار",
-      "collapseNodes": "إخفاء العقد المشار إليها",
-      "confirmSelection": "تأكيد الاختيار",
-      "expandNodes": "عرض العقد المشار إليها",
-      "image": "الصور",
-      "locateNode": "تحديد موقع العقدة",
-      "missingMediaTitle": "المدخلات المفقودة",
-      "or": "أو",
-      "selectedFromLibrary": "تم الاختيار من المكتبة",
-      "uploadFile": "رفع {type}",
-      "uploaded": "تم الرفع",
-      "uploading": "جاري الرفع...",
-      "useFromLibrary": "استخدام من المكتبة",
-      "video": "الفيديوهات"
+      "missingMediaTitle": "المدخلات المفقودة"
     },
     "missingModels": {
       "alreadyExistsInCategory": "هذا النموذج موجود بالفعل في \"{category}\"",

src/locales/ar/nodeDefs.json

@@ -468,6 +468,62 @@
       }
     }
   },
+  "BerniniConditioning": {
+    "description": "عقدة التكييف لـ Bernini لتكييف الفيديو/الصورة في السياق. يمكن استخدامها للمهام التالية: t2v (نص إلى فيديو)، v2v (فيديو إلى فيديو)، rv2v (تحرير فيديو موجه بالمرجع)، r2v (مرجع إلى فيديو)، ads2v (إدراج صورة/فيديو في فيديو). يتم ترميز الصور المرجعية المدرجة كرموز في السياق (r2v، rv2v) بشكل مستقل بنسبة العرض إلى الارتفاع الأصلية الخاصة بها (يتم تحديد الحافة الطويلة عند ref_max_size).",
+    "display_name": "Bernini Conditioning",
+    "inputs": {
+      "batch_size": {
+        "name": "حجم الدفعة"
+      },
+      "height": {
+        "name": "الارتفاع"
+      },
+      "length": {
+        "name": "الطول"
+      },
+      "negative": {
+        "name": "negative"
+      },
+      "positive": {
+        "name": "positive"
+      },
+      "ref_max_size": {
+        "name": "الحد الأقصى لحجم المرجع",
+        "tooltip": "أقصى حجم للحافة الطويلة لـ reference_video و reference_images. يتم تغيير الحجم مع الحفاظ على نسبة العرض إلى الارتفاع وتثبيته على 16 بكسل."
+      },
+      "reference_images": {
+        "name": "صور مرجعية"
+      },
+      "reference_video": {
+        "name": "فيديو المرجع",
+        "tooltip": "فيديو لإدراجه في فيديو المصدر (ads2v)."
+      },
+      "source_video": {
+        "name": "فيديو المصدر",
+        "tooltip": "فيديو المصدر لتحريره أو إعادة تصميمه (v2v، rv2v). يتم تغيير حجمه إلى العرض/الارتفاع وتقصيره إلى الطول."
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "العرض"
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": null
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": null
+      },
+      "2": {
+        "name": "latent",
+        "tooltip": null
+      }
+    }
+  },
   "BetaSamplingScheduler": {
     "display_name": "جدولة أخذ عينات بيتا",
     "inputs": {
@@ -15904,6 +15960,41 @@
       }
     }
   },
+  "SCAIL2ColoredMask": {
+    "display_name": "إنشاء قناع ملون SCAIL-2",
+    "inputs": {
+      "driving_track_data": {
+        "name": "بيانات تتبع القيادة",
+        "tooltip": "مسار SAM3 لفيديو وضعية القيادة. سيتم عرضه في مخرج pose_video_mask."
+      },
+      "object_indices": {
+        "name": "مؤشرات الكائنات",
+        "tooltip": "قائمة مفصولة بفواصل لمؤشرات الأشخاص المطلوب تضمينهم (مثال: '0,2,3'). تطبق على كل من أقنعة الفيديو المرجعي وفيديو الوضعية. فارغ = الكل."
+      },
+      "ref_track_data": {
+        "name": "بيانات تتبع المرجع",
+        "tooltip": "مسار SAM3 للصورة المرجعية."
+      },
+      "replacement_mode": {
+        "name": "وضع الاستبدال",
+        "tooltip": "False = mask_video بخلفية سوداء (وضع التحريك). True = خلفية بيضاء (وضع الاستبدال). قم بتعيين نفس وضع الاستبدال في WanSCAILToVideo. reference_image_mask دائمًا بخلفية سوداء بغض النظر."
+      },
+      "sort_by": {
+        "name": "ترتيب حسب",
+        "tooltip": "ترتيب تخصيص ألوان لوحة الألوان للكائنات المتتبعة (يطبق على كل من الفيديو المرجعي وفيديو الوضعية بحيث يحتفظ كل هوية بنفس اللون). left_to_right = الكائن الأكثر يسارًا (حسب مركز الإطار الأول) يحصل على اللون الأول؛ area = أكبر كائن (حسب مساحة القناع في الإطار الأول) يحصل على اللون الأول؛ none = الاحتفاظ بترتيب SAM3."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pose_video_mask",
+        "tooltip": null
+      },
+      "1": {
+        "name": "reference_image_mask",
+        "tooltip": null
+      }
+    }
+  },
   "SDPoseDrawKeypoints": {
     "display_name": "SDPoseDrawKeypoints",
     "inputs": {
@@ -22338,7 +22429,8 @@
         "name": "حجم الدفعة"
       },
       "clip_vision_output": {
-        "name": "clip_vision_output"
+        "name": "clip_vision_output",
+        "tooltip": "ميزات CLIP للرؤية من أجل التكييف. تم تدريب النموذج مع تغيير الحجم حسب نسبة العرض إلى الارتفاع."
       },
       "height": {
         "name": "الارتفاع"
@@ -22365,15 +22457,40 @@
         "name": "فيديو الوضعية",
         "tooltip": "الفيديو المستخدم لتكييف الوضعية. سيتم تقليل دقته إلى نصف دقة الفيديو الرئيسي."
       },
+      "pose_video_mask": {
+        "name": "pose_video_mask",
+        "tooltip": "خاص بـ SCAIL-2 فقط. فيديو قناع SAM3 ملون لكل هوية بنفس دقة pose_video."
+      },
       "positive": {
         "name": "إيجابي"
       },
+      "previous_frame_count": {
+        "name": "previous_frame_count",
+        "tooltip": "عدد الإطارات النهائية من previous_frames لاستخدامها كمرساة. تم تدريب SCAIL-2 على ٥ (أجزاء من ٨١ إطارًا، خطوة ٧٦ إطارًا)."
+      },
+      "previous_frames": {
+        "name": "previous_frames",
+        "tooltip": "خاص بـ SCAIL-2 فقط. المخرجات الكاملة المفككة للجزء السابق. يتم استخدام فقط آخر previous_frame_count كمرساة للتمديد."
+      },
       "reference_image": {
-        "name": "صورة مرجعية"
+        "name": "صورة مرجعية",
+        "tooltip": "صورة مرجعية، إذا كان هناك عدة مراجع، اجمعها جميعًا في صورة واحدة."
+      },
+      "reference_image_mask": {
+        "name": "reference_image_mask",
+        "tooltip": "خاص بـ SCAIL-2 فقط. قناع مرجعي ملون بنفس دقة reference_image."
+      },
+      "replacement_mode": {
+        "name": "replacement_mode",
+        "tooltip": "خاص بـ SCAIL-2 فقط. خطأ = وضع التحريك (يجب أن يكون pose_video_mask بخلفية سوداء). صحيح = وضع الاستبدال (يجب أن يكون pose_video_mask بخلفية بيضاء)."
       },
       "vae": {
         "name": "vae"
       },
+      "video_frame_offset": {
+        "name": "video_frame_offset",
+        "tooltip": "إزاحة الإطار التراكمية التي يبدأ منها هذا الجزء من الفيديو. اربطها بمخرج video_frame_offset للجزء السابق."
+      },
       "width": {
         "name": "العرض"
       }
@@ -22390,6 +22507,10 @@
       "2": {
         "name": "كامن",
         "tooltip": "فضاء كامن فارغ بحجم التوليد."
+      },
+      "3": {
+        "name": "video_frame_offset",
+        "tooltip": "إزاحة معدلة + الطول. اربطها بالجزء التالي."
       }
     }
   },

src/locales/en/main.json

@@ -1759,6 +1759,7 @@
     "Reve": "Reve",
     "Rodin": "Rodin",
     "Runway": "Runway",
+    "scail": "scail",
     "upscale_diffusion": "upscale_diffusion",
     "clip": "clip",
     "Sonilo": "Sonilo",
@@ -2422,6 +2423,7 @@
     "member": "member",
     "usdPerMonth": "USD / mo",
     "usdPerMonthPerMember": "USD / mo / member",
+    "creditSliderSave": "Save {percent}% ({amount})",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
@@ -3628,12 +3630,10 @@
       "unsupportedTitle": "Unsupported Node Packs",
       "ossManagerDisabledHint": "To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.",
       "installAll": "Install All",
-      "installNodePack": "Install node pack",
       "unknownPack": "Unknown pack",
       "installing": "Installing...",
       "installed": "Installed",
       "applyChanges": "Apply Changes",
-      "searchInManager": "Search in Node Manager",
       "viewInManager": "View in Manager",
       "collapse": "Collapse",
       "expand": "Expand"

src/locales/en/nodeDefs.json

@@ -468,6 +468,62 @@
       }
     }
   },
+  "BerniniConditioning": {
+    "display_name": "Bernini Conditioning",
+    "description": "Conditioning node for Bernini in-context video/image conditioning. It can be used for the following tasks: t2v (text-to-video), v2v (video-to-video), rv2v (reference-guided video editing), r2v (reference-to-video), ads2v (insert image/video into video).Reference images injected as in-context tokens (r2v, rv2v) are encoded independently at their own native aspect ratio (long edge capped at ref_max_size)",
+    "inputs": {
+      "positive": {
+        "name": "positive"
+      },
+      "negative": {
+        "name": "negative"
+      },
+      "vae": {
+        "name": "vae"
+      },
+      "width": {
+        "name": "width"
+      },
+      "height": {
+        "name": "height"
+      },
+      "length": {
+        "name": "length"
+      },
+      "batch_size": {
+        "name": "batch_size"
+      },
+      "source_video": {
+        "name": "source_video",
+        "tooltip": "Source video to edit or restyle (v2v, rv2v). Resized to width/height and trimmed to length."
+      },
+      "reference_video": {
+        "name": "reference_video",
+        "tooltip": "Video to insert into the source video (ads2v)."
+      },
+      "reference_images": {
+        "name": "reference_images"
+      },
+      "ref_max_size": {
+        "name": "ref_max_size",
+        "tooltip": "Max size for the long edge of reference_video and reference_images. Resized with preserved aspect ratio and snapped to 16px."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "positive",
+        "tooltip": null
+      },
+      "1": {
+        "name": "negative",
+        "tooltip": null
+      },
+      "2": {
+        "name": "latent",
+        "tooltip": null
+      }
+    }
+  },
   "BetaSamplingScheduler": {
     "display_name": "BetaSamplingScheduler",
     "inputs": {
@@ -14884,13 +14940,13 @@
     "display_name": "Remove Background",
     "description": "Generates a foreground mask to remove the background from an image using a background removal model.",
     "inputs": {
-      "image": {
-        "name": "image",
-        "tooltip": "Input image to remove the background from"
-      },
       "bg_removal_model": {
         "name": "bg_removal_model",
         "tooltip": "Background removal model used to generate the mask"
+      },
+      "image": {
+        "name": "image",
+        "tooltip": "Input image to remove the background from"
       }
     },
     "outputs": {
@@ -16644,6 +16700,41 @@
       }
     }
   },
+  "SCAIL2ColoredMask": {
+    "display_name": "Create SCAIL-2 Colored Mask",
+    "inputs": {
+      "driving_track_data": {
+        "name": "driving_track_data",
+        "tooltip": "SAM3 track of the driving pose video. Will be rendered into the pose_video_mask output."
+      },
+      "object_indices": {
+        "name": "object_indices",
+        "tooltip": "Comma-separated list of person indices to include (e.g. '0,2,3'). Applied to both reference and pose video masks. Empty = all."
+      },
+      "sort_by": {
+        "name": "sort_by",
+        "tooltip": "Order in which palette colors are assigned to the tracked objects (applied to both reference and pose video so each identity keeps the same color). left_to_right = leftmost object (by first-frame centroid) gets the first color; area = biggest object (by first-frame mask area) gets the first color; none = keep SAM3's order."
+      },
+      "replacement_mode": {
+        "name": "replacement_mode",
+        "tooltip": "False = mask_video has black bg (Animation Mode). True = white bg (Replacement Mode). Set the matching replacement_mode on WanSCAILToVideo. reference_image_mask is always black-bg regardless."
+      },
+      "ref_track_data": {
+        "name": "ref_track_data",
+        "tooltip": "SAM3 track of the reference image."
+      }
+    },
+    "outputs": {
+      "0": {
+        "name": "pose_video_mask",
+        "tooltip": null
+      },
+      "1": {
+        "name": "reference_image_mask",
+        "tooltip": null
+      }
+    }
+  },
   "ScaleROPE": {
     "display_name": "ScaleROPE",
     "description": "Scale and shift the ROPE of the model.",
@@ -22400,21 +22491,47 @@
       },
       "pose_start": {
         "name": "pose_start",
-        "tooltip": "Start step to use pose conditioning."
+        "tooltip": "Start step of the pose conditioning."
       },
       "pose_end": {
         "name": "pose_end",
-        "tooltip": "End step to use pose conditioning."
+        "tooltip": "End step of the pose conditioning."
       },
-      "clip_vision_output": {
-        "name": "clip_vision_output"
+      "video_frame_offset": {
+        "name": "video_frame_offset",
+        "tooltip": "Cumulative output frame this chunk begins at. Wire from the previous chunk's video_frame_offset output."
       },
-      "reference_image": {
-        "name": "reference_image"
+      "previous_frame_count": {
+        "name": "previous_frame_count",
+        "tooltip": "Tail frames of previous_frames to anchor. SCAIL-2 trained at 5 (81-frame chunks, 76-frame step)."
       },
       "pose_video": {
         "name": "pose_video",
         "tooltip": "Video used for pose conditioning. Will be downscaled to half the resolution of the main video."
+      },
+      "pose_video_mask": {
+        "name": "pose_video_mask",
+        "tooltip": "SCAIL-2 only. Colored per-identity SAM3 mask video at the same resolution as pose_video."
+      },
+      "replacement_mode": {
+        "name": "replacement_mode",
+        "tooltip": "SCAIL-2 only. False = Animation Mode (pose_video_mask should have black background). True = Replacement Mode (pose_video_mask should have white background)."
+      },
+      "reference_image": {
+        "name": "reference_image",
+        "tooltip": "Reference image, for multiple references composite all on single image."
+      },
+      "reference_image_mask": {
+        "name": "reference_image_mask",
+        "tooltip": "SCAIL-2 only. Colored reference mask at the same resolution as reference_image."
+      },
+      "clip_vision_output": {
+        "name": "clip_vision_output",
+        "tooltip": "CLIP vision features for conditioning. Model is trained with stretch resize to aspect ratio."
+      },
+      "previous_frames": {
+        "name": "previous_frames",
+        "tooltip": "SCAIL-2 only. Full decoded output of the previous chunk. Only the last previous_frame_count are used as the extension anchor."
       }
     },
     "outputs": {
@@ -22429,6 +22546,10 @@
       "2": {
         "name": "latent",
         "tooltip": "Empty latent of the generation size."
+      },
+      "3": {
+        "name": "video_frame_offset",
+        "tooltip": "Adjusted offset + length. Wire into the next chunk."
       }
     }
   },