fix: drop unused LearningTutorial export to satisfy knip

Add learning page in en + zh-CN with hero, featured workflow, shared
call-to-action and events sections. Introduces reusable
CallToActionSection and EventsSection in common/ for use on other pages.

.claude/settings.json

@@ -32,12 +32,12 @@
           {
             "type": "command",
             "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",
             "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",

.claude/skills/backport-management/reference/execution.md

@@ -139,13 +139,13 @@ for PR in ${CONFLICT_PRS[@]}; do
   # ───────────────────────────────────────────────────────────────────────
 
   # Per-PR validation BEFORE push (catches issues earlier than wave verification).
-  # Guard each targeted command against empty file lists — running `pnpm test:unit -- run`
-  # with no arg matchers would run the full suite, and `pnpm exec eslint` with no args errors.
+  # Guard each targeted command against empty file lists — running `pnpm test:unit`
+  # with no path filter would run the full suite, and `pnpm exec eslint` with no args errors.
   pnpm typecheck
 
   mapfile -t TEST_FILES < <(git diff --name-only HEAD~1 | grep -E '\.test\.ts$' || true)
   if [ ${#TEST_FILES[@]} -gt 0 ]; then
-    pnpm test:unit -- run "${TEST_FILES[@]}"
+    pnpm test:unit "${TEST_FILES[@]}"
   else
     echo "No changed test files — skipping targeted unit tests"
   fi
@@ -368,7 +368,7 @@ Cherry-picked from upstream merge commit `SHORT_SHA`.
 ## Validation
 
 - `pnpm typecheck` ✅
-- `pnpm test:unit -- run <targeted suites>` ✅ (N/N passing)
+- `pnpm test:unit <targeted suites>` ✅ (N/N passing)
 - `pnpm exec eslint <changed files>` ✅ (0 errors)
 - `pnpm exec oxfmt --check` ✅ (clean)
 

.claude/skills/red-green-fix/SKILL.md

@@ -95,7 +95,7 @@ Run the test locally before pushing to confirm it fails for the right reason:
 
 ```bash
 # Vitest
-pnpm test:unit -- <test-file>
+pnpm test:unit <test-file>
 
 # Playwright
 pnpm test:browser:local -- --grep "<test name>"

.claude/skills/red-green-fix/reference/testing-anti-patterns.md

@@ -169,7 +169,7 @@ expect(result).toBeDefined() // This proves nothing
 
 ```bash
 # Instead of fixing the code, just updating the snapshot to match buggy output
-pnpm test:unit -- --update
+pnpm test:unit --update
 ```
 
 If a snapshot needs updating, the fix should change the code behavior, not the expected output.

.gitignore

@@ -19,6 +19,7 @@ yarn.lock
 
 node_modules
 .pnpm-store
+.nx
 dist
 dist-ssr
 *.local

.nvmrc

@@ -1 +1 @@
-24
+25

apps/website/public/favicon-dark.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" rx="12" fill="#F0EFED"/>
+<path d="M31.0126 30.4797C31.0576 30.3275 31.0822 30.1671 31.0822 29.9985C31.0822 29.0649 30.3294 28.3081 29.4006 28.3081H21.8643C21.4593 28.3122 21.1279 27.9832 21.1279 27.576C21.1279 27.5019 21.1401 27.432 21.1565 27.3662L23.1858 20.259C23.2717 19.9465 23.5581 19.7161 23.8936 19.7161L31.4586 19.7079C33.0542 19.7079 34.4003 18.6262 34.8053 17.1497L35.9427 13.1889C35.9795 13.0491 36 12.8969 36 12.7447C36 11.8152 35.2513 11.0625 34.3266 11.0625H25.1742C23.5868 11.0625 22.2448 12.136 21.8316 13.5961L21.0624 16.2983C20.9724 16.6068 20.6901 16.833 20.3546 16.833H18.1575C16.5823 16.833 15.2526 17.8859 14.8271 19.3295L12.0614 29.0402C12.0205 29.1841 12 29.3404 12 29.4967C12 30.4304 12.7528 31.1871 13.6816 31.1871H15.8418C16.2468 31.1871 16.5782 31.5162 16.5782 31.9275C16.5782 31.9974 16.5701 32.0673 16.5496 32.1331L15.7845 34.8107C15.7477 34.9546 15.7232 35.1027 15.7232 35.2549C15.7232 36.1844 16.4719 36.937 17.3965 36.937L26.553 36.9288C28.1446 36.9288 29.4865 35.8512 29.8957 34.3829L31.0085 30.4838L31.0126 30.4797Z" fill="#211927"/>
+</svg>

apps/website/public/favicon-light.svg

@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3062_2148)">
+<path d="M36.8451 0H11.1549C4.99423 0 0 4.99423 0 11.1549V36.8451C0 43.0058 4.99423 48 11.1549 48H36.8451C43.0058 48 48 43.0058 48 36.8451V11.1549C48 4.99423 43.0058 0 36.8451 0Z" fill="#211927"/>
+<path d="M31.0126 30.48C31.0576 30.3278 31.0822 30.1674 31.0822 29.9987C31.0822 29.0651 30.3294 28.3083 29.4006 28.3083H21.8643C21.4592 28.3124 21.1278 27.9834 21.1278 27.5762C21.1278 27.5022 21.1401 27.4323 21.1565 27.3665L23.1858 20.2593C23.2718 19.9467 23.5581 19.7164 23.8936 19.7164L31.4586 19.7082C33.0542 19.7082 34.4001 18.6264 34.8054 17.1499L35.9429 13.1891C35.9794 13.0493 36 12.8971 36 12.7449C36 11.8154 35.2513 11.0627 34.3268 11.0627H25.1742C23.5868 11.0627 22.2448 12.1362 21.8316 13.5963L21.0624 16.2985C20.9724 16.607 20.6901 16.8332 20.3546 16.8332H18.1575C16.5823 16.8332 15.2526 17.8861 14.8271 19.3298L12.0614 29.0404C12.0205 29.1844 12 29.3407 12 29.4969C12 30.4306 12.7528 31.1874 13.6816 31.1874H15.8418C16.2469 31.1874 16.5783 31.5164 16.5783 31.9277C16.5783 31.9976 16.5701 32.0675 16.5496 32.1334L15.7845 34.8109C15.7477 34.9549 15.7231 35.1029 15.7231 35.255C15.7231 36.1846 16.4719 36.9374 17.3965 36.9374L26.553 36.929C28.1446 36.929 29.4865 35.8513 29.8957 34.3833L31.0085 30.4841L31.0126 30.48Z" fill="#F2FF59"/>
+</g>
+<defs>
+<clipPath id="clip0_3062_2148">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/website/public/favicon.svg

@@ -1,14 +0,0 @@
-<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    .bg { fill: #000000; }
-    .fg { fill: #F2FF59; }
-    @media (prefers-color-scheme: dark) {
-      .bg { fill: #F2FF59; }
-      .fg { fill: #000000; }
-    }
-  </style>
-  <circle class="bg" cx="24" cy="24" r="24"/>
-  <g transform="translate(7.8 6.72) scale(0.72)">
-    <path class="fg" d="M35.6487 36.021C35.733 35.7387 35.7791 35.4411 35.7791 35.1283C35.7791 33.3963 34.3675 31.9924 32.6262 31.9924H18.4956C17.7361 32 17.1147 31.3896 17.1147 30.6342C17.1147 30.4969 17.1377 30.3672 17.1684 30.2451L20.9734 17.0606C21.1345 16.4807 21.6715 16.0534 22.3005 16.0534L36.4848 16.0382C39.4766 16.0382 42.0005 14.0315 42.76 11.2923L44.8926 3.94468C44.9616 3.68526 45 3.40296 45 3.12065C45 1.39628 43.5961 0 41.8624 0L24.7017 0C21.7252 0 19.209 1.99142 18.4342 4.70005L16.992 9.71292C16.8232 10.2852 16.2939 10.7048 15.6648 10.7048H11.5453C8.59189 10.7048 6.0987 12.6581 5.30089 15.3362L0.11507 33.3505C0.0383566 33.6175 0 33.9075 0 34.1974C0 35.9294 1.41152 37.3333 3.15292 37.3333H7.20338C7.96284 37.3333 8.58421 37.9437 8.58421 38.7067C8.58421 38.8364 8.56887 38.9661 8.53051 39.0882L7.09598 44.0553C7.02694 44.3224 6.98091 44.597 6.98091 44.8794C6.98091 46.6037 8.38476 48 10.1185 48L27.2869 47.9847C30.2711 47.9847 32.7873 45.9857 33.5544 43.2618L35.641 36.0286L35.6487 36.021Z"/>
-  </g>
-</svg>

apps/website/src/components/about/CareersSection.vue

@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <GlassCard
       class="mx-auto mt-20 flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >

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

@@ -74,7 +74,7 @@ useHeroAnimation({
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
       <VideoPlayer
         src="https://media.comfy.org/website/about/co-founders.webm"
         poster="https://media.comfy.org/website/about/co-founders-poster.webp"

apps/website/src/components/about/OurValuesSection.vue

@@ -33,7 +33,7 @@ const values: {
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto max-w-5xl text-center">
       <SectionLabel>
         {{ t('about.values.label', locale) }}

apps/website/src/components/about/StorySection.vue

@@ -16,7 +16,7 @@ const investors = [
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <div class="mx-auto text-center">
       <span
         class="text-primary-comfy-yellow text-xs font-semibold tracking-widest uppercase"

apps/website/src/components/about/ValuesSection.vue

@@ -14,7 +14,7 @@ const reasons: TranslationKey[] = [
 </script>
 
 <template>
-  <section class="px-6 py-24 lg:px-20 lg:py-32">
+  <section class="max-w-9xl mx-auto px-6 py-24 lg:px-20 lg:py-32">
     <WireNodeLayout :reasons right-card-padding="p-6" :locale="locale">
       <template #right-card>
         <img

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Locale, TranslationKey } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from './BrandButton.vue'
+
+const {
+  locale = 'en',
+  headingKey,
+  primaryLabelKey,
+  primaryHref,
+  secondaryLabelKey,
+  secondaryHref
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  primaryLabelKey: TranslationKey
+  primaryHref?: string
+  secondaryLabelKey?: TranslationKey
+  secondaryHref?: string
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
+    <div class="flex flex-col items-center text-center">
+      <h2
+        class="text-primary-comfy-canvas max-w-5xl text-3xl font-light tracking-tight lg:text-5xl"
+      >
+        {{ t(headingKey, locale) }}
+      </h2>
+      <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
+        <BrandButton
+          :href="primaryHref"
+          variant="solid"
+          size="xs"
+          class="uppercase"
+        >
+          {{ t(primaryLabelKey, locale) }}
+        </BrandButton>
+        <BrandButton
+          v-if="secondaryLabelKey"
+          :href="secondaryHref"
+          variant="outline"
+          size="xs"
+          class="uppercase"
+        >
+          {{ t(secondaryLabelKey, locale) }}
+        </BrandButton>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type {
+  Locale,
+  LocalizedText,
+  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,
+  descriptionKey,
+  notifyLabelKey,
+  notifyHref,
+  events
+} = defineProps<{
+  locale?: Locale
+  headingKey: TranslationKey
+  descriptionKey: TranslationKey
+  notifyLabelKey: TranslationKey
+  notifyHref?: string
+  events: readonly EventItem[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-12">
+    <div
+      class="bg-transparency-white-t4 rounded-4xl px-6 py-12 lg:px-16 lg:py-20"
+    >
+      <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"
+          >
+            {{ t(headingKey, locale) }}
+          </h2>
+          <p
+            class="text-primary-comfy-canvas max-w-sm text-sm/relaxed lg:text-base"
+          >
+            {{ t(descriptionKey, locale) }}
+          </p>
+          <div>
+            <BrandButton
+              :href="notifyHref"
+              variant="outline"
+              size="xs"
+              class="uppercase"
+            >
+              {{ t(notifyLabelKey, locale) }}
+            </BrandButton>
+          </div>
+        </div>
+
+        <div class="flex flex-col">
+          <a
+            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"
+          >
+            <span
+              class="text-primary-comfy-canvas shrink-0 text-sm font-medium"
+            >
+              {{ event.label[locale] }}
+            </span>
+            <span class="text-primary-warm-gray flex-1 text-sm">
+              {{ event.title[locale] }}
+            </span>
+            <span
+              class="text-primary-comfy-yellow flex shrink-0 items-center gap-2 text-sm"
+            >
+              {{ event.cta[locale] }}
+              <svg
+                class="size-4 transition-transform group-hover:translate-x-0.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -41,7 +41,7 @@ function toggle(index: number) {
 </script>
 
 <template>
-  <section class="px-4 py-24 md:px-20 md:py-40">
+  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
     <div class="flex flex-col gap-6 md:flex-row md:gap-16">
       <!-- Left heading -->
       <div

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

@@ -46,7 +46,9 @@ const cards = excludeProduct
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-0 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-0 py-20 lg:px-20 lg:py-24"
+  >
     <!-- Header -->
     <div class="flex flex-col items-center px-4 text-center">
       <SectionLabel v-if="labelKey">

apps/website/src/components/customers/FeedbackSection.vue

@@ -45,11 +45,11 @@ const progressPercent = computed(() => `${progress.value * 100}%`)
 </script>
 
 <template>
-  <section class="px-6 py-16 lg:px-16 lg:py-24">
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-16 lg:py-24">
     <!-- Scrollable track -->
     <div
       ref="trackRef"
-      class="scrollbar-none flex snap-x snap-mandatory gap-12 overflow-x-auto lg:gap-20"
+      class="flex snap-x snap-mandatory scrollbar-none gap-12 overflow-x-auto lg:gap-20"
     >
       <div
         v-for="(fb, i) in feedbacks"

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

@@ -72,7 +72,7 @@ function handleLogoLoad() {
     </div>
 
     <!-- Video -->
-    <div ref="videoRef" class="px-4 pb-20 lg:px-20 lg:pb-40">
+    <div ref="videoRef" class="max-w-9xl mx-auto px-4 pb-20 lg:px-20 lg:pb-40">
       <VideoPlayer
         src="https://media.comfy.org/website/customers/blackmath/video.webm"
         poster="https://media.comfy.org/website/customers/blackmath/poster.webp"

apps/website/src/components/customers/StorySection.vue

@@ -10,7 +10,7 @@ const prefix = locale === 'zh-CN' ? '/zh-CN' : ''
 
 <template>
   <section
-    class="grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
+    class="max-w-9xl mx-auto grid grid-cols-1 gap-6 px-6 py-16 lg:grid-cols-2 lg:px-16 lg:py-24"
   >
     <a
       v-for="story in customerStories"

apps/website/src/components/customers/VideoSection.vue

@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-6 py-16 lg:px-20 lg:py-40">
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:px-20 lg:py-40">
     <VideoPlayer
       src="https://media.comfy.org/website/customers/silverside/video.webm"
       poster="https://media.comfy.org/website/customers/silverside/poster.webp"

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

@@ -7,7 +7,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 <template>
   <section
-    class="flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
+    class="max-w-9xl mx-auto flex flex-col items-center px-4 pt-16 pb-24 text-center lg:px-20 lg:pt-20 lg:pb-40"
   >
     <span
       class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"

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

@@ -223,7 +223,10 @@ while (idx < items.length) {
 </script>
 
 <template>
-  <section data-testid="gallery-grid" class="px-4 pb-20 lg:px-20">
+  <section
+    data-testid="gallery-grid"
+    class="max-w-9xl mx-auto px-4 pb-20 lg:px-20"
+  >
     <!-- Desktop grid -->
     <div
       class="rounded-5xl bg-transparency-white-t4 hidden flex-col gap-2 p-2 lg:flex"

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

@@ -8,7 +8,9 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="flex flex-col items-center px-6 pt-36 pb-16 text-center">
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-36 pb-16 text-center"
+  >
     <SectionLabel>
       {{ t('gallery.label', locale) }}
     </SectionLabel>

apps/website/src/components/home/BuildWhatSection.vue

@@ -15,7 +15,7 @@ const row2 = [
 
 <template>
   <section
-    class="bg-primary-comfy-ink flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
+    class="bg-primary-comfy-ink max-w-9xl mx-auto flex flex-col items-center px-4 py-24 lg:px-6 lg:py-32"
   >
     <!-- Node rows -->
     <div

apps/website/src/components/home/CaseStudySpotlightSection.vue

@@ -12,7 +12,9 @@ const routes = getRoutes(locale)
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <GlassCard
       class="flex flex-col gap-12 lg:flex-row lg:items-stretch lg:gap-8"
     >

apps/website/src/components/home/GetStartedSection.vue

@@ -36,7 +36,9 @@ const steps = [
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <div class="flex flex-col gap-12 lg:flex-row lg:gap-8">
       <!-- Left heading -->
       <div

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

@@ -15,7 +15,7 @@ const { loaded: logoLoaded } = useHeroLogo(logoContainer)
 
 <template>
   <section
-    class="relative flex min-h-auto flex-col lg:flex-row lg:items-center"
+    class="max-w-9xl relative mx-auto flex min-h-auto flex-col lg:flex-row lg:items-center"
   >
     <div
       ref="logoContainer"

apps/website/src/components/home/ProductShowcaseSection.vue

@@ -55,7 +55,10 @@ watch(activeIndex, (current, previous) => {
 </script>
 
 <template>
-  <section ref="sectionRef" class="px-4 py-20 lg:px-20 lg:py-24">
+  <section
+    ref="sectionRef"
+    class="max-w-9xl mx-auto px-4 py-20 lg:px-20 lg:py-24"
+  >
     <!-- Section header -->
     <div class="flex flex-col items-center text-center">
       <NodeBadge :segments="badgeSegments" segment-class="" />

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const tags = ['Seadance 2.0', 'Image To Video']
+const demoVideoSrc = 'https://media.comfy.org/videos/compressed_512/swings.webm'
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
+      <div class="flex flex-col gap-8">
+        <div>
+          <h2
+            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+          >
+            {{ t('learning.featured.title', locale) }}
+          </h2>
+          <p class="text-primary-warm-gray mt-4 text-sm lg:text-base">
+            {{ t('learning.featured.author', locale) }}
+          </p>
+        </div>
+
+        <p
+          class="text-primary-comfy-canvas max-w-md text-sm/relaxed lg:text-base"
+        >
+          {{ t('learning.featured.description', locale) }}
+        </p>
+
+        <div class="flex flex-wrap gap-3">
+          <BrandButton variant="solid" size="xs" class="uppercase">
+            {{ t('learning.featured.watchDemo', locale) }}
+          </BrandButton>
+          <BrandButton variant="outline" size="xs" class="uppercase">
+            {{ t('cta.tryWorkflow', locale) }}
+          </BrandButton>
+        </div>
+
+        <div class="mt-2 flex flex-wrap gap-3">
+          <span
+            v-for="tag in tags"
+            :key="tag"
+            class="text-primary-warm-gray border-primary-warm-gray/40 rounded-full border px-4 py-1.5 text-xs"
+          >
+            {{ tag }}
+          </span>
+        </div>
+      </div>
+
+      <div class="border-primary-warm-gray rounded-4.5xl border p-4">
+        <VideoPlayer :locale :src="demoVideoSrc" minimal />
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 pt-24 pb-12 text-center"
+  >
+    <h1
+      class="text-primary-comfy-canvas max-w-4xl text-3xl leading-[110%] font-light tracking-tight lg:text-5xl"
+    >
+      {{ t('learning.heroTitle.before', locale) }}
+      <span class="text-primary-comfy-yellow">ComfyUI</span
+      >{{ t('learning.heroTitle.after', locale) }}
+      <br />
+      {{ t('learning.heroTitle.line2', locale) }}
+    </h1>
+  </section>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { learningTutorials } from '../../data/learningTutorials'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 pb-16 lg:pb-24">
+    <ul
+      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
+    >
+      <li
+        v-for="tutorial in learningTutorials"
+        :key="tutorial.id"
+        class="flex flex-col gap-4"
+      >
+        <a
+          :href="tutorial.href"
+          class="group relative block aspect-video overflow-hidden rounded-3xl bg-black"
+          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
+        >
+          <video
+            :src="tutorial.videoSrc"
+            :poster="tutorial.poster"
+            class="size-full object-cover"
+            preload="metadata"
+            playsinline
+            muted
+          />
+          <span
+            class="absolute inset-0 flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <span
+              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
+            >
+              <svg
+                class="ml-1 size-5 text-white lg:size-6"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M8 5v14l11-7z" />
+              </svg>
+            </span>
+          </span>
+        </a>
+
+        <div class="flex items-center justify-between gap-4 px-1">
+          <h3 class="text-primary-comfy-canvas text-sm/snug lg:text-base/snug">
+            {{ t('learning.tutorials.titlePrefix', locale) }}
+            {{ tutorial.title[locale] }}
+          </h3>
+          <a
+            :href="tutorial.href"
+            class="text-primary-comfy-yellow group flex shrink-0 items-center gap-2 text-xs font-medium tracking-wide uppercase lg:text-sm"
+          >
+            <span
+              class="bg-primary-comfy-yellow flex size-6 items-center justify-center rounded-full transition-transform group-hover:translate-x-0.5 lg:size-7"
+            >
+              <svg
+                class="text-primary-comfy-ink size-3 lg:size-3.5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <polyline points="9 6 15 12 9 18" />
+              </svg>
+            </span>
+            {{ t('cta.tryWorkflow', locale) }}
+          </a>
+        </div>
+
+        <ul class="flex flex-wrap gap-2 px-1">
+          <li
+            v-for="tag in tutorial.tags"
+            :key="tag"
+            class="text-primary-warm-gray border-primary-warm-gray/40 rounded-full border px-3 py-1 text-xs"
+          >
+            {{ t(tag, locale) }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </section>
+</template>

apps/website/src/components/pricing/PriceSection.vue

@@ -121,7 +121,7 @@ const activePlanIndex = ref(0)
 </script>
 
 <template>
-  <section class="px-4 py-16 lg:px-20 lg:py-14">
+  <section class="max-w-9xl mx-auto px-4 py-16 lg:px-20 lg:py-14">
     <!-- Header -->
     <div class="mx-auto mb-8 max-w-3xl text-center lg:mb-10">
       <h1
@@ -135,7 +135,7 @@ const activePlanIndex = ref(0)
     </div>
 
     <!-- Mobile plan tabs -->
-    <div class="scrollbar-none mb-6 flex gap-2 overflow-x-auto lg:hidden">
+    <div class="mb-6 flex scrollbar-none gap-2 overflow-x-auto lg:hidden">
       <button
         v-for="(plan, index) in plans"
         :key="plan.id"

apps/website/src/components/pricing/WhatsIncludedSection.vue

@@ -60,7 +60,7 @@ const features: IncludedFeature[] = [
 </script>
 
 <template>
-  <section class="px-4 py-16 lg:px-20 lg:py-24">
+  <section class="max-w-9xl mx-auto px-4 py-16 lg:px-20 lg:py-24">
     <div class="mx-auto w-full lg:grid lg:grid-cols-[280px_1fr] lg:gap-x-16">
       <!-- Heading -->
       <div

apps/website/src/components/product/cloud/AudienceSection.vue

@@ -25,7 +25,7 @@ const cards = [
 </script>
 
 <template>
-  <section class="px-4 pt-24 lg:px-20 lg:pt-40">
+  <section class="max-w-9xl mx-auto px-4 pt-24 lg:px-20 lg:pt-40">
     <h2
       class="text-primary-comfy-canvas text-3.5xl/tight mx-auto max-w-3xl text-center font-light lg:text-5xl/tight"
     >

apps/website/src/components/product/cloud/PricingSection.vue

@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
 <template>
   <section
-    class="bg-transparency-white-t4 rounded-5xl mx-4 mt-4 mb-24 p-2 lg:mx-20 lg:mt-8 lg:mb-40"
+    class="bg-transparency-white-t4 rounded-5xl max-w-9xl mx-auto mt-4 mb-24 p-2 px-4 lg:mt-8 lg:mb-40 lg:px-20"
   >
     <div
       class="bg-primary-comfy-yellow flex flex-col gap-24 rounded-4xl p-8 lg:flex-row lg:items-end lg:justify-between"

apps/website/src/components/product/enterprise/OrchestrationSection.vue

@@ -442,7 +442,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <GlassCard
       class="flex flex-col gap-8 lg:flex-row lg:items-stretch lg:gap-16"
     >

apps/website/src/components/product/local/EcoSystemSection.vue

@@ -10,7 +10,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20 lg:py-40">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40">
     <div
       class="bg-transparency-white-t4 rounded-5xl flex flex-col-reverse items-stretch gap-10 p-2 lg:flex-row lg:gap-8"
     >

apps/website/src/components/product/shared/AIModelsSection.vue

@@ -77,7 +77,9 @@ function getCardClass(layoutClass: string): string {
 </script>
 
 <template>
-  <section class="bg-primary-comfy-ink px-4 py-24 lg:px-20 lg:py-40">
+  <section
+    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40"
+  >
     <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
       <p
         class="text-primary-comfy-yellow text-center text-sm font-bold tracking-widest uppercase"

apps/website/src/components/product/shared/CardGridSection.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <SectionHeader>
       {{ heading }}
       <template v-if="subtitle" #subtitle>

apps/website/src/components/product/shared/FeatureShowcaseSection.vue

@@ -22,7 +22,7 @@ defineProps<{
 </script>
 
 <template>
-  <section class="px-4 py-24 lg:px-20">
+  <section class="max-w-9xl mx-auto px-4 py-24 lg:px-20">
     <SectionHeader>
       {{ heading }}
       <template #subtitle>

apps/website/src/components/product/shared/ReasonSection.vue

@@ -29,7 +29,7 @@ const {
 
 <template>
   <section
-    class="flex flex-col gap-4 px-4 py-24 lg:flex-row lg:gap-16 lg:px-20 lg:py-40"
+    class="max-w-9xl mx-auto flex flex-col gap-4 px-4 py-24 lg:flex-row lg:gap-16 lg:px-20 lg:py-40"
   >
     <!-- Left heading -->
     <div

apps/website/src/data/events.ts

@@ -0,0 +1,31 @@
+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/learningTutorials.ts

@@ -0,0 +1,64 @@
+import type { LocalizedText, TranslationKey } from '../i18n/translations'
+
+interface LearningTutorial {
+  id: string
+  title: LocalizedText
+  videoSrc: string
+  poster?: string
+  href: string
+  tags: readonly TranslationKey[]
+}
+
+const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
+const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
+
+export const learningTutorials: readonly LearningTutorial[] = [
+  {
+    id: 'cleanplate_walkthrough_v03',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/cleanplate_walkthrough_v03.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'deaging_workflow_v03',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/deaging_workflow_v03.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'frame_adjustments_demo_v03',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/frame_adjustments_demo_v03.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'mattes_and_utilities_v03',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/mattes_and_utilities_v03.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'seedance_demo_comfyui_v03',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/seedance_demo_comfyui_v03.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  },
+  {
+    id: 'skyreplacement_smaller_v06',
+    title: { en: 'Title here', 'zh-CN': '标题占位' },
+    videoSrc:
+      'https://media.comfy.org/website/learning/skyreplacement_smaller_v06.mp4',
+    href: '#',
+    tags: [partnerNodesTag, imageToVideoTag]
+  }
+] as const

apps/website/src/i18n/translations.ts

@@ -1,6 +1,22 @@
 type Locale = 'en' | 'zh-CN'
 
 const translations = {
+  // Tags (global, reusable across sections)
+  'tags.partnerNodes': {
+    en: 'Partner Nodes',
+    'zh-CN': '合作伙伴节点'
+  },
+  'tags.imageToVideo': {
+    en: 'Image To Video',
+    'zh-CN': '图像生成视频'
+  },
+
+  // CTAs (global, reusable across sections)
+  'cta.tryWorkflow': {
+    en: 'Try Workflow',
+    'zh-CN': '试用工作流'
+  },
+
   // HeroSection
   'hero.title': {
     en: 'Professional Control\nof Visual AI',
@@ -1435,6 +1451,58 @@ const translations = {
   'player.subtitlesOn': { en: 'Subtitles on', 'zh-CN': '开启字幕' },
   'player.subtitlesOff': { en: 'Subtitles off', 'zh-CN': '关闭字幕' },
 
+  // LearningHeroSection
+  'learning.heroTitle.before': { en: 'Learn', 'zh-CN': '学习' },
+  'learning.heroTitle.after': { en: '.', 'zh-CN': '。' },
+  'learning.heroTitle.line2': {
+    en: 'Build what doesn’t exist yet.',
+    'zh-CN': '构建尚未存在之物。'
+  },
+
+  // LearningFeaturedWorkflowSection
+  'learning.featured.title': {
+    en: 'Sky Replacement',
+    'zh-CN': '天空替换'
+  },
+  'learning.featured.author': {
+    en: 'by Doug Hogan',
+    'zh-CN': '作者：Doug Hogan'
+  },
+  'learning.featured.description': {
+    en: 'Detailed explanation here fpo lorem ipsum Detailed explanation here fpo lorem ipsum Detailed explem ipsum Detailed explanation here fpo lorem ipsum',
+    'zh-CN':
+      '此处为详细说明的占位文本，待补充实际内容。此处为详细说明的占位文本，待补充实际内容。'
+  },
+  'learning.featured.watchDemo': {
+    en: 'Watch Demo',
+    'zh-CN': '观看演示'
+  },
+
+  // LearningTutorialsSection
+  'learning.tutorials.titlePrefix': {
+    en: 'Learn how to:',
+    'zh-CN': '学习如何：'
+  },
+
+  // LearningCallToActionSection
+  'learning.cta.heading': {
+    en: 'Schedule a demo and see how ComfyUI fits your team’s creative needs.',
+    'zh-CN': '预约演示，了解 ComfyUI 如何契合你的团队创作需求。'
+  },
+  'learning.cta.contactSales': {
+    en: 'Contact Sales',
+    'zh-CN': '联系销售'
+  },
+
+  // LearningEventsSection
+  'learning.events.heading': { en: 'Events', 'zh-CN': '活动' },
+  'learning.events.description': {
+    en: 'Check out our upcoming live streams and community meetings. We’re always open to your questions, ideas, and conversations.',
+    'zh-CN':
+      '查看我们即将举办的直播和社区聚会。我们随时欢迎你的提问、想法和交流。'
+  },
+  'learning.events.getNotified': { en: 'Get Notified', 'zh-CN': '获取通知' },
+
   // GalleryHeroSection
   'gallery.label': { en: 'GALLERY', 'zh-CN': '画廊' },
   'gallery.heroTitle.before': {
@@ -1471,9 +1539,13 @@ const translations = {
   },
   'about.hero.body': {
     en: 'The team behind Comfy is small, intense, and building what we intend to be our life\u2019s work.',
-    'zh-CN': 'Comfy 背后的团队规模虽小，但充满热情，致力于打造我们毕生的事业。'
+    'zh-CN':
+      'Comfy \u80cc\u540e\u7684\u56e2\u961f\u89c4\u6a21\u867d\u5c0f\uff0c\u4f46\u5145\u6ee1\u70ed\u60c5\uff0c\u81f4\u529b\u4e8e\u6253\u9020\u6211\u4eec\u6bd5\u751f\u7684\u4e8b\u4e1a\u3002'
+  },
+  'about.hero.cta': {
+    en: 'SEE OPEN ROLES',
+    'zh-CN': '\u67e5\u770b\u5f00\u653e\u804c\u4f4d'
   },
-  'about.hero.cta': { en: 'SEE OPEN ROLES', 'zh-CN': '查看开放职位' },
 
   // AboutStorySection
   'about.story.label': { en: 'OUR STORY', 'zh-CN': '我们的故事' },
@@ -4240,6 +4312,8 @@ const translations = {
 
 type TranslationKey = keyof typeof translations
 
+type LocalizedText = Record<Locale, string>
+
 export function t(key: TranslationKey, locale: Locale = 'en'): string {
   return translations[key][locale] ?? translations[key].en
 }
@@ -4250,4 +4324,4 @@ export function hasKey(key: string): boolean {
   return key in translations
 }
 
-export type { Locale, TranslationKey }
+export type { Locale, LocalizedText, TranslationKey }

apps/website/src/layouts/BaseLayout.astro

@@ -71,7 +71,20 @@ const websiteJsonLd = {
     {noindex && <meta name="robots" content="noindex, nofollow" />}
     <title>{title}</title>
 
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link
+      rel="icon"
+      href="/favicon-light.svg"
+      type="image/svg+xml"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="icon"
+      href="/favicon-dark.svg"
+      type="image/svg+xml"
+      media="(prefers-color-scheme: dark)"
+    />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="canonical" href={canonicalURL.href} />
     <link rel="preconnect" href="https://www.googletagmanager.com" />
     <link rel="dns-prefetch" href="https://www.googletagmanager.com" />

apps/website/src/pages/learning.astro

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

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

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

browser_tests/fixtures/VueNodeHelpers.ts

@@ -213,7 +213,8 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       decrementButton: widget.getByTestId(TestIds.widgets.decrement),
-      incrementButton: widget.getByTestId(TestIds.widgets.increment)
+      incrementButton: widget.getByTestId(TestIds.widgets.increment),
+      valueControl: widget.getByTestId(TestIds.widgets.valueControl)
     }
   }
 

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

@@ -51,6 +51,20 @@ export class FeatureFlagHelper {
     })
   }
 
+  async setServerFlags(flags: Record<string, unknown>): Promise<void> {
+    await this.page.evaluate((flagMap: Record<string, unknown>) => {
+      const api = window.app!.api
+      api.serverFeatureFlags.value = {
+        ...api.serverFeatureFlags.value,
+        ...flagMap
+      }
+    }, flags)
+  }
+
+  async setServerFlag(name: string, value: unknown): Promise<void> {
+    await this.setServerFlags({ [name]: value })
+  }
+
   /**
    * Mock server feature flags via route interception on /api/features.
    */

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -216,16 +216,6 @@ export class NodeOperationsHelper {
     }
   }
 
-  async convertAllNodesToGroupNode(groupNodeName: string): Promise<void> {
-    await this.comfyPage.canvas.press('Control+a')
-    const node = await this.getFirstNodeRef()
-    if (!node) {
-      throw new Error('No nodes found to convert')
-    }
-    await node.clickContextMenuOption('Convert to Group Node')
-    await this.fillPromptDialog(groupNodeName)
-  }
-
   async fillPromptDialog(value: string): Promise<void> {
     await this.promptDialogInput.fill(value)
     await this.page.keyboard.press('Enter')

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -62,12 +62,39 @@ export class WorkflowHelper {
 
   async waitForDraftPersisted() {
     await this.comfyPage.page.waitForFunction(() =>
-      Object.keys(localStorage).some((k) =>
-        k.startsWith('Comfy.Workflow.Draft.v2:')
+      Object.keys(localStorage).some((key) =>
+        key.startsWith('Comfy.Workflow.Draft.v2:')
       )
     )
   }
 
+  /** Waits for V2 draft index recency, not payload content freshness. */
+  async waitForDraftIndexUpdatedSince(updatedSince: number) {
+    await this.comfyPage.page.waitForFunction((indexUpdatedSince) => {
+      for (let i = 0; i < window.localStorage.length; i++) {
+        const key = window.localStorage.key(i)
+        if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
+
+        const json = window.localStorage.getItem(key)
+        if (!json) continue
+
+        try {
+          const index = JSON.parse(json)
+          if (
+            typeof index.updatedAt === 'number' &&
+            index.updatedAt >= indexUpdatedSince
+          ) {
+            return true
+          }
+        } catch {
+          // Ignore malformed storage while waiting for persistence.
+        }
+      }
+
+      return false
+    }, updatedSince)
+  }
+
   /**
    * Reloads the current page and waits for the app to initialize.
    * Unlike ComfyPage.setup(), this preserves localStorage (drafts) and

browser_tests/fixtures/selectors.ts

@@ -152,6 +152,7 @@ export const TestIds = {
     widget: 'node-widget',
     decrement: 'decrement',
     increment: 'increment',
+    valueControl: 'value-control',
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button',
     selectDefaultSearchInput: 'widget-select-default-search-input',

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -514,17 +514,6 @@ export class NodeReference {
     const ctx = this.comfyPage.page.locator('.litecontextmenu')
     await ctx.getByText(optionText).click()
   }
-  async convertToGroupNode(groupNodeName: string = 'GroupNode') {
-    await this.clickContextMenuOption('Convert to Group Node')
-    await this.comfyPage.nodeOps.fillPromptDialog(groupNodeName)
-    const nodes = await this.comfyPage.nodeOps.getNodeRefsByType(
-      `workflow>${groupNodeName}`
-    )
-    if (nodes.length !== 1) {
-      throw new Error(`Did not find single group node (found=${nodes.length})`)
-    }
-    return nodes[0]
-  }
   async convertToSubgraph() {
     await this.clickContextMenuOption('Convert to Subgraph')
     await this.comfyPage.nextFrame()

browser_tests/tests/groupNode.spec.ts

@@ -7,9 +7,14 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { NodeLibrarySidebarTab } from '@e2e/fixtures/components/SidebarTab'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
+const LOADED_WORKFLOW = 'groupnodes/group_node_v1.3.3'
+const GROUP_NODE_NAME = 'group_node'
+const GROUP_NODE_CATEGORY = 'group nodes>workflow'
+const GROUP_NODE_TYPE = `workflow>${GROUP_NODE_NAME}`
+const GROUP_NODE_BOOKMARK = GROUP_NODE_TYPE
+
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
   await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -18,22 +23,19 @@ test.beforeEach(async ({ comfyPage }) => {
 
 test.describe('Group Node', { tag: '@node' }, () => {
   test.describe('Node library sidebar', () => {
-    const groupNodeName = 'DefautWorkflowGroupNode'
-    const groupNodeCategory = 'group nodes>workflow'
-    const groupNodeBookmarkName = `workflow>${groupNodeName}`
     let libraryTab: NodeLibrarySidebarTab
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       libraryTab = comfyPage.menu.nodeLibraryTab
-      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
+      await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
       await libraryTab.open()
     })
 
     test('Is added to node library sidebar', async ({
       comfyPage: _comfyPage
     }) => {
-      await expect(libraryTab.getFolder(groupNodeCategory)).toHaveCount(1)
+      await expect(libraryTab.getFolder(GROUP_NODE_CATEGORY)).toHaveCount(1)
     })
 
     test('Can be added to canvas using node library sidebar', async ({
@@ -41,9 +43,8 @@ test.describe('Group Node', { tag: '@node' }, () => {
     }) => {
       const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      // Add group node from node library sidebar
-      await libraryTab.getFolder(groupNodeCategory).click()
-      await libraryTab.getNode(groupNodeName).click()
+      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
+      await libraryTab.getNode(GROUP_NODE_NAME).click()
 
       // Verify the node is added to the canvas
       await expect
@@ -52,9 +53,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
     })
 
     test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
-      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
       await libraryTab
-        .getNode(groupNodeName)
+        .getNode(GROUP_NODE_NAME)
         .locator('.bookmark-button')
         .click()
 
@@ -63,13 +64,12 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .poll(() =>
           comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
         )
-        .toEqual([groupNodeBookmarkName])
+        .toEqual([GROUP_NODE_BOOKMARK])
       // Verify the bookmark node with the same name is added to the tree
-      await expect(libraryTab.getNode(groupNodeName)).not.toHaveCount(0)
+      await expect(libraryTab.getNode(GROUP_NODE_NAME)).not.toHaveCount(0)
 
-      // Unbookmark the node
       await libraryTab
-        .getNode(groupNodeName)
+        .getNode(GROUP_NODE_NAME)
         .locator('.bookmark-button')
         .first()
         .click()
@@ -83,9 +83,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
     })
 
     test('Displays preview on bookmark hover', async ({ comfyPage }) => {
-      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
       await libraryTab
-        .getNode(groupNodeName)
+        .getNode(GROUP_NODE_NAME)
         .locator('.bookmark-button')
         .click()
       await comfyPage.page
@@ -96,72 +96,57 @@ test.describe('Group Node', { tag: '@node' }, () => {
         comfyPage.page.locator('.node-lib-node-preview')
       ).toBeVisible()
       await libraryTab
-        .getNode(groupNodeName)
+        .getNode(GROUP_NODE_NAME)
         .locator('.bookmark-button')
         .first()
         .click()
     })
   })
 
-  test(
-    'Can be added to canvas using search',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      const groupNodeName = 'DefautWorkflowGroupNode'
-      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
-      await comfyPage.canvasOps.doubleClick()
-      await comfyPage.nextFrame()
-      await comfyPage.searchBox.input.waitFor({ state: 'visible' })
-      await comfyPage.searchBox.input.fill(groupNodeName)
-      await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+  test('Can be added to canvas using search', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
+    await comfyPage.canvasOps.doubleClick()
+    await comfyPage.nextFrame()
+    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+    await comfyPage.searchBox.input.fill(GROUP_NODE_NAME)
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
 
-      const exactGroupNodeResult = comfyPage.searchBox.dropdown
-        .locator(`li[aria-label="${groupNodeName}"]`)
-        .first()
-      await expect(exactGroupNodeResult).toBeVisible()
-      await exactGroupNodeResult.click()
+    const exactGroupNodeResult = comfyPage.searchBox.dropdown
+      .locator(`li[aria-label="${GROUP_NODE_NAME}"]`)
+      .first()
+    await expect(exactGroupNodeResult).toBeVisible()
+    await exactGroupNodeResult.click()
 
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'group-node-copy-added-from-search.png'
-      )
-    }
-  )
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeRefsByType(GROUP_NODE_TYPE))
+      .toHaveLength(2)
+  })
 
   test('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.EnableTooltips', true)
-    await comfyPage.nodeOps.convertAllNodesToGroupNode('Group Node')
-    await comfyPage.page.mouse.move(47, 173)
+    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
+    const groupNode = await comfyPage.nodeOps.getFirstNodeRef()
+    if (!groupNode)
+      throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
+    const pos = await groupNode.getPosition()
+    await comfyPage.page.mouse.move(pos.x + 40, pos.y + 10)
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
   test('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
-    const makeGroup = async (name: string, type1: string, type2: string) => {
-      const node1 = (await comfyPage.nodeOps.getNodeRefsByType(type1))[0]
-      const node2 = (await comfyPage.nodeOps.getNodeRefsByType(type2))[0]
-      await node1.click('title')
-      await node2.click('title', {
-        modifiers: ['Shift']
-      })
-      return await node2.convertToGroupNode(name)
-    }
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
+    const groupNode = await comfyPage.nodeOps.getFirstNodeRef()
+    if (!groupNode)
+      throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
 
-    const group1 = await makeGroup(
-      'g1',
-      'CLIPTextEncode',
-      'CheckpointLoaderSimple'
-    )
-    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
-
-    const manage1 = await group1.manageGroupNode()
+    const manage = await groupNode.manageGroupNode()
     await comfyPage.nextFrame()
-    await expect(manage1.selectedNodeTypeSelect).toHaveValue('g1')
-    await manage1.close()
-    await expect(manage1.root).toBeHidden()
-
-    const manage2 = await group2.manageGroupNode()
-    await expect(manage2.selectedNodeTypeSelect).toHaveValue('g2')
+    await expect(manage.selectedNodeTypeSelect).toHaveValue(GROUP_NODE_NAME)
+    await manage.close()
+    await expect(manage.root).toBeHidden()
   })
 
   test('Preserves hidden input configuration when containing duplicate node types', async ({
@@ -201,42 +186,6 @@ test.describe('Group Node', { tag: '@node' }, () => {
       .toBe(2)
   })
 
-  test('Reconnects inputs after configuration changed via manage dialog save', async ({
-    comfyPage
-  }) => {
-    const expectSingleNode = async (type: string) => {
-      const nodes = await comfyPage.nodeOps.getNodeRefsByType(type)
-      expect(nodes).toHaveLength(1)
-      return nodes[0]
-    }
-    const latent = await expectSingleNode('EmptyLatentImage')
-    const sampler = await expectSingleNode('KSampler')
-    // Remove existing link
-    const samplerInput = await sampler.getInput(0)
-    await samplerInput.removeLinks()
-    // Group latent + sampler
-    await latent.click('title', {
-      modifiers: ['Shift']
-    })
-    await sampler.click('title', {
-      modifiers: ['Shift']
-    })
-    const groupNode = await sampler.convertToGroupNode()
-    // Connect node to group
-    const ckpt = await expectSingleNode('CheckpointLoaderSimple')
-    const input = await ckpt.connectOutput(0, groupNode, 0)
-    await expect.poll(() => input.getLinkCount()).toBe(1)
-    // Modify the group node via manage dialog
-    const manage = await groupNode.manageGroupNode()
-    await manage.selectNode('KSampler')
-    await manage.changeTab('Inputs')
-    await manage.setLabel('model', 'test')
-    await manage.save()
-    await manage.close()
-    // Ensure the link is still present
-    await expect.poll(() => input.getLinkCount()).toBe(1)
-  })
-
   test('Loads from a workflow using the legacy path separator ("/")', async ({
     comfyPage
   }) => {
@@ -249,11 +198,6 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
   test.describe('Copy and paste', () => {
     let groupNode: NodeReference | null
-    const WORKFLOW_NAME = 'groupnodes/group_node_v1.3.3'
-    const GROUP_NODE_CATEGORY = 'group nodes>workflow'
-    const GROUP_NODE_PREFIX = 'workflow>'
-    const GROUP_NODE_NAME = 'group_node' // Node name in given workflow
-    const GROUP_NODE_TYPE = `${GROUP_NODE_PREFIX}${GROUP_NODE_NAME}`
 
     const isRegisteredLitegraph = async (comfyPage: ComfyPage) => {
       return await comfyPage.page.evaluate((nodeType: string) => {
@@ -282,10 +226,10 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.workflow.loadWorkflow(WORKFLOW_NAME)
+      await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
       groupNode = await comfyPage.nodeOps.getFirstNodeRef()
       if (!groupNode)
-        throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)
+        throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
       await groupNode.copy()
     })
 
@@ -299,10 +243,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     test('Copies and pastes group node after clearing workflow', async ({
       comfyPage
     }) => {
-      // Set setting
       await comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
-
-      // Clear workflow
       await comfyPage.command.executeCommand('Comfy.ClearWorkflow')
 
       await comfyPage.clipboard.paste()
@@ -342,24 +283,6 @@ test.describe('Group Node', { tag: '@node' }, () => {
       })
     })
   })
-
-  test.describe('Keybindings', () => {
-    test('Convert to group node, no selection', async ({ comfyPage }) => {
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
-      await comfyPage.page.keyboard.press('Alt+g')
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
-    })
-
-    test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
-      await comfyPage.canvas.click({
-        position: DefaultGraphPositions.textEncodeNode1
-      })
-      await comfyPage.nextFrame()
-      await comfyPage.page.keyboard.press('Alt+g')
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
-    })
-  })
 })
 
 test('Convert to subgraph unpacks the group Node @vue-nodes', async ({

browser_tests/tests/maskEditor.spec.ts

@@ -1,6 +1,10 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
 
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
 import { maskEditorTest as test } from '@e2e/fixtures/helpers/MaskEditorHelper'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   test(
@@ -301,3 +305,39 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     }
   )
 })
+
+wstest(
+  'Will not use stale litegraph previews',
+  async ({ comfyPage, getWebSocket }) => {
+    const executionHelper = new ExecutionHelper(comfyPage, await getWebSocket())
+    await comfyPage.menu.topbar.newWorkflowButton.click()
+    await comfyPage.searchBoxV2.addNode('Preview Image')
+
+    async function getNodeOutput() {
+      return await comfyPage.page.evaluate(
+        () => graph!.getNodeById('1')!.images?.[0]?.filename
+      )
+    }
+
+    executionHelper.executed('', '1', { images: [{ filename: 'test1.png' }] })
+    await comfyPage.page.evaluate(() => app!.canvas.setDirty(true))
+    await expect.poll(getNodeOutput).toBe('test1.png')
+
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    const resolvableFile = { filename: 'example.png', type: 'input' }
+    executionHelper.executed('', '1', { images: [resolvableFile] })
+    await expect.poll(getNodeOutput).toBe('example.png')
+
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Preview Image')
+    await node.imagePreview.hover()
+    await node.imagePreview
+      .getByRole('button', { name: 'Edit or mask image' })
+      .click()
+
+    // On previous versions, attempting to open the mask editor here would
+    // incorrectly reference the non-existant test1.png
+    // This causes the mask editor to throw in setup and not display
+    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
+  }
+)

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -9,7 +9,7 @@ test.describe(
   () => {
     test.beforeEach(async ({ comfyPage }) => {
       // Keep the viewport well below the menu content height so overflow is guaranteed.
-      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
+      await comfyPage.page.setViewportSize({ width: 1280, height: 420 })
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
       await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')

browser_tests/tests/nodeContextMenuShapeSubmenu.spec.ts

@@ -46,15 +46,8 @@ test.describe(
     test('Shape popover opens even when the menu must scroll', async ({
       comfyPage
     }) => {
-      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
+      await comfyPage.page.setViewportSize({ width: 1280, height: 600 })
       const menu = await openMoreOptionsMenu(comfyPage, 'KSampler')
-      const rootList = menu.locator(':scope > ul')
-
-      await expect
-        .poll(() =>
-          rootList.evaluate((el) => el.scrollHeight > el.clientHeight)
-        )
-        .toBe(true)
 
       const shapeItem = menu.getByRole('menuitem', { name: 'Shape' })
       await shapeItem.scrollIntoViewIfNeeded()

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -309,6 +309,50 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     )
   })
 
+  test.describe('Empty graph defaults', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.featureFlags.setServerFlag(
+        'node_library_essentials_enabled',
+        true
+      )
+    })
+
+    test('Defaults to Essentials when graph is empty', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await comfyPage.nodeOps.clearGraph()
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
+
+      await searchBoxV2.open()
+
+      const essentialsBtn = searchBoxV2.rootCategoryButton(
+        RootCategory.Essentials
+      )
+      await expect(essentialsBtn).toBeVisible()
+      await expect(essentialsBtn).toHaveAttribute('aria-pressed', 'true')
+    })
+
+    test('Defaults to Most Relevant when graph has nodes', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBeGreaterThan(0)
+
+      await searchBoxV2.open()
+
+      await expect(searchBoxV2.categoryButton('most-relevant')).toHaveAttribute(
+        'aria-current',
+        'true'
+      )
+      await expect(
+        searchBoxV2.rootCategoryButton(RootCategory.Essentials)
+      ).toHaveAttribute('aria-pressed', 'false')
+    })
+  })
+
   test.describe('Search behavior', () => {
     test('Search narrows results progressively', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage

browser_tests/tests/rightClickMenu.spec.ts

@@ -35,23 +35,6 @@ test.describe(
         'add-group-group-added.png'
       )
     })
-
-    test('Can convert to group node', async ({ comfyPage }) => {
-      await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
-      await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
-      await comfyPage.canvasOps.rightClick()
-      await comfyPage.contextMenu.clickMenuItem(
-        'Convert to Group Node (Deprecated)'
-      )
-      await comfyPage.contextMenu.waitForHidden()
-      await comfyPage.nodeOps.promptDialogInput.fill('GroupNode2CLIP')
-      await comfyPage.page.keyboard.press('Enter')
-      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'hidden' })
-      await comfyPage.expectScreenshot(
-        comfyPage.canvas,
-        'right-click-node-group-node.png'
-      )
-    })
   }
 )
 

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -507,25 +507,6 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
         .toBe(initialGroupCount + 1)
     })
 
-    test('should convert to group node via context menu', async ({
-      comfyPage
-    }) => {
-      await openMultiNodeContextMenu(comfyPage, nodeTitles)
-      await clickExactMenuItem(comfyPage, 'Convert to Group Node')
-
-      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
-      await comfyPage.nodeOps.fillPromptDialog('TestGroupNode')
-
-      await expect
-        .poll(async () => {
-          const groupNodes = await comfyPage.nodeOps.getNodeRefsByType(
-            'workflow>TestGroupNode'
-          )
-          return groupNodes.length
-        })
-        .toBe(1)
-    })
-
     test('should convert selected nodes to subgraph via context menu', async ({
       comfyPage
     }) => {

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -38,4 +38,15 @@ test.describe('Vue Integer Widget', { tag: '@vue-nodes' }, () => {
     await controls.decrementButton.click()
     await expect(controls.input).toHaveValue(initialValue.toString())
   })
+
+  test('displays control widgets with default state', async ({ comfyPage }) => {
+    await comfyPage.menu.topbar.newWorkflowButton.click()
+    await comfyPage.nextFrame()
+    await comfyPage.searchBoxV2.addNode('Int')
+    const widget = comfyPage.vueNodes.getWidgetByName('Int', 'value')
+    await expect(widget).toBeVisible()
+
+    const { valueControl } = comfyPage.vueNodes.getInputNumberControls(widget)
+    await expect(valueControl).toBeVisible()
+  })
 })

browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts

@@ -12,19 +12,22 @@ test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets!.push(node.widgets![0])
+      node.widgets!.push({ ...node.widgets![0], name: 'added_widget_1' })
     })
     await expect(loadCheckpointNode).toHaveCount(2)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets![2] = node.widgets![0]
+      node.widgets![2] = { ...node.widgets![0], name: 'added_widget_2' }
     })
     await expect(loadCheckpointNode).toHaveCount(3)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.widgets!.splice(0, 0, node.widgets![0])
+      node.widgets!.splice(0, 0, {
+        ...node.widgets![0],
+        name: 'added_widget_3'
+      })
     })
     await expect(loadCheckpointNode).toHaveCount(4)
   })

browser_tests/tests/workflowPersistence.spec.ts

@@ -4,6 +4,103 @@ import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
+
+const generateUniqueFilename = () =>
+  `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
+
+const waitForWorkflowTabState = async (comfyPage: ComfyPage, minPaths = 2) => {
+  await comfyPage.page.waitForFunction((expectedMinPaths) => {
+    let hasActivePath = false
+    let hasOpenPaths = false
+
+    for (let i = 0; i < window.sessionStorage.length; i++) {
+      const key = window.sessionStorage.key(i)
+      if (key?.startsWith('Comfy.Workflow.ActivePath:')) {
+        hasActivePath = true
+      }
+      if (!key?.startsWith('Comfy.Workflow.OpenPaths:')) {
+        continue
+      }
+
+      const raw = window.sessionStorage.getItem(key)
+      if (!raw) continue
+
+      try {
+        const state = JSON.parse(raw) as { paths?: unknown[] }
+        hasOpenPaths =
+          Array.isArray(state.paths) && state.paths.length >= expectedMinPaths
+        if (hasActivePath && hasOpenPaths) return true
+      } catch {
+        return false
+      }
+    }
+
+    return hasActivePath && hasOpenPaths
+  }, minPaths)
+}
+
+type NodeRef = NonNullable<
+  Awaited<ReturnType<ComfyPage['nodeOps']['getFirstNodeRef']>>
+>
+
+const getRequiredFirstNodeRef = async (
+  comfyPage: ComfyPage,
+  message: string
+): Promise<NodeRef> => {
+  const node = await comfyPage.nodeOps.getFirstNodeRef()
+  expect(node, message).toBeDefined()
+  if (!node) throw new Error(message)
+  return node
+}
+
+const makeActivePathStale = async (
+  comfyPage: ComfyPage,
+  staleWorkflowName: string,
+  activeWorkflowName: string
+) => {
+  // Intentionally desync ActivePath from OpenPaths to exercise stale pointer recovery.
+  await comfyPage.page.evaluate(
+    ([staleName, activeName]) => {
+      const findStorageKey = (prefix: string) => {
+        for (let i = 0; i < window.sessionStorage.length; i++) {
+          const key = window.sessionStorage.key(i)
+          if (key?.startsWith(prefix)) return key
+        }
+        throw new Error(`Missing ${prefix} persistence key`)
+      }
+
+      const activePathKey = findStorageKey('Comfy.Workflow.ActivePath:')
+      const openPathsKey = findStorageKey('Comfy.Workflow.OpenPaths:')
+      const activePointer = JSON.parse(
+        window.sessionStorage.getItem(activePathKey)!
+      ) as { path: string }
+      const openPointer = JSON.parse(
+        window.sessionStorage.getItem(openPathsKey)!
+      ) as { paths: string[]; activeIndex: number }
+      const pathForName = (name: string) => {
+        const path = openPointer.paths.find((candidate) =>
+          candidate.endsWith(`${name}.json`)
+        )
+        if (!path) throw new Error(`Missing stored path for ${name}`)
+        return path
+      }
+
+      const stalePath = pathForName(staleName)
+      const activePath = pathForName(activeName)
+      activePointer.path = stalePath
+      openPointer.paths = [stalePath, activePath]
+      openPointer.activeIndex = 1
+
+      window.sessionStorage.setItem(
+        activePathKey,
+        JSON.stringify(activePointer)
+      )
+      window.sessionStorage.setItem(openPathsKey, JSON.stringify(openPointer))
+    },
+    [staleWorkflowName, activeWorkflowName]
+  )
+}
 
 async function getNodeOutputImageCount(
   comfyPage: ComfyPage,
@@ -103,9 +200,11 @@ test.describe('Workflow Persistence', () => {
 
     await comfyPage.menu.topbar.saveWorkflow('outputs-test')
 
-    const firstNode = await comfyPage.nodeOps.getFirstNodeRef()
-    expect(firstNode).toBeTruthy()
-    const nodeId = String(firstNode!.id)
+    const firstNode = await getRequiredFirstNodeRef(
+      comfyPage,
+      'First node should be available after loading the default workflow'
+    )
+    const nodeId = String(firstNode.id)
 
     // Simulate node outputs as if execution completed
     await comfyPage.page.evaluate((id) => {
@@ -382,6 +481,59 @@ test.describe('Workflow Persistence', () => {
     await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toBe(nodeCountB)
   })
 
+  test('Restores saved workflow drafts from inactive restored tabs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.Workflow.Persist', true)
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const workflowA = generateUniqueFilename()
+    const workflowB = generateUniqueFilename()
+
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await fitToViewInstant(comfyPage)
+    await comfyPage.menu.topbar.saveWorkflow(workflowA)
+
+    const firstNode = await getRequiredFirstNodeRef(
+      comfyPage,
+      'First node should be available after loading single_ksampler'
+    )
+    await firstNode.centerOnNode()
+    const draftSaveStartedAt = Date.now()
+    await firstNode.toggleCollapse()
+    expect(await firstNode.isCollapsed()).toBe(true)
+    await comfyPage.workflow.waitForDraftIndexUpdatedSince(draftSaveStartedAt)
+
+    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+    await comfyPage.menu.topbar.saveWorkflow(workflowB)
+    await waitForWorkflowTabState(comfyPage)
+    await makeActivePathStale(comfyPage, workflowA, workflowB)
+
+    await comfyPage.workflow.reloadAndWaitForApp()
+    await expect
+      .poll(() => comfyPage.menu.topbar.getActiveTabName())
+      .toBe(workflowB)
+
+    const tabs = await comfyPage.menu.topbar.getTabNames()
+    expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+    expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+
+    await comfyPage.menu.topbar.getWorkflowTab(workflowA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+
+    const restoredNode = await getRequiredFirstNodeRef(
+      comfyPage,
+      'Restored node should be available after switching back to workflow A'
+    )
+    expect(await restoredNode.isCollapsed()).toBe(true)
+    await expect(comfyPage.toast.toastErrors).toHaveCount(0)
+  })
+
   test('Closing an inactive tab with save preserves its own content', async ({
     comfyPage
   }) => {

docs/guidance/vitest.md

@@ -30,7 +30,9 @@ See `docs/testing/*.md` for detailed patterns.
 ## Running Tests
 
 ```bash
-pnpm test:unit                    # Run all unit tests
-pnpm test:unit -- path/to/file    # Run specific test
-pnpm test:unit -- --watch         # Watch mode
+pnpm test:unit                       # Run all unit tests
+pnpm test:unit path/to/file          # Filter by substring of test file path
+pnpm test:unit foo.test.ts -t "name" # Filter by test name (regex; it()/test() only, not describe())
 ```
+
+Do not use the `--` separator before vitest args; pnpm forwards extra args automatically, and `--` mangles quoted args (e.g. `-t "two words"`) on Windows PowerShell.

docs/testing/README.md

@@ -43,10 +43,10 @@ To run the tests locally:
 pnpm test:unit
 
 # Run a specific test file
-pnpm test:unit -- src/path/to/file.test.ts
+pnpm test:unit src/path/to/file.test.ts
 
 # Run unit tests in watch mode
-pnpm test:unit -- --watch
+pnpm test:unit --watch
 ```
 
 Refer to the specific guides for more detailed information on each testing type.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.45.13",
+  "version": "1.46.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -206,8 +206,8 @@
     "zod-to-json-schema": "catalog:"
   },
   "engines": {
-    "node": "24.x",
-    "pnpm": ">=11"
+    "node": ">=25",
+    "pnpm": ">=11.3"
   },
-  "packageManager": "pnpm@11.1.1"
+  "packageManager": "pnpm@11.3.0"
 }

packages/design-system/src/css/style.css

@@ -406,9 +406,7 @@
     --secondary-background-selected
   );
   --component-node-widget-background-selected: var(--color-charcoal-100);
-  --component-node-widget-background-disabled: var(
-    --color-alpha-charcoal-600-30
-  );
+  --component-node-widget-background-disabled: var(--color-charcoal-800);
   --component-node-widget-background-highlighted: var(--color-smoke-800);
   --component-node-widget-promoted: var(--color-purple-700);
   --component-node-widget-advanced: var(--color-azure-600);

src/components/error/ErrorOverlay.vue

@@ -87,42 +87,26 @@ const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()
 
 const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
-const { allErrorGroups, missingModelGroups } = useErrorGroups(ref(''), t)
+const { allErrorGroups } = useErrorGroups(ref(''))
 
 const singleErrorType = computed(() => {
   const types = new Set(allErrorGroups.value.map((g) => g.type))
   return types.size === 1 ? [...types][0] : null
 })
 
-const friendlyMessageMap: Record<string, () => string> = {
-  missing_node: () => t('errorOverlay.missingNodes'),
-  swap_nodes: () => t('errorOverlay.swapNodes'),
-  missing_media: () => t('errorOverlay.missingMedia'),
-  missing_model: () => {
-    const modelCount = missingModelGroups.value.reduce(
-      (count, g) => count + g.models.length,
-      0
-    )
-    return t('errorOverlay.missingModels', { count: modelCount }, modelCount)
-  }
-}
-
-function toFriendlyMessage(group: (typeof allErrorGroups.value)[number]) {
-  return friendlyMessageMap[group.type]?.() ?? null
-}
-
 const overlayMessages = computed<string[]>(() => {
   const messages = new Set<string>()
   for (const group of allErrorGroups.value) {
-    const friendly = toFriendlyMessage(group)
-    if (friendly) {
-      messages.add(friendly)
-    } else if (group.type === 'execution') {
+    if (group.type === 'execution') {
+      // TODO(FE-816 overlay-redesign): Keep runtime overlay copy raw until the
+      // overlay redesign decides how to use catalog toast fields.
       for (const card of group.cards) {
         for (const err of card.errors) {
           messages.add(err.message)
         }
       }
+    } else {
+      messages.add(group.displayMessage ?? group.displayTitle)
     }
   }
   return Array.from(messages)

src/components/load3d/Load3DControls.vue

@@ -71,6 +71,7 @@
         v-if="showCameraControls"
         v-model:camera-type="cameraConfig!.cameraType"
         v-model:fov="cameraConfig!.fov"
+        v-model:retain-view-on-reload="cameraConfig!.retainViewOnReload"
       />
 
       <div v-if="showLightControls" class="flex flex-col">

src/components/load3d/controls/AnimationControls.test.ts

@@ -6,24 +6,6 @@ import { createI18n } from 'vue-i18n'
 
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 
-vi.mock('primevue/select', () => ({
-  default: {
-    name: 'Select',
-    props: ['modelValue', 'options', 'optionLabel', 'optionValue'],
-    emits: ['update:modelValue'],
-    template: `
-      <select
-        :value="modelValue"
-        @change="$emit('update:modelValue', isNaN(Number($event.target.value)) ? $event.target.value : Number($event.target.value))"
-      >
-        <option v-for="opt in options" :key="opt[optionValue]" :value="opt[optionValue]">
-          {{ opt[optionLabel] }}
-        </option>
-      </select>
-    `
-  }
-}))
-
 vi.mock('@/components/ui/slider/Slider.vue', () => ({
   default: {
     name: 'UiSlider',

src/components/load3d/controls/CameraControls.vue

@@ -11,17 +11,39 @@
       :aria-label="$t('load3d.switchCamera')"
       @click="switchCamera"
     >
-      <i :class="['pi', 'pi-camera', 'text-lg text-base-foreground']" />
+      <i class="pi pi-camera text-lg text-base-foreground" />
     </Button>
     <PopupSlider
       v-if="showFOVButton"
       v-model="fov"
       :tooltip-text="$t('load3d.fov')"
     />
+    <Button
+      v-tooltip.right="{
+        value: $t('load3d.retainViewOnReload'),
+        showDelay: 300
+      }"
+      size="icon"
+      variant="textonly"
+      class="rounded-full"
+      :aria-label="$t('load3d.retainViewOnReload')"
+      :aria-pressed="retainViewOnReload"
+      @click="retainViewOnReload = !retainViewOnReload"
+    >
+      <i
+        :class="
+          cn(
+            'pi text-lg text-base-foreground',
+            retainViewOnReload ? 'pi-lock' : 'pi-lock-open'
+          )
+        "
+      />
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
 import { computed } from 'vue'
 
 import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
@@ -30,6 +52,9 @@ import type { CameraType } from '@/extensions/core/load3d/interfaces'
 
 const cameraType = defineModel<CameraType>('cameraType')
 const fov = defineModel<number>('fov')
+const retainViewOnReload = defineModel<boolean>('retainViewOnReload', {
+  default: false
+})
 const showFOVButton = computed(() => cameraType.value === 'perspective')
 
 const switchCamera = () => {

src/components/load3d/controls/viewer/ViewerSceneControls.test.ts

@@ -6,23 +6,6 @@ import { createI18n } from 'vue-i18n'
 
 import ViewerSceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 
-vi.mock('primevue/checkbox', () => ({
-  default: {
-    name: 'Checkbox',
-    props: ['modelValue', 'inputId', 'binary', 'name'],
-    emits: ['update:modelValue'],
-    template: `
-      <input
-        type="checkbox"
-        :id="inputId"
-        :name="name"
-        :checked="modelValue"
-        @change="$emit('update:modelValue', $event.target.checked)"
-      />
-    `
-  }
-}))
-
 const i18n = createI18n({
   legacy: false,
   locale: 'en',

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

@@ -209,6 +209,40 @@ describe('ErrorNodeCard.vue', () => {
     expect(screen.queryByText(/ComfyUI Error Report/)).not.toBeInTheDocument()
   })
 
+  it('displays catalog-resolved copy when available', async () => {
+    renderCard({
+      id: `node-${++cardIdCounter}`,
+      title: 'KSampler',
+      nodeId: '10',
+      nodeTitle: 'KSampler',
+      errors: [
+        {
+          message: 'Required input is missing',
+          details: 'model',
+          displayTitle: 'Missing connection',
+          displayMessage:
+            'Required input slots have no connection feeding them.',
+          displayDetails: 'KSampler is missing a required input: model',
+          displayItemLabel: 'KSampler - model'
+        }
+      ]
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Missing connection')).toBeInTheDocument()
+    })
+    expect(
+      screen.getByText('Required input slots have no connection feeding them.')
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText('KSampler is missing a required input: model')
+    ).toBeInTheDocument()
+    expect(screen.queryByText('KSampler - model')).not.toBeInTheDocument()
+    expect(
+      screen.queryByText('Required input is missing')
+    ).not.toBeInTheDocument()
+  })
+
   it('copies enriched report when copy button is clicked for runtime error', async () => {
     const reportText = '# Full Report Content'
     mockGenerateErrorReport.mockReturnValue(reportText)

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -54,12 +54,20 @@
           )
         "
       >
+        <!-- Human-friendly category/title when resolved by the error catalog. -->
+        <p
+          v-if="error.displayTitle"
+          class="m-0 px-0.5 text-sm font-semibold text-destructive-background-hover"
+        >
+          {{ error.displayTitle }}
+        </p>
+
         <!-- Error Message -->
         <p
-          v-if="error.message"
+          v-if="getDisplayMessage(error)"
           class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
         >
-          {{ error.message }}
+          {{ getDisplayMessage(error) }}
         </p>
 
         <!-- Traceback / Details (enriched with full report for runtime errors) -->
@@ -171,11 +179,15 @@ function handleEnterSubgraph() {
 
 function handleCopyError(idx: number) {
   const details = displayedDetailsMap.value[idx]
-  const message = card.errors[idx]?.message
+  const message = getDisplayMessage(card.errors[idx])
   emit('copyToClipboard', [message, details].filter(Boolean).join('\n\n'))
 }
 
 function handleCheckGithub(error: ErrorItem) {
   findOnGitHub(error.message)
 }
+
+function getDisplayMessage(error: ErrorItem | undefined) {
+  return error?.displayMessage ?? error?.message
+}
 </script>

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

@@ -57,11 +57,6 @@ describe('TabErrors.vue', () => {
               downloadAll: 'Download all',
               refresh: 'Refresh',
               refreshing: 'Refreshing missing models.'
-            },
-            promptErrors: {
-              prompt_no_outputs: {
-                desc: 'Prompt has no outputs'
-              }
             }
           }
         }
@@ -103,7 +98,7 @@ describe('TabErrors.vue', () => {
     expect(screen.getByText('No errors')).toBeInTheDocument()
   })
 
-  it('renders prompt-level errors (Group title = error message)', async () => {
+  it('renders prompt-level errors with resolved display message', async () => {
     renderComponent({
       executionError: {
         lastPromptError: {
@@ -114,8 +109,14 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    expect(screen.getByText('Server Error: No outputs')).toBeInTheDocument()
-    expect(screen.getByText('Prompt has no outputs')).toBeInTheDocument()
+    expect(screen.getAllByText('Prompt has no outputs').length).toBeGreaterThan(
+      0
+    )
+    expect(
+      screen.getByText(
+        'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.'
+      )
+    ).toBeInTheDocument()
     expect(screen.queryByText('Error details')).not.toBeInTheDocument()
   })
 

src/components/rightSidePanel/errors/TabErrors.vue

@@ -21,7 +21,7 @@
       <div
         class="shrink-0 pb-2 text-sm font-semibold text-destructive-background-hover"
       >
-        {{ singleRuntimeErrorGroup?.title }}
+        {{ singleRuntimeErrorGroup?.displayTitle }}
       </div>
       <ErrorNodeCard
         :key="singleRuntimeErrorCard.id"
@@ -53,12 +53,12 @@
         <!-- Group by Class Type -->
         <PropertiesAccordionItem
           v-for="group in filteredGroups"
-          :key="group.title"
+          :key="group.groupKey"
           :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
-          :collapse="isSectionCollapsed(group.title) && !isSearching"
+          :collapse="isSectionCollapsed(group.groupKey) && !isSearching"
           class="border-b border-interface-stroke"
           :size="getGroupSize(group)"
-          @update:collapse="setSectionCollapsed(group.title, $event)"
+          @update:collapse="setSectionCollapsed(group.groupKey, $event)"
         >
           <template #label>
             <div class="flex min-w-0 flex-1 items-center gap-2">
@@ -67,13 +67,7 @@
                   class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
                 />
                 <span class="truncate text-destructive-background-hover">
-                  {{
-                    group.type === 'missing_node'
-                      ? `${group.title} (${missingPackGroups.length})`
-                      : group.type === 'swap_nodes'
-                        ? `${group.title} (${swapNodeGroups.length})`
-                        : group.title
-                  }}
+                  {{ group.displayTitle }}
                 </span>
                 <span
                   v-if="group.type === 'execution' && group.cards.length > 1"
@@ -331,7 +325,7 @@ const {
   filteredMissingModelGroups: missingModelGroups,
   filteredMissingMediaGroups: missingMediaGroups,
   swapNodeGroups
-} = useErrorGroups(searchQuery, t)
+} = useErrorGroups(searchQuery)
 
 const missingModelDownloadableModels = computed(() => {
   if (isCloud) return []
@@ -366,22 +360,22 @@ const singleRuntimeErrorCard = computed(
 
 const isAllCollapsed = computed({
   get() {
-    return filteredGroups.value.every((g) => isSectionCollapsed(g.title))
+    return filteredGroups.value.every((g) => isSectionCollapsed(g.groupKey))
   },
   set(collapse: boolean) {
     for (const group of tabErrorGroups.value) {
-      setSectionCollapsed(group.title, collapse)
+      setSectionCollapsed(group.groupKey, collapse)
     }
   }
 })
 
-function isSectionCollapsed(title: string): boolean {
+function isSectionCollapsed(groupKey: string): boolean {
   // Defaults to expanded when not explicitly set by the user
-  return collapseState[title] ?? false
+  return collapseState[groupKey] ?? false
 }
 
-function setSectionCollapsed(title: string, collapsed: boolean) {
-  collapseState[title] = collapsed
+function setSectionCollapsed(groupKey: string, collapsed: boolean) {
+  collapseState[groupKey] = collapsed
 }
 
 /**
@@ -403,7 +397,7 @@ watch(
           card.graphNodeId === graphNodeId ||
           (card.nodeId?.startsWith(prefix) ?? false)
       )
-      setSectionCollapsed(group.title, !hasMatch)
+      setSectionCollapsed(group.groupKey, !hasMatch)
     }
     rightSidePanelStore.focusedErrorNodeId = null
   },

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

@@ -27,6 +27,8 @@ vi.mock('@/platform/distribution/types', () => ({
 }))
 
 vi.mock('@/i18n', () => ({
+  te: vi.fn(() => false),
+  t: vi.fn((key: string) => key),
   st: vi.fn((_key: string, fallback: string) => fallback)
 }))
 
@@ -84,8 +86,7 @@ describe('swapNodeGroups computed', () => {
     useMissingNodesErrorStore().surfaceMissingNodes(nodeTypes)
 
     const searchQuery = ref('')
-    const t = (key: string) => key
-    const { swapNodeGroups } = useErrorGroups(searchQuery, t)
+    const { swapNodeGroups } = useErrorGroups(searchQuery)
     return swapNodeGroups
   }
 

src/components/rightSidePanel/errors/types.ts

@@ -1,5 +1,9 @@
-export interface ErrorItem {
+import type { ResolvedErrorMessage } from '@/platform/errorCatalog/types'
+
+export interface ErrorItem extends ResolvedErrorMessage {
+  /** Raw source/API-compatible message. */
   message: string
+  /** Raw source/API-compatible details. */
   details?: string
   isRuntimeError?: boolean
   exceptionType?: string
@@ -15,14 +19,28 @@ export interface ErrorCardData {
   errors: ErrorItem[]
 }
 
+interface ErrorGroupBase extends Omit<ResolvedErrorMessage, 'displayTitle'> {
+  /** Stable structural key used for rendering, collapse state, and cache identity. */
+  groupKey: string
+  /** Human-friendly title resolved for UI display. */
+  displayTitle: string
+  priority: number
+}
+
 export type ErrorGroup =
-  | {
+  | (ErrorGroupBase & {
       type: 'execution'
-      title: string
       cards: ErrorCardData[]
-      priority: number
-    }
-  | { type: 'missing_node'; title: string; priority: number }
-  | { type: 'swap_nodes'; title: string; priority: number }
-  | { type: 'missing_model'; title: string; priority: number }
-  | { type: 'missing_media'; title: string; priority: number }
+    })
+  | (ErrorGroupBase & {
+      type: 'missing_node'
+    })
+  | (ErrorGroupBase & {
+      type: 'swap_nodes'
+    })
+  | (ErrorGroupBase & {
+      type: 'missing_model'
+    })
+  | (ErrorGroupBase & {
+      type: 'missing_media'
+    })

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

@@ -29,9 +29,47 @@ vi.mock('@/platform/distribution/types', () => ({
   }
 }))
 
-vi.mock('@/i18n', () => ({
-  st: vi.fn((_key: string, fallback: string) => fallback)
-}))
+vi.mock('@/i18n', () => {
+  const messages: Record<string, string> = {
+    'errorCatalog.validationErrors.required_input_missing.title':
+      'Missing connection',
+    'errorCatalog.validationErrors.required_input_missing.message':
+      'Required input slots have no connection feeding them.',
+    'errorCatalog.validationErrors.required_input_missing.details':
+      '{nodeName} is missing a required input: {inputName}',
+    'errorCatalog.validationErrors.required_input_missing.itemLabel':
+      '{nodeName} - {inputName}',
+    'errorCatalog.validationErrors.required_input_missing.toastTitle':
+      'Required input missing',
+    'errorCatalog.validationErrors.required_input_missing.toastMessage':
+      '{nodeName} is missing a required input: {inputName}',
+    'errorCatalog.promptErrors.prompt_no_outputs.title':
+      'Prompt has no outputs',
+    'errorCatalog.promptErrors.prompt_no_outputs.desc':
+      'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.'
+  }
+
+  const interpolate = (
+    message: string,
+    params?: Record<string, string | number>
+  ) =>
+    message.replace(/\{(\w+)\}/g, (match, paramName) =>
+      params?.[paramName] === undefined ? match : String(params[paramName])
+    )
+
+  return {
+    te: vi.fn((key: string) => key in messages),
+    st: vi.fn((key: string, fallback: string) => messages[key] ?? fallback),
+    t: vi.fn((key: string, params?: Record<string, string | number>) => {
+      if (key === 'errorOverlay.missingModels') {
+        const count = Number(params?.count ?? 0)
+        return `${count} required ${count === 1 ? 'model is' : 'models are'} missing`
+      }
+
+      return interpolate(messages[key] ?? key, params)
+    })
+  }
+})
 
 vi.mock('@/stores/comfyRegistryStore', () => ({
   useComfyRegistryStore: () => ({
@@ -113,8 +151,7 @@ function makeModel(
 function createErrorGroups() {
   const store = useExecutionErrorStore()
   const searchQuery = ref('')
-  const t = (key: string) => key
-  const groups = useErrorGroups(searchQuery, t)
+  const groups = useErrorGroups(searchQuery)
   return { store, searchQuery, groups }
 }
 
@@ -245,6 +282,11 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'missing_node'
       )
       expect(missingGroup).toBeDefined()
+      expect(missingGroup?.groupKey).toBe('missing_node')
+      expect(missingGroup?.displayTitle).toBe('Missing Node Packs (1)')
+      expect(missingGroup?.displayMessage).toBe(
+        'Some nodes are missing and need to be installed'
+      )
     })
 
     it('includes swap_nodes group when replaceable nodes exist', async () => {
@@ -329,6 +371,54 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'execution'
       )
       expect(execGroups.length).toBeGreaterThan(0)
+      expect(execGroups[0].groupKey).toBe('execution:KSampler')
+      expect(execGroups[0].displayTitle).toBe('KSampler')
+    })
+
+    it('resolves required_input_missing item display copy', async () => {
+      const { store, groups } = createErrorGroups()
+      store.lastNodeErrors = {
+        '1': {
+          class_type: 'KSampler',
+          dependent_outputs: [],
+          errors: [
+            {
+              type: 'required_input_missing',
+              message: 'Required input is missing',
+              details: 'model',
+              extra_info: {
+                input_name: 'model'
+              }
+            }
+          ]
+        }
+      }
+      await nextTick()
+
+      const execGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'execution'
+      )
+      expect(execGroup?.type).toBe('execution')
+      if (execGroup?.type !== 'execution') return
+
+      const card = execGroup.cards[0]
+      const error = card.errors[0]
+
+      expect(error.message).toBe('Required input is missing')
+      expect(error.details).toBe('model')
+      expect(error.catalogId).toBe('missing_connection')
+      expect(error.displayTitle).toBe('Missing connection')
+      expect(error.displayMessage).toBe(
+        'Required input slots have no connection feeding them.'
+      )
+      expect(error.displayDetails).toBe(
+        'KSampler is missing a required input: model'
+      )
+      expect(error.displayItemLabel).toBe('KSampler - model')
+      expect(error.toastTitle).toBe('Required input missing')
+      expect(error.toastMessage).toBe(
+        'KSampler is missing a required input: model'
+      )
     })
 
     it('includes execution error from runtime errors', async () => {
@@ -351,6 +441,17 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'execution'
       )
       expect(execGroups.length).toBeGreaterThan(0)
+      if (execGroups[0].type !== 'execution') return
+      expect(execGroups[0].cards[0].errors[0]).toMatchObject({
+        message: 'RuntimeError: CUDA out of memory',
+        details: 'line 1\nline 2',
+        isRuntimeError: true,
+        exceptionType: 'RuntimeError'
+      })
+      // TODO(FE-816 overlay-redesign): Runtime execution errors intentionally
+      // bypass catalog display fields until targeted runtime handling lands.
+      expect(execGroups[0].cards[0].errors[0].displayItemLabel).toBeUndefined()
+      expect(execGroups[0].cards[0].errors[0].toastTitle).toBeUndefined()
     })
 
     it('includes prompt error when present', async () => {
@@ -363,7 +464,8 @@ describe('useErrorGroups', () => {
       await nextTick()
 
       const promptGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'execution' && g.title === 'No outputs'
+        (g) =>
+          g.type === 'execution' && g.displayTitle === 'Prompt has no outputs'
       )
       expect(promptGroup).toBeDefined()
     })
@@ -546,7 +648,7 @@ describe('useErrorGroups', () => {
       expect(messages.filter((m) => m === 'Error A')).toHaveLength(1)
     })
 
-    it('includes missing node group title as message', async () => {
+    it('includes missing node group display message', async () => {
       const { groups } = createErrorGroups()
       const missingNodesStore = useMissingNodesErrorStore()
       missingNodesStore.setMissingNodeTypes([
@@ -558,7 +660,9 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'missing_node'
       )
       expect(missingGroup).toBeDefined()
-      expect(groups.groupedErrorMessages.value).toContain(missingGroup!.title)
+      expect(groups.groupedErrorMessages.value).toContain(
+        missingGroup!.displayMessage
+      )
     })
   })
 
@@ -703,6 +807,8 @@ describe('useErrorGroups', () => {
         (g) => g.type === 'missing_model'
       )
       expect(modelGroup).toBeDefined()
+      expect(modelGroup?.groupKey).toBe('missing_model')
+      expect(modelGroup?.displayTitle).toBe('Missing Models (1)')
     })
   })
 

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -33,6 +33,10 @@ import type {
 import type { MissingMediaGroup } from '@/platform/missingMedia/types'
 import { groupCandidatesByName } from '@/platform/missingModel/missingModelScan'
 import { groupCandidatesByMediaType } from '@/platform/missingMedia/missingMediaScan'
+import {
+  resolveMissingErrorMessage,
+  resolveRunErrorMessage
+} from '@/platform/errorCatalog/errorMessageResolver'
 import {
   isNodeExecutionId,
   compareExecutionId
@@ -40,11 +44,6 @@ import {
 
 const PROMPT_CARD_ID = '__prompt__'
 const SINGLE_GROUP_KEY = '__single__'
-const KNOWN_PROMPT_ERROR_TYPES = new Set([
-  'prompt_no_outputs',
-  'no_prompt',
-  'server_error'
-])
 
 /** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
 const RESOLVING = '__RESOLVING__'
@@ -66,6 +65,7 @@ export interface SwapNodeGroup {
 
 interface GroupEntry {
   type: 'execution'
+  displayTitle: string
   priority: number
   cards: Map<string, ErrorCardData>
 }
@@ -104,13 +104,19 @@ function resolveNodeInfo(nodeId: string) {
 
 function getOrCreateGroup(
   groupsMap: Map<string, GroupEntry>,
-  title: string,
+  groupKey: string,
+  displayTitle = groupKey,
   priority = 1
 ): Map<string, ErrorCardData> {
-  let entry = groupsMap.get(title)
+  let entry = groupsMap.get(groupKey)
   if (!entry) {
-    entry = { type: 'execution', priority, cards: new Map() }
-    groupsMap.set(title, entry)
+    entry = {
+      type: 'execution',
+      displayTitle,
+      priority,
+      cards: new Map()
+    }
+    groupsMap.set(groupKey, entry)
   }
   return entry.cards
 }
@@ -160,7 +166,10 @@ function addCardErrorToGroup(
   card: ErrorCardData,
   error: ErrorItem
 ) {
-  const group = getOrCreateGroup(messageMap, error.message, 1)
+  const displayTitle =
+    error.displayTitle ?? error.displayMessage ?? error.message
+  const groupKey = error.catalogId ?? displayTitle
+  const group = getOrCreateGroup(messageMap, groupKey, displayTitle, 1)
   if (!group.has(card.id)) {
     group.set(card.id, { ...card, errors: [] })
   }
@@ -173,15 +182,16 @@ function compareNodeId(a: ErrorCardData, b: ErrorCardData): number {
 
 function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
   return Array.from(groupsMap.entries())
-    .map(([title, groupData]) => ({
+    .map(([rawGroupKey, groupData]) => ({
       type: 'execution' as const,
-      title,
+      groupKey: `execution:${rawGroupKey}`,
+      displayTitle: groupData.displayTitle,
       cards: Array.from(groupData.cards.values()).sort(compareNodeId),
       priority: groupData.priority
     }))
     .sort((a, b) => {
       if (a.priority !== b.priority) return a.priority - b.priority
-      return a.title.localeCompare(b.title)
+      return a.displayTitle.localeCompare(b.displayTitle)
     })
 }
 
@@ -199,8 +209,16 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
         cardIndex: ci,
         searchableNodeId: card.nodeId ?? '',
         searchableNodeTitle: card.nodeTitle ?? '',
-        searchableMessage: card.errors.map((e) => e.message).join(' '),
-        searchableDetails: card.errors.map((e) => e.details ?? '').join(' ')
+        searchableMessage: card.errors
+          .map((e) =>
+            [e.displayTitle, e.displayMessage, e.message]
+              .filter(Boolean)
+              .join(' ')
+          )
+          .join(' '),
+        searchableDetails: card.errors
+          .map((e) => [e.displayDetails, e.details].filter(Boolean).join(' '))
+          .join(' ')
       })
     }
   }
@@ -235,10 +253,7 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
     .filter((group) => group.type !== 'execution' || group.cards.length > 0)
 }
 
-export function useErrorGroups(
-  searchQuery: MaybeRefOrGetter<string>,
-  t: (key: string) => string
-) {
+export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
   const executionErrorStore = useExecutionErrorStore()
   const missingNodesStore = useMissingNodesErrorStore()
   const missingModelStore = useMissingModelStore()
@@ -323,11 +338,13 @@ export function useErrorGroups(
   ) {
     if (filterBySelection && !isErrorInSelection(nodeId)) return
     const groupKey = isSingleNodeSelected.value ? SINGLE_GROUP_KEY : classType
-    const cards = getOrCreateGroup(groupsMap, groupKey, 1)
+    const cards = getOrCreateGroup(groupsMap, groupKey, classType, 1)
     if (!cards.has(nodeId)) {
       cards.set(nodeId, createErrorCard(nodeId, classType, idPrefix))
     }
-    cards.get(nodeId)?.errors.push(...errors)
+    const card = cards.get(nodeId)
+    if (!card) return
+    card.errors.push(...errors)
   }
 
   function processPromptError(groupsMap: Map<string, GroupEntry>) {
@@ -335,24 +352,27 @@ export function useErrorGroups(
       return
 
     const error = executionErrorStore.lastPromptError
-    const groupTitle = error.message
-    const cards = getOrCreateGroup(groupsMap, groupTitle, 0)
-    const isKnown = KNOWN_PROMPT_ERROR_TYPES.has(error.type)
-
-    // For server_error, resolve the i18n key based on the environment
-    let errorTypeKey = error.type
-    if (error.type === 'server_error') {
-      errorTypeKey = isCloud ? 'server_error_cloud' : 'server_error_local'
-    }
-    const i18nKey = `rightSidePanel.promptErrors.${errorTypeKey}.desc`
+    const resolvedDisplay = resolveRunErrorMessage({
+      kind: 'prompt',
+      error,
+      isCloud
+    })
+    const groupDisplayTitle = resolvedDisplay.displayTitle ?? error.message
+    const cards = getOrCreateGroup(
+      groupsMap,
+      `prompt:${error.type}`,
+      groupDisplayTitle,
+      0
+    )
 
     // Prompt errors are not tied to a node, so they bypass addNodeErrorToGroup.
     cards.set(PROMPT_CARD_ID, {
       id: PROMPT_CARD_ID,
-      title: groupTitle,
+      title: groupDisplayTitle,
       errors: [
         {
-          message: isKnown ? t(i18nKey) : error.message
+          message: error.message,
+          ...resolvedDisplay
         }
       ]
     })
@@ -367,15 +387,24 @@ export function useErrorGroups(
     for (const [nodeId, nodeError] of Object.entries(
       executionErrorStore.lastNodeErrors
     )) {
+      const nodeDisplayName =
+        resolveNodeInfo(nodeId).title || nodeError.class_type
       addNodeErrorToGroup(
         groupsMap,
         nodeId,
         nodeError.class_type,
         'node',
-        nodeError.errors.map((e) => ({
-          message: e.message,
-          details: e.details ?? undefined
-        })),
+        nodeError.errors.map((e) => {
+          return {
+            message: e.message,
+            details: e.details ?? undefined,
+            ...resolveRunErrorMessage({
+              kind: 'node_validation',
+              error: e,
+              nodeDisplayName
+            })
+          }
+        }),
         filterBySelection
       )
     }
@@ -568,16 +597,28 @@ export function useErrorGroups(
     if (swapNodeGroups.value.length > 0) {
       groups.push({
         type: 'swap_nodes' as const,
-        title: st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
-        priority: 0
+        groupKey: 'swap_nodes',
+        priority: 0,
+        ...resolveMissingErrorMessage({
+          kind: 'swap_nodes',
+          nodeTypes: missingNodesStore.missingNodesError?.nodeTypes ?? [],
+          count: swapNodeGroups.value.length,
+          isCloud
+        })
       })
     }
 
     if (missingPackGroups.value.length > 0) {
       groups.push({
         type: 'missing_node' as const,
-        title: error.message,
-        priority: 1
+        groupKey: 'missing_node',
+        priority: 1,
+        ...resolveMissingErrorMessage({
+          kind: 'missing_node',
+          nodeTypes: error.nodeTypes,
+          count: missingPackGroups.value.length,
+          isCloud
+        })
       })
     }
 
@@ -630,11 +671,21 @@ export function useErrorGroups(
 
   function buildMissingModelGroups(): ErrorGroup[] {
     if (!missingModelGroups.value.length) return []
+    const count = missingModelGroups.value.reduce(
+      (total, group) => total + group.models.length,
+      0
+    )
     return [
       {
         type: 'missing_model' as const,
-        title: `${t('rightSidePanel.missingModels.missingModelsTitle')} (${missingModelGroups.value.reduce((count, group) => count + group.models.length, 0)})`,
-        priority: 2
+        groupKey: 'missing_model',
+        priority: 2,
+        ...resolveMissingErrorMessage({
+          kind: 'missing_model',
+          groups: missingModelGroups.value,
+          count,
+          isCloud
+        })
       }
     ]
   }
@@ -654,8 +705,15 @@ export function useErrorGroups(
     return [
       {
         type: 'missing_media' as const,
-        title: `${t('rightSidePanel.missingMedia.missingMediaTitle')} (${totalItems})`,
-        priority: 3
+        groupKey: 'missing_media',
+        priority: 3,
+        ...resolveMissingErrorMessage({
+          kind: 'missing_media',
+          groups: missingMediaGroups.value,
+          count: totalItems,
+          mediaTypes: missingMediaGroups.value.map((group) => group.mediaType),
+          isCloud
+        })
       }
     ]
   }
@@ -736,11 +794,21 @@ export function useErrorGroups(
 
   function buildMissingModelGroupsFiltered(): ErrorGroup[] {
     if (!filteredMissingModelGroups.value.length) return []
+    const count = filteredMissingModelGroups.value.reduce(
+      (total, group) => total + group.models.length,
+      0
+    )
     return [
       {
         type: 'missing_model' as const,
-        title: `${t('rightSidePanel.missingModels.missingModelsTitle')} (${filteredMissingModelGroups.value.reduce((count, group) => count + group.models.length, 0)})`,
-        priority: 2
+        groupKey: 'missing_model',
+        priority: 2,
+        ...resolveMissingErrorMessage({
+          kind: 'missing_model',
+          groups: filteredMissingModelGroups.value,
+          count,
+          isCloud
+        })
       }
     ]
   }
@@ -754,8 +822,17 @@ export function useErrorGroups(
     return [
       {
         type: 'missing_media' as const,
-        title: `${t('rightSidePanel.missingMedia.missingMediaTitle')} (${totalItems})`,
-        priority: 3
+        groupKey: 'missing_media',
+        priority: 3,
+        ...resolveMissingErrorMessage({
+          kind: 'missing_media',
+          groups: filteredMissingMediaGroups.value,
+          count: totalItems,
+          mediaTypes: filteredMissingMediaGroups.value.map(
+            (group) => group.mediaType
+          ),
+          isCloud
+        })
       }
     ]
   }
@@ -813,11 +890,11 @@ export function useErrorGroups(
       if (group.type === 'execution') {
         for (const card of group.cards) {
           for (const err of card.errors) {
-            messages.add(err.message)
+            messages.add(err.displayMessage ?? err.message)
           }
         }
       } else {
-        messages.add(group.title)
+        messages.add(group.displayMessage ?? group.displayTitle)
       }
     }
     return Array.from(messages)

src/components/rightSidePanel/errors/useErrorReport.ts

@@ -23,7 +23,7 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
     return Object.fromEntries(
       card.errors.map((error, idx) => [
         idx,
-        enrichedDetails[idx] ?? error.details
+        enrichedDetails[idx] ?? error.displayDetails ?? error.details
       ])
     )
   })

src/components/searchbox/NodeSearchBoxPopover.test.ts

@@ -5,9 +5,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, defineComponent, nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { Settings } from '@/schemas/apiSchema'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBoxPopover from './NodeSearchBoxPopover.vue'
@@ -71,7 +74,8 @@ describe('NodeSearchBoxPopover', () => {
     const NodeSearchContentStub = defineComponent({
       name: 'NodeSearchContent',
       props: {
-        filters: { type: Array, default: () => [] }
+        filters: { type: Array, default: () => [] },
+        defaultRootFilter: { type: String, default: null }
       },
       emits: ['addFilter', 'removeFilter', 'addNode', 'hoverNode'],
       setup(_, { emit }) {
@@ -79,7 +83,8 @@ describe('NodeSearchBoxPopover', () => {
           emit('addNode', nodeDef, dragEvent)
         return {}
       },
-      template: '<div data-testid="search-content-v2"></div>'
+      template:
+        '<div data-testid="search-content-v2" :data-default-root-filter="defaultRootFilter"></div>'
     })
 
     const pinia = createTestingPinia({
@@ -276,4 +281,75 @@ describe('NodeSearchBoxPopover', () => {
       )
     })
   })
+
+  describe('defaultRootFilter on dialog open', () => {
+    function setGraphNodes(nodes: unknown[]) {
+      const canvasStore = useCanvasStore()
+      canvasStore.canvas = {
+        graph: { nodes },
+        allow_searchbox: false,
+        setDirty: vi.fn(),
+        linkConnector: {
+          events: new EventTarget(),
+          reset: vi.fn(),
+          disconnectLinks: vi.fn()
+        }
+      } as unknown as ReturnType<typeof useCanvasStore>['canvas']
+    }
+
+    async function openSearch() {
+      useSearchBoxStore().visible = true
+      await nextTick()
+    }
+
+    it('defaults to Essentials when the graph is empty', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      setGraphNodes([])
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+    })
+
+    it('defaults to Essentials when the canvas is not yet available', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+    })
+
+    it('defaults to null when the graph has nodes', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+      setGraphNodes([{ id: 1 }])
+      await openSearch()
+
+      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
+        'data-default-root-filter'
+      )
+    })
+
+    it('re-evaluates each time the dialog opens', async () => {
+      renderComponent({ 'Comfy.NodeSearchBoxImpl': 'default' })
+
+      setGraphNodes([])
+      await openSearch()
+      expect(screen.getByTestId('search-content-v2')).toHaveAttribute(
+        'data-default-root-filter',
+        RootCategory.Essentials
+      )
+
+      useSearchBoxStore().visible = false
+      await nextTick()
+      setGraphNodes([{ id: 1 }])
+      await openSearch()
+      expect(screen.getByTestId('search-content-v2')).not.toHaveAttribute(
+        'data-default-root-filter'
+      )
+    })
+  })
 })

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -27,6 +27,7 @@
         <div v-if="useSearchBoxV2" role="search" class="relative">
           <NodeSearchContent
             :filters="nodeFilters"
+            :default-root-filter="defaultRootFilter"
             @add-filter="addFilter"
             @remove-filter="removeFilter"
             @add-node="addNode"
@@ -76,6 +77,8 @@ import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
+import { RootCategory } from '@/components/searchbox/v2/rootCategories'
+import type { RootCategoryId } from '@/components/searchbox/v2/rootCategories'
 
 import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
@@ -87,6 +90,7 @@ let disconnectOnReset = false
 const settingStore = useSettingStore()
 const searchBoxStore = useSearchBoxStore()
 const litegraphService = useLitegraphService()
+const canvasStore = useCanvasStore()
 const { trackFeatureUsed } = useSurveyFeatureTracking('node-search')
 
 const { visible, newSearchBoxEnabled, useSearchBoxV2 } =
@@ -102,6 +106,13 @@ const enableNodePreview = computed(
     settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview') &&
     windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
 )
+const defaultRootFilter = ref<RootCategoryId | null>(null)
+watch(visible, (isVisible) => {
+  if (!isVisible) return
+  defaultRootFilter.value = !canvasStore.canvas?.graph?.nodes?.length
+    ? RootCategory.Essentials
+    : null
+})
 function getNewNodeLocation(): Point {
   return triggerEvent
     ? [triggerEvent.canvasX, triggerEvent.canvasY]
@@ -126,7 +137,6 @@ function clearFilters() {
 function closeDialog() {
   visible.value = false
 }
-const canvasStore = useCanvasStore()
 
 function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
   const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')

src/components/searchbox/v2/NodeSearchContent.test.ts

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import NodeSearchContent from '@/components/searchbox/v2/NodeSearchContent.vue'
+import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import {
   createMockNodeDef,
   setViewport,
@@ -230,6 +231,48 @@ describe('NodeSearchContent', () => {
       })
     })
 
+    it('should apply defaultRootFilter when provided and category is available', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'EssentialNode',
+          display_name: 'Essential Node',
+          essentials_category: 'basic'
+        }),
+        createMockNodeDef({
+          name: 'RegularNode',
+          display_name: 'Regular Node'
+        })
+      ])
+
+      renderComponent({ defaultRootFilter: RootCategory.Essentials })
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('node-item')
+        expect(items).toHaveLength(1)
+        expect(items[0]).toHaveTextContent('Essential Node')
+      })
+    })
+
+    it('should ignore defaultRootFilter of Essentials when no essentials exist', async () => {
+      useNodeDefStore().updateNodeDefs([
+        createMockNodeDef({
+          name: 'FrequentNode',
+          display_name: 'Frequent Node'
+        })
+      ])
+      vi.spyOn(useNodeFrequencyStore(), 'topNodeDefs', 'get').mockReturnValue([
+        useNodeDefStore().nodeDefsByName['FrequentNode']
+      ])
+
+      renderComponent({ defaultRootFilter: RootCategory.Essentials })
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('node-item')
+        expect(items).toHaveLength(1)
+        expect(items[0]).toHaveTextContent('Frequent Node')
+      })
+    })
+
     it('should show only API nodes when Partner Nodes filter is active', async () => {
       useNodeDefStore().updateNodeDefs([
         createMockNodeDef({

src/components/searchbox/v2/NodeSearchContent.vue

@@ -141,8 +141,9 @@ const sourceCategoryFilters: Record<string, (n: ComfyNodeDefImpl) => boolean> =
     [RootCategory.Custom]: isCustomNode
   }
 
-const { filters } = defineProps<{
+const { filters, defaultRootFilter = null } = defineProps<{
   filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
+  defaultRootFilter?: RootCategoryId | null
 }>()
 
 const emit = defineEmits<{
@@ -193,8 +194,12 @@ function onSearchFocus() {
   if (isMobile.value) isSidebarOpen.value = false
 }
 
-// Root filter from filter bar category buttons (radio toggle)
-const rootFilter = ref<RootCategoryId | null>(null)
+const rootFilter = ref<RootCategoryId | null>(
+  defaultRootFilter === RootCategory.Essentials &&
+    !nodeAvailability.value.essential
+    ? null
+    : defaultRootFilter
+)
 
 const rootFilterLabel = computed(() => {
   switch (rootFilter.value) {

src/composables/graph/contextMenuConverter.ts

@@ -245,9 +245,7 @@ const MENU_ORDER: string[] = [
   'Paste Image',
   'Save Image',
   'Copy (Clipspace)',
-  'Paste (Clipspace)',
-  // Fallback for other core items
-  'Convert to Group Node (Deprecated)'
+  'Paste (Clipspace)'
 ]
 
 /**

src/composables/graph/useGraphNodeManager.ts

@@ -23,6 +23,7 @@ import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
+import { IS_CONTROL_WIDGET } from '@/scripts/widgets'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
 import { normalizeControlOption } from '@/types/simplifiedWidget'
@@ -154,9 +155,7 @@ function isPromotedDOMWidget(widget: IBaseWidget): boolean {
 export function getControlWidget(
   widget: IBaseWidget
 ): SafeControlWidget | undefined {
-  const cagWidget = widget.linkedWidgets?.find(
-    (w) => w.name == 'control_after_generate'
-  )
+  const cagWidget = widget.linkedWidgets?.find((w) => w[IS_CONTROL_WIDGET])
   if (!cagWidget) return
   return {
     value: normalizeControlOption(cagWidget.value),

src/composables/graph/useMoreOptionsMenu.ts

@@ -45,8 +45,7 @@ export interface SubMenuOption {
 }
 
 export enum BadgeVariant {
-  NEW = 'new',
-  DEPRECATED = 'deprecated'
+  NEW = 'new'
 }
 
 // Global singleton for NodeOptions component reference

src/composables/graph/useSelectionMenuOptions.test.ts

@@ -72,14 +72,14 @@ describe('useSelectionMenuOptions - multiple nodes options', () => {
     expect(mocks.frameNodes).toHaveBeenCalledOnce()
   })
 
-  it('returns Convert to Group Node option from getMultipleNodesOptions', () => {
+  it('does not include a Convert to Group Node option', () => {
     const { getMultipleNodesOptions } = useSelectionMenuOptions()
     const options = getMultipleNodesOptions()
 
     const groupNodeOption = options.find(
       (opt) => opt.label === 'contextMenu.Convert to Group Node'
     )
-    expect(groupNodeOption).toBeDefined()
+    expect(groupNodeOption).toBeUndefined()
   })
 })
 

src/composables/graph/useSelectionMenuOptions.ts

@@ -1,8 +1,6 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCommandStore } from '@/stores/commandStore'
-
 import { useFrameNodes } from './useFrameNodes'
 import { BadgeVariant } from './useMoreOptionsMenu'
 import type { MenuOption } from './useMoreOptionsMenu'
@@ -102,28 +100,13 @@ export function useSelectionMenuOptions() {
     return options
   }
 
-  const getMultipleNodesOptions = (): MenuOption[] => {
-    const convertToGroupNodes = () => {
-      const commandStore = useCommandStore()
-      void commandStore.execute(
-        'Comfy.GroupNode.ConvertSelectedNodesToGroupNode'
-      )
+  const getMultipleNodesOptions = (): MenuOption[] => [
+    {
+      label: t('g.frameNodes'),
+      icon: 'icon-[lucide--frame]',
+      action: frameNodes
     }
-
-    return [
-      {
-        label: t('contextMenu.Convert to Group Node'),
-        icon: 'icon-[lucide--group]',
-        action: convertToGroupNodes,
-        badge: BadgeVariant.DEPRECATED
-      },
-      {
-        label: t('g.frameNodes'),
-        icon: 'icon-[lucide--frame]',
-        action: frameNodes
-      }
-    ]
-  }
+  ]
 
   const getAlignmentOptions = (): MenuOption[] => [
     {

src/composables/useLoad3d.test.ts

@@ -144,6 +144,7 @@ describe('useLoad3d', () => {
       setMaterialMode: vi.fn(),
       toggleCamera: vi.fn(),
       setFOV: vi.fn(),
+      setRetainViewOnReload: vi.fn(),
       setLightIntensity: vi.fn(),
       setCameraState: vi.fn(),
       loadModel: vi.fn().mockResolvedValue(undefined),
@@ -568,17 +569,21 @@ describe('useLoad3d', () => {
 
       vi.mocked(mockLoad3d.toggleCamera!).mockClear()
       vi.mocked(mockLoad3d.setFOV!).mockClear()
+      vi.mocked(mockLoad3d.setRetainViewOnReload!).mockClear()
 
       composable.cameraConfig.value.cameraType = 'orthographic'
       composable.cameraConfig.value.fov = 90
+      composable.cameraConfig.value.retainViewOnReload = true
       await nextTick()
 
       expect(mockLoad3d.toggleCamera).toHaveBeenCalledWith('orthographic')
       expect(mockLoad3d.setFOV).toHaveBeenCalledWith(90)
+      expect(mockLoad3d.setRetainViewOnReload).toHaveBeenCalledWith(true)
       expect(mockNode.properties['Camera Config']).toEqual({
         cameraType: 'orthographic',
         fov: 90,
-        state: null
+        state: null,
+        retainViewOnReload: true
       })
     })