feat(website): add Education landing page with Q&A and CTA

Add the /edu page (and zh-CN/edu) wired with the existing FAQSplit01
and CtaCenter01 blocks, following the affiliates page pattern.
Includes educationFaq data (en + zh-CN), education.* i18n keys, the
education route, FAQ JSON-LD, and e2e coverage.

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

.github/workflows/ci-tests-unit.yaml

@@ -35,8 +35,8 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Run Vitest critical coverage gate
-        run: pnpm test:coverage:critical
+      - name: Run Vitest tests with coverage
+        run: pnpm test:coverage
 
       - name: Upload unit coverage artifact
         if: always() && github.event_name == 'push'

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

@@ -67,15 +67,7 @@ jobs:
 
       - name: Deploy report to Cloudflare
         id: deploy
-        if: >-
-          ${{
-            always() &&
-            !cancelled() &&
-            (
-              github.event_name != 'pull_request' ||
-              github.event.pull_request.head.repo.fork == false
-            )
-          }}
+        if: always() && !cancelled()
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

apps/website/e2e/education.spec.ts

@@ -0,0 +1,128 @@
+import { expect } from '@playwright/test'
+
+import { educationFaqs } from '../src/data/educationFaq'
+import { t } from '../src/i18n/translations'
+import { test } from './fixtures/blockExternalMedia'
+
+const PATH = '/edu'
+const LEARNING_PATH = '/learning'
+const PRICING_PATH = '/cloud/pricing'
+const FAQ_COUNT = educationFaqs.length
+const FIRST_FAQ = educationFaqs[0]
+const FAQ_HEADING_TEXT = t('education.faq.heading', 'en')
+const CTA_HEADING_TEXT = t('education.cta.heading', 'en')
+const CTA_CHOOSE_PLAN_LABEL = t('education.cta.choosePlan', 'en')
+const CTA_START_LEARNING_LABEL = t('education.cta.startLearning', 'en')
+const CTA_TERMS_LABEL = t('education.cta.termsLabel', 'en')
+
+test.describe('Education landing — desktop @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('renders the Q&A heading and is indexable', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { level: 2, name: FAQ_HEADING_TEXT })
+    ).toBeVisible()
+
+    await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
+  })
+
+  test('renders the closing CTA heading and both buttons', async ({ page }) => {
+    const ctaSection = page.locator('section').filter({
+      has: page.getByRole('heading', { level: 2, name: CTA_HEADING_TEXT })
+    })
+    const ctaHeading = ctaSection.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const choosePlan = ctaSection.getByRole('link', {
+      name: CTA_CHOOSE_PLAN_LABEL
+    })
+    await expect(choosePlan).toBeVisible()
+    await expect(choosePlan).toHaveAttribute('href', '#plans')
+
+    const startLearning = ctaSection.getByRole('link', {
+      name: CTA_START_LEARNING_LABEL
+    })
+    await expect(startLearning).toBeVisible()
+    await expect(startLearning).toHaveAttribute('href', LEARNING_PATH)
+    await expect(startLearning).not.toHaveAttribute('target', '_blank')
+  })
+
+  test('CTA section links to the pricing FAQs in the same tab', async ({
+    page
+  }) => {
+    const termsLink = page.getByRole('link', { name: CTA_TERMS_LABEL })
+    await termsLink.scrollIntoViewIfNeeded()
+    await expect(termsLink).toBeVisible()
+    await expect(termsLink).toHaveAttribute('href', PRICING_PATH)
+    await expect(termsLink).not.toHaveAttribute('target', '_blank')
+  })
+})
+
+test.describe('Education landing — desktop interactions', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('emits FAQPage structured data with one entry per FAQ', async ({
+    page
+  }) => {
+    const faqJsonLd = await page.evaluate(() => {
+      const scripts = Array.from(
+        document.querySelectorAll<HTMLScriptElement>(
+          'script[type="application/ld+json"]'
+        )
+      )
+      const match = scripts.find((s) =>
+        (s.textContent ?? '').includes('FAQPage')
+      )
+      return match?.textContent ?? null
+    })
+    expect(faqJsonLd, 'FAQ JSON-LD script').not.toBeNull()
+    const parsed = JSON.parse(faqJsonLd!)
+    expect(parsed['@type']).toBe('FAQPage')
+    expect(Array.isArray(parsed.mainEntity)).toBe(true)
+    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
+  })
+
+  test('FAQ items toggle open and closed on click', async ({ page }) => {
+    const firstQuestion = page.getByRole('button', {
+      name: FIRST_FAQ.question.en
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
+
+    await firstQuestion.click()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'true')
+    await expect(page.getByText(FIRST_FAQ.answer.en)).toBeVisible()
+
+    await firstQuestion.click()
+    await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
+  })
+})
+
+test.describe('Education landing — mobile @mobile', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(PATH)
+  })
+
+  test('closing CTA stays within the viewport width', async ({ page }) => {
+    const ctaHeading = page.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const box = await ctaHeading.boundingBox()
+    expect(box, 'CTA heading bounding box').not.toBeNull()
+    expect(box!.x + box!.width).toBeLessThanOrEqual(
+      page.viewportSize()!.width + 1
+    )
+  })
+})

apps/website/public/icons/node-link.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="32" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="#F2FF59"/>
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20 32V0C20 5.39616 15.5172 9.78053 10 9.78053C4.48276 9.78053 0 5.416 0 0V32C0 26.6038 4.48276 22.2195 10 22.2195C15.5172 22.2195 20 26.6038 20 32Z" fill="var(--fill-0, #F2FF59)"/>
 </svg>

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

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

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Component } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import CopyableField from '@/components/ui/copyable-field/CopyableField.vue'
+
+import SectionHeader from '../common/SectionHeader.vue'
+
+type CardAction =
+  | {
+      type: 'link'
+      label: string
+      href: string
+      target?: '_blank'
+      icon?: Component
+      variant?: 'default' | 'outline'
+    }
+  | { type: 'code'; value: string }
+
+export interface FeatureCard {
+  id: string
+  label?: string
+  title: string
+  description: string
+  action?: CardAction
+}
+
+type ColumnCount = 2 | 3 | 4
+
+const {
+  cards,
+  columns = 3,
+  copiedLabel,
+  copyLabel,
+  eyebrow,
+  heading,
+  subtitle
+} = defineProps<{
+  cards: readonly FeatureCard[]
+  columns?: ColumnCount
+  copiedLabel?: string
+  copyLabel?: string
+  eyebrow?: string
+  heading: string
+  subtitle?: string
+}>()
+
+const columnClass: Record<ColumnCount, string> = {
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4'
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader :label="eyebrow" align="start">
+      {{ heading }}
+      <template v-if="subtitle" #subtitle>
+        <p class="mt-4 max-w-xl text-sm text-smoke-700 lg:text-base">
+          {{ subtitle }}
+        </p>
+      </template>
+    </SectionHeader>
+
+    <div :class="cn('mt-16 grid grid-cols-1 gap-6', columnClass[columns])">
+      <div
+        v-for="card in cards"
+        :key="card.id"
+        class="bg-transparency-white-t4 flex flex-col rounded-3xl p-6 lg:p-8"
+      >
+        <p
+          v-if="card.label"
+          class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+        >
+          {{ card.label }}
+        </p>
+        <h3
+          :class="
+            cn(
+              'text-xl font-light text-primary-comfy-canvas lg:text-2xl',
+              card.label && 'mt-3'
+            )
+          "
+        >
+          {{ card.title }}
+        </h3>
+        <p class="mt-3 text-sm text-smoke-700">
+          {{ card.description }}
+        </p>
+
+        <div v-if="card.action" class="mt-6">
+          <Button
+            v-if="card.action.type === 'link'"
+            as="a"
+            :href="card.action.href"
+            :target="card.action.target"
+            :rel="
+              card.action.target === '_blank'
+                ? 'noopener noreferrer'
+                : undefined
+            "
+            :variant="card.action.variant ?? 'outline'"
+            :append-icon="card.action.icon"
+          >
+            {{ card.action.label }}
+          </Button>
+          <CopyableField
+            v-else
+            :value="card.action.value"
+            :copy-label="copyLabel"
+            :copied-label="copiedLabel"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+
+import SectionHeader from '../common/SectionHeader.vue'
+import NodeUnionIcon from '../icons/NodeUnionIcon.vue'
+
+type Cta = { label: string; href: string; target?: '_blank' }
+
+export interface FeatureStep {
+  id: string
+  number: string
+  title: string
+  description: string
+}
+
+defineProps<{
+  heading: string
+  steps: readonly FeatureStep[]
+  primaryCta?: Cta
+  secondaryCta?: Cta
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader>{{ heading }}</SectionHeader>
+
+    <!-- Step cards in a row, joined by node-union connectors on desktop -->
+    <div
+      class="mt-12 flex flex-col gap-4 lg:flex-row lg:items-stretch lg:gap-0"
+    >
+      <template v-for="(step, i) in steps" :key="step.id">
+        <div
+          v-if="i > 0"
+          class="relative z-10 -mx-px hidden shrink-0 items-center justify-center self-stretch lg:flex"
+          aria-hidden="true"
+        >
+          <NodeUnionIcon
+            class="text-primary-comfy-yellow size-4 scale-x-150 rotate-90"
+          />
+        </div>
+
+        <div
+          class="border-primary-comfy-yellow flex flex-1 flex-col rounded-[40px] border-2 bg-primary-comfy-ink p-2"
+        >
+          <div class="flex flex-1 flex-col gap-4 p-8">
+            <div>
+              <p
+                class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
+              >
+                {{ step.number }}
+              </p>
+              <h3
+                class="mt-1 text-2xl font-medium tracking-widest text-primary-comfy-canvas uppercase"
+              >
+                {{ step.title }}
+              </h3>
+            </div>
+            <p class="text-primary-comfy-canvas">
+              {{ step.description }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="primaryCta || secondaryCta"
+      class="mt-12 flex flex-col items-center gap-4 lg:flex-row lg:justify-center"
+    >
+      <Button
+        v-if="primaryCta"
+        as="a"
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        :rel="
+          primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined
+        "
+        size="lg"
+        class="w-full lg:w-auto lg:min-w-48"
+      >
+        {{ primaryCta.label }}
+      </Button>
+      <Button
+        v-if="secondaryCta"
+        as="a"
+        :href="secondaryCta.href"
+        :target="secondaryCta.target"
+        :rel="
+          secondaryCta.target === '_blank' ? 'noopener noreferrer' : undefined
+        "
+        variant="outline"
+        size="lg"
+        class="w-full lg:w-auto lg:min-w-48"
+      >
+        {{ secondaryCta.label }}
+      </Button>
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Locale } from '../../i18n/translations'
+import GlassCard from '../common/GlassCard.vue'
+import SectionHeader from '../common/SectionHeader.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+import type { VideoTrack } from '../common/VideoPlayer.vue'
+
+type RowMedia =
+  | { type: 'image'; src: string; alt?: string }
+  | {
+      type: 'video'
+      src: string
+      // <video> has no native alt; used as the player's accessible label.
+      alt?: string
+      poster?: string
+      tracks?: readonly VideoTrack[]
+      autoplay?: boolean
+      loop?: boolean
+      minimal?: boolean
+      hideControls?: boolean
+    }
+
+export interface FeatureRow {
+  id: string
+  title: string
+  description: string
+  media: RowMedia
+}
+
+const {
+  heading,
+  eyebrow,
+  locale = 'en',
+  rows
+} = defineProps<{
+  heading: string
+  eyebrow?: string
+  locale?: Locale
+  rows: readonly FeatureRow[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <SectionHeader :label="eyebrow" max-width="xl">
+      {{ heading }}
+    </SectionHeader>
+
+    <div class="mt-16 flex flex-col gap-4 lg:gap-6">
+      <GlassCard
+        v-for="(row, i) in rows"
+        :key="row.id"
+        class="flex flex-col gap-8 lg:flex-row lg:items-stretch lg:gap-0"
+      >
+        <!-- Text -->
+        <div
+          :class="
+            cn(
+              'order-2 flex flex-col justify-center gap-4 p-6 lg:w-1/2 lg:p-12',
+              i % 2 === 0 ? 'lg:order-1' : 'lg:order-2'
+            )
+          "
+        >
+          <h3 class="text-2xl font-light text-primary-comfy-canvas lg:text-3xl">
+            {{ row.title }}
+          </h3>
+          <p class="text-sm text-smoke-700 lg:text-base">
+            {{ row.description }}
+          </p>
+        </div>
+
+        <!-- Media: image or video -->
+        <div
+          :class="
+            cn(
+              'order-1 flex lg:w-1/2',
+              i % 2 === 0 ? 'lg:order-2' : 'lg:order-1'
+            )
+          "
+        >
+          <img
+            v-if="row.media.type === 'image'"
+            :src="row.media.src"
+            :alt="row.media.alt ?? row.title"
+            loading="lazy"
+            decoding="async"
+            class="aspect-4/3 w-full rounded-4xl object-cover"
+          />
+          <VideoPlayer
+            v-else
+            :locale="locale"
+            :aria-label="row.media.alt ?? row.title"
+            :src="row.media.src"
+            :poster="row.media.poster"
+            :tracks="row.media.tracks"
+            :autoplay="row.media.autoplay"
+            :loop="row.media.loop"
+            :minimal="row.media.minimal"
+            :hide-controls="row.media.hideControls"
+            class="w-full"
+          />
+        </div>
+      </GlassCard>
+    </div>
+  </section>
+</template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
+import type { HTMLAttributes } from 'vue'
+
 import type { Locale } from '../../i18n/translations'
 import BrandButton from '../common/BrandButton.vue'
 import ProductHeroBadge from '../common/ProductHeroBadge.vue'
@@ -27,6 +29,7 @@ const {
   badgeLogoAlt,
   title,
   titleHighlight,
+  subtitle,
   features = [],
   primaryCta,
   secondaryCta,
@@ -41,14 +44,17 @@ const {
   videoAutoplay = false,
   videoLoop = false,
   videoMinimal = false,
-  videoHideControls = false
+  videoHideControls = false,
+  class: className
 } = defineProps<{
   locale?: Locale
+  class?: HTMLAttributes['class']
   badgeText: string
   badgeLogoSrc?: string
   badgeLogoAlt?: string
   title: string
   titleHighlight?: string
+  subtitle?: string
   features?: string[]
   primaryCta: Cta
   secondaryCta?: Cta
@@ -72,7 +78,8 @@ const {
     :class="
       cn(
         'max-w-9xl relative mx-auto flex flex-col items-center gap-12 px-6 pt-20 pb-16 md:pt-28 md:pb-24 lg:items-center lg:gap-16 lg:px-16',
-        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse'
+        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse',
+        className
       )
     "
   >
@@ -84,7 +91,7 @@ const {
       />
 
       <h1
-        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] text-primary-comfy-canvas md:text-4xl lg:text-5xl"
+        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] whitespace-pre-line text-primary-comfy-canvas md:text-4xl lg:text-5xl"
       >
         <template v-if="titleHighlight">
           <span class="text-primary-warm-white">{{ titleHighlight }}</span>
@@ -93,6 +100,13 @@ const {
         <template v-else>{{ title }}</template>
       </h1>
 
+      <p
+        v-if="subtitle"
+        class="mt-6 max-w-xl text-base text-primary-comfy-canvas/80"
+      >
+        {{ subtitle }}
+      </p>
+
       <ul v-if="features.length" class="mt-8 space-y-3">
         <li
           v-for="feature in features"
@@ -127,27 +141,29 @@ const {
     </div>
 
     <div class="order-first w-full lg:order-last lg:flex-1">
-      <VideoPlayer
-        v-if="videoSrc"
-        :locale
-        :src="videoSrc"
-        :poster="videoPoster"
-        :tracks="videoTracks"
-        :autoplay="videoAutoplay"
-        :loop="videoLoop"
-        :minimal="videoMinimal"
-        :hide-controls="videoHideControls"
-      />
-      <img
-        v-else-if="imageSrc"
-        :src="imageSrc"
-        :alt="imageAlt"
-        :width="imageWidth"
-        :height="imageHeight"
-        fetchpriority="high"
-        decoding="async"
-        class="aspect-4/3 w-full rounded-3xl object-cover"
-      />
+      <slot name="media">
+        <VideoPlayer
+          v-if="videoSrc"
+          :locale
+          :src="videoSrc"
+          :poster="videoPoster"
+          :tracks="videoTracks"
+          :autoplay="videoAutoplay"
+          :loop="videoLoop"
+          :minimal="videoMinimal"
+          :hide-controls="videoHideControls"
+        />
+        <img
+          v-else-if="imageSrc"
+          :src="imageSrc"
+          :alt="imageAlt"
+          :width="imageWidth"
+          :height="imageHeight"
+          fetchpriority="high"
+          decoding="async"
+          class="aspect-4/3 w-full rounded-3xl object-cover"
+        />
+      </slot>
     </div>
   </section>
 </template>

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+export interface Reason {
+  id: string
+  title: string
+  description: string
+}
+
+const { highlightClass = 'text-white' } = defineProps<{
+  heading: string
+  headingHighlight?: string
+  highlightClass?: string
+  subtitle?: string
+  reasons: readonly Reason[]
+}>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col gap-4 px-6 py-16 lg:flex-row lg:gap-16 lg:py-24"
+  >
+    <!-- Left heading -->
+    <div
+      class="sticky top-20 z-10 w-full shrink-0 self-start bg-primary-comfy-ink py-4 lg:top-28 lg:w-115 lg:py-0"
+    >
+      <h2
+        class="text-4xl/16 font-light whitespace-pre-line text-primary-comfy-canvas lg:text-5xl/16"
+      >
+        {{ heading
+        }}<span v-if="headingHighlight" :class="highlightClass">{{
+          headingHighlight
+        }}</span>
+      </h2>
+      <p v-if="subtitle" class="mt-6 text-sm text-primary-comfy-canvas/70">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- Right reasons list -->
+    <div class="flex-1">
+      <div
+        v-for="reason in reasons"
+        :key="reason.id"
+        class="flex flex-col gap-4 border-b border-primary-comfy-canvas/20 py-10 first:pt-0 lg:gap-12 xl:flex-row"
+      >
+        <div class="shrink-0 xl:w-84">
+          <h3
+            class="text-2xl font-light whitespace-pre-line text-primary-comfy-canvas"
+          >
+            {{ reason.title }}
+          </h3>
+          <slot name="reason-extra" :reason="reason" />
+        </div>
+        <p class="flex-1 text-sm text-primary-comfy-canvas/70">
+          {{ reason.description }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -7,12 +7,14 @@ const {
   label,
   headingTag = 'h2',
   maxWidth = 'lg',
-  headingSize = 'section'
+  headingSize = 'section',
+  align = 'center'
 } = defineProps<{
   label?: string
   headingTag?: 'h1' | 'h2' | 'h3'
   maxWidth?: 'md' | 'lg' | 'xl'
   headingSize?: 'section' | 'hero'
+  align?: 'center' | 'start'
 }>()
 
 const maxWidthClass = {
@@ -28,7 +30,14 @@ const headingSizeClass = {
 </script>
 
 <template>
-  <div :class="cn('mx-auto text-center', maxWidthClass[maxWidth])">
+  <div
+    :class="
+      cn(
+        maxWidthClass[maxWidth],
+        align === 'center' ? 'mx-auto text-center' : 'text-left'
+      )
+    "
+  >
     <SectionLabel v-if="label">{{ label }}</SectionLabel>
     <component
       :is="headingTag"

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

@@ -37,7 +37,8 @@ const topColumns: { title: string; links: FooterLink[] }[] = [
       { label: t('nav.comfyLocal', locale), href: routes.download },
       { label: t('nav.comfyCloud', locale), href: routes.cloud },
       { label: t('nav.comfyApi', locale), href: routes.api },
-      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise }
+      { label: t('nav.comfyEnterprise', locale), href: routes.cloudEnterprise },
+      { label: t('nav.mcpServer', locale), href: routes.mcp }
     ]
   },
   {

apps/website/src/components/ui/copyable-field/CopyableField.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Check, Copy } from '@lucide/vue'
+import { useClipboard } from '@vueuse/core'
+
+// Interactive: the copy button is inert until its host island is hydrated.
+// Render under a `client:*` directive (e.g. `client:visible`) when the page
+// needs it to work.
+const {
+  value,
+  copyLabel = 'Copy',
+  copiedLabel = 'Copied'
+} = defineProps<{ value: string; copyLabel?: string; copiedLabel?: string }>()
+
+const { copy, copied } = useClipboard({ copiedDuring: 2000 })
+
+function handleCopy() {
+  void copy(value)
+}
+</script>
+
+<template>
+  <div
+    class="bg-transparency-white-t4 border-primary-warm-gray flex items-center gap-2 rounded-xl border px-4 py-3"
+  >
+    <span class="flex-1 truncate font-mono text-xs text-primary-comfy-canvas">
+      {{ value }}
+    </span>
+    <button
+      type="button"
+      :aria-label="copied ? copiedLabel : copyLabel"
+      class="text-primary-warm-gray shrink-0 cursor-pointer transition-colors hover:text-primary-comfy-canvas"
+      @click="handleCopy"
+    >
+      <component :is="copied ? Check : Copy" class="size-4" />
+    </button>
+  </div>
+</template>

apps/website/src/config/routes.ts

@@ -14,12 +14,14 @@ const baseRoutes = {
   customers: '/customers',
   demos: '/demos',
   learning: '/learning',
+  education: '/edu',
   termsOfService: '/terms-of-service',
   privacyPolicy: '/privacy-policy',
   affiliates: '/affiliates',
   affiliateTerms: '/affiliates/terms',
   contact: '/contact',
-  models: '/p/supported-models'
+  models: '/p/supported-models',
+  mcp: '/mcp'
 } as const
 
 type Routes = typeof baseRoutes
@@ -65,6 +67,8 @@ export const externalLinks = {
   github: 'https://github.com/Comfy-Org/ComfyUI',
   githubInstall: 'https://github.com/Comfy-Org/ComfyUI#installing',
   instagram: 'https://www.instagram.com/comfyui/',
+  mcpServer: 'https://cloud.comfy.org/mcp',
+  mcpSkills: 'https://github.com/Comfy-Org/comfy-skills',
   platform: 'https://platform.comfy.org',
   platformUsage: 'https://platform.comfy.org/profile/usage',
   reddit: 'https://www.reddit.com/r/comfyui/',

apps/website/src/data/drops.ts

@@ -127,7 +127,7 @@ export const drops: readonly Drop[] = [
     },
     cta: {
       label: EXPLORE,
-      href: { en: externalLinks.docsMcp, 'zh-CN': externalLinks.docsMcp }
+      href: { en: '/mcp', 'zh-CN': '/zh-CN/mcp' }
     }
   },
   {

apps/website/src/data/educationFaq.ts

@@ -0,0 +1,166 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface EducationFaq {
+  id: string
+  question: LocalizedText
+  answer: LocalizedText
+}
+
+export const educationFaqs: readonly EducationFaq[] = [
+  {
+    id: 'what-discount',
+    question: {
+      en: 'What discount do I get?',
+      'zh-CN': '我能获得多少折扣？'
+    },
+    answer: {
+      en: 'Verified students and educators get an extra 10% off any individual plan and an extra 5% off any team plan, up to 25% in total for annual team plans. The team discount stacks with annual pricing, so the more you commit, the more you save.',
+      'zh-CN':
+        '经过验证的学生和教育工作者可在任意个人方案上额外享受 10% 折扣，在任意团队方案上额外享受 5% 折扣；年付团队方案最高可累计达 25% 的折扣。团队折扣可与年付价格叠加，因此承诺时间越长，节省越多。'
+    }
+  },
+  {
+    id: 'how-verification-works',
+    question: {
+      en: 'How does verification work?',
+      'zh-CN': '验证是如何进行的？'
+    },
+    answer: {
+      en: "It takes about a minute, and it's all self-serve:\n\n1. Pick a plan above.\n2. Sign in, or create your Comfy account.\n3. On the payment page, if you're using a recognized school email, your discount is already applied.\n4. If your email isn't recognized, you'll see a quick note to reach support@comfy.org so we can sort it out.",
+      'zh-CN':
+        '大约只需一分钟，并且全程自助：\n\n1. 在上方选择一个方案。\n2. 登录或创建您的 Comfy 账户。\n3. 在付款页面，如果您使用的是可识别的学校邮箱，折扣会自动应用。\n4. 如果系统无法识别您的邮箱，您会看到一条提示，请联系 support@comfy.org，我们会帮您处理。'
+    }
+  },
+  {
+    id: 'who-is-eligible',
+    question: {
+      en: "Who's eligible?",
+      'zh-CN': '谁有资格？'
+    },
+    answer: {
+      en: "Enrolled higher-ed students and educators, verified by your school email when you sign up. Teaching a younger class? K-12 and under-18 use needs a quick arrangement with us first, so reach out to us at education@comfy.org and we'll help.",
+      'zh-CN':
+        '在读的高等教育学生和教育工作者，注册时通过学校邮箱验证。教的是更低年级？K-12 及 18 岁以下的使用需要先与我们做一个简单的安排，请通过 education@comfy.org 联系我们，我们会提供帮助。'
+    }
+  },
+  {
+    id: 'independent-instructor',
+    question: {
+      en: "I teach independently or run workshops, and I don't have a school email. Can I still get education pricing?",
+      'zh-CN': '我独立授课或举办工作坊，没有学校邮箱。我还能获得教育定价吗？'
+    },
+    answer: {
+      en: "The automatic discount keys off recognized school domains, so independent instructors, bootcamps, and for-profit workshops won't clear the email check on their own. Email education@comfy.org with a bit about what you teach and who it's for, and we'll find the right setup for you.",
+      'zh-CN':
+        '自动折扣依据可识别的学校域名进行判定，因此独立讲师、训练营和营利性工作坊无法仅凭邮箱验证通过。请发送邮件至 education@comfy.org，简单介绍一下您教授的内容和面向的对象，我们会为您找到合适的方案。'
+    }
+  },
+  {
+    id: 'cloud-or-local',
+    question: {
+      en: 'Is this for Comfy Cloud or local ComfyUI?',
+      'zh-CN': '这是针对 Comfy Cloud 还是本地 ComfyUI？'
+    },
+    answer: {
+      en: 'The discount is for Comfy Cloud, which gives you managed GPUs and a monthly pool of credits. Local ComfyUI is free and open source for everyone, so you can keep building locally whenever you like.',
+      'zh-CN':
+        '折扣适用于 Comfy Cloud，它为您提供托管 GPU 和每月的额度池。本地 ComfyUI 对所有人免费且开源，因此您随时可以继续在本地进行创作。'
+    }
+  },
+  {
+    id: 'students-own-account',
+    question: {
+      en: 'Do students each need their own account?',
+      'zh-CN': '学生需要各自拥有账户吗？'
+    },
+    answer: {
+      en: "You're never charged per seat. On an individual plan, each person has their own subscription and their own credits. On a team plan, you get one workspace with a shared pool of credits and can invite as many students as you want. Bring a class in for a workshop, then remove them when it's over. You only ever pay for the credits, not per student.",
+      'zh-CN':
+        '我们从不按席位收费。在个人方案中，每个人都有各自的订阅和各自的额度。在团队方案中，您将获得一个工作区，共享一个额度池，并可邀请任意数量的学生。把一个班级带进来参加工作坊，结束后再将他们移除。您始终只为额度付费，而不是按学生数付费。'
+    }
+  },
+  {
+    id: 'removing-a-student',
+    question: {
+      en: 'What happens to a student when I remove them from the team?',
+      'zh-CN': '当我把学生从团队中移除后会怎样？'
+    },
+    answer: {
+      en: 'They keep their account. When someone is removed from a team workspace, they return to their own personal workspace on the free plan, with the work they created still theirs. They can upgrade to a paid plan whenever they like. So you can bring a class in for a term and clear them out at the end without anyone losing access or their work.',
+      'zh-CN':
+        '他们会保留自己的账户。当某人从团队工作区中被移除后，会回到自己免费方案下的个人工作区，他们创建的作品仍归本人所有。他们可以随时升级到付费方案。因此您可以在一个学期内带一个班级进来，并在学期结束时将他们清出，而不会有人失去访问权限或作品。'
+    }
+  },
+  {
+    id: 'stack-with-affiliate',
+    question: {
+      en: 'Does the education discount stack with the affiliate program?',
+      'zh-CN': '教育折扣可以与联盟计划叠加吗？'
+    },
+    answer: {
+      en: "Not at the same time. Education pricing is already a program rate, so it doesn't combine with affiliate or referral credits. It does stack with annual commitment pricing on team plans, which is where the true savings come from.",
+      'zh-CN':
+        '不能同时使用。教育定价本身已是一种计划优惠价，因此不能与联盟或推荐额度合并使用。但它可以与团队方案的年付承诺价格叠加，这才是真正节省的来源。'
+    }
+  },
+  {
+    id: 'how-do-i-pay',
+    question: {
+      en: 'How do I pay?',
+      'zh-CN': '我如何付款？'
+    },
+    answer: {
+      en: "Card or ACH at checkout, billed monthly or annually. It's self-serve, so you can start right away. If your school needs to pay by invoice or purchase order, get in touch at education@comfy.org and we can help.",
+      'zh-CN':
+        '结账时可使用银行卡或 ACH 付款，按月或按年计费。全程自助，您可以立即开始。如果您的学校需要通过发票或采购订单付款，请联系 education@comfy.org，我们会提供帮助。'
+    }
+  },
+  {
+    id: 'access-start',
+    question: {
+      en: 'When does my access start?',
+      'zh-CN': '我的访问权限何时开始？'
+    },
+    answer: {
+      en: "Right away. Your discount applies the moment you subscribe, so there's no approval queue and nothing to wait for.",
+      'zh-CN':
+        '立即开始。折扣会在您订阅的那一刻生效，没有审核排队，也无需等待。'
+    }
+  },
+  {
+    id: 'semester-end-or-graduate',
+    question: {
+      en: 'What happens when the semester ends or I graduate?',
+      'zh-CN': '学期结束或我毕业后会怎样？'
+    },
+    answer: {
+      en: 'Your account and everything in it stay yours. Education pricing applies as long as your school email keeps qualifying. If that changes, you move to standard pricing, and your workflows, credits, and history all come with you.',
+      'zh-CN':
+        '您的账户及其中的一切始终归您所有。只要您的学校邮箱持续符合条件，教育定价就会一直适用。如果条件发生变化，您将转为标准定价，而您的工作流、额度和历史记录都会随之保留。'
+    }
+  },
+  {
+    id: 'creative-campus',
+    question: {
+      en: 'Can my class, program, or school partner with Comfy beyond the discount?',
+      'zh-CN': '我的班级、项目或学校可以在折扣之外与 Comfy 建立合作吗？'
+    },
+    answer: {
+      en: "Yes, that's what Creative Campus is for. It's our partnership program for educators and institutions who want to go deeper: a dedicated educator Slack channel, teaching resources and workflow libraries, co-marketing and student showcases, a named contact, and early access to new features. Email education@comfy.org and tell us what you're building.",
+      'zh-CN':
+        '可以，这正是 Creative Campus 的意义所在。它是我们面向希望深入合作的教育工作者和机构的合作计划：专属的教育者 Slack 频道、教学资源和工作流库、联合营销与学生展示、专属联系人，以及新功能的抢先体验。请发送邮件至 education@comfy.org，告诉我们您正在打造什么。'
+    }
+  },
+  {
+    id: 'share-with-leadership',
+    question: {
+      en: 'I need something to share with my leadership or procurement team.',
+      'zh-CN': '我需要可以分享给领导或采购团队的资料。'
+    },
+    answer: {
+      en: "We can send a one-page summary with pricing, terms, security details, and set up invoice or PO billing if a card won't work. Email education@comfy.org and we'll get you what you need.",
+      'zh-CN':
+        '我们可以提供一页式摘要，包含定价、条款和安全详情；如果无法使用银行卡，我们也可以设置发票或采购订单付款。请发送邮件至 education@comfy.org，我们会为您准备好所需的资料。'
+    }
+  }
+] as const

apps/website/src/data/learningTutorials.ts

@@ -38,7 +38,7 @@ export const learningTutorials: readonly LearningTutorial[] = [
         label: 'English'
       }
     ],
-    // href: '#',
+    href: 'https://comfy.org/workflows/8f2cf0df5da6-8f2cf0df5da6/',
     tags: [partnerNodesTag, imageToVideoTag]
   },
   {

apps/website/src/data/mainNavigation.ts

@@ -69,10 +69,19 @@ export function getMainNavigation(locale: Locale): NavItem[] {
         {
           header: t('nav.colFeatures', locale),
           items: [
+            {
+              label: t('nav.mcpServer', locale),
+              href: routes.mcp,
+              badge: 'new'
+            },
             // TODO: no page yet — re-enable when landing pages ship
-            // { label: t('nav.mcpServer', locale), href: '#', badge: 'new' },
             // { label: t('nav.appMode', locale), href: '#' },
             // { label: t('nav.agentSkills', locale), href: '#' },
+            {
+              label: t('nav.launches', locale),
+              href: routes.launches,
+              badge: 'new'
+            },
             {
               label: t('nav.docs', locale),
               href: externalLinks.docs,
@@ -180,11 +189,6 @@ export function getMainNavigation(locale: Locale): NavItem[] {
             },
             // TODO: no /brand page yet
             // { label: t('nav.brand', locale), href: '#' },
-            {
-              label: t('nav.launches', locale),
-              href: routes.launches,
-              badge: 'new'
-            },
             {
               label: t('nav.blogs', locale),
               href: externalLinks.blog,

apps/website/src/i18n/translations.ts

@@ -11,6 +11,16 @@ const translations = {
     'zh-CN': '图像生成视频'
   },
 
+  // UI (global, reusable across sections)
+  'ui.copy': {
+    en: 'Copy',
+    'zh-CN': '复制'
+  },
+  'ui.copied': {
+    en: 'Copied',
+    'zh-CN': '已复制'
+  },
+
   // CTAs (global, reusable across sections)
   'cta.tryWorkflow': {
     en: 'Try Workflow',
@@ -1825,6 +1835,311 @@ const translations = {
       '我们尽力为经历面试流程的候选人提供有意义的反馈。由于申请量较大，在简历筛选阶段可能无法提供详细反馈。'
   },
 
+  // MCP – Meta
+  'mcp.meta.title': {
+    en: 'Comfy MCP — Drive ComfyUI from any AI agent',
+    'zh-CN': 'Comfy MCP — 让任何 AI 智能体驱动 ComfyUI'
+  },
+  'mcp.meta.description': {
+    en: 'Comfy MCP exposes the full ComfyUI engine over the Model Context Protocol. Generate images, video, audio, and 3D from Claude Code, Claude Desktop, and any MCP-compatible client.',
+    'zh-CN':
+      'Comfy MCP 通过模型上下文协议暴露完整的 ComfyUI 引擎，可在 Claude Code、Claude Desktop 及任何兼容 MCP 的客户端中生成图像、视频、音频和 3D 内容。'
+  },
+
+  // MCP – HeroSection
+  'mcp.hero.heading': {
+    en: 'Drive ComfyUI from\nany AI agent.',
+    'zh-CN': '让任何 AI 智能体\n驱动 ComfyUI。'
+  },
+  'mcp.hero.subtitle': {
+    en: 'Comfy MCP exposes the full ComfyUI engine over the Model Context Protocol — so your assistant can access the ecosystem, build workflows, and generate images, video, audio, or 3D.',
+    'zh-CN':
+      'Comfy MCP 通过模型上下文协议暴露完整的 ComfyUI 引擎——让你的助手能够接入生态系统、构建工作流，并生成图像、视频、音频或 3D 内容。'
+  },
+  'mcp.hero.demoPrompt': {
+    en: "match this frame's palette, make the hero key art",
+    'zh-CN': '匹配这一帧的配色，生成主视觉关键画面'
+  },
+  'mcp.hero.viewDocs': {
+    en: 'VIEW DOCS',
+    'zh-CN': '查看文档'
+  },
+  'mcp.hero.runWorkflow': {
+    en: 'RUN A WORKFLOW',
+    'zh-CN': '运行工作流'
+  },
+  'mcp.hero.demoGenerate': {
+    en: 'GENERATE',
+    'zh-CN': '生成'
+  },
+  'mcp.hero.demoActionGenerateImage': {
+    en: 'GENERATE-IMAGE',
+    'zh-CN': '生成图像'
+  },
+  'mcp.hero.demoActionGenerate3d': {
+    en: 'GENERATE-3D ASSET',
+    'zh-CN': '生成 3D 资产'
+  },
+  'mcp.hero.demoActionUpscale': {
+    en: 'UPSCALE-IMAGE',
+    'zh-CN': '放大图像'
+  },
+
+  // MCP – SetupStepsSection
+  'mcp.setup.label': {
+    en: 'GET STARTED',
+    'zh-CN': '快速开始'
+  },
+  'mcp.setup.heading': {
+    en: 'Set up Comfy MCP in three steps',
+    'zh-CN': '三步完成 Comfy MCP 配置'
+  },
+  'mcp.setup.subtitle': {
+    en: 'Add Comfy Cloud as a custom connector in Claude, Cursor, Codex, or any MCP-compatible client. Sign in once, and the full ComfyUI toolset is available right in your chat.',
+    'zh-CN':
+      '将 Comfy Cloud 添加为 Claude、Cursor、Codex 或任意兼容 MCP 客户端的自定义连接器。登录一次，ComfyUI 全套工具即可直接在对话中使用。'
+  },
+  'mcp.setup.step1.label': { en: 'STEP 1', 'zh-CN': '第 1 步' },
+  'mcp.setup.step1.title': {
+    en: 'Copy the MCP URL',
+    'zh-CN': '复制 MCP URL'
+  },
+  'mcp.setup.step1.description': {
+    en: "Click the copy button below. You'll paste it into your client in the next step.",
+    'zh-CN': '点击下方的复制按钮，下一步将其粘贴到你的客户端中。'
+  },
+  'mcp.setup.step2.label': { en: 'STEP 2', 'zh-CN': '第 2 步' },
+  'mcp.setup.step2.title': {
+    en: 'Add the connector',
+    'zh-CN': '添加连接器'
+  },
+  'mcp.setup.step2.description': {
+    en: 'Name it Comfy Cloud and paste the URL. The docs below cover every client.',
+    'zh-CN': '将其命名为 Comfy Cloud 并粘贴 URL。下方文档涵盖各类客户端。'
+  },
+  'mcp.setup.step2.cta': {
+    en: 'COMFY CLOUD MCP DOCS',
+    'zh-CN': 'COMFY CLOUD MCP 文档'
+  },
+  'mcp.setup.step3.label': { en: 'STEP 3', 'zh-CN': '第 3 步' },
+  'mcp.setup.step3.title': {
+    en: 'Connect and sign in',
+    'zh-CN': '连接并登录'
+  },
+  'mcp.setup.step3.description': {
+    en: 'Click Connect, sign in, and every Comfy Cloud skill is ready in your client.',
+    'zh-CN': '点击"连接"并登录，所有 Comfy Cloud 技能即可在你的客户端中使用。'
+  },
+  'mcp.setup.step3.cta': {
+    en: 'COMFY CLOUD SKILLS',
+    'zh-CN': 'COMFY CLOUD 技能'
+  },
+
+  // MCP – WhyBuildSection
+  'mcp.why.heading': {
+    en: 'Why build on\n',
+    'zh-CN': '为什么选择\n'
+  },
+  'mcp.why.headingHighlight': {
+    en: 'Comfy MCP?',
+    'zh-CN': 'Comfy MCP？'
+  },
+  'mcp.why.subtitle': {
+    en: 'A trusted infrastructure that lets engineers and professionals ship faster.',
+    'zh-CN': '一套值得信赖的基础设施，让工程师和专业人士交付更快。'
+  },
+  'mcp.why.1.title': {
+    en: 'Open protocol,\nany client.',
+    'zh-CN': '开放协议，\n任意客户端。'
+  },
+  'mcp.why.1.description': {
+    en: 'MCP is an open standard, so any MCP-compatible client can connect. Today Comfy supports Claude Code and Claude Desktop, with more clients coming.',
+    'zh-CN':
+      'MCP 是开放标准，因此任何兼容 MCP 的客户端都能接入。目前 Comfy 支持 Claude Code 和 Claude Desktop，更多客户端即将推出。'
+  },
+  'mcp.why.2.title': {
+    en: 'The full engine,\nnot a sandbox.',
+    'zh-CN': '完整引擎，\n非沙箱环境。'
+  },
+  'mcp.why.2.description': {
+    en: 'Same tool your team uses. Fully connected multi-step, multi-GPU workflows. Everything available now and in the future.',
+    'zh-CN':
+      '与你团队使用的相同工具。完整连接的多步骤、多 GPU 工作流。当前及未来的所有功能均可使用。'
+  },
+  'mcp.why.3.title': {
+    en: 'Outputs you keep.',
+    'zh-CN': '输出归你所有。'
+  },
+  'mcp.why.3.description': {
+    en: 'Downloads go to your Comfy library — store, reuse, remix, and share without leaving the ecosystem.',
+    'zh-CN':
+      '下载内容保存到你的 Comfy 库——在生态系统内存储、复用、二次创作和分享。'
+  },
+  'mcp.why.4.title': {
+    en: 'Powered by\nComfy Cloud.',
+    'zh-CN': '由 Comfy Cloud\n提供支持。'
+  },
+  'mcp.why.4.description': {
+    en: 'Run without a local GPU through the same infrastructure your team already trusts.',
+    'zh-CN': '无需本地 GPU，通过你团队信赖的相同基础设施运行。'
+  },
+
+  // MCP – ToolsSection
+  'mcp.tools.heading': {
+    en: 'Everything ComfyUI can do,\nnow available as tools.',
+    'zh-CN': 'ComfyUI 能做的一切，\n现在都可作为工具调用。'
+  },
+  'mcp.tools.1.title': {
+    en: 'Generate anything',
+    'zh-CN': '生成任意内容'
+  },
+  'mcp.tools.1.description': {
+    en: 'Generate images, video, audio, 3D, upscale, or remove backgrounds. Add or remove elements in images, create or modify any visual, audio, or 3D asset at any scale.',
+    'zh-CN':
+      '生成图像、视频、音频、3D 内容，放大分辨率或移除背景。添加或删除图像元素，以任意规模创建或修改任何视觉、音频或 3D 资产。'
+  },
+  'mcp.tools.1.alt': {
+    en: 'Comfy MCP generating images, video, audio, and 3D assets from a single prompt',
+    'zh-CN': 'Comfy MCP 通过单个提示生成图像、视频、音频和 3D 资产'
+  },
+  'mcp.tools.2.title': {
+    en: 'Search the ecosystem',
+    'zh-CN': '搜索生态系统'
+  },
+  'mcp.tools.2.description': {
+    en: 'Query thousands of models, browse rankings, and choose workflow templates straight from your response.',
+    'zh-CN': '查询数千个模型，浏览排名，直接在对话中选择工作流模板。'
+  },
+  'mcp.tools.2.alt': {
+    en: 'Comfy MCP searching the ecosystem of models, rankings, and workflow templates',
+    'zh-CN': 'Comfy MCP 搜索模型、排名和工作流模板的生态系统'
+  },
+  'mcp.tools.3.title': {
+    en: 'Run real workflows',
+    'zh-CN': '运行真实工作流'
+  },
+  'mcp.tools.3.description': {
+    en: 'Turn any ComfyUI workflow into a callable tool. The full power of the engine, driven by your agent.',
+    'zh-CN':
+      '将任何 ComfyUI 工作流转换为可调用的工具。由你的智能体驱动完整的引擎能力。'
+  },
+  'mcp.tools.3.alt': {
+    en: 'Comfy MCP running a ComfyUI workflow as a callable tool from a chat',
+    'zh-CN': 'Comfy MCP 在对话中将 ComfyUI 工作流作为可调用工具运行'
+  },
+
+  // MCP – HowItWorksSection
+  'mcp.howItWorks.heading': {
+    en: 'How it works',
+    'zh-CN': '工作原理'
+  },
+  'mcp.howItWorks.step1.number': { en: '01', 'zh-CN': '01' },
+  'mcp.howItWorks.step1.title': {
+    en: 'CONNECT',
+    'zh-CN': '连接'
+  },
+  'mcp.howItWorks.step1.description': {
+    en: 'Add the Comfy Cloud MCP server to Claude Code or Claude Desktop and sign in once with OAuth. No API keys to manage.',
+    'zh-CN':
+      '将 Comfy Cloud MCP 服务器添加到 Claude Code 或 Claude Desktop，通过 OAuth 一次性登录。无需管理 API 密钥。'
+  },
+  'mcp.howItWorks.step2.number': { en: '02', 'zh-CN': '02' },
+  'mcp.howItWorks.step2.title': {
+    en: 'DISCOVER',
+    'zh-CN': '发现'
+  },
+  'mcp.howItWorks.step2.description': {
+    en: "Your agent gets Comfy's tools: search, generate, submit, and retrieve — everything it needs to create.",
+    'zh-CN':
+      '你的智能体获得 Comfy 的工具：搜索、生成、提交和获取——一切所需，应有尽有。'
+  },
+  'mcp.howItWorks.step3.number': { en: '03', 'zh-CN': '03' },
+  'mcp.howItWorks.step3.title': {
+    en: 'CREATE',
+    'zh-CN': '创作'
+  },
+  'mcp.howItWorks.step3.description': {
+    en: 'Request what you want, the agent queues and runs the workflow, and returns the finished result.',
+    'zh-CN': '描述你的需求，智能体排队执行工作流，并返回最终结果。'
+  },
+
+  // MCP – FAQSection
+  'mcp.faq.heading': {
+    en: 'Q&As',
+    'zh-CN': '常见问答'
+  },
+  'mcp.faq.1.q': {
+    en: 'Which clients are supported?',
+    'zh-CN': '支持哪些客户端？'
+  },
+  'mcp.faq.1.a': {
+    en: 'Claude Code and Claude Desktop today, both signing in with OAuth. Support for more clients is coming.',
+    'zh-CN':
+      '目前支持 Claude Code 和 Claude Desktop，均通过 OAuth 登录。更多客户端的支持即将推出。'
+  },
+  'mcp.faq.2.q': {
+    en: 'Do I need an API key?',
+    'zh-CN': '我需要 API 密钥吗？'
+  },
+  'mcp.faq.2.a': {
+    en: 'Not for Claude Code or Claude Desktop. They use OAuth. An API key is only needed for headless or CI setups with no browser.',
+    'zh-CN':
+      'Claude Code 和 Claude Desktop 不需要，它们使用 OAuth。仅在没有浏览器的无头或 CI 环境中才需要 API 密钥。'
+  },
+  'mcp.faq.3.q': {
+    en: 'Do the slash commands work in Claude Desktop?',
+    'zh-CN': '斜杠命令在 Claude Desktop 中可以使用吗？'
+  },
+  'mcp.faq.3.a': {
+    en: 'No. They ship in the Claude Code plugin. Desktop connects to the same MCP server, so the tools work; just ask in plain language.',
+    'zh-CN':
+      '不可以。斜杠命令包含在 Claude Code 插件中。Claude Desktop 连接的是同一个 MCP 服务器，因此工具可以正常使用；直接用自然语言提问即可。'
+  },
+  'mcp.faq.4.q': {
+    en: "The sign-in didn't open a browser.",
+    'zh-CN': '登录时没有打开浏览器。'
+  },
+  'mcp.faq.4.a': {
+    en: 'In Claude Code, run /mcp, select comfy-cloud, and choose Authenticate. In Claude Desktop, reopen the connector from Customize → Connectors.',
+    'zh-CN':
+      '在 Claude Code 中，运行 /mcp，选择 comfy-cloud，然后选择 Authenticate（授权）。在 Claude Desktop 中，从“自定义 → 连接器”重新打开该连接器。'
+  },
+  'mcp.faq.5.q': {
+    en: 'How do I connect in Claude Code?',
+    'zh-CN': '如何在 Claude Code 中连接？'
+  },
+  'mcp.faq.5.a': {
+    en: 'Add the marketplace and install the comfy-cloud plugin, then run /mcp → comfy-cloud → Authenticate. It adds the connection and slash commands in one step.',
+    'zh-CN':
+      '添加插件市场并安装 comfy-cloud 插件，然后运行 /mcp → comfy-cloud → Authenticate（授权）。一步即可添加连接和斜杠命令。'
+  },
+  'mcp.faq.6.q': {
+    en: "What's the server URL for Claude Desktop?",
+    'zh-CN': 'Claude Desktop 的服务器 URL 是什么？'
+  },
+  'mcp.faq.6.a': {
+    en: 'Add a custom connector in Customize → Connectors pointing to https://cloud.comfy.org/mcp, then sign in when prompted.',
+    'zh-CN':
+      '在“自定义 → 连接器”中添加一个指向 https://cloud.comfy.org/mcp 的自定义连接器，然后在提示时登录。'
+  },
+  'mcp.faq.7.q': {
+    en: 'What can my agent do once connected?',
+    'zh-CN': '连接后我的智能体能做什么？'
+  },
+  'mcp.faq.7.a': {
+    en: 'Generate images, video, audio, and 3D; search models, nodes, and templates; and run ComfyUI workflows, all from a chat.',
+    'zh-CN':
+      '生成图像、视频、音频和 3D；搜索模型、节点和模板；并运行 ComfyUI 工作流——全部在对话中完成。'
+  },
+  'mcp.faq.8.q': {
+    en: 'Is it generally available?',
+    'zh-CN': '现已正式发布了吗？'
+  },
+  'mcp.faq.8.a': {
+    en: 'Comfy Cloud MCP is in open beta and available to everyone.',
+    'zh-CN': 'Comfy Cloud MCP 目前处于公开测试阶段，所有人均可使用。'
+  },
+
   // SiteNav
   'nav.products': { en: 'Products', 'zh-CN': '产品' },
   'nav.pricing': { en: 'Pricing', 'zh-CN': '价格' },
@@ -1867,6 +2182,7 @@ const translations = {
   'nav.back': { en: 'BACK', 'zh-CN': '返回' },
   'nav.badgeNew': { en: 'NEW', 'zh-CN': '新' },
   // Column headers used in HeaderMainDesktop dropdowns
+  'nav.mcpServer': { en: 'Comfy MCP', 'zh-CN': 'Comfy MCP' },
   'nav.colFeatures': { en: 'Features', 'zh-CN': '功能' },
   'nav.colPrograms': { en: 'Programs', 'zh-CN': '项目' },
   'nav.colConnect': { en: 'Connect', 'zh-CN': '联系' },
@@ -2597,18 +2913,18 @@ const translations = {
     'zh-CN': 'Plans; Fees; Free Tier.'
   },
   'tos.payment.block.1': {
-    en: 'Your use of the Comfy Products is subject to the plan selected via the applicable ordering page, online sign-up flow, or order form (“Plan”). Comfy may offer a free or freemium tier (“Free Tier”) and one or more paid tiers; the applicable Plan may include usage caps, feature restrictions, throttling, overage charges, or upgrade requirements, each as described in the pricing page or applicable Order Form. You are responsible for all usage under your account, including usage by your Users and under your credentials and API keys. Comfy may modify, suspend, or discontinue any Plan (including the Free Tier) consistent with this Agreement and the Order Forms.',
+    en: 'Your use of the Comfy Products is subject to the plan selected via the applicable ordering page, online sign-up flow, or order form (“Plan”). Comfy may offer a free or freemium tier (“Free Tier”) and one or more paid tiers; the applicable Plan may include usage caps, feature restrictions, throttling, overage charges, or upgrade requirements, each as described in the pricing page or applicable Order Form. If a Free Tier user provides a valid payment method in connection with their account (including for identity verification, future upgrade purposes, or any other reason), such user expressly authorizes Comfy to charge that payment method for any usage that exceeds the applicable Free Tier limits, including overages resulting from intentional use, usage by authorized users or third parties under the account, or technical factors. Comfy will use reasonable efforts to notify users when they approach or exceed Free Tier limits, but such notice is not a condition of Comfy’s right to charge for overages. You are responsible for all usage under your account, including usage by your Users and under your credentials and API keys. Comfy may modify, suspend, or discontinue any Plan (including the Free Tier) consistent with this Agreement and the Order Forms.',
     'zh-CN':
-      'Your use of the Comfy Products is subject to the plan selected via the applicable ordering page, online sign-up flow, or order form (“Plan”). Comfy may offer a free or freemium tier (“Free Tier”) and one or more paid tiers; the applicable Plan may include usage caps, feature restrictions, throttling, overage charges, or upgrade requirements, each as described in the pricing page or applicable Order Form. You are responsible for all usage under your account, including usage by your Users and under your credentials and API keys. Comfy may modify, suspend, or discontinue any Plan (including the Free Tier) consistent with this Agreement and the Order Forms.'
+      'Your use of the Comfy Products is subject to the plan selected via the applicable ordering page, online sign-up flow, or order form (“Plan”). Comfy may offer a free or freemium tier (“Free Tier”) and one or more paid tiers; the applicable Plan may include usage caps, feature restrictions, throttling, overage charges, or upgrade requirements, each as described in the pricing page or applicable Order Form. If a Free Tier user provides a valid payment method in connection with their account (including for identity verification, future upgrade purposes, or any other reason), such user expressly authorizes Comfy to charge that payment method for any usage that exceeds the applicable Free Tier limits, including overages resulting from intentional use, usage by authorized users or third parties under the account, or technical factors. Comfy will use reasonable efforts to notify users when they approach or exceed Free Tier limits, but such notice is not a condition of Comfy’s right to charge for overages. You are responsible for all usage under your account, including usage by your Users and under your credentials and API keys. Comfy may modify, suspend, or discontinue any Plan (including the Free Tier) consistent with this Agreement and the Order Forms.'
   },
   'tos.payment.block.2.heading': {
     en: 'Self-Serve Credit Card Billing.',
     'zh-CN': 'Self-Serve Credit Card Billing.'
   },
   'tos.payment.block.3': {
-    en: 'For self-serve Plans, Customer will provide a valid payment method (e.g., credit card) and authorizes Comfy (and its payment processor) to charge all fees and taxes when due. Unless the Order Forms state otherwise, subscription components (if any) will be billed in advance on a recurring basis and usage-based components (including any overages) will be billed in arrears for the applicable billing period (and may be charged as usage accrues). Paid self-serve Plans automatically renew for successive billing periods until cancelled through the console or as otherwise described in the Order Forms; if a charge fails, Comfy may retry the charge and Customer must promptly update its payment method.',
+    en: 'For self-serve Plans, Customer will provide a valid payment method (e.g., credit card) and authorizes Comfy (and its payment processor) to charge all fees and taxes when due. Unless the Order Forms state otherwise, subscription components (if any) will be billed in advance on a recurring basis and usage-based components (including any overages) will be billed in arrears for the applicable billing period (and may be charged as usage accrues). This billing authorization applies regardless of whether the Customer is on a paid Plan or a Free Tier at the time the overage is incurred. Paid self-serve Plans automatically renew for successive billing periods until cancelled through the console or as otherwise described in the Order Forms; if a charge fails, Comfy may retry the charge and Customer must promptly update its payment method. The same retry rights apply to any failed overage charges incurred by Free Tier users.',
     'zh-CN':
-      'For self-serve Plans, Customer will provide a valid payment method (e.g., credit card) and authorizes Comfy (and its payment processor) to charge all fees and taxes when due. Unless the Order Forms state otherwise, subscription components (if any) will be billed in advance on a recurring basis and usage-based components (including any overages) will be billed in arrears for the applicable billing period (and may be charged as usage accrues). Paid self-serve Plans automatically renew for successive billing periods until cancelled through the console or as otherwise described in the Order Forms; if a charge fails, Comfy may retry the charge and Customer must promptly update its payment method.'
+      'For self-serve Plans, Customer will provide a valid payment method (e.g., credit card) and authorizes Comfy (and its payment processor) to charge all fees and taxes when due. Unless the Order Forms state otherwise, subscription components (if any) will be billed in advance on a recurring basis and usage-based components (including any overages) will be billed in arrears for the applicable billing period (and may be charged as usage accrues). This billing authorization applies regardless of whether the Customer is on a paid Plan or a Free Tier at the time the overage is incurred. Paid self-serve Plans automatically renew for successive billing periods until cancelled through the console or as otherwise described in the Order Forms; if a charge fails, Comfy may retry the charge and Customer must promptly update its payment method. The same retry rights apply to any failed overage charges incurred by Free Tier users.'
   },
   'tos.payment.block.4.heading': {
     en: 'Invoiced Billing.',
@@ -4931,6 +5247,41 @@ const translations = {
     'zh-CN': '阅读联盟计划条款'
   },
 
+  // Education page (/edu) — head metadata
+  'education.page.title': {
+    en: 'Comfy for Education — Student & Educator Discounts',
+    'zh-CN': 'Comfy 教育版 — 学生与教育工作者优惠'
+  },
+  'education.page.description': {
+    en: 'Up to 25% off Comfy Cloud for every student and educator. Sign up with your academic email for discounted access to cloud-powered ComfyUI workflows.',
+    'zh-CN':
+      '所有学生和教育工作者均可享受 Comfy Cloud 最高 25% 的折扣。使用您的学术邮箱注册，即可以优惠价格使用云端 ComfyUI 工作流。'
+  },
+
+  // EducationFAQSection
+  'education.faq.heading': {
+    en: 'Q&A',
+    'zh-CN': '问答'
+  },
+
+  // EducationCtaSection
+  'education.cta.heading': {
+    en: 'Start creating with ComfyUI',
+    'zh-CN': '开始使用 ComfyUI 创作'
+  },
+  'education.cta.choosePlan': {
+    en: 'Choose your plan',
+    'zh-CN': '选择方案'
+  },
+  'education.cta.startLearning': {
+    en: 'Start learning',
+    'zh-CN': '开始学习'
+  },
+  'education.cta.termsLabel': {
+    en: 'For pricing, plans, credits and billing details, see the Pricing FAQs.',
+    'zh-CN': '有关定价、方案、额度和账单的详细信息，请参阅定价常见问题。'
+  },
+
   // Launches page (/launches) — head metadata
   // zh-CN strings pending native review (see apps/website/.scratch/drops-page/PRD.md)
   'launches.page.title': {

apps/website/src/pages/edu.astro

@@ -0,0 +1,38 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import CtaSection from '../templates/education/CtaSection.vue'
+import FAQSection from '../templates/education/FAQSection.vue'
+import { educationFaqs } from '../data/educationFaq'
+import { t } from '../i18n/translations'
+
+const locale = 'en' as const
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: educationFaqs.map((faq) => ({
+    '@type': 'Question',
+    name: faq.question[locale],
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq.answer[locale]
+    }
+  }))
+}
+---
+
+<BaseLayout
+  title={t('education.page.title', locale)}
+  description={t('education.page.description', locale)}
+>
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
+
+  <FAQSection client:visible />
+  <CtaSection />
+</BaseLayout>

apps/website/src/pages/mcp.astro

@@ -0,0 +1,24 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ProductCardsSection from '../components/common/ProductCardsSection.vue'
+import HeroSection from '../templates/mcp/HeroSection.vue'
+import SetupSection from '../templates/mcp/SetupSection.vue'
+import WhySection from '../templates/mcp/WhySection.vue'
+import ToolsSection from '../templates/mcp/ToolsSection.vue'
+import HowItWorksSection from '../templates/mcp/HowItWorksSection.vue'
+import FAQSection from '../templates/mcp/FAQSection.vue'
+import { t } from '../i18n/translations'
+---
+
+<BaseLayout
+  title={t('mcp.meta.title', 'en')}
+  description={t('mcp.meta.description', 'en')}
+>
+  <HeroSection locale="en" client:load />
+  <SetupSection locale="en" client:visible />
+  <WhySection locale="en" />
+  <ToolsSection locale="en" />
+  <HowItWorksSection locale="en" />
+  <ProductCardsSection locale="en" label-key="products.labelProducts" />
+  <FAQSection client:visible locale="en" />
+</BaseLayout>

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

@@ -0,0 +1,38 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import CtaSection from '../../templates/education/CtaSection.vue'
+import FAQSection from '../../templates/education/FAQSection.vue'
+import { educationFaqs } from '../../data/educationFaq'
+import { t } from '../../i18n/translations'
+
+const locale = 'zh-CN' as const
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: educationFaqs.map((faq) => ({
+    '@type': 'Question',
+    name: faq.question[locale],
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq.answer[locale]
+    }
+  }))
+}
+---
+
+<BaseLayout
+  title={t('education.page.title', locale)}
+  description={t('education.page.description', locale)}
+>
+  <Fragment slot="head">
+    <script
+      is:inline
+      type="application/ld+json"
+      set:html={JSON.stringify(faqJsonLd)}
+    />
+  </Fragment>
+
+  <FAQSection locale="zh-CN" client:visible />
+  <CtaSection locale="zh-CN" />
+</BaseLayout>

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

@@ -0,0 +1,24 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ProductCardsSection from '../../components/common/ProductCardsSection.vue'
+import HeroSection from '../../templates/mcp/HeroSection.vue'
+import SetupSection from '../../templates/mcp/SetupSection.vue'
+import WhySection from '../../templates/mcp/WhySection.vue'
+import ToolsSection from '../../templates/mcp/ToolsSection.vue'
+import HowItWorksSection from '../../templates/mcp/HowItWorksSection.vue'
+import FAQSection from '../../templates/mcp/FAQSection.vue'
+import { t } from '../../i18n/translations'
+---
+
+<BaseLayout
+  title={t('mcp.meta.title', 'zh-CN')}
+  description={t('mcp.meta.description', 'zh-CN')}
+>
+  <HeroSection locale="zh-CN" client:load />
+  <SetupSection locale="zh-CN" client:visible />
+  <WhySection locale="zh-CN" />
+  <ToolsSection locale="zh-CN" />
+  <HowItWorksSection locale="zh-CN" />
+  <ProductCardsSection locale="zh-CN" label-key="products.labelProducts" />
+  <FAQSection client:visible locale="zh-CN" />
+</BaseLayout>

apps/website/src/styles/global.css

@@ -162,6 +162,45 @@
   animation: ripple-effect 4s linear infinite;
 }
 
+@keyframes cursor-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}
+
+@utility animate-cursor-blink {
+  animation: cursor-blink 1s step-end infinite;
+}
+
+.card-slide-enter-active {
+  transition:
+    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.4s ease;
+}
+
+.card-slide-enter-from {
+  transform: translateX(56px);
+  opacity: 0;
+}
+
+/* Existing cards slide down smoothly when a new card is prepended. */
+.card-slide-move {
+  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.card-slide-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.card-slide-leave-to {
+  opacity: 0;
+}
+
 @utility animate-delay-* {
   animation-delay: --value([*]);
 }

apps/website/src/templates/education/CtaSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import CtaCenter01 from '../../components/blocks/CtaCenter01.vue'
+import { getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <CtaCenter01
+    :heading="t('education.cta.heading', locale)"
+    :primary-cta="{
+      label: t('education.cta.choosePlan', locale),
+      href: '#plans'
+    }"
+    :secondary-cta="{
+      label: t('education.cta.startLearning', locale),
+      href: routes.learning
+    }"
+    :terms-link="{
+      label: t('education.cta.termsLabel', locale),
+      href: routes.cloudPricing
+    }"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import FAQSplit01 from '../../components/blocks/FAQSplit01.vue'
+import { educationFaqs } from '../../data/educationFaq'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const faqs = educationFaqs.map((faq) => ({
+  id: faq.id,
+  question: faq.question[locale],
+  answer: faq.answer[locale]
+}))
+</script>
+
+<template>
+  <FAQSplit01 :heading="t('education.faq.heading', locale)" :faqs="faqs" />
+</template>

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

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { Check } from '@lucide/vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const PROMPT = t('mcp.hero.demoPrompt', locale)
+const generateLabel = t('mcp.hero.demoGenerate', locale)
+
+const cards = [
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'moodboard_v1.png · 6-up',
+    tag: 'Gmail',
+    thumb: '/images/mcp/mcp-thumb-moodboard.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'concepts_01–03.png',
+    tag: 'Notion',
+    thumb: '/images/mcp/mcp-thumb-concepts.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerateImage',
+    file: 'hero_keyart.png',
+    tag: 'Figma',
+    thumb: '/images/mcp/mcp-thumb-keyart.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionGenerate3d',
+    file: 'asphalt_pbr/ · 5 maps',
+    tag: 'Blender',
+    thumb: '/images/mcp/mcp-thumb-asphalt.webp'
+  },
+  {
+    actionKey: 'mcp.hero.demoActionUpscale',
+    file: 'kaiju_neon_4k.png · 4096',
+    tag: null,
+    thumb: '/images/mcp/mcp-thumb-kaiju.webp'
+  }
+] as const
+
+const visibleCount = ref(0)
+const displayedPrompt = ref('')
+const promptDone = ref(false)
+
+const displayedCards = computed(() =>
+  cards
+    .slice(0, visibleCount.value)
+    .map((card) => ({ ...card, action: t(card.actionKey, locale) }))
+    // Newest card first — it slides in right below the prompt box and pushes
+    // the rest down.
+    .reverse()
+)
+
+let timer: ReturnType<typeof setTimeout> | null = null
+let active = false
+
+function schedule(fn: () => void, ms: number) {
+  timer = setTimeout(() => {
+    if (active) fn()
+  }, ms)
+}
+
+function typePrompt(onDone: () => void) {
+  displayedPrompt.value = ''
+  promptDone.value = false
+  let i = 0
+
+  function step() {
+    i++
+    displayedPrompt.value = PROMPT.slice(0, i)
+    if (i < PROMPT.length) {
+      schedule(step, 35)
+    } else {
+      promptDone.value = true
+      schedule(onDone, 350)
+    }
+  }
+
+  schedule(step, 50)
+}
+
+function revealNextCard() {
+  if (visibleCount.value >= cards.length) {
+    // All done — pause then reset
+    schedule(() => {
+      visibleCount.value = 0
+      schedule(revealNextCard, 500)
+    }, 2500)
+    return
+  }
+
+  // Type the prompt, then slide in the next card
+  typePrompt(() => {
+    visibleCount.value++
+    schedule(revealNextCard, 400)
+  })
+}
+
+onMounted(() => {
+  active = true
+  schedule(revealNextCard, 600)
+})
+
+onUnmounted(() => {
+  active = false
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 max-lg:h-[50vh]">
+    <!-- Prompt panel -->
+    <div
+      class="rounded-5xl flex flex-col justify-between gap-8 overflow-hidden bg-white/4 p-8"
+    >
+      <p
+        class="font-formula text-[17px] leading-relaxed font-light text-primary-comfy-canvas"
+      >
+        {{ displayedPrompt
+        }}<span
+          class="bg-primary-comfy-yellow ml-0.5 inline-block h-5.5 w-2 translate-y-0.5"
+          :class="promptDone ? 'animate-cursor-blink' : ''"
+        />
+      </p>
+
+      <div class="flex items-center gap-3">
+        <div class="h-px flex-1 bg-white/10" />
+        <div
+          class="bg-primary-comfy-yellow font-formula rounded-2xl px-4 py-3 text-sm font-extrabold tracking-[0.7px] text-primary-comfy-ink uppercase"
+        >
+          {{ generateLabel }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Cards accumulate — each slides in from the right after its prompt cycle -->
+    <div class="relative overflow-hidden max-lg:min-h-0 max-lg:flex-1">
+      <TransitionGroup
+        name="card-slide"
+        tag="div"
+        class="flex flex-col gap-2.5 max-lg:absolute max-lg:inset-x-0 max-lg:top-0"
+      >
+        <div
+          v-for="(card, i) in displayedCards"
+          :key="card.file"
+          class="flex items-center gap-3.5 overflow-hidden rounded-3xl px-4 py-3.5"
+          :class="i === 0 ? 'bg-white/8' : 'bg-white/4'"
+        >
+          <img
+            :src="card.thumb"
+            :alt="card.action"
+            class="size-13.5 shrink-0 rounded-[14px] object-cover"
+          />
+
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
+            <p
+              class="font-formula text-primary-comfy-yellow text-xs font-extrabold tracking-[0.7px] uppercase"
+            >
+              {{ card.action }}
+            </p>
+            <p
+              class="font-formula truncate text-sm font-light text-primary-comfy-canvas"
+            >
+              {{ card.file }}
+            </p>
+          </div>
+
+          <span
+            v-if="card.tag"
+            class="font-formula relative isolate inline-flex h-8 shrink-0 items-center justify-center overflow-visible bg-transparent px-5 text-sm font-extrabold tracking-[0.7px] text-white/60 uppercase before:absolute before:inset-0 before:-z-10 before:-skew-x-12 before:rounded-sm before:bg-white/20"
+          >
+            <span class="ppformula-text-center">
+              {{ card.tag }}
+            </span>
+          </span>
+
+          <Check
+            class="size-4 shrink-0 text-primary-comfy-canvas/60"
+            :stroke-width="1.5"
+          />
+        </div>
+      </TransitionGroup>
+
+      <!-- Bottom fade so accumulating cards dissolve into the page background -->
+      <div
+        class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-32 bg-linear-to-t from-primary-comfy-ink to-transparent lg:hidden"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import FAQSplit01 from '../../components/blocks/FAQSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const faqNumbers = [1, 2, 3, 4, 5, 6, 7, 8] as const
+
+const faqs = faqNumbers.map((n) => ({
+  id: String(n),
+  question: t(`mcp.faq.${n}.q`, locale),
+  answer: t(`mcp.faq.${n}.a`, locale)
+}))
+</script>
+
+<template>
+  <FAQSplit01 :heading="t('mcp.faq.heading', locale)" :faqs="faqs" />
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import HeroSplit01 from '../../components/blocks/HeroSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import ComfyMcpDemo from './ComfyMcpDemo.vue'
+import { mcpCtas } from './ctas'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctas = mcpCtas(locale)
+</script>
+
+<template>
+  <HeroSplit01
+    :locale="locale"
+    class="min-h-screen"
+    badge-text="MCP"
+    :title="t('mcp.hero.heading', locale)"
+    :subtitle="t('mcp.hero.subtitle', locale)"
+    :primary-cta="ctas.runWorkflow"
+    :secondary-cta="ctas.docs"
+  >
+    <template #media>
+      <ComfyMcpDemo :locale="locale" />
+    </template>
+  </HeroSplit01>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import FeatureGrid02 from '../../components/blocks/FeatureGrid02.vue'
+import type { FeatureStep } from '../../components/blocks/FeatureGrid02.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+import { mcpCtas } from './ctas'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const ctas = mcpCtas(locale)
+
+const stepNumbers = [1, 2, 3] as const
+
+const steps: FeatureStep[] = stepNumbers.map((n) => ({
+  id: String(n),
+  number: t(`mcp.howItWorks.step${n}.number`, locale),
+  title: t(`mcp.howItWorks.step${n}.title`, locale),
+  description: t(`mcp.howItWorks.step${n}.description`, locale)
+}))
+</script>
+
+<template>
+  <FeatureGrid02
+    :heading="t('mcp.howItWorks.heading', locale)"
+    :steps="steps"
+    :primary-cta="ctas.runWorkflow"
+    :secondary-cta="ctas.docs"
+  />
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ArrowUpRight } from '@lucide/vue'
+
+import FeatureGrid01 from '../../components/blocks/FeatureGrid01.vue'
+import type { FeatureCard } from '../../components/blocks/FeatureGrid01.vue'
+import { externalLinks } from '../../config/routes'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const cards: FeatureCard[] = [
+  {
+    id: 'step1',
+    label: t('mcp.setup.step1.label', locale),
+    title: t('mcp.setup.step1.title', locale),
+    description: t('mcp.setup.step1.description', locale),
+    action: {
+      type: 'code',
+      value: externalLinks.mcpServer
+    }
+  },
+  {
+    id: 'step2',
+    label: t('mcp.setup.step2.label', locale),
+    title: t('mcp.setup.step2.title', locale),
+    description: t('mcp.setup.step2.description', locale),
+    action: {
+      type: 'link',
+      label: t('mcp.setup.step2.cta', locale),
+      href: externalLinks.docsMcp,
+      target: '_blank',
+      icon: ArrowUpRight,
+      variant: 'default'
+    }
+  },
+  {
+    id: 'step3',
+    label: t('mcp.setup.step3.label', locale),
+    title: t('mcp.setup.step3.title', locale),
+    description: t('mcp.setup.step3.description', locale),
+    action: {
+      type: 'link',
+      label: t('mcp.setup.step3.cta', locale),
+      href: externalLinks.mcpSkills,
+      target: '_blank',
+      icon: ArrowUpRight,
+      variant: 'default'
+    }
+  }
+]
+</script>
+
+<template>
+  <FeatureGrid01
+    :eyebrow="t('mcp.setup.label', locale)"
+    :heading="t('mcp.setup.heading', locale)"
+    :subtitle="t('mcp.setup.subtitle', locale)"
+    :columns="3"
+    :cards="cards"
+    :copy-label="t('ui.copy', locale)"
+    :copied-label="t('ui.copied', locale)"
+  />
+</template>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import FeatureRows01 from '../../components/blocks/FeatureRows01.vue'
+import type { FeatureRow } from '../../components/blocks/FeatureRows01.vue'
+import type { Locale, TranslationKey } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+type ToolMedia =
+  | { type: 'image'; src: string }
+  | {
+      type: 'video'
+      src: string
+      autoplay?: boolean
+      loop?: boolean
+      hideControls?: boolean
+    }
+
+const tools: { n: 1 | 2 | 3; media: ToolMedia; altKey?: TranslationKey }[] = [
+  {
+    n: 1,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/generate-everything.gif'
+    },
+    altKey: 'mcp.tools.1.alt'
+  },
+  {
+    n: 2,
+    media: {
+      type: 'image',
+      src: 'https://media.comfy.org/website/mcp/search-ecosystem.png'
+    },
+    altKey: 'mcp.tools.2.alt'
+  },
+  {
+    n: 3,
+    media: {
+      type: 'video',
+      src: 'https://media.comfy.org/website/mcp/run-real-workflows.mp4',
+      autoplay: true,
+      loop: true,
+      hideControls: true
+    },
+    altKey: 'mcp.tools.3.alt'
+  }
+]
+
+const rows: FeatureRow[] = tools.map(({ n, media, altKey }) => {
+  const alt = altKey ? t(altKey, locale) : undefined
+  return {
+    id: String(n),
+    title: t(`mcp.tools.${n}.title`, locale),
+    description: t(`mcp.tools.${n}.description`, locale),
+    media: { ...media, alt }
+  }
+})
+</script>
+
+<template>
+  <FeatureRows01
+    :locale="locale"
+    :heading="t('mcp.tools.heading', locale)"
+    :rows="rows"
+  />
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import ReasonsSplit01 from '../../components/blocks/ReasonsSplit01.vue'
+import type { Reason } from '../../components/blocks/ReasonsSplit01.vue'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const reasonNumbers = [1, 2, 3, 4] as const
+
+const reasons: Reason[] = reasonNumbers.map((n) => ({
+  id: String(n),
+  title: t(`mcp.why.${n}.title`, locale),
+  description: t(`mcp.why.${n}.description`, locale)
+}))
+</script>
+
+<template>
+  <ReasonsSplit01
+    :heading="t('mcp.why.heading', locale)"
+    :heading-highlight="t('mcp.why.headingHighlight', locale)"
+    highlight-class="text-primary-comfy-yellow"
+    :subtitle="t('mcp.why.subtitle', locale)"
+    :reasons="reasons"
+  />
+</template>

apps/website/src/templates/mcp/ctas.ts

@@ -0,0 +1,27 @@
+import { externalLinks, getRoutes } from '../../config/routes'
+import type { Locale } from '../../i18n/translations'
+import { t } from '../../i18n/translations'
+
+export interface McpCta {
+  label: string
+  href: string
+  target?: '_blank'
+}
+
+/**
+ * The two calls-to-action shared by the MCP hero and "how it works" sections:
+ * view the docs, or run a workflow in the cloud.
+ */
+export function mcpCtas(locale: Locale): { docs: McpCta; runWorkflow: McpCta } {
+  return {
+    docs: {
+      label: t('mcp.hero.viewDocs', locale),
+      href: externalLinks.docsMcp,
+      target: '_blank'
+    },
+    runWorkflow: {
+      label: t('mcp.hero.runWorkflow', locale),
+      href: getRoutes(locale).cloud
+    }
+  }
+}

browser_tests/tests/cloud.spec.ts

@@ -14,44 +14,36 @@ const SHARE_AUTH_STORAGE_KEY = 'Comfy.PreservedQuery.share_auth'
  * routes and elements.
  */
 test.describe('Cloud distribution UI', { tag: '@cloud' }, () => {
-  test(
-    'cloud build redirects unauthenticated users to login',
-    { tag: '@critical' },
-    async ({ page }) => {
-      await page.goto(APP_URL)
-      // Cloud build has an auth guard that redirects to /cloud/login.
-      // This route only exists in the cloud distribution — it's tree-shaken
-      // in the OSS build. Its presence confirms the cloud build is active.
-      await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
-    }
-  )
+  test('cloud build redirects unauthenticated users to login', async ({
+    page
+  }) => {
+    await page.goto(APP_URL)
+    // Cloud build has an auth guard that redirects to /cloud/login.
+    // This route only exists in the cloud distribution — it's tree-shaken
+    // in the OSS build. Its presence confirms the cloud build is active.
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+  })
 
-  test(
-    'preserves share auth attribution before redirecting logged-out users',
-    { tag: '@critical' },
-    async ({ page }) => {
-      await page.goto(new URL('/?share=abc', APP_URL).toString())
+  test('preserves share auth attribution before redirecting logged-out users', async ({
+    page
+  }) => {
+    await page.goto(new URL('/?share=abc', APP_URL).toString())
 
-      await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
-      await expect
-        .poll(() =>
-          page.evaluate(
-            (key) => sessionStorage.getItem(key),
-            SHARE_AUTH_STORAGE_KEY
-          )
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+    await expect
+      .poll(() =>
+        page.evaluate(
+          (key) => sessionStorage.getItem(key),
+          SHARE_AUTH_STORAGE_KEY
         )
-        .toBe(JSON.stringify({ share: 'abc' }))
-    }
-  )
+      )
+      .toBe(JSON.stringify({ share: 'abc' }))
+  })
 
-  test(
-    'cloud login page renders sign-in options',
-    { tag: '@critical' },
-    async ({ page }) => {
-      await page.goto(APP_URL)
-      await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
-      // Verify cloud-specific login UI is rendered
-      await expect(page.getByRole('button', { name: /google/i })).toBeVisible()
-    }
-  )
+  test('cloud login page renders sign-in options', async ({ page }) => {
+    await page.goto(APP_URL)
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+    // Verify cloud-specific login UI is rendered
+    await expect(page.getByRole('button', { name: /google/i })).toBeVisible()
+  })
 })

browser_tests/tests/execution.spec.ts

@@ -97,38 +97,34 @@ test.describe(
   'Execute to selected output nodes',
   { tag: ['@smoke', '@workflow'] },
   () => {
-    test(
-      'Execute to selected output nodes',
-      { tag: '@critical' },
-      async ({ comfyPage }) => {
-        await comfyPage.workflow.loadWorkflow('execution/partial_execution')
-        const input = await comfyPage.nodeOps.getNodeRefById(3)
-        const output1 = await comfyPage.nodeOps.getNodeRefById(1)
-        const output2 = await comfyPage.nodeOps.getNodeRefById(4)
-        await expect
-          .poll(async () => (await input.getWidget(0)).getValue())
-          .toBe('foo')
-        await expect
-          .poll(async () => (await output1.getWidget(0)).getValue())
-          .toBe('')
-        await expect
-          .poll(async () => (await output2.getWidget(0)).getValue())
-          .toBe('')
+    test('Execute to selected output nodes', async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('execution/partial_execution')
+      const input = await comfyPage.nodeOps.getNodeRefById(3)
+      const output1 = await comfyPage.nodeOps.getNodeRefById(1)
+      const output2 = await comfyPage.nodeOps.getNodeRefById(4)
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
 
-        await output1.click('title')
+      await output1.click('title')
 
-        await comfyPage.command.executeCommand('Comfy.QueueSelectedOutputNodes')
-        await expect
-          .poll(async () => (await input.getWidget(0)).getValue())
-          .toBe('foo')
-        await expect
-          .poll(async () => (await output1.getWidget(0)).getValue())
-          .toBe('foo')
-        await expect
-          .poll(async () => (await output2.getWidget(0)).getValue())
-          .toBe('')
-      }
-    )
+      await comfyPage.command.executeCommand('Comfy.QueueSelectedOutputNodes')
+      await expect
+        .poll(async () => (await input.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output1.getWidget(0)).getValue())
+        .toBe('foo')
+      await expect
+        .poll(async () => (await output2.getWidget(0)).getValue())
+        .toBe('')
+    })
   }
 )
 

browser_tests/tests/extensionAPI.spec.ts

@@ -13,37 +13,33 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 type TestSettingId = keyof Settings
 
 test.describe('Topbar commands', () => {
-  test(
-    'Should allow registering topbar commands',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      await comfyPage.page.evaluate(() => {
-        window.app!.registerExtension({
-          name: 'TestExtension1',
-          commands: [
-            {
-              id: 'foo',
-              label: 'foo-command',
-              function: () => {
-                window.foo = true
-              }
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'foo',
+            label: 'foo-command',
+            function: () => {
+              window.foo = true
             }
-          ],
-          menuCommands: [
-            {
-              path: ['ext'],
-              commands: ['foo']
-            }
-          ]
-        })
+          }
+        ],
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
       })
+    })
 
-      await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
-      await expect
-        .poll(() => comfyPage.page.evaluate(() => window.foo))
-        .toBe(true)
-    }
-  )
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+    await expect
+      .poll(() => comfyPage.page.evaluate(() => window.foo))
+      .toBe(true)
+  })
 
   test('Should not allow register command defined in other extension', async ({
     comfyPage

browser_tests/tests/graph.spec.ts

@@ -22,15 +22,11 @@ test.describe('Graph', { tag: ['@smoke', '@canvas'] }, () => {
       .toBe(1)
   })
 
-  test(
-    'Validate workflow links',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.Validation.Workflows', true)
-      await comfyPage.workflow.loadWorkflow('links/bad_link')
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(2)
-    }
-  )
+  test('Validate workflow links', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Validation.Workflows', true)
+    await comfyPage.workflow.loadWorkflow('links/bad_link')
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(2)
+  })
 
   // Regression: duplicate links with shifted target_slot (widget-to-input
   // conversion) caused the wrong link to survive during deduplication.

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -8,24 +8,20 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     await comfyPage.searchBoxV2.setup()
   })
 
-  test(
-    'Can open search and add node',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+  test('Can open search and add node', async ({ comfyPage }) => {
+    const { searchBoxV2 } = comfyPage
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      await searchBoxV2.open()
-      await searchBoxV2.input.fill('KSampler')
-      await expect(searchBoxV2.results.first()).toBeVisible()
+    await searchBoxV2.open()
+    await searchBoxV2.input.fill('KSampler')
+    await expect(searchBoxV2.results.first()).toBeVisible()
 
-      await comfyPage.page.keyboard.press('Enter')
-      await expect(searchBoxV2.input).toBeHidden()
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-        .toBe(initialCount + 1)
-    }
-  )
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).toBeHidden()
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+      .toBe(initialCount + 1)
+  })
 
   test('Can add first default result with Enter', async ({ comfyPage }) => {
     const { searchBoxV2 } = comfyPage

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -33,21 +33,19 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
     await cleanupFakeModel(comfyPage)
   })
 
-  test(
-    'Should show missing models group in errors tab',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+  test('Should show missing models group in errors tab', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
 
-      const missingModelsGroup = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingModelsGroup
-      )
-      await expect(missingModelsGroup).toBeVisible()
-      await expect(
-        missingModelsGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-      ).toHaveText(/\S/)
-    }
-  )
+    const missingModelsGroup = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingModelsGroup
+    )
+    await expect(missingModelsGroup).toBeVisible()
+    await expect(
+      missingModelsGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
+    ).toHaveText(/\S/)
+  })
 
   test('Should display model name and metadata', async ({ comfyPage }) => {
     await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -12,25 +12,23 @@ test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
     )
   })
 
-  test(
-    'Should show missing node pack card with guidance',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+  test('Should show missing node pack card with guidance', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
 
-      const missingNodeGroup = comfyPage.page.getByTestId(
-        TestIds.dialogs.missingNodePacksGroup
-      )
+    const missingNodeGroup = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodePacksGroup
+    )
 
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
-      ).toBeVisible()
-      await expect(missingNodeGroup).toBeVisible()
-      await expect(
-        missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
-      ).toHaveText(/\S/)
-    }
-  )
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
+    await expect(missingNodeGroup).toBeVisible()
+    await expect(
+      missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
+    ).toHaveText(/\S/)
+  })
 
   test('Should show unknown pack node rows by default', async ({
     comfyPage

browser_tests/tests/queue/queueOverlay.spec.ts

@@ -54,19 +54,13 @@ test.describe('Queue overlay', () => {
     await comfyPage.setup()
   })
 
-  test(
-    'Toggle button opens expanded queue overlay',
-    { tag: '@critical' },
-    async ({ comfyPage }) => {
-      const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-      await toggle.click()
+  test('Toggle button opens expanded queue overlay', async ({ comfyPage }) => {
+    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
+    await toggle.click()
 
-      // Expanded overlay should show job items
-      await expect(
-        comfyPage.page.locator('[data-job-id]').first()
-      ).toBeVisible()
-    }
-  )
+    // Expanded overlay should show job items
+    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible()
+  })
 
   test('Overlay shows filter tabs (All, Completed)', async ({ comfyPage }) => {
     const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)

browser_tests/tests/subgraph/subgraphSerialization.spec.ts

@@ -129,7 +129,7 @@ async function expectPromotedWidgetsToResolveToInteriorNodes(
 test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
   test(
     'Legacy primitive proxy widgets migrate to host inputs without proxyWidgets round-trip',
-    { tag: ['@vue-nodes', '@critical'] },
+    { tag: ['@vue-nodes'] },
     async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow(
         'subgraphs/subgraph-with-link-and-proxied-primitive'

browser_tests/tests/vueNodes/videoPreview.spec.ts

@@ -1,3 +1,4 @@
+import type { Locator } from '@playwright/test'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
@@ -6,72 +7,370 @@ import { VideoPreview } from '@e2e/fixtures/components/VideoPreview'
 import { assetPath } from '@e2e/fixtures/utils/paths'
 
 const file1 = 'workflow.mp4' as const
-const file2 = 'workflow.webm' as const
+const file2 = 'video-preview-wide.webm' as const
+const file3 = 'video-preview-square.webm' as const
+const file4 = 'video-preview-portrait.webm' as const
+const MIN_PREVIEW_FRAME_HEIGHT = 100
+const CENTER_TOLERANCE_PX = 1
+const videoShapeFixtures = [
+  [file2, 'landscape'],
+  [file3, 'square'],
+  [file4, 'portrait']
+] as const
 
-test('@vue-nodes Load Video', async ({ comfyPage, comfyFiles }) => {
-  const loadVideoNode = comfyPage.vueNodes.getNodeByTitle('Load Video')
-  const loadVideo = new VideoPreview(loadVideoNode)
+type ThumbnailShape = (typeof videoShapeFixtures)[number][1]
 
-  await test.step('Add node', async () => {
-    await comfyPage.menu.topbar.newWorkflowButton.click()
-    await comfyPage.nextFrame()
+interface VideoPreviewLayout {
+  objectFit: string
+  objectPosition: string
+  wrapperHeight: number
+  wrapperWidth: number
+  wrapperX: number
+  wrapperY: number
+  videoBoxHeight: number
+  videoBoxWidth: number
+  videoIntrinsicHeight: number
+  videoIntrinsicWidth: number
+  videoX: number
+  videoY: number
+}
 
-    await comfyPage.searchBoxV2.addNode('Load Video')
-    await expect(loadVideoNode).toHaveCount(1)
-    await expect(loadVideoNode).toBeVisible()
+async function readVideoPreviewLayout(
+  preview: Locator
+): Promise<VideoPreviewLayout | null> {
+  return await preview.evaluate((previewElement) => {
+    const video = previewElement.querySelector('video')
+    const wrapper = video?.parentElement
+    if (!(video instanceof HTMLVideoElement) || !wrapper) return null
+
+    const wrapperRect = wrapper.getBoundingClientRect()
+    const videoRect = video.getBoundingClientRect()
+
+    return {
+      objectFit: getComputedStyle(video).objectFit,
+      objectPosition: getComputedStyle(video).objectPosition,
+      wrapperHeight: wrapperRect.height,
+      wrapperWidth: wrapperRect.width,
+      wrapperX: wrapperRect.x,
+      wrapperY: wrapperRect.y,
+      videoBoxHeight: videoRect.height,
+      videoBoxWidth: videoRect.width,
+      videoIntrinsicHeight: video.videoHeight,
+      videoIntrinsicWidth: video.videoWidth,
+      videoX: videoRect.x,
+      videoY: videoRect.y
+    }
   })
+}
 
-  await test.step('Upload a video file', async () => {
-    await loadVideo.upload.setInputFiles(assetPath(`workflowInMedia/${file1}`))
-    comfyFiles.deleteAfterTest({ filename: file1, type: 'input' })
-    await expect(loadVideoNode).toContainText(file1)
-    await expect(loadVideo.video).toBeVisible()
-  })
+async function requireBoundingBox(locator: Locator, subject: string) {
+  const box = await locator.boundingBox()
+  if (!box) throw new Error(`${subject} should have a bounding box`)
 
-  await test.step('Update displayed video', async () => {
-    const initialSrc = await loadVideo.videoSrc()
-    await loadVideo.upload.setInputFiles(assetPath(`workflowInMedia/${file2}`))
-    comfyFiles.deleteAfterTest({ filename: file2, type: 'input' })
-    await expect(loadVideoNode).toContainText(file2)
-    await expect.poll(() => loadVideo.videoSrc()).not.toEqual(initialSrc)
-  })
+  return box
+}
 
-  await test.step('Display multiple videmus', async () => {
-    await expect(loadVideo.navigationDots).toBeHidden()
+async function expectNodeBoxUnchanged(
+  locator: Locator,
+  before: { height: number; width: number },
+  subject: string
+) {
+  const after = await requireBoundingBox(locator, subject)
+  expect(
+    Math.abs(after.width - before.width),
+    `${subject} should not change node width`
+  ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+  expect(
+    Math.abs(after.height - before.height),
+    `${subject} should not change node height`
+  ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+}
 
-    //forcibly display multiple video files at once
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
-    await comfyPage.nextFrame()
-    await comfyPage.page.evaluate(
-      (names) => {
-        graph!.nodes[0].images.splice(
-          0,
-          1,
-          ...names.map((filename) => ({
-            type: 'input',
-            filename,
-            subfolder: ''
-          }))
+function objectPositionFraction(value: string) {
+  if (value.endsWith('%')) return Number.parseFloat(value) / 100
+
+  switch (value) {
+    case 'left':
+    case 'top':
+      return 0
+    case 'center':
+      return 0.5
+    case 'right':
+    case 'bottom':
+      return 1
+    default:
+      throw new Error(`Unsupported object-position value: ${value}`)
+  }
+}
+
+function objectPositionFractions(objectPosition: string) {
+  const [x = '50%', y = '50%'] = objectPosition.split(/\s+/)
+
+  return {
+    x: objectPositionFraction(x),
+    y: objectPositionFraction(y)
+  }
+}
+
+function getPaintedVideoRect({
+  objectPosition,
+  videoBoxHeight,
+  videoBoxWidth,
+  videoIntrinsicHeight,
+  videoIntrinsicWidth,
+  videoX,
+  videoY
+}: VideoPreviewLayout) {
+  const videoAspectRatio = videoIntrinsicWidth / videoIntrinsicHeight
+  const boxAspectRatio = videoBoxWidth / videoBoxHeight
+  const paintedWidth =
+    videoAspectRatio > boxAspectRatio
+      ? videoBoxWidth
+      : videoBoxHeight * videoAspectRatio
+  const paintedHeight =
+    videoAspectRatio > boxAspectRatio
+      ? videoBoxWidth / videoAspectRatio
+      : videoBoxHeight
+  const position = objectPositionFractions(objectPosition)
+
+  return {
+    height: paintedHeight,
+    width: paintedWidth,
+    x: videoX + (videoBoxWidth - paintedWidth) * position.x,
+    y: videoY + (videoBoxHeight - paintedHeight) * position.y
+  }
+}
+
+function expectAspectRatioMatchesShape(
+  aspectRatio: number,
+  shape: ThumbnailShape
+) {
+  if (shape === 'landscape') {
+    expect(
+      aspectRatio,
+      'landscape fixture should be wider than tall'
+    ).toBeGreaterThan(1)
+    return
+  }
+
+  if (shape === 'portrait') {
+    expect(
+      aspectRatio,
+      'portrait fixture should be taller than wide'
+    ).toBeLessThan(1)
+    return
+  }
+
+  expect(
+    Math.abs(aspectRatio - 1),
+    'square fixture should have matching width and height'
+  ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX / 100)
+}
+
+async function expectCenteredVideoPreview(preview: Locator) {
+  await expect
+    .poll(async () => {
+      const layout = await readVideoPreviewLayout(preview)
+      return layout?.videoIntrinsicWidth ?? 0
+    })
+    .toBeGreaterThan(0)
+
+  const layout = await readVideoPreviewLayout(preview)
+  if (!layout) throw new Error('Video preview should render a video element')
+
+  expect(
+    layout.wrapperHeight,
+    'video preview should keep a usable minimum frame height'
+  ).toBeGreaterThanOrEqual(MIN_PREVIEW_FRAME_HEIGHT - CENTER_TOLERANCE_PX)
+  expect(layout.videoBoxWidth).toBeGreaterThan(0)
+  expect(layout.videoBoxHeight).toBeGreaterThan(0)
+  expect(layout.objectFit).toBe('contain')
+
+  const objectPosition = objectPositionFractions(layout.objectPosition)
+  expect(objectPosition.x).toBe(0.5)
+  expect(objectPosition.y).toBe(0.5)
+
+  const wrapperCenterX = layout.wrapperX + layout.wrapperWidth / 2
+  const wrapperCenterY = layout.wrapperY + layout.wrapperHeight / 2
+  const paintedVideo = getPaintedVideoRect(layout)
+  const paintedVideoCenterX = paintedVideo.x + paintedVideo.width / 2
+  const paintedVideoCenterY = paintedVideo.y + paintedVideo.height / 2
+
+  expect(
+    Math.abs(paintedVideoCenterX - wrapperCenterX),
+    'painted video should be horizontally centered in the preview space'
+  ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+  expect(
+    Math.abs(paintedVideoCenterY - wrapperCenterY),
+    'painted video should be vertically centered in the preview space'
+  ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+  expect(layout.videoBoxWidth).toBeLessThanOrEqual(
+    layout.wrapperWidth + CENTER_TOLERANCE_PX
+  )
+  expect(layout.videoBoxHeight).toBeLessThanOrEqual(
+    layout.wrapperHeight + CENTER_TOLERANCE_PX
+  )
+  expect(paintedVideo.width).toBeLessThanOrEqual(
+    layout.wrapperWidth + CENTER_TOLERANCE_PX
+  )
+  expect(paintedVideo.height).toBeLessThanOrEqual(
+    layout.wrapperHeight + CENTER_TOLERANCE_PX
+  )
+
+  return layout
+}
+
+test.describe(
+  'VideoPreview',
+  { tag: ['@vue-nodes', '@node', '@widget'] },
+  () => {
+    test('@vue-nodes Load Video', async ({ comfyPage, comfyFiles }) => {
+      const loadVideoNode = comfyPage.vueNodes.getNodeByTitle('Load Video')
+      const loadVideo = new VideoPreview(loadVideoNode)
+
+      await test.step('Add node', async () => {
+        await comfyPage.menu.topbar.newWorkflowButton.click()
+        await comfyPage.nextFrame()
+
+        await comfyPage.searchBoxV2.addNode('Load Video')
+        await expect(loadVideoNode).toHaveCount(1)
+        await expect(loadVideoNode).toBeVisible()
+      })
+
+      const loadVideoFixture =
+        await comfyPage.vueNodes.getFixtureByTitle('Load Video')
+
+      await test.step('Upload a video file', async () => {
+        await loadVideo.upload.setInputFiles(
+          assetPath(`workflowInMedia/${file1}`)
         )
-      },
-      [file1, file2]
-    )
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        comfyFiles.deleteAfterTest({ filename: file1, type: 'input' })
+        await expect(loadVideoNode).toContainText(file1)
+        await expect(loadVideo.video).toBeVisible()
 
-    await expect(loadVideo.navigationDots).toHaveCount(2)
-    await loadVideo.navigationDots.nth(0).click()
-    await expect.poll(() => loadVideo.videoSrc()).toContain(file1)
-    await loadVideo.navigationDots.nth(1).click()
-    await expect.poll(() => loadVideo.videoSrc()).toContain(file2)
-  })
+        const layout = await expectCenteredVideoPreview(loadVideo.preview)
+        expect(layout.videoIntrinsicWidth).toBeGreaterThan(0)
+      })
 
-  await test.step('Can redownload uploaded file', async () => {
-    await loadVideo.video.hover()
-    await expect(loadVideo.download).toBeVisible()
+      await test.step('Update displayed video across thumbnail shapes', async () => {
+        for (const [filename, shape] of videoShapeFixtures) {
+          const initialSrc = await loadVideo.videoSrc()
+          const nodeBoxBeforeLoad = await requireBoundingBox(
+            loadVideoNode,
+            `Load Video node before loading ${filename}`
+          )
+          await loadVideo.upload.setInputFiles(assetPath(`video/${filename}`))
+          comfyFiles.deleteAfterTest({
+            filename,
+            type: 'input'
+          })
+          await expect(loadVideoNode).toContainText(filename)
+          await expect.poll(() => loadVideo.videoSrc()).not.toEqual(initialSrc)
 
-    const downloadPromise = comfyPage.page.waitForEvent('download')
-    await loadVideo.download.click()
-    const download = await downloadPromise
-    expect(download.suggestedFilename()).toBe(file2)
-  })
-})
+          const layout = await expectCenteredVideoPreview(loadVideo.preview)
+          await expectNodeBoxUnchanged(
+            loadVideoNode,
+            nodeBoxBeforeLoad,
+            `Load Video node after loading ${filename}`
+          )
+          const updatedVideoAspectRatio =
+            layout.videoIntrinsicWidth / layout.videoIntrinsicHeight
+
+          expectAspectRatioMatchesShape(updatedVideoAspectRatio, shape)
+        }
+      })
+
+      await test.step('Keep video centered after horizontal resize', async () => {
+        const nodeBox = await requireBoundingBox(
+          loadVideoNode,
+          'Load Video node before horizontal resize'
+        )
+        const initialLayout = await expectCenteredVideoPreview(
+          loadVideo.preview
+        )
+
+        await loadVideoFixture.resizeFromCorner('SE', 180, 0)
+        await comfyPage.nextFrame()
+        await expect
+          .poll(loadVideoFixture.pollWidth)
+          .toBeGreaterThan(nodeBox.width + 100)
+        const layout = await expectCenteredVideoPreview(loadVideo.preview)
+        expect(
+          layout.wrapperWidth - initialLayout.wrapperWidth,
+          'video preview space should grow with a wider node'
+        ).toBeGreaterThan(100)
+        expect(
+          Math.abs(layout.wrapperHeight - initialLayout.wrapperHeight),
+          'horizontal resize should not change the preview space height'
+        ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+      })
+
+      await test.step('Keep video centered after vertical resize', async () => {
+        const nodeBox = await requireBoundingBox(
+          loadVideoNode,
+          'Load Video node before vertical resize'
+        )
+        const initialLayout = await expectCenteredVideoPreview(
+          loadVideo.preview
+        )
+
+        await loadVideoFixture.resizeFromCorner('SE', 0, 180)
+        await comfyPage.nextFrame()
+        await expect
+          .poll(loadVideoFixture.pollHeight)
+          .toBeGreaterThan(nodeBox.height + 100)
+        const layout = await expectCenteredVideoPreview(loadVideo.preview)
+        expect(
+          layout.wrapperHeight - initialLayout.wrapperHeight,
+          'video preview space should grow with a taller node'
+        ).toBeGreaterThan(100)
+        expect(
+          Math.abs(layout.wrapperWidth - initialLayout.wrapperWidth),
+          'vertical resize should not change the preview space width'
+        ).toBeLessThanOrEqual(CENTER_TOLERANCE_PX)
+      })
+
+      await test.step('Display multiple videos', async () => {
+        await expect(loadVideo.navigationDots).toBeHidden()
+
+        try {
+          await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+          await comfyPage.nextFrame()
+          await comfyPage.page.evaluate(
+            (names) => {
+              graph!.nodes[0].images.splice(
+                0,
+                1,
+                ...names.map((filename) => ({
+                  type: 'input',
+                  filename,
+                  subfolder: ''
+                }))
+              )
+            },
+            [file1, file2]
+          )
+        } finally {
+          await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+          await comfyPage.nextFrame()
+        }
+
+        await expect(loadVideo.navigationDots).toHaveCount(2)
+        await loadVideo.navigationDots.nth(0).press('Enter')
+        await expect.poll(() => loadVideo.videoSrc()).toContain(file1)
+        await loadVideo.navigationDots.nth(1).press('Enter')
+        await expect.poll(() => loadVideo.videoSrc()).toContain(file2)
+      })
+
+      await test.step('Can redownload uploaded file', async () => {
+        await loadVideo.video.hover()
+        await expect(loadVideo.download).toBeVisible()
+
+        const downloadPromise = comfyPage.page.waitForEvent('download')
+        await loadVideo.download.click()
+        const download = await downloadPromise
+        expect(download.suggestedFilename()).toBe(file2)
+      })
+    })
+  }
+)

package.json

@@ -51,11 +51,8 @@
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec playwright test",
     "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
-    "test:browser:critical": "pnpm exec playwright test --project=chromium --grep @critical",
-    "test:browser:cloud-critical": "pnpm exec playwright test --project=cloud --grep @critical",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
-    "test:coverage:critical": "cross-env COVERAGE_CRITICAL=true vitest run --coverage",
     "test:unit": "vitest run",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",

src/base/common/async.test.ts

@@ -1,75 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-describe('runWhenGlobalIdle', () => {
-  beforeEach(() => {
-    vi.resetModules()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-    vi.unstubAllGlobals()
-  })
-
-  it('falls back to a timeout when idle callbacks are unavailable', async () => {
-    vi.useFakeTimers()
-    vi.stubGlobal('requestIdleCallback', undefined)
-    vi.stubGlobal('cancelIdleCallback', undefined)
-    const { runWhenGlobalIdle } = await import('./async')
-    const runner = vi.fn()
-
-    const disposable = runWhenGlobalIdle(runner)
-    await vi.runAllTimersAsync()
-
-    expect(runner).toHaveBeenCalledOnce()
-    const deadline = runner.mock.calls[0][0]
-    expect(deadline.didTimeout).toBe(true)
-    expect(deadline.timeRemaining()).toBeGreaterThanOrEqual(0)
-
-    disposable.dispose()
-    disposable.dispose()
-  })
-
-  it('cancels fallback idle work before it runs', async () => {
-    vi.useFakeTimers()
-    vi.stubGlobal('requestIdleCallback', undefined)
-    vi.stubGlobal('cancelIdleCallback', undefined)
-    const { runWhenGlobalIdle } = await import('./async')
-    const runner = vi.fn()
-
-    runWhenGlobalIdle(runner).dispose()
-    await vi.runAllTimersAsync()
-
-    expect(runner).not.toHaveBeenCalled()
-  })
-
-  it('uses native idle callbacks when available', async () => {
-    const requestIdleCallback = vi.fn(() => 42)
-    const cancelIdleCallback = vi.fn()
-    vi.stubGlobal('requestIdleCallback', requestIdleCallback)
-    vi.stubGlobal('cancelIdleCallback', cancelIdleCallback)
-    const { runWhenGlobalIdle } = await import('./async')
-    const runner = vi.fn()
-
-    const disposable = runWhenGlobalIdle(runner, 250)
-
-    expect(requestIdleCallback).toHaveBeenCalledWith(runner, { timeout: 250 })
-
-    disposable.dispose()
-    disposable.dispose()
-
-    expect(cancelIdleCallback).toHaveBeenCalledOnce()
-    expect(cancelIdleCallback).toHaveBeenCalledWith(42)
-  })
-
-  it('omits native idle timeout options when no timeout is supplied', async () => {
-    const requestIdleCallback = vi.fn(() => 7)
-    vi.stubGlobal('requestIdleCallback', requestIdleCallback)
-    vi.stubGlobal('cancelIdleCallback', vi.fn())
-    const { runWhenGlobalIdle } = await import('./async')
-    const runner = vi.fn()
-
-    runWhenGlobalIdle(runner)
-
-    expect(requestIdleCallback).toHaveBeenCalledWith(runner, undefined)
-  })
-})

src/base/credits/comfyCredits.test.ts

@@ -4,7 +4,6 @@ import {
   CREDITS_PER_USD,
   COMFY_CREDIT_RATE_CENTS,
   centsToCredits,
-  clampUsd,
   creditsToCents,
   creditsToUsd,
   formatCredits,
@@ -44,21 +43,4 @@ describe('comfyCredits helpers', () => {
     expect(formatCreditsFromUsd({ usd: 1, locale })).toBe('211.00')
     expect(formatUsd({ value: 4.2, locale })).toBe('4.20')
   })
-
-  test('formats with compatible fraction digit bounds', () => {
-    expect(
-      formatCredits({
-        value: 12.345,
-        locale: 'en-US',
-        numberOptions: { minimumFractionDigits: 4, maximumFractionDigits: 2 }
-      })
-    ).toBe('12.35')
-  })
-
-  test('clamps USD purchase values into the supported range', () => {
-    expect(clampUsd(Number.NaN)).toBe(0)
-    expect(clampUsd(-5)).toBe(1)
-    expect(clampUsd(42)).toBe(42)
-    expect(clampUsd(5000)).toBe(1000)
-  })
 })

src/components/common/DropdownItem.vue

@@ -70,8 +70,6 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
     :disabled="toValue(item.disabled) ?? !item.command"
     @select="item.command?.({ originalEvent: $event, item })"
   >
-    <!-- Items declaring an icon key (even empty) keep the slot so labels align
-         within icon-bearing menus; icon-less menus render labels flush-left. -->
     <i v-if="'icon' in item" class="size-5 shrink-0" :class="item.icon" />
     <div class="mr-auto truncate" v-text="item.label" />
     <i v-if="item.checked" class="icon-[lucide--check] shrink-0" />

src/components/common/FilterDropdown.vue

@@ -24,7 +24,7 @@ function toggleCategory(category: string) {
 }
 </script>
 <template>
-  <DropdownMenu button-class="icon-[lucide--list-filter]">
+  <DropdownMenu>
     <template #button>
       <Button size="icon" :aria-label="$t('g.filter')">
         <i class="icon-[lucide--list-filter]" />
@@ -52,7 +52,7 @@ function toggleCategory(category: string) {
       >
         <span
           class="flex-1"
-          v-text="$t(filterLabels?.[filter] ?? '') ?? filter"
+          v-text="filterLabels?.[filter] ? $t(filterLabels[filter]) : filter"
         />
         <DropdownMenuItemIndicator class="size-4 shrink-0">
           <i class="icon-[lucide--check]" />

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -117,8 +117,8 @@
 </template>
 
 <script setup lang="ts">
-import { mapValues } from 'es-toolkit'
 import { useEventListener, useLocalStorage } from '@vueuse/core'
+import { mapValues } from 'es-toolkit'
 import type { MenuItem } from 'primevue/menuitem'
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from 'reka-ui'
 import {

src/composables/canvas/useSelectionToolboxPosition.test.ts

@@ -34,22 +34,17 @@ describe('useSelectionToolboxPosition', () => {
     canvasStore = useCanvasStore()
   })
 
-  function renderToolboxForSelection(
-    items: Iterable<Positionable>,
-    state: Partial<LGraphCanvas['state']> = {},
-    ds: Partial<LGraphCanvas['ds']> = {}
-  ) {
+  function renderToolboxForSelection(item: Positionable) {
     canvasStore.canvas = markRaw({
       canvas: document.createElement('canvas'),
       ds: {
-        offset: ds.offset ?? [0, 0],
-        scale: ds.scale ?? 1
+        offset: [0, 0],
+        scale: 1
       },
-      selectedItems: new Set(items),
+      selectedItems: new Set([item]),
       state: {
         draggingItems: false,
-        selectionChanged: true,
-        ...state
+        selectionChanged: true
       }
     } as Partial<LGraphCanvas> as LGraphCanvas)
 
@@ -74,7 +69,7 @@ describe('useSelectionToolboxPosition', () => {
     group.pos = [100, 200]
     group.size = [160, 80]
 
-    const { toolbox, unmount } = renderToolboxForSelection([group])
+    const { toolbox, unmount } = renderToolboxForSelection(group)
 
     expect(toolbox.style.getPropertyValue('--tb-y')).toBe('190px')
     unmount()
@@ -86,64 +81,11 @@ describe('useSelectionToolboxPosition', () => {
     node.pos = [100, 200]
     node.size = [160, 80]
 
-    const { toolbox, unmount } = renderToolboxForSelection([node])
+    const { toolbox, unmount } = renderToolboxForSelection(node)
 
     expect(toolbox.style.getPropertyValue('--tb-y')).toBe(
       `${190 - LiteGraph.NODE_TITLE_HEIGHT}px`
     )
     unmount()
   })
-
-  it('does not set coordinates when selection is empty', () => {
-    const { toolbox, unmount } = renderToolboxForSelection([])
-
-    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('')
-    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('')
-    unmount()
-  })
-
-  it('does not set coordinates while selected items are being dragged', () => {
-    const group = new LGraphGroup('Group', 1)
-    group.pos = [100, 200]
-    group.size = [160, 80]
-
-    const { toolbox, unmount } = renderToolboxForSelection([group], {
-      draggingItems: true
-    })
-
-    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('')
-    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('')
-    unmount()
-  })
-
-  it('positions multiple selected items from their union bounds', () => {
-    const first = new LGraphGroup('First', 1)
-    first.pos = [100, 200]
-    first.size = [100, 40]
-    const second = new LGraphGroup('Second', 2)
-    second.pos = [300, 260]
-    second.size = [50, 40]
-
-    const { toolbox, unmount } = renderToolboxForSelection([first, second])
-
-    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('270px')
-    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('190px')
-    unmount()
-  })
-
-  it('applies canvas scale and offset to screen coordinates', () => {
-    const group = new LGraphGroup('Group', 1)
-    group.pos = [100, 200]
-    group.size = [100, 40]
-
-    const { toolbox, unmount } = renderToolboxForSelection(
-      [group],
-      {},
-      { offset: [10, 20], scale: 2 }
-    )
-
-    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('360px')
-    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('420px')
-    unmount()
-  })
 })

src/composables/graph/useGroupMenuOptions.test.ts

@@ -1,215 +0,0 @@
-import type * as VueI18n from 'vue-i18n'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { LGraphGroup } from '@/lib/litegraph/src/litegraph'
-import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
-import { useGroupMenuOptions } from '@/composables/graph/useGroupMenuOptions'
-
-const { canvas, captureCanvasState, isLightTheme, refreshCanvas, settings } =
-  vi.hoisted(() => ({
-    canvas: { setDirty: vi.fn() },
-    captureCanvasState: vi.fn(),
-    isLightTheme: { value: false },
-    refreshCanvas: vi.fn(),
-    settings: { 'Comfy.GroupSelectedNodes.Padding': 10 } as Record<
-      string,
-      unknown
-    >
-  }))
-
-vi.mock('vue-i18n', async (importOriginal) => ({
-  ...(await importOriginal<typeof VueI18n>()),
-  useI18n: () => ({ t: (key: string) => key })
-}))
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({ get: (k: string) => settings[k] })
-}))
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => ({
-    activeWorkflow: { changeTracker: { captureCanvasState } }
-  })
-}))
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({ canvas })
-}))
-vi.mock('@/composables/graph/useCanvasRefresh', () => ({
-  useCanvasRefresh: () => ({ refreshCanvas })
-}))
-vi.mock('@/composables/graph/useNodeCustomization', () => ({
-  useNodeCustomization: () => ({
-    shapeOptions: [{ value: 1, localizedName: 'Box' }],
-    colorOptions: [
-      { value: { dark: '#111', light: '#eee' }, localizedName: 'Red' }
-    ],
-    isLightTheme
-  })
-}))
-
-function group(over: Record<string, unknown> = {}): LGraphGroup {
-  return {
-    recomputeInsideNodes: vi.fn(),
-    resizeTo: vi.fn(),
-    children: [],
-    graph: { change: vi.fn() },
-    nodes: [],
-    ...over
-  } as unknown as LGraphGroup
-}
-
-beforeEach(() => {
-  canvas.setDirty.mockReset()
-  captureCanvasState.mockReset()
-  isLightTheme.value = false
-  refreshCanvas.mockReset()
-})
-
-describe('useGroupMenuOptions', () => {
-  it('fits a group to its nodes, resizing with the configured padding', () => {
-    const g = group()
-    useGroupMenuOptions().getFitGroupToNodesOption(g).action?.()
-
-    expect(g.recomputeInsideNodes).toHaveBeenCalled()
-    expect(g.resizeTo).toHaveBeenCalledWith(g.children, 10)
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('aborts the fit action when recompute throws', () => {
-    const g = group({
-      recomputeInsideNodes: vi.fn(() => {
-        throw new Error('boom')
-      })
-    })
-    useGroupMenuOptions().getFitGroupToNodesOption(g).action?.()
-
-    expect(g.resizeTo).not.toHaveBeenCalled()
-  })
-
-  it('applies a shape to all group nodes via the shape submenu', () => {
-    const node = { shape: 0, mode: LGraphEventMode.ALWAYS }
-    const bump = vi.fn()
-    const option = useGroupMenuOptions().getGroupShapeOptions(
-      group({ nodes: [node] }),
-      bump
-    )
-    option.submenu?.[0].action?.()
-
-    expect(node.shape).toBe(1)
-    expect(refreshCanvas).toHaveBeenCalled()
-    expect(bump).toHaveBeenCalled()
-  })
-
-  it('handles shape actions when a group has no nodes array', () => {
-    const bump = vi.fn()
-    useGroupMenuOptions()
-      .getGroupShapeOptions(group({ nodes: undefined }), bump)
-      .submenu?.[0].action?.()
-
-    expect(refreshCanvas).toHaveBeenCalled()
-    expect(bump).toHaveBeenCalled()
-  })
-
-  it('applies a color to the group via the color submenu (dark theme)', () => {
-    const g = group()
-    const bump = vi.fn()
-    useGroupMenuOptions().getGroupColorOptions(g, bump).submenu?.[0].action?.()
-
-    expect((g as unknown as { color: string }).color).toBe('#111')
-    expect(bump).toHaveBeenCalled()
-  })
-
-  it('applies a light-theme color to the group via the color submenu', () => {
-    const g = group()
-    const bump = vi.fn()
-    isLightTheme.value = true
-    useGroupMenuOptions().getGroupColorOptions(g, bump).submenu?.[0].action?.()
-
-    expect((g as unknown as { color: string }).color).toBe('#eee')
-    expect(bump).toHaveBeenCalled()
-  })
-
-  it('returns no mode options for an empty group', () => {
-    expect(useGroupMenuOptions().getGroupModeOptions(group(), vi.fn())).toEqual(
-      []
-    )
-  })
-
-  it('returns no mode options when a group has no nodes array', () => {
-    expect(
-      useGroupMenuOptions().getGroupModeOptions(
-        group({ nodes: undefined }),
-        vi.fn()
-      )
-    ).toEqual([])
-  })
-
-  it('returns no mode options when recomputing group nodes fails', () => {
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({
-        recomputeInsideNodes: vi.fn(() => {
-          throw new Error('boom')
-        })
-      }),
-      vi.fn()
-    )
-
-    expect(options).toEqual([])
-    expect(warnSpy).toHaveBeenCalledWith(
-      'Failed to recompute nodes in group for mode options:',
-      expect.any(Error)
-    )
-  })
-
-  it('builds mode options for uniform nodes and applies the new mode', () => {
-    const node = { shape: 0, mode: LGraphEventMode.ALWAYS }
-    const bump = vi.fn()
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({ nodes: [node] }),
-      bump
-    )
-
-    expect(options.length).toBeGreaterThan(0)
-    options[0].action?.()
-    expect(node.mode).not.toBe(LGraphEventMode.ALWAYS)
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(bump).toHaveBeenCalled()
-  })
-
-  it('offers two alternate modes when all nodes are NEVER', () => {
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({ nodes: [{ mode: LGraphEventMode.NEVER }] }),
-      vi.fn()
-    )
-    expect(options).toHaveLength(2)
-  })
-
-  it('offers two alternate modes when all nodes are BYPASS', () => {
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({ nodes: [{ mode: LGraphEventMode.BYPASS }] }),
-      vi.fn()
-    )
-    expect(options).toHaveLength(2)
-  })
-
-  it('offers all three modes when nodes have mixed modes', () => {
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({
-        nodes: [
-          { mode: LGraphEventMode.ALWAYS },
-          { mode: LGraphEventMode.NEVER }
-        ]
-      }),
-      vi.fn()
-    )
-    expect(options).toHaveLength(3)
-  })
-
-  it('offers all three modes when the uniform mode is unknown', () => {
-    const options = useGroupMenuOptions().getGroupModeOptions(
-      group({ nodes: [{ mode: 999 }] }),
-      vi.fn()
-    )
-    expect(options).toHaveLength(3)
-  })
-})

src/composables/graph/useImageMenuOptions.test.ts

@@ -1,7 +1,6 @@
 import { fromPartial } from '@total-typescript/shoehorn'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 
-import { downloadFile, openFileInNewTab } from '@/base/common/downloadUtil'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import { useImageMenuOptions } from './useImageMenuOptions'
@@ -20,11 +19,6 @@ vi.mock('@/stores/commandStore', () => ({
   useCommandStore: () => ({ execute: vi.fn() })
 }))
 
-vi.mock('@/base/common/downloadUtil', () => ({
-  downloadFile: vi.fn(),
-  openFileInNewTab: vi.fn()
-}))
-
 function mockClipboard(clipboard: Partial<Clipboard> | undefined) {
   Object.defineProperty(navigator, 'clipboard', {
     value: clipboard,
@@ -33,15 +27,6 @@ function mockClipboard(clipboard: Partial<Clipboard> | undefined) {
   })
 }
 
-function stubClipboardItem() {
-  vi.stubGlobal(
-    'ClipboardItem',
-    class ClipboardItemStub {
-      constructor(public readonly items: Record<string, Blob>) {}
-    }
-  )
-}
-
 function createImageNode(
   overrides: Partial<LGraphNode> | Record<string, unknown> = {}
 ): LGraphNode {
@@ -60,13 +45,8 @@ function createImageNode(
 }
 
 describe('useImageMenuOptions', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
   afterEach(() => {
     vi.restoreAllMocks()
-    vi.unstubAllGlobals()
   })
 
   describe('getImageMenuOptions', () => {
@@ -202,141 +182,4 @@ describe('useImageMenuOptions', () => {
       expect(node.pasteFiles).not.toHaveBeenCalled()
     })
   })
-
-  describe('image actions', () => {
-    it('opens the selected image without preview query params', () => {
-      const node = createImageNode()
-      node.imgs![0].src = 'http://localhost/test.png?preview=1&foo=bar'
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      const openOption = getImageMenuOptions(node).find(
-        (o) => o.label === 'Open Image'
-      )
-      openOption?.action?.()
-
-      expect(openFileInNewTab).toHaveBeenCalledWith(
-        'http://localhost/test.png?foo=bar'
-      )
-    })
-
-    it('saves the selected image without preview query params', () => {
-      const node = createImageNode()
-      node.imgs![0].src = 'http://localhost/test.png?preview=1&foo=bar'
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      const saveOption = getImageMenuOptions(node).find(
-        (o) => o.label === 'Save Image'
-      )
-      saveOption?.action?.()
-
-      expect(downloadFile).toHaveBeenCalledWith(
-        'http://localhost/test.png?foo=bar'
-      )
-    })
-
-    it('does not open or save when the active image is missing', () => {
-      const node = createImageNode({ imageIndex: 1 })
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      const options = getImageMenuOptions(node)
-      options.find((o) => o.label === 'Open Image')?.action?.()
-      options.find((o) => o.label === 'Save Image')?.action?.()
-
-      expect(openFileInNewTab).not.toHaveBeenCalled()
-      expect(downloadFile).not.toHaveBeenCalled()
-    })
-
-    it('logs save failures for invalid image URLs', () => {
-      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-      const node = createImageNode()
-      Object.defineProperty(node.imgs![0], 'src', {
-        value: 'http://[',
-        configurable: true
-      })
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      getImageMenuOptions(node)
-        .find((o) => o.label === 'Save Image')
-        ?.action?.()
-
-      expect(errorSpy).toHaveBeenCalledWith(
-        'Failed to save image:',
-        expect.any(TypeError)
-      )
-      expect(downloadFile).not.toHaveBeenCalled()
-    })
-
-    it('copies the selected image to clipboard', async () => {
-      const node = createImageNode()
-      const drawImage = vi.fn()
-      const write = vi.fn().mockResolvedValue(undefined)
-      stubClipboardItem()
-      mockClipboard(fromPartial<Clipboard>({ write }))
-      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
-        (() =>
-          fromPartial<CanvasRenderingContext2D>({
-            drawImage
-          })) as unknown as HTMLCanvasElement['getContext']
-      )
-      vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
-        (callback: BlobCallback) => {
-          callback(new Blob(['image'], { type: 'image/png' }))
-        }
-      )
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      await getImageMenuOptions(node)
-        .find((o) => o.label === 'Copy Image')
-        ?.action?.()
-
-      expect(drawImage).toHaveBeenCalledWith(node.imgs![0], 0, 0)
-      expect(write).toHaveBeenCalledWith([
-        expect.objectContaining({
-          items: { 'image/png': expect.any(Blob) }
-        })
-      ])
-    })
-
-    it('does not copy when canvas context is unavailable', async () => {
-      const node = createImageNode()
-      const write = vi.fn()
-      mockClipboard(fromPartial<Clipboard>({ write }))
-      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
-        (() => null) as HTMLCanvasElement['getContext']
-      )
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      await getImageMenuOptions(node)
-        .find((o) => o.label === 'Copy Image')
-        ?.action?.()
-
-      expect(write).not.toHaveBeenCalled()
-    })
-
-    it('does not copy when canvas blob creation fails', async () => {
-      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-      const node = createImageNode()
-      const write = vi.fn()
-      mockClipboard(fromPartial<Clipboard>({ write }))
-      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
-        (() =>
-          fromPartial<CanvasRenderingContext2D>({
-            drawImage: vi.fn()
-          })) as unknown as HTMLCanvasElement['getContext']
-      )
-      vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
-        (callback: BlobCallback) => {
-          callback(null)
-        }
-      )
-
-      const { getImageMenuOptions } = useImageMenuOptions()
-      await getImageMenuOptions(node)
-        .find((o) => o.label === 'Copy Image')
-        ?.action?.()
-
-      expect(warnSpy).toHaveBeenCalledWith('Failed to create image blob')
-      expect(write).not.toHaveBeenCalled()
-    })
-  })
 })

src/composables/graph/useMoreOptionsMenu.test.ts

@@ -1,292 +0,0 @@
-import { ref } from 'vue'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { LGraphGroup } from '@/lib/litegraph/src/litegraph'
-import {
-  isNodeOptionsOpen,
-  registerNodeOptionsInstance,
-  showNodeOptions,
-  toggleNodeOptions,
-  useMoreOptionsMenu
-} from '@/composables/graph/useMoreOptionsMenu'
-
-const {
-  canvasState,
-  extraWidgetOptions,
-  imageOptions,
-  nodeMenu,
-  selectionMenu,
-  selectionState
-} = vi.hoisted(() => ({
-  canvasState: {
-    canvas: undefined as
-      | undefined
-      | {
-          getNodeMenuOptions: ReturnType<typeof vi.fn>
-        }
-  },
-  extraWidgetOptions: {
-    value: [] as Array<{ content: string; callback?: () => void }>
-  },
-  imageOptions: {
-    value: [] as Array<{ label: string; hasSubmenu?: boolean; submenu?: [] }>
-  },
-  nodeMenu: {
-    visualOptions: {
-      value: [] as Array<{
-        label: string
-        hasSubmenu?: boolean
-        submenu?: Array<{ label: string; action: () => void }>
-      }>
-    }
-  },
-  selectionMenu: {
-    basicOptions: { value: [{ label: 'Copy' }] },
-    multipleOptions: { value: [{ label: 'Align' }] },
-    subgraphOptions: { value: [] as Array<{ label: string }> }
-  },
-  selectionState: {
-    selectedItems: { value: [] as unknown[] },
-    selectedNodes: { value: [] as unknown[] },
-    canOpenNodeInfo: { value: false },
-    openNodeInfo: vi.fn(() => true),
-    hasSubgraphs: { value: false },
-    hasImageNode: { value: false },
-    hasOutputNodesSelected: { value: false },
-    hasMultipleSelection: { value: false },
-    computeSelectionFlags: vi.fn(() => ({
-      collapsed: false,
-      pinned: false
-    }))
-  }
-}))
-
-vi.mock('@/composables/graph/useSelectionState', () => ({
-  useSelectionState: () => selectionState
-}))
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => canvasState
-}))
-vi.mock('@/services/litegraphService', () => ({
-  getExtraOptionsForWidget: () => extraWidgetOptions.value
-}))
-vi.mock('@/composables/graph/useImageMenuOptions', () => ({
-  useImageMenuOptions: () => ({
-    getImageMenuOptions: () => imageOptions.value
-  })
-}))
-vi.mock('@/composables/graph/useNodeMenuOptions', () => ({
-  useNodeMenuOptions: () => ({
-    getNodeInfoOption: (openNodeInfo: () => boolean) => ({
-      label: 'Node Info',
-      action: openNodeInfo
-    }),
-    getNodeVisualOptions: () => nodeMenu.visualOptions.value,
-    getPinOption: () => ({ label: 'Pin' }),
-    getBypassOption: () => ({ label: 'Bypass' }),
-    getRunBranchOption: () => ({ label: 'Run Branch' })
-  })
-}))
-vi.mock('@/composables/graph/useGroupMenuOptions', () => ({
-  useGroupMenuOptions: () => ({
-    getFitGroupToNodesOption: () => ({ label: 'Fit' }),
-    getGroupColorOptions: () => ({ label: 'Group Color' }),
-    getGroupModeOptions: () => [{ label: 'Group Mode' }]
-  })
-}))
-vi.mock('@/composables/graph/useSelectionMenuOptions', () => ({
-  useSelectionMenuOptions: () => ({
-    getBasicSelectionOptions: () => selectionMenu.basicOptions.value,
-    getMultipleNodesOptions: () => selectionMenu.multipleOptions.value,
-    getSubgraphOptions: () => selectionMenu.subgraphOptions.value
-  })
-}))
-
-beforeEach(() => {
-  vi.clearAllMocks()
-  registerNodeOptionsInstance(null)
-  canvasState.canvas = undefined
-  extraWidgetOptions.value = []
-  imageOptions.value = []
-  nodeMenu.visualOptions.value = []
-  selectionMenu.basicOptions.value = [{ label: 'Copy' }]
-  selectionMenu.multipleOptions.value = [{ label: 'Align' }]
-  selectionMenu.subgraphOptions.value = []
-  selectionState.selectedItems.value = []
-  selectionState.selectedNodes.value = []
-  selectionState.canOpenNodeInfo.value = false
-  selectionState.hasSubgraphs.value = false
-  selectionState.hasImageNode.value = false
-  selectionState.hasOutputNodesSelected.value = false
-  selectionState.hasMultipleSelection.value = false
-  selectionState.computeSelectionFlags.mockReturnValue({
-    collapsed: false,
-    pinned: false
-  })
-})
-
-function labels() {
-  return useMoreOptionsMenu()
-    .menuOptions.value.map((o) => o.label)
-    .filter(Boolean)
-}
-
-describe('node options popover instance', () => {
-  it('reports closed when no instance is registered', () => {
-    expect(isNodeOptionsOpen()).toBe(false)
-  })
-
-  it('reflects the registered instance open state and forwards toggle/show', () => {
-    const toggle = vi.fn()
-    const show = vi.fn()
-    registerNodeOptionsInstance({
-      toggle,
-      show,
-      hide: vi.fn(),
-      isOpen: ref(true)
-    })
-
-    expect(isNodeOptionsOpen()).toBe(true)
-    toggleNodeOptions(new Event('click'))
-    showNodeOptions(new MouseEvent('contextmenu'))
-    expect(toggle).toHaveBeenCalled()
-    expect(show).toHaveBeenCalled()
-  })
-})
-
-describe('useMoreOptionsMenu', () => {
-  it('assembles a non-empty menu for a single selected node', () => {
-    const node = { id: 1, widgets: [] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-
-    expect(labels()).toContain('Copy')
-    expect(labels()).toContain('Pin')
-  })
-
-  it('includes run-branch and multiple-node options for output selections', () => {
-    const nodes = [
-      { id: 1, widgets: [] },
-      { id: 2, widgets: [] }
-    ]
-    selectionState.selectedItems.value = nodes
-    selectionState.selectedNodes.value = nodes
-    selectionState.hasOutputNodesSelected.value = true
-    selectionState.hasMultipleSelection.value = true
-
-    const menuLabels = labels()
-    expect(menuLabels).toContain('Run Branch')
-    expect(menuLabels).toContain('Align')
-  })
-
-  it('recomputes menu flags after a manual bump', () => {
-    const { bump, menuOptions } = useMoreOptionsMenu()
-    void menuOptions.value
-    expect(selectionState.computeSelectionFlags).toHaveBeenCalledTimes(1)
-
-    bump()
-    void menuOptions.value
-    expect(selectionState.computeSelectionFlags).toHaveBeenCalledTimes(2)
-  })
-
-  it('assembles group-context options for a single selected group', () => {
-    const group = new LGraphGroup('Group')
-    selectionState.selectedItems.value = [group]
-    selectionState.selectedNodes.value = []
-
-    const menuLabels = labels()
-    expect(menuLabels).toContain('Group Mode')
-    expect(menuLabels).toContain('Fit')
-    expect(menuLabels).toContain('Group Color')
-  })
-
-  it('includes node info and visual options for a single node', () => {
-    const node = { id: 1, widgets: [] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    selectionState.canOpenNodeInfo.value = true
-    nodeMenu.visualOptions.value = [
-      { label: 'Minimize Node' },
-      { label: 'Shape', hasSubmenu: true, submenu: [] },
-      { label: 'Color', hasSubmenu: true, submenu: [] }
-    ]
-
-    const menu = useMoreOptionsMenu().menuOptions.value
-    expect(menu.map((o) => o.label)).toEqual(
-      expect.arrayContaining(['Node Info', 'Minimize Node', 'Shape', 'Color'])
-    )
-    menu.find((o) => o.label === 'Node Info')?.action?.()
-    expect(selectionState.openNodeInfo).toHaveBeenCalled()
-  })
-
-  it('returns only entries that have populated submenus', () => {
-    const node = { id: 1, widgets: [] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    nodeMenu.visualOptions.value = [
-      { label: 'Minimize Node' },
-      {
-        label: 'Shape',
-        hasSubmenu: true,
-        submenu: [{ label: 'Box', action: vi.fn() }]
-      },
-      { label: 'Color', hasSubmenu: true }
-    ]
-
-    expect(
-      useMoreOptionsMenu().menuOptionsWithSubmenu.value.map((o) => o.label)
-    ).toEqual(['Shape'])
-  })
-
-  it('includes image menu options for a selected image node', () => {
-    const node = { id: 1, widgets: [] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    selectionState.hasImageNode.value = true
-    imageOptions.value = [{ label: 'Open Image' }]
-
-    expect(labels()).toContain('Open Image')
-  })
-
-  it('merges LiteGraph menu options for a single selected node', () => {
-    const node = { id: 1, widgets: [] }
-    const getNodeMenuOptions = vi.fn(() => [
-      { content: 'Extension Action', callback: vi.fn() }
-    ])
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    canvasState.canvas = { getNodeMenuOptions }
-
-    expect(labels()).toContain('Extension Action')
-    expect(getNodeMenuOptions).toHaveBeenCalledWith(node)
-  })
-
-  it('keeps Vue options when LiteGraph menu construction throws', () => {
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-    const node = { id: 1, widgets: [] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    canvasState.canvas = {
-      getNodeMenuOptions: vi.fn(() => {
-        throw new Error('boom')
-      })
-    }
-
-    expect(labels()).toContain('Copy')
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Error getting LiteGraph menu items:',
-      expect.any(Error)
-    )
-  })
-
-  it('adds hovered widget options to the selected node menu', () => {
-    const node = { id: 1, widgets: [{ name: 'image' }] }
-    selectionState.selectedItems.value = [node]
-    selectionState.selectedNodes.value = [node]
-    extraWidgetOptions.value = [{ content: 'Widget Extra', callback: vi.fn() }]
-
-    showNodeOptions(new MouseEvent('contextmenu'), 'image')
-
-    expect(labels()).toContain('Widget Extra')
-  })
-})

src/composables/graph/useNodeCustomization.test.ts

@@ -1,175 +0,0 @@
-import type * as VueI18n from 'vue-i18n'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
-import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
-
-const { selection, refreshCanvas, palette } = vi.hoisted(() => ({
-  selection: { items: [] as unknown[] },
-  refreshCanvas: vi.fn(),
-  palette: { light_theme: false }
-}))
-
-vi.mock('vue-i18n', async (importOriginal) => ({
-  ...(await importOriginal<typeof VueI18n>()),
-  useI18n: () => ({ t: (key: string) => key })
-}))
-
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({
-    get selectedItems() {
-      return selection.items
-    }
-  })
-}))
-
-vi.mock('@/stores/workspace/colorPaletteStore', () => ({
-  useColorPaletteStore: () => ({
-    get completedActivePalette() {
-      return { light_theme: palette.light_theme }
-    }
-  })
-}))
-
-vi.mock('@/composables/graph/useCanvasRefresh', () => ({
-  useCanvasRefresh: () => ({ refreshCanvas })
-}))
-
-function colorable(bgcolor?: string) {
-  return {
-    setColorOption: vi.fn(),
-    getColorOption: () => (bgcolor ? { bgcolor } : null)
-  }
-}
-
-beforeEach(() => {
-  selection.items = []
-  refreshCanvas.mockReset()
-  palette.light_theme = false
-})
-
-describe('useNodeCustomization', () => {
-  it('exposes color and shape option lists', () => {
-    const { colorOptions, shapeOptions } = useNodeCustomization()
-    expect(colorOptions.length).toBeGreaterThan(1)
-    expect(shapeOptions.length).toBeGreaterThan(0)
-  })
-
-  it('reflects the active palette light-theme flag', () => {
-    palette.light_theme = true
-    expect(useNodeCustomization().isLightTheme.value).toBe(true)
-  })
-
-  it('clears color on all colorable items for the no-color option', () => {
-    const item = colorable()
-    selection.items = [item]
-    useNodeCustomization().applyColor(null)
-
-    expect(item.setColorOption).toHaveBeenCalledWith(null)
-    expect(refreshCanvas).toHaveBeenCalled()
-  })
-
-  it('applies a named color option to colorable items', () => {
-    const item = colorable()
-    selection.items = [item]
-    const { colorOptions, applyColor } = useNodeCustomization()
-    const named = colorOptions.at(-1)!
-
-    applyColor(named)
-
-    expect(item.setColorOption).toHaveBeenCalledTimes(1)
-    expect(item.setColorOption.mock.calls[0][0]).not.toBeNull()
-  })
-
-  it('skips non-colorable items when applying colors', () => {
-    const item = colorable()
-    selection.items = [{}, item]
-
-    useNodeCustomization().applyColor(null)
-
-    expect(item.setColorOption).toHaveBeenCalledWith(null)
-    expect(refreshCanvas).toHaveBeenCalled()
-  })
-
-  it('returns null current color for an empty selection', () => {
-    expect(useNodeCustomization().getCurrentColor()).toBeNull()
-  })
-
-  it('returns null current color when no selected item is colorable', () => {
-    selection.items = [{}]
-    expect(useNodeCustomization().getCurrentColor()).toBeNull()
-  })
-
-  it('reports a recognized current color', () => {
-    const { colorOptions, getCurrentColor } = useNodeCustomization()
-    const named = colorOptions.at(-1)!
-    selection.items = [colorable(named.value.dark)]
-
-    expect(getCurrentColor()?.name).toBe(named.name)
-  })
-
-  it('falls back to the no-color option for an unrecognized current color', () => {
-    selection.items = [colorable('#not-a-known-color')]
-    const result = useNodeCustomization().getCurrentColor()
-    expect(result?.name).toBe('noColor')
-  })
-
-  it('no-ops shape changes when no graph nodes are selected', () => {
-    selection.items = [colorable()]
-    const { applyShape, shapeOptions } = useNodeCustomization()
-    applyShape(shapeOptions[0])
-    expect(refreshCanvas).not.toHaveBeenCalled()
-  })
-
-  it('returns null current shape with no nodes selected', () => {
-    expect(useNodeCustomization().getCurrentShape()).toBeNull()
-  })
-
-  it('applies a shape to selected graph nodes and refreshes', () => {
-    const node = new LGraphNode('Test')
-    selection.items = [node]
-    const { applyShape, shapeOptions } = useNodeCustomization()
-    const target = shapeOptions[0]
-
-    applyShape(target)
-
-    expect(node.shape).toBe(target.value)
-    expect(refreshCanvas).toHaveBeenCalled()
-  })
-
-  it('reports the current shape of a selected node', () => {
-    const node = new LGraphNode('Test')
-    const { shapeOptions, getCurrentShape } = useNodeCustomization()
-    node.shape = shapeOptions[0].value
-    selection.items = [node]
-
-    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
-  })
-
-  it('uses the default shape when a selected node has no shape', () => {
-    const node = new LGraphNode('Test')
-    Object.defineProperty(node, 'shape', {
-      value: undefined,
-      writable: true,
-      configurable: true
-    })
-    const { shapeOptions, getCurrentShape } = useNodeCustomization()
-    selection.items = [node]
-
-    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
-  })
-
-  it('falls back to the default shape for an unknown node shape', () => {
-    const node = new LGraphNode('Test')
-    Object.defineProperty(node, 'shape', {
-      value: 999,
-      writable: true,
-      configurable: true
-    })
-    const { shapeOptions, getCurrentShape } = useNodeCustomization()
-    selection.items = [node]
-
-    expect(getCurrentShape()?.value).toBe(shapeOptions[0].value)
-  })
-})

src/composables/graph/useNodeMenuOptions.test.ts

@@ -10,43 +10,30 @@ import { LGraphEventMode, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { toNodeId } from '@/types/nodeId'
 
-const { actions, customization } = vi.hoisted(() => ({
-  actions: {
-    adjustNodeSize: vi.fn(),
-    toggleNodeCollapse: vi.fn(),
-    toggleNodePin: vi.fn(),
-    toggleNodeBypass: vi.fn(),
-    runBranch: vi.fn()
-  },
-  customization: {
-    shapeOptions: [] as Array<{ localizedName: string; value: string }>,
-    colorOptions: [] as Array<{
-      name: string
-      localizedName: string
-      value: { dark: string; light: string }
-    }>,
-    applyShape: vi.fn(),
-    applyColor: vi.fn(),
-    isLightTheme: { value: false }
-  }
-}))
-
+// canvasStore transitively imports the app singleton; stub it so the real
+// ComfyApp module never loads during these unit tests.
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { selected_nodes: null } }
 }))
 
 vi.mock('@/composables/graph/useNodeCustomization', () => ({
   useNodeCustomization: () => ({
-    shapeOptions: customization.shapeOptions,
-    applyShape: customization.applyShape,
-    applyColor: customization.applyColor,
-    colorOptions: customization.colorOptions,
-    isLightTheme: customization.isLightTheme
+    shapeOptions: [],
+    applyShape: vi.fn(),
+    applyColor: vi.fn(),
+    colorOptions: [],
+    isLightTheme: { value: false }
   })
 }))
 
 vi.mock('@/composables/graph/useSelectedNodeActions', () => ({
-  useSelectedNodeActions: () => actions
+  useSelectedNodeActions: () => ({
+    adjustNodeSize: vi.fn(),
+    toggleNodeCollapse: vi.fn(),
+    toggleNodePin: vi.fn(),
+    toggleNodeBypass: vi.fn(),
+    runBranch: vi.fn()
+  })
 }))
 
 const i18n = createI18n({
@@ -82,29 +69,9 @@ const getBypassLabel = (selected: LGraphNode[]): string => {
   return label
 }
 
-function readNodeMenuOptions<T>(
-  read: (options: ReturnType<typeof useNodeMenuOptions>) => T
-): T {
-  const unread = Symbol('unread')
-  const result: { value: T | typeof unread } = { value: unread }
-  const Wrapper = defineComponent({
-    setup() {
-      result.value = read(useNodeMenuOptions())
-      return () => null
-    }
-  })
-  render(Wrapper, { global: { plugins: [i18n] } })
-  if (result.value === unread) throw new Error('Composable was not read')
-  return result.value
-}
-
-describe('useNodeMenuOptions', () => {
+describe('useNodeMenuOptions.getBypassOption', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
     setActivePinia(createPinia())
-    customization.shapeOptions = []
-    customization.colorOptions = []
-    customization.isLightTheme.value = false
   })
 
   it('labels as "Bypass" when no node is bypassed', () => {
@@ -130,109 +97,4 @@ describe('useNodeMenuOptions', () => {
       ])
     ).toBe('contextMenu.Bypass')
   })
-
-  it('labels visual node options from the collapsed state and bumps after action', () => {
-    const expandBump = vi.fn()
-    const expand = readNodeMenuOptions(
-      ({ getNodeVisualOptions }) =>
-        getNodeVisualOptions({ collapsed: true, pinned: false }, expandBump)[0]
-    )
-    expect(expand).toMatchObject({
-      label: 'contextMenu.Expand Node',
-      icon: 'icon-[lucide--maximize-2]'
-    })
-    expand.action?.()
-    expect(actions.toggleNodeCollapse).toHaveBeenCalledTimes(1)
-    expect(expandBump).toHaveBeenCalledTimes(1)
-
-    const minimize = readNodeMenuOptions(
-      ({ getNodeVisualOptions }) =>
-        getNodeVisualOptions({ collapsed: false, pinned: false }, vi.fn())[0]
-    )
-    expect(minimize).toMatchObject({
-      label: 'contextMenu.Minimize Node',
-      icon: 'icon-[lucide--minimize-2]'
-    })
-  })
-
-  it('labels pin options from the pinned state and bumps after action', () => {
-    const bump = vi.fn()
-    const unpin = readNodeMenuOptions(({ getPinOption }) =>
-      getPinOption({ collapsed: false, pinned: true }, bump)
-    )
-    expect(unpin).toMatchObject({
-      label: 'contextMenu.Unpin',
-      icon: 'icon-[lucide--pin-off]'
-    })
-    unpin.action?.()
-    expect(actions.toggleNodePin).toHaveBeenCalledTimes(1)
-    expect(bump).toHaveBeenCalledTimes(1)
-
-    const pin = readNodeMenuOptions(({ getPinOption }) =>
-      getPinOption({ collapsed: false, pinned: false }, vi.fn())
-    )
-    expect(pin).toMatchObject({
-      label: 'contextMenu.Pin',
-      icon: 'icon-[lucide--pin]'
-    })
-  })
-
-  it('builds shape and color submenus and applies selected values', () => {
-    customization.shapeOptions = [{ localizedName: 'Box', value: 'box' }]
-    customization.colorOptions = [
-      {
-        name: 'noColor',
-        localizedName: 'No Color',
-        value: { dark: '#000', light: '#fff' }
-      },
-      {
-        name: 'red',
-        localizedName: 'Red',
-        value: { dark: '#111', light: '#eee' }
-      }
-    ]
-
-    const { visualOptions, colorSubmenu } = readNodeMenuOptions((options) => ({
-      visualOptions: options.getNodeVisualOptions(
-        { collapsed: false, pinned: false },
-        vi.fn()
-      ),
-      colorSubmenu: options.colorSubmenu.value
-    }))
-
-    expect(visualOptions[1].submenu).toEqual([
-      expect.objectContaining({ label: 'Box' })
-    ])
-    visualOptions[1].submenu?.[0].action()
-    expect(customization.applyShape).toHaveBeenCalledWith(
-      customization.shapeOptions[0]
-    )
-
-    expect(colorSubmenu).toEqual([
-      expect.objectContaining({ label: 'No Color', color: '#000' }),
-      expect.objectContaining({ label: 'Red', color: '#111' })
-    ])
-    colorSubmenu[0].action()
-    colorSubmenu[1].action()
-    expect(customization.applyColor).toHaveBeenNthCalledWith(1, null)
-    expect(customization.applyColor).toHaveBeenNthCalledWith(
-      2,
-      customization.colorOptions[1]
-    )
-  })
-
-  it('uses light-theme colors for the color submenu', () => {
-    customization.isLightTheme.value = true
-    customization.colorOptions = [
-      {
-        name: 'red',
-        localizedName: 'Red',
-        value: { dark: '#111', light: '#eee' }
-      }
-    ]
-
-    expect(
-      readNodeMenuOptions((options) => options.colorSubmenu.value[0].color)
-    ).toBe('#eee')
-  })
 })

src/composables/graph/useSelectionOperations.test.ts

@@ -1,221 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useSelectionOperations } from '@/composables/graph/useSelectionOperations'
-
-const {
-  canvas,
-  toastAdd,
-  captureCanvasState,
-  updateSelectedItems,
-  prompt,
-  titleEditor,
-  store
-} = vi.hoisted(() => ({
-  canvas: {
-    selectedItems: new Set<unknown>(),
-    copyToClipboard: vi.fn(),
-    pasteFromClipboard: vi.fn(),
-    deleteSelected: vi.fn(),
-    setDirty: vi.fn()
-  },
-  toastAdd: vi.fn(),
-  captureCanvasState: vi.fn(),
-  updateSelectedItems: vi.fn(),
-  prompt: vi.fn(),
-  titleEditor: { titleEditorTarget: null as unknown },
-  store: { selectedItems: [] as unknown[] }
-}))
-
-vi.mock('@/scripts/app', () => ({ app: { canvas } }))
-vi.mock('@/i18n', () => ({ t: (key: string) => key }))
-vi.mock('@/platform/updates/common/toastStore', () => ({
-  useToastStore: () => ({ add: toastAdd })
-}))
-vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
-  useWorkflowStore: () => ({
-    activeWorkflow: { changeTracker: { captureCanvasState } }
-  })
-}))
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: () => ({
-    updateSelectedItems,
-    get selectedItems() {
-      return store.selectedItems
-    }
-  }),
-  useTitleEditorStore: () => titleEditor
-}))
-vi.mock('@/services/dialogService', () => ({
-  useDialogService: () => ({ prompt })
-}))
-
-beforeEach(() => {
-  canvas.selectedItems = new Set()
-  canvas.copyToClipboard.mockReset()
-  canvas.pasteFromClipboard.mockReset()
-  canvas.deleteSelected.mockReset()
-  canvas.setDirty.mockReset()
-  toastAdd.mockReset()
-  captureCanvasState.mockReset()
-  updateSelectedItems.mockReset()
-  prompt.mockReset()
-  titleEditor.titleEditorTarget = null
-  store.selectedItems = []
-})
-
-describe('useSelectionOperations', () => {
-  it('warns and does nothing when copying an empty selection', () => {
-    useSelectionOperations().copySelection()
-    expect(canvas.copyToClipboard).not.toHaveBeenCalled()
-    expect(toastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({ severity: 'warn' })
-    )
-  })
-
-  it('copies a non-empty selection and reports success', () => {
-    canvas.selectedItems = new Set(['a'])
-    useSelectionOperations().copySelection()
-    expect(canvas.copyToClipboard).toHaveBeenCalled()
-    expect(toastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({ severity: 'success' })
-    )
-  })
-
-  it('pastes from clipboard and captures canvas state', () => {
-    useSelectionOperations().pasteSelection()
-    expect(canvas.pasteFromClipboard).toHaveBeenCalledWith({
-      connectInputs: false
-    })
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('duplicates by copy, clear, paste', () => {
-    canvas.selectedItems = new Set(['a'])
-    useSelectionOperations().duplicateSelection()
-    expect(canvas.copyToClipboard).toHaveBeenCalled()
-    expect(canvas.selectedItems.size).toBe(0)
-    expect(updateSelectedItems).toHaveBeenCalled()
-    expect(canvas.pasteFromClipboard).toHaveBeenCalled()
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('warns when duplicating nothing', () => {
-    useSelectionOperations().duplicateSelection()
-    expect(canvas.copyToClipboard).not.toHaveBeenCalled()
-    expect(toastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({ severity: 'warn' })
-    )
-  })
-
-  it('deletes a non-empty selection and marks the canvas dirty', () => {
-    canvas.selectedItems = new Set(['a'])
-    useSelectionOperations().deleteSelection()
-    expect(canvas.deleteSelected).toHaveBeenCalled()
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('warns when deleting nothing', () => {
-    useSelectionOperations().deleteSelection()
-    expect(canvas.deleteSelected).not.toHaveBeenCalled()
-    expect(toastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({ severity: 'warn' })
-    )
-  })
-
-  it('routes a single node rename to the title editor', async () => {
-    const node = new LGraphNode('Test')
-    store.selectedItems = [node]
-
-    await useSelectionOperations().renameSelection()
-
-    expect(titleEditor.titleEditorTarget).toBe(node)
-    expect(prompt).not.toHaveBeenCalled()
-  })
-
-  it('renames a single non-node item via the prompt dialog', async () => {
-    const group = { title: 'Old' }
-    store.selectedItems = [group]
-    prompt.mockResolvedValue('New')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(group.title).toBe('New')
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('leaves a single titled item unchanged when the prompt returns the same title', async () => {
-    const group = { title: 'Old' }
-    store.selectedItems = [group]
-    prompt.mockResolvedValue('Old')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(group.title).toBe('Old')
-    expect(canvas.setDirty).not.toHaveBeenCalled()
-    expect(captureCanvasState).not.toHaveBeenCalled()
-  })
-
-  it('does not assign a title to a selected item without a title property', async () => {
-    const item = {}
-    store.selectedItems = [item]
-    prompt.mockResolvedValue('New')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(item).toEqual({})
-    expect(canvas.setDirty).not.toHaveBeenCalled()
-    expect(captureCanvasState).not.toHaveBeenCalled()
-  })
-
-  it('batch-renames multiple items with an indexed base name', async () => {
-    const a = { title: 'a' }
-    const b = { title: 'b' }
-    store.selectedItems = [a, b]
-    prompt.mockResolvedValue('Item')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(a.title).toBe('Item 1')
-    expect(b.title).toBe('Item 2')
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('skips untitled items during batch rename', async () => {
-    const a = { title: 'a' }
-    const b = {}
-    store.selectedItems = [a, b]
-    prompt.mockResolvedValue('Item')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(a.title).toBe('Item 1')
-    expect(b).toEqual({})
-    expect(canvas.setDirty).toHaveBeenCalledWith(true, true)
-    expect(captureCanvasState).toHaveBeenCalled()
-  })
-
-  it('leaves a multiple selection unchanged when batch rename is cancelled', async () => {
-    const a = { title: 'a' }
-    const b = { title: 'b' }
-    store.selectedItems = [a, b]
-    prompt.mockResolvedValue('')
-
-    await useSelectionOperations().renameSelection()
-
-    expect(a.title).toBe('a')
-    expect(b.title).toBe('b')
-    expect(canvas.setDirty).not.toHaveBeenCalled()
-    expect(captureCanvasState).not.toHaveBeenCalled()
-  })
-
-  it('warns when renaming an empty selection', async () => {
-    await useSelectionOperations().renameSelection()
-    expect(toastAdd).toHaveBeenCalledWith(
-      expect.objectContaining({ severity: 'warn' })
-    )
-  })
-})

src/composables/graph/useSelectionState.test.ts

@@ -8,12 +8,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import {
-  isImageNode,
-  isLGraphGroup,
-  isLGraphNode,
-  isLoad3dNode
-} from '@/utils/litegraphUtil'
+import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 import {
   createMockLGraphNode,
@@ -22,9 +17,7 @@ import {
 
 vi.mock('@/utils/litegraphUtil', () => ({
   isLGraphNode: vi.fn(),
-  isImageNode: vi.fn(),
-  isLGraphGroup: vi.fn(),
-  isLoad3dNode: vi.fn()
+  isImageNode: vi.fn()
 }))
 
 vi.mock('@/utils/nodeFilterUtil', () => ({
@@ -103,14 +96,6 @@ describe('useSelectionState', () => {
       const typedNode = node as { type?: string }
       return typedNode?.type === 'ImageNode'
     })
-    vi.mocked(isLGraphGroup).mockImplementation((item: unknown) => {
-      const typedItem = item as { isGroup?: boolean }
-      return typedItem?.isGroup === true
-    })
-    vi.mocked(isLoad3dNode).mockImplementation((node: unknown) => {
-      const typedNode = node as { type?: string }
-      return typedNode?.type === 'Load3D'
-    })
     vi.mocked(filterOutputNodes).mockImplementation((nodes) =>
       nodes.filter((n) => n.type === 'OutputNode')
     )
@@ -150,21 +135,6 @@ describe('useSelectionState', () => {
       const { hasMultipleSelection } = useSelectionState()
       expect(hasMultipleSelection.value).toBe(false)
     })
-
-    test('hasGroupedNodesSelection should detect a group containing nodes', () => {
-      const canvasStore = useCanvasStore()
-      const graphNode = createMockLGraphNode({ id: 2 })
-      const group = createMockPositionable({ id: 2000 })
-      Object.assign(group, {
-        isGroup: true,
-        isNode: false,
-        children: new Set([graphNode])
-      })
-      canvasStore.$state.selectedItems = [group]
-
-      const { hasGroupedNodesSelection } = useSelectionState()
-      expect(hasGroupedNodesSelection.value).toBe(true)
-    })
   })
 
   describe('Node Type Filtering', () => {
@@ -245,13 +215,6 @@ describe('useSelectionState', () => {
       const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
       expect(newIsPinned).toBe(false)
     })
-
-    test('should compute default flags for an empty node selection', () => {
-      expect(useSelectionState().computeSelectionFlags()).toEqual({
-        collapsed: false,
-        pinned: false
-      })
-    })
   })
 
   describe('Node Info', () => {

src/composables/node/useNodeBadge.test.ts

@@ -1,315 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createApp, defineComponent, h, nextTick } from 'vue'
-import type { App as VueApp } from 'vue'
-
-import { useNodeBadge } from '@/composables/node/useNodeBadge'
-import { BadgePosition, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { LGraphBadge } from '@/lib/litegraph/src/litegraph'
-import type { ComfyExtension } from '@/types/comfy'
-import { toNodeId } from '@/types/nodeId'
-import { NodeBadgeMode } from '@/types/nodeSource'
-
-const {
-  settings,
-  appState,
-  extensionState,
-  nodeDefState,
-  pricingState,
-  setDirtyMock,
-  addEventListenerMock,
-  registerExtensionMock,
-  getCreditsBadgeMock,
-  updateSubgraphCreditsMock,
-  getNodePricingConfigMock,
-  getNodeDisplayPriceMock,
-  getRelevantWidgetNamesMock,
-  triggerPriceRecalculationMock,
-  useComputedWithWidgetWatchMock
-} = vi.hoisted(() => ({
-  settings: {} as Record<string, unknown>,
-  appState: {
-    graph: {
-      nodes: [] as unknown[]
-    }
-  },
-  extensionState: {
-    installed: false,
-    registered: undefined as ComfyExtension | undefined
-  },
-  nodeDefState: {
-    value: null as Record<string, unknown> | null
-  },
-  pricingState: {
-    revision: { value: 0 },
-    config: undefined as
-      | {
-          depends_on?: {
-            widgets?: string[]
-            inputs?: string[]
-            input_groups?: string[]
-          }
-        }
-      | undefined,
-    label: '1 credit'
-  },
-  setDirtyMock: vi.fn(),
-  addEventListenerMock: vi.fn(),
-  registerExtensionMock: vi.fn((extension: ComfyExtension) => {
-    extensionState.registered = extension
-  }),
-  getCreditsBadgeMock: vi.fn((text: string) => ({ text })),
-  updateSubgraphCreditsMock: vi.fn(),
-  getNodePricingConfigMock: vi.fn(() => pricingState.config),
-  getNodeDisplayPriceMock: vi.fn(() => pricingState.label),
-  getRelevantWidgetNamesMock: vi.fn(() => ['seed']),
-  triggerPriceRecalculationMock: vi.fn(),
-  useComputedWithWidgetWatchMock: vi.fn(() => vi.fn())
-}))
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: {
-      setDirty: setDirtyMock,
-      canvas: {
-        addEventListener: addEventListenerMock
-      },
-      graph: appState.graph
-    }
-  }
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: (key: string) => settings[key]
-  })
-}))
-
-vi.mock('@/stores/extensionStore', () => ({
-  useExtensionStore: () => ({
-    isExtensionInstalled: () => extensionState.installed,
-    registerExtension: registerExtensionMock
-  })
-}))
-
-vi.mock('@/stores/nodeDefStore', () => ({
-  useNodeDefStore: () => ({
-    fromLGraphNode: () => nodeDefState.value
-  })
-}))
-
-vi.mock('@/stores/workspace/colorPaletteStore', () => ({
-  useColorPaletteStore: () => ({
-    completedActivePalette: {
-      colors: {
-        litegraph_base: {
-          BADGE_FG_COLOR: '#fff',
-          BADGE_BG_COLOR: '#000'
-        }
-      }
-    }
-  })
-}))
-
-vi.mock('@/composables/node/useNodePricing', () => ({
-  useNodePricing: () => ({
-    pricingRevision: pricingState.revision,
-    getNodePricingConfig: getNodePricingConfigMock,
-    getNodeDisplayPrice: getNodeDisplayPriceMock,
-    getRelevantWidgetNames: getRelevantWidgetNamesMock,
-    triggerPriceRecalculation: triggerPriceRecalculationMock
-  })
-}))
-
-vi.mock('@/composables/node/usePriceBadge', () => ({
-  usePriceBadge: () => ({
-    getCreditsBadge: getCreditsBadgeMock,
-    updateSubgraphCredits: updateSubgraphCreditsMock
-  })
-}))
-
-vi.mock('@/composables/node/useWatchWidget', () => ({
-  useComputedWithWidgetWatch: useComputedWithWidgetWatchMock
-}))
-
-class ApiNode extends LGraphNode {
-  static override nodeData = { name: 'ApiNode', api_node: true }
-}
-
-function mountBadge(): VueApp {
-  const app = createApp(
-    defineComponent({
-      setup() {
-        useNodeBadge()
-        return () => h('div')
-      }
-    })
-  )
-  app.mount(document.createElement('div'))
-  return app
-}
-
-function registeredExtension(): ComfyExtension {
-  if (!extensionState.registered)
-    throw new Error('Missing registered extension')
-  return extensionState.registered
-}
-
-function comfyApp(): Parameters<NonNullable<ComfyExtension['init']>>[0] {
-  return {} as Parameters<NonNullable<ComfyExtension['init']>>[0]
-}
-
-function callNodeCreated(node: LGraphNode) {
-  registeredExtension().nodeCreated?.(node, comfyApp())
-}
-
-function inputSlot(name: string) {
-  return new LGraphNode('slot').addInput(name, '*')
-}
-
-function defaultSettings() {
-  settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.None
-  settings['Comfy.NodeBadge.NodeIdBadgeMode'] = NodeBadgeMode.None
-  settings['Comfy.NodeBadge.NodeLifeCycleBadgeMode'] = NodeBadgeMode.None
-  settings['Comfy.NodeBadge.ShowApiPricing'] = false
-}
-
-describe('useNodeBadge', () => {
-  let mountedApp: VueApp | undefined
-
-  beforeEach(() => {
-    defaultSettings()
-    extensionState.installed = false
-    extensionState.registered = undefined
-    appState.graph.nodes = []
-    nodeDefState.value = null
-    pricingState.revision.value = 0
-    pricingState.config = undefined
-    pricingState.label = '1 credit'
-    setDirtyMock.mockClear()
-    addEventListenerMock.mockClear()
-    registerExtensionMock.mockClear()
-    getCreditsBadgeMock.mockClear()
-    updateSubgraphCreditsMock.mockClear()
-    getNodePricingConfigMock.mockClear()
-    getNodeDisplayPriceMock.mockClear()
-    getRelevantWidgetNamesMock.mockClear()
-    triggerPriceRecalculationMock.mockClear()
-    useComputedWithWidgetWatchMock.mockClear()
-  })
-
-  afterEach(() => {
-    mountedApp?.unmount()
-    mountedApp = undefined
-  })
-
-  it('does not register the badge extension twice', async () => {
-    extensionState.installed = true
-    mountedApp = mountBadge()
-    await nextTick()
-
-    expect(registerExtensionMock).not.toHaveBeenCalled()
-  })
-
-  it('adds the configured node identity badge', async () => {
-    settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.ShowAll
-    settings['Comfy.NodeBadge.NodeIdBadgeMode'] = NodeBadgeMode.ShowAll
-    settings['Comfy.NodeBadge.NodeLifeCycleBadgeMode'] =
-      NodeBadgeMode.HideBuiltIn
-    nodeDefState.value = {
-      isCoreNode: false,
-      nodeLifeCycleBadgeText: 'Beta',
-      nodeSource: { badgeText: 'Pack' }
-    }
-    const node = new LGraphNode('Test')
-    node.id = toNodeId('7')
-
-    mountedApp = mountBadge()
-    await nextTick()
-    callNodeCreated(node)
-    const badge = node.badges[0] as () => LGraphBadge
-
-    expect(node.badgePosition).toBe(BadgePosition.TopRight)
-    expect(badge().text).toBe('#7 Beta Pack')
-  })
-
-  it('hides built-in badge text when the mode excludes core nodes', async () => {
-    settings['Comfy.NodeBadge.NodeSourceBadgeMode'] = NodeBadgeMode.HideBuiltIn
-    settings['Comfy.NodeBadge.NodeIdBadgeMode'] = NodeBadgeMode.ShowAll
-    settings['Comfy.NodeBadge.NodeLifeCycleBadgeMode'] =
-      NodeBadgeMode.HideBuiltIn
-    nodeDefState.value = {
-      isCoreNode: true,
-      nodeLifeCycleBadgeText: 'Core',
-      nodeSource: { badgeText: 'Built-in' }
-    }
-    const node = new LGraphNode('Core')
-    node.id = toNodeId('11')
-
-    mountedApp = mountBadge()
-    await nextTick()
-    callNodeCreated(node)
-    const badge = node.badges[0] as () => LGraphBadge
-
-    expect(badge().text).toBe('#11')
-  })
-
-  it('adds dynamic API pricing badges and refreshes relevant input changes', async () => {
-    settings['Comfy.NodeBadge.ShowApiPricing'] = true
-    pricingState.config = {
-      depends_on: {
-        widgets: ['seed'],
-        inputs: ['image'],
-        input_groups: ['lora']
-      }
-    }
-    const originalOnConnectionsChange = vi.fn()
-    const node = new ApiNode('API')
-    node.onConnectionsChange = originalOnConnectionsChange
-
-    mountedApp = mountBadge()
-    await nextTick()
-    callNodeCreated(node)
-
-    expect(useComputedWithWidgetWatchMock).toHaveBeenCalledWith(node, {
-      widgetNames: ['seed'],
-      triggerCanvasRedraw: true
-    })
-    expect(getCreditsBadgeMock).toHaveBeenCalledWith('1 credit')
-
-    const priceBadge = node.badges[1] as () => { text: string }
-    expect(priceBadge().text).toBe('1 credit')
-    pricingState.label = '2 credits'
-    expect(priceBadge().text).toBe('2 credits')
-
-    node.onConnectionsChange?.(1, 0, true, undefined, inputSlot('image'))
-    node.onConnectionsChange?.(1, 0, true, undefined, inputSlot('lora.0'))
-    node.onConnectionsChange?.(1, 0, true, undefined, inputSlot('clip'))
-    node.onConnectionsChange?.(1, 0, true, undefined, inputSlot(''))
-
-    expect(originalOnConnectionsChange).toHaveBeenCalledTimes(4)
-    expect(triggerPriceRecalculationMock).toHaveBeenCalledTimes(2)
-    expect(triggerPriceRecalculationMock).toHaveBeenCalledWith(node)
-  })
-
-  it('updates subgraph credit badges from registered extension hooks', async () => {
-    const nodes = [new LGraphNode('one'), new LGraphNode('two')]
-    appState.graph.nodes = nodes
-
-    mountedApp = mountBadge()
-    await nextTick()
-    await registeredExtension().init?.(comfyApp())
-    await registeredExtension().afterConfigureGraph?.([], comfyApp())
-
-    const setGraphHandler = addEventListenerMock.mock.calls.find(
-      ([event]) => event === 'litegraph:set-graph'
-    )?.[1]
-    const convertedHandler = addEventListenerMock.mock.calls.find(
-      ([event]) => event === 'subgraph-converted'
-    )?.[1]
-    setGraphHandler?.()
-    convertedHandler?.({ detail: { subgraphNode: nodes[0] } })
-
-    expect(updateSubgraphCreditsMock).toHaveBeenCalledWith(nodes[0])
-    expect(updateSubgraphCreditsMock).toHaveBeenCalledWith(nodes[1])
-  })
-})

src/composables/node/useNodePricing.test.ts

@@ -1,6 +1,4 @@
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
 import { CREDITS_PER_USD, formatCredits } from '@/base/credits/comfyCredits'
 import {
@@ -14,7 +12,6 @@ import {
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { ComfyNodeDef, PriceBadge } from '@/schemas/nodeDefSchema'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { toNodeId } from '@/types/nodeId'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 
@@ -126,35 +123,6 @@ function createMockNode(
   })
 }
 
-async function resolveDisplayPrice(
-  node: LGraphNode,
-  widgetOverrides?: ReadonlyMap<string, unknown>
-): Promise<string> {
-  const { getNodeDisplayPrice } = useNodePricing()
-  getNodeDisplayPrice(node, widgetOverrides)
-  await new Promise((resolve) => setTimeout(resolve, 50))
-  return getNodeDisplayPrice(node, widgetOverrides)
-}
-
-function createStoredNodeDef(
-  name: string,
-  price_badge?: PriceBadge
-): ComfyNodeDef {
-  return {
-    name,
-    display_name: name,
-    description: '',
-    category: 'test',
-    input: { required: {}, optional: {} },
-    output: [],
-    output_name: [],
-    output_is_list: [],
-    output_node: false,
-    python_module: 'test',
-    price_badge
-  } as ComfyNodeDef
-}
-
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
@@ -221,32 +189,6 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.5))
     })
 
-    it('should parse numeric strings and reject blank or invalid numbers', async () => {
-      const expression =
-        '{"type":"usd","usd": (widgets.count != null) ? widgets.count * 0.01 : 0.20}'
-      const badge = priceBadge(expression, [{ name: 'count', type: 'INT' }])
-
-      const parsedNode = createMockNodeWithPriceBadge(
-        'TestNumericStringNode',
-        badge,
-        [{ name: 'count', value: ' 5 ' }]
-      )
-      const blankNode = createMockNodeWithPriceBadge(
-        'TestBlankNumericStringNode',
-        badge,
-        [{ name: 'count', value: '   ' }]
-      )
-      const invalidNode = createMockNodeWithPriceBadge(
-        'TestInvalidNumericStringNode',
-        badge,
-        [{ name: 'count', value: 'five' }]
-      )
-
-      expect(await resolveDisplayPrice(parsedNode)).toBe(creditsLabel(0.05))
-      expect(await resolveDisplayPrice(blankNode)).toBe(creditsLabel(0.2))
-      expect(await resolveDisplayPrice(invalidNode)).toBe(creditsLabel(0.2))
-    })
-
     it('should handle COMBO widget with numeric value', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -280,19 +222,6 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.1))
     })
 
-    it('should preserve boolean combo values', async () => {
-      const node = createMockNodeWithPriceBadge(
-        'TestComboBooleanNode',
-        priceBadge(
-          '(widgets.enabled = false) ? {"type":"usd","usd":0.04} : {"type":"usd","usd":0.08}',
-          [{ name: 'enabled', type: 'COMBO' }]
-        ),
-        [{ name: 'enabled', value: false }]
-      )
-
-      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.04))
-    })
-
     it('should handle BOOLEAN widget', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -309,51 +238,6 @@ describe('useNodePricing', () => {
       expect(price).toBe(creditsLabel(0.1))
     })
 
-    it('should parse BOOLEAN widget string values', async () => {
-      const badge = priceBadge(
-        '{"type":"usd","usd": widgets.premium ? 0.10 : 0.05}',
-        [{ name: 'premium', type: 'BOOLEAN' }]
-      )
-      const enabledNode = createMockNodeWithPriceBadge(
-        'TestBooleanStringTrueNode',
-        badge,
-        [{ name: 'premium', value: ' TRUE ' }]
-      )
-      const disabledNode = createMockNodeWithPriceBadge(
-        'TestBooleanStringFalseNode',
-        badge,
-        [{ name: 'premium', value: 'false' }]
-      )
-
-      expect(await resolveDisplayPrice(enabledNode)).toBe(creditsLabel(0.1))
-      expect(await resolveDisplayPrice(disabledNode)).toBe(creditsLabel(0.05))
-    })
-
-    it('should reject invalid BOOLEAN strings', async () => {
-      const node = createMockNodeWithPriceBadge(
-        'TestInvalidBooleanStringNode',
-        priceBadge(
-          '{"type":"usd","usd": widgets.premium = null ? 0.05 : 0.10}',
-          [{ name: 'premium', type: 'BOOLEAN' }]
-        ),
-        [{ name: 'premium', value: 'sometimes' }]
-      )
-
-      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
-    })
-
-    it('should reject object values for numeric widgets', async () => {
-      const node = createMockNodeWithPriceBadge(
-        'TestObjectNumericNode',
-        priceBadge('{"type":"usd","usd": widgets.count = null ? 0.05 : 0.10}', [
-          { name: 'count', type: 'INT' }
-        ]),
-        [{ name: 'count', value: { count: 5 } }]
-      )
-
-      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
-    })
-
     it('should handle STRING widget (lowercased)', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -584,42 +468,6 @@ describe('useNodePricing', () => {
     })
   })
 
-  describe('dependency context', () => {
-    it('should prefer widget overrides over node widget values', async () => {
-      const node = createMockNodeWithPriceBadge(
-        'TestWidgetOverrideNode',
-        priceBadge('{"type":"usd","usd": widgets.count * 0.01}', [
-          { name: 'count', type: 'INT' }
-        ]),
-        [{ name: 'count', value: 2 }]
-      )
-
-      const price = await resolveDisplayPrice(node, new Map([['count', '7']]))
-
-      expect(price).toBe(creditsLabel(0.07))
-    })
-
-    it('should treat missing input group arrays as zero connected inputs', async () => {
-      const node = Object.assign(createMockLGraphNode(), {
-        widgets: [],
-        constructor: {
-          nodeData: {
-            name: 'TestMissingInputGroupArrayNode',
-            api_node: true,
-            price_badge: priceBadge(
-              '{"type":"usd","usd": (inputGroups.images = 0) ? 0.05 : 0.10}',
-              [],
-              [],
-              ['images']
-            )
-          }
-        }
-      })
-
-      expect(await resolveDisplayPrice(node)).toBe(creditsLabel(0.05))
-    })
-  })
-
   describe('edge cases', () => {
     it('should return empty string for non-API nodes', () => {
       const { getNodeDisplayPrice } = useNodePricing()
@@ -747,86 +595,6 @@ describe('useNodePricing', () => {
     })
   })
 
-  describe('node type pricing dependencies', () => {
-    beforeEach(() => {
-      setActivePinia(createTestingPinia({ stubActions: false }))
-    })
-
-    it('returns empty dependency metadata for node types without pricing', () => {
-      const store = useNodeDefStore()
-      store.addNodeDef(createStoredNodeDef('UnpricedNode'))
-      const {
-        getInputGroupPrefixes,
-        getInputNames,
-        getRelevantWidgetNames,
-        hasDynamicPricing
-      } = useNodePricing()
-
-      expect(getRelevantWidgetNames('UnpricedNode')).toEqual([])
-      expect(hasDynamicPricing('UnpricedNode')).toBe(false)
-      expect(getInputGroupPrefixes('UnpricedNode')).toEqual([])
-      expect(getInputNames('UnpricedNode')).toEqual([])
-    })
-
-    it('dedupes dynamic pricing dependencies while preserving order', () => {
-      const store = useNodeDefStore()
-      store.addNodeDef(
-        createStoredNodeDef(
-          'DynamicPricingNode',
-          priceBadge(
-            '{"type":"usd","usd":0.05}',
-            [
-              { name: 'seed', type: 'INT' },
-              { name: 'quality', type: 'COMBO' }
-            ],
-            ['image', 'seed'],
-            ['clips', 'image']
-          )
-        )
-      )
-      const {
-        getInputGroupPrefixes,
-        getInputNames,
-        getRelevantWidgetNames,
-        hasDynamicPricing
-      } = useNodePricing()
-
-      expect(getRelevantWidgetNames('DynamicPricingNode')).toEqual([
-        'seed',
-        'quality',
-        'image',
-        'clips'
-      ])
-      expect(hasDynamicPricing('DynamicPricingNode')).toBe(true)
-      expect(getInputGroupPrefixes('DynamicPricingNode')).toEqual([
-        'clips',
-        'image'
-      ])
-      expect(getInputNames('DynamicPricingNode')).toEqual(['image', 'seed'])
-    })
-
-    it('handles fixed pricing metadata without dependencies', () => {
-      const store = useNodeDefStore()
-      store.addNodeDef(
-        createStoredNodeDef(
-          'FixedPricingNode',
-          priceBadge('{"type":"usd","usd":0.05}')
-        )
-      )
-      const {
-        getInputGroupPrefixes,
-        getInputNames,
-        getRelevantWidgetNames,
-        hasDynamicPricing
-      } = useNodePricing()
-
-      expect(getRelevantWidgetNames('FixedPricingNode')).toEqual([])
-      expect(hasDynamicPricing('FixedPricingNode')).toBe(false)
-      expect(getInputGroupPrefixes('FixedPricingNode')).toEqual([])
-      expect(getInputNames('FixedPricingNode')).toEqual([])
-    })
-  })
-
   describe('reactive revision', () => {
     it('bumps pricingRevision after an async evaluation resolves (Nodes 1.0 mode)', async () => {
       const { getNodeDisplayPrice, pricingRevision } = useNodePricing()
@@ -975,16 +743,6 @@ describe('useNodePricing', () => {
       expect(price).toBe('')
     })
 
-    it('should reuse the cached empty label after runtime failures', async () => {
-      const node = createMockNodeWithPriceBadge(
-        'TestCachedRuntimeErrorNode',
-        priceBadge('$lookup(undefined, "key")')
-      )
-
-      expect(await resolveDisplayPrice(node)).toBe('')
-      expect(await resolveDisplayPrice(node)).toBe('')
-    })
-
     it('should return empty string for invalid PricingResult type', async () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNodeWithPriceBadge(
@@ -1210,21 +968,8 @@ describe('formatPricingResult', () => {
       expect(result).toBe('~10.6')
     })
 
-    it('should parse string usd values with default approximate formatting', () => {
-      const result = formatPricingResult(
-        { type: 'usd', usd: '0.05' },
-        { valueOnly: true, defaults: { approximate: true } }
-      )
-      expect(result).toBe('~10.6')
-    })
-
     it('should return empty for null usd', () => {
-      const result = formatPricingResult({ type: 'usd', usd: null })
-      expect(result).toBe('')
-    })
-
-    it('should return empty for blank string usd', () => {
-      const result = formatPricingResult({ type: 'usd', usd: '   ' })
+      const result = formatPricingResult({ type: 'usd', usd: null as never })
       expect(result).toBe('')
     })
   })
@@ -1254,14 +999,6 @@ describe('formatPricingResult', () => {
       )
       expect(result).toBe('10.6')
     })
-
-    it('should parse string range values with default approximate formatting', () => {
-      const result = formatPricingResult(
-        { type: 'range_usd', min_usd: '0.05', max_usd: '0.1' },
-        { valueOnly: true, defaults: { approximate: true } }
-      )
-      expect(result).toBe('~10.6-21.1')
-    })
   })
 
   describe('type: list_usd', () => {
@@ -1280,22 +1017,6 @@ describe('formatPricingResult', () => {
       )
       expect(result).toBe('10.6/21.1')
     })
-
-    it('should return valueOnly format with approximate prefix', () => {
-      const result = formatPricingResult(
-        { type: 'list_usd', usd: [0.05, 0.1] },
-        { valueOnly: true, defaults: { approximate: true } }
-      )
-      expect(result).toBe('~10.6/21.1')
-    })
-
-    it('should return empty when list value is not an array', () => {
-      const result = formatPricingResult({
-        type: 'list_usd',
-        usd: 'not-a-list'
-      })
-      expect(result).toBe('')
-    })
   })
 
   describe('type: text', () => {
@@ -1303,11 +1024,6 @@ describe('formatPricingResult', () => {
       const result = formatPricingResult({ type: 'text', text: 'Free' })
       expect(result).toBe('Free')
     })
-
-    it('should return empty when text is missing', () => {
-      const result = formatPricingResult({ type: 'text' })
-      expect(result).toBe('')
-    })
   })
 
   describe('legacy format', () => {
@@ -1474,29 +1190,6 @@ describe('evaluateNodeDefPricing', () => {
     expect(result).toBe('21.1') // 10 * 0.01 = 0.1 USD = 21.1 credits
   })
 
-  it('should use default value from optional input spec', async () => {
-    const nodeDef = createMockNodeDef({
-      name: 'OptionalDefaultValueNode',
-      price_badge: {
-        engine: 'jsonata',
-        expr: '{"type":"usd","usd": widgets.count * 0.01}',
-        depends_on: {
-          widgets: [{ name: 'count', type: 'INT' }],
-          inputs: [],
-          input_groups: []
-        }
-      },
-      input: {
-        required: {},
-        optional: {
-          count: ['INT', { default: 4 }]
-        }
-      }
-    })
-    const result = await evaluateNodeDefPricing(nodeDef)
-    expect(result).toBe('8.4')
-  })
-
   it('should use first option for COMBO without default', async () => {
     const nodeDef = createMockNodeDef({
       name: 'ComboNode',
@@ -1572,30 +1265,6 @@ describe('evaluateNodeDefPricing', () => {
     expect(result).toBe('10.6')
   })
 
-  it('should handle combo option arrays with primitive values', async () => {
-    const nodeDef = createMockNodeDef({
-      name: 'PrimitiveOptionsNode',
-      price_badge: {
-        engine: 'jsonata',
-        expr: '{"type":"usd","usd": widgets.mode = "fast" ? 0.05 : 0.10}',
-        depends_on: {
-          widgets: [{ name: 'mode', type: 'COMBO' }],
-          inputs: [],
-          input_groups: []
-        }
-      },
-      input: {
-        required: {
-          mode: ['COMBO', { options: ['fast', 'slow'] }]
-        }
-      }
-    })
-
-    const result = await evaluateNodeDefPricing(nodeDef)
-
-    expect(result).toBe('10.6')
-  })
-
   it('should assume inputs disconnected in preview', async () => {
     const nodeDef = createMockNodeDef({
       name: 'InputConnectedNode',

src/composables/node/usePriceBadge.ts

@@ -3,12 +3,13 @@ import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
 
 import { useNodePricing } from '@/composables/node/useNodePricing'
 import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
+import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 type LinkedWidgetInput = INodeInputSlot & {
-  _subgraphSlot?: { linkIds?: number[] }
+  _subgraphSlot?: SubgraphInput
 }
 
 const componentIconSvg = new Image()

src/composables/useEssentialTileNodeDef.ts

@@ -12,12 +12,11 @@ export function resolveEssentialTileNodeDef(
 ): ComfyNodeDefImpl | undefined {
   const name = tile.nodeName
   if (!name) return undefined
-  const byName = nodeDefStore.allNodeDefsByName[name]
-  if (byName) return byName
-  const target = name.startsWith(BLUEPRINT_TYPE_PREFIX)
-    ? name.slice(BLUEPRINT_TYPE_PREFIX.length)
-    : name
-  return nodeDefStore.nodeDefs.find((d) => d.display_name === target)
+  if (!name.startsWith(BLUEPRINT_TYPE_PREFIX))
+    return nodeDefStore.allNodeDefsByName[name]
+
+  const subgraphName = name.slice(BLUEPRINT_TYPE_PREFIX.length)
+  return nodeDefStore.allNodeDefsByDisplayName[subgraphName]
 }
 
 export function useEssentialTileNodeDef(tile: MaybeRefOrGetter<EssentialTile>) {

src/composables/useTreeExpansion.test.ts

@@ -1,102 +0,0 @@
-import { ref } from 'vue'
-import { describe, expect, it } from 'vitest'
-
-import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import type { TreeNode } from '@/types/treeExplorerTypes'
-
-function node(over: Partial<TreeNode>): TreeNode {
-  return over as TreeNode
-}
-
-// root ─┬─ a ── a1 (leaf)
-//       └─ b (leaf)
-function sampleTree() {
-  const a1 = node({ key: 'a1', leaf: true })
-  const a = node({ key: 'a', leaf: false, children: [a1] })
-  const b = node({ key: 'b', leaf: true })
-  const root = node({ key: 'root', leaf: false, children: [a, b] })
-  return { root, a, a1, b }
-}
-
-describe('useTreeExpansion', () => {
-  it('toggleNode adds then removes a node key', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { toggleNode } = useTreeExpansion(expandedKeys)
-    const n = node({ key: 'x' })
-
-    toggleNode(n)
-    expect(expandedKeys.value).toEqual({ x: true })
-
-    toggleNode(n)
-    expect(expandedKeys.value).toEqual({})
-  })
-
-  it('toggleNode ignores nodes without a string key', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { toggleNode } = useTreeExpansion(expandedKeys)
-
-    toggleNode(node({ key: undefined }))
-    toggleNode(node({ key: 42 as unknown as string }))
-
-    expect(expandedKeys.value).toEqual({})
-  })
-
-  it('expandNode expands the node and all non-leaf descendants only', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { expandNode } = useTreeExpansion(expandedKeys)
-    const { root } = sampleTree()
-
-    expandNode(root)
-
-    // root and a are folders; a1 and b are leaves and must be skipped
-    expect(expandedKeys.value).toEqual({ root: true, a: true })
-  })
-
-  it('expandNode does nothing for a leaf node', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { expandNode } = useTreeExpansion(expandedKeys)
-
-    expandNode(node({ key: 'leaf', leaf: true }))
-
-    expect(expandedKeys.value).toEqual({})
-  })
-
-  it('collapseNode removes the node and its non-leaf descendants', () => {
-    const expandedKeys = ref<Record<string, boolean>>({
-      root: true,
-      a: true,
-      stray: true
-    })
-    const { collapseNode } = useTreeExpansion(expandedKeys)
-    const { root } = sampleTree()
-
-    collapseNode(root)
-
-    expect(expandedKeys.value).toEqual({ stray: true })
-  })
-
-  it('toggleNodeRecursive expands when collapsed and collapses when expanded', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { toggleNodeRecursive } = useTreeExpansion(expandedKeys)
-    const { root } = sampleTree()
-
-    toggleNodeRecursive(root)
-    expect(expandedKeys.value).toEqual({ root: true, a: true })
-
-    toggleNodeRecursive(root)
-    expect(expandedKeys.value).toEqual({})
-  })
-
-  it('toggleNodeOnEvent toggles recursively with ctrl and singly without', () => {
-    const expandedKeys = ref<Record<string, boolean>>({})
-    const { toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
-    const { root } = sampleTree()
-
-    toggleNodeOnEvent(new KeyboardEvent('keydown', { ctrlKey: true }), root)
-    expect(expandedKeys.value).toEqual({ root: true, a: true })
-
-    // Plain toggle removes only the node's own key, leaving descendants
-    toggleNodeOnEvent(new MouseEvent('click'), root)
-    expect(expandedKeys.value).toEqual({ a: true })
-  })
-})

src/config/comfyApi.test.ts

@@ -0,0 +1,101 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+import { getComfyApiBaseUrl, getComfyPlatformBaseUrl } from './comfyApi'
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    apiURL: (route: string) => `/api${route}`,
+    fetchApi: vi.fn()
+  }
+}))
+
+vi.stubGlobal('fetch', vi.fn())
+
+describe('getComfyApiBaseUrl', () => {
+  const originalConfig = remoteConfig.value
+
+  beforeEach(() => {
+    remoteConfig.value = {}
+  })
+
+  afterEach(() => {
+    remoteConfig.value = originalConfig
+  })
+
+  it('honors the server-provided override', () => {
+    remoteConfig.value = { comfy_api_base_url: 'https://my-ephem.example.com' }
+    expect(getComfyApiBaseUrl()).toBe('https://my-ephem.example.com')
+  })
+
+  it('falls back to the build-time default when the key is absent', () => {
+    expect(getComfyApiBaseUrl()).toBe('https://stagingapi.comfy.org')
+  })
+
+  it('falls back to the build-time default when the value is empty', () => {
+    remoteConfig.value = { comfy_api_base_url: '' }
+    expect(getComfyApiBaseUrl()).toBe('https://stagingapi.comfy.org')
+  })
+})
+
+describe('getComfyPlatformBaseUrl', () => {
+  const originalConfig = remoteConfig.value
+
+  beforeEach(() => {
+    remoteConfig.value = {}
+  })
+
+  afterEach(() => {
+    remoteConfig.value = originalConfig
+  })
+
+  it('honors the server-provided override', () => {
+    remoteConfig.value = {
+      comfy_platform_base_url: 'https://my-ephem-platform.example.com'
+    }
+    expect(getComfyPlatformBaseUrl()).toBe(
+      'https://my-ephem-platform.example.com'
+    )
+  })
+
+  it('falls back to the build-time default when the key is absent', () => {
+    expect(getComfyPlatformBaseUrl()).toBe('https://stagingplatform.comfy.org')
+  })
+
+  it('falls back to the build-time default when the value is empty', () => {
+    remoteConfig.value = { comfy_platform_base_url: '' }
+    expect(getComfyPlatformBaseUrl()).toBe('https://stagingplatform.comfy.org')
+  })
+})
+
+describe('compatibility with comfyui servers that predate the override keys', () => {
+  const originalConfig = remoteConfig.value
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    remoteConfig.value = {}
+  })
+
+  afterEach(() => {
+    remoteConfig.value = originalConfig
+  })
+
+  it('falls back to build-time defaults when /features omits the URL keys', async () => {
+    // An older comfyui server has /features but doesn't know about
+    // comfy_api_base_url / comfy_platform_base_url yet.
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        supports_preview_metadata: true,
+        max_upload_size: 104857600
+      })
+    } as Response)
+
+    await refreshRemoteConfig({ useAuth: false })
+
+    expect(getComfyApiBaseUrl()).toBe('https://stagingapi.comfy.org')
+    expect(getComfyPlatformBaseUrl()).toBe('https://stagingplatform.comfy.org')
+  })
+})

src/config/comfyApi.ts

@@ -1,4 +1,3 @@
-import { isCloud } from '@/platform/distribution/types'
 import {
   configValueOrDefault,
   remoteConfig
@@ -20,10 +19,6 @@ const BUILD_TIME_PLATFORM_BASE_URL = __USE_PROD_CONFIG__
     STAGING_PLATFORM_BASE_URL)
 
 export function getComfyApiBaseUrl(): string {
-  if (!isCloud) {
-    return BUILD_TIME_API_BASE_URL
-  }
-
   return configValueOrDefault(
     remoteConfig.value,
     'comfy_api_base_url',
@@ -32,10 +27,6 @@ export function getComfyApiBaseUrl(): string {
 }
 
 export function getComfyPlatformBaseUrl(): string {
-  if (!isCloud) {
-    return BUILD_TIME_PLATFORM_BASE_URL
-  }
-
   return configValueOrDefault(
     remoteConfig.value,
     'comfy_platform_base_url',

src/config/firebase.test.ts

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+async function loadFirebase(useProdConfig: boolean) {
+  vi.resetModules()
+  vi.stubGlobal('__USE_PROD_CONFIG__', useProdConfig)
+  const { remoteConfig } = await import('@/platform/remoteConfig/remoteConfig')
+  const { getFirebaseConfig } = await import('./firebase')
+  return { getFirebaseConfig, remoteConfig }
+}
+
+describe('getFirebaseConfig', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('honors a full server-provided firebase_config (cloud builds)', async () => {
+    const cloud = {
+      apiKey: 'cloud-key',
+      authDomain: 'cloud.example.com',
+      projectId: 'some-cloud-project',
+      storageBucket: 'cloud.appspot.com',
+      messagingSenderId: '1',
+      appId: '1:1:web:abc'
+    }
+    const { getFirebaseConfig, remoteConfig } = await loadFirebase(true)
+    remoteConfig.value = { firebase_config: cloud }
+    expect(getFirebaseConfig()).toEqual(cloud)
+  })
+
+  it('uses the dev project when the server reports firebase_env "dev", even if the build-time fallback is prod', async () => {
+    const { getFirebaseConfig, remoteConfig } = await loadFirebase(true)
+    remoteConfig.value = { firebase_env: 'dev' }
+    expect(getFirebaseConfig().projectId).toBe('dreamboothy-dev')
+  })
+
+  it('falls back to the build-time config when the server reports no firebase_env', async () => {
+    const prod = await loadFirebase(true)
+    prod.remoteConfig.value = {}
+    expect(prod.getFirebaseConfig().projectId).toBe('dreamboothy')
+
+    const dev = await loadFirebase(false)
+    dev.remoteConfig.value = {}
+    expect(dev.getFirebaseConfig().projectId).toBe('dreamboothy-dev')
+  })
+})

src/config/firebase.ts

@@ -1,6 +1,5 @@
 import type { FirebaseOptions } from 'firebase/app'
 
-import { isCloud } from '@/platform/distribution/types'
 import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 
 const DEV_CONFIG: FirebaseOptions = {
@@ -28,15 +27,12 @@ const PROD_CONFIG: FirebaseOptions = {
 const BUILD_TIME_CONFIG = __USE_PROD_CONFIG__ ? PROD_CONFIG : DEV_CONFIG
 
 /**
- * Returns the Firebase configuration for the current environment.
- * - Cloud builds use runtime configuration delivered via feature flags
- * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
+ * Firebase config for the current backend: the server's firebase_config (cloud builds),
+ * else the bundled DEV_CONFIG when the server reports a dev-tier backend, else the build-time default.
  */
 export function getFirebaseConfig(): FirebaseOptions {
-  if (!isCloud) {
-    return BUILD_TIME_CONFIG
-  }
-
   const runtimeConfig = remoteConfig.value.firebase_config
-  return runtimeConfig ?? BUILD_TIME_CONFIG
+  if (runtimeConfig) return runtimeConfig
+  if (remoteConfig.value.firebase_env === 'dev') return DEV_CONFIG
+  return BUILD_TIME_CONFIG
 }

src/core/graph/subgraph/migration/proxyWidgetMigration.test.ts

@@ -21,6 +21,7 @@ import {
   readHostQuarantine
 } from '@/core/graph/subgraph/migration/proxyWidgetMigration'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
+import { toLinkId } from '@/types/linkId'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
@@ -369,7 +370,7 @@ describe('flushProxyWidgetMigration', () => {
       const host = buildHost()
       const { primitive } = addPrimitiveWithTargets(host, { targetCount: 1 })
 
-      const danglingLinkId = 999_999
+      const danglingLinkId = toLinkId(999_999)
       expect(host.subgraph.links.has(danglingLinkId)).toBe(false)
       primitive.outputs[0].links = [
         ...(primitive.outputs[0].links ?? []),

src/core/graph/subgraph/promotionUtils.test.ts

@@ -13,6 +13,7 @@ import {
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
+import { toLinkId } from '@/types/linkId'
 import type { WidgetId } from '@/types/widgetId'
 
 function promotedInputNames(host: {
@@ -800,7 +801,7 @@ describe('demoteWidget — axiomatic projection retraction', () => {
   it('drops projection but keeps slot and external link when host slot is externally connected', () => {
     const { host, interiorNode, interiorWidget } = setupPromotedWidget()
     const hostInput = host.inputs[0]
-    hostInput.link = 9999
+    hostInput.link = toLinkId(9999)
     const promotedInputId = hostInput.widgetId
 
     expect(host.subgraph.inputs).toHaveLength(1)

src/core/graph/subgraph/promotionUtils.ts

@@ -5,6 +5,7 @@ import { t } from '@/i18n'
 import type { IContextMenuValue } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { LinkId } from '@/types/linkId'
 import { reorderSubgraphInputs } from '@/lib/litegraph/src/subgraph/subgraphUtils'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { isWidgetValue } from '@/lib/litegraph/src/types/widgets'
@@ -63,7 +64,7 @@ export function findHostInputForPromotion(
 
 function resolvePromotionSource(
   subgraphNode: SubgraphNode,
-  subgraphInput: { linkIds: readonly number[] }
+  subgraphInput: { linkIds: readonly LinkId[] }
 ): PromotedWidgetSource | undefined {
   for (const linkId of subgraphInput.linkIds) {
     const link = subgraphNode.subgraph.getLink(linkId)

src/extensions/core/groupNode.test.ts

@@ -1,46 +1,14 @@
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import type { SerialisedLLinkArray } from '@/lib/litegraph/src/LLink'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
-import type { ComfyApp } from '@/scripts/app'
-import type { ComfyExtension } from '@/types/comfy'
 
 import type { GroupNodeWorkflowData } from './groupNode'
 
-const appMock = vi.hoisted(() => ({
-  canvas: {
-    emitAfterChange: vi.fn(),
-    emitBeforeChange: vi.fn(),
-    selected_nodes: {}
-  },
-  registerExtension: vi.fn(),
-  registerNodeDef: vi.fn(),
-  rootGraph: {
-    convertToSubgraph: vi.fn(),
-    extra: {},
-    getNodeById: vi.fn(),
-    links: {},
-    nodes: [],
-    remove: vi.fn()
-  }
-}))
-
-const widgetStoreMock = vi.hoisted(() => ({
-  inputIsWidget: vi.fn((spec: unknown[]) =>
-    ['BOOLEAN', 'COMBO', 'FLOAT', 'INT', 'STRING'].includes(String(spec[0]))
-  )
-}))
-
 vi.mock('@/scripts/app', () => ({
-  app: appMock
-}))
-
-vi.mock('@/stores/widgetStore', () => ({
-  useWidgetStore: () => widgetStoreMock
+  app: {
+    registerExtension: vi.fn()
+  }
 }))
 
 import { GroupNodeConfig, replaceLegacySeparators } from './groupNode'
@@ -58,42 +26,6 @@ function makeNode(type: string): ComfyNode {
   }
 }
 
-function makeNodeDef(overrides: Partial<ComfyNodeDef> = {}): ComfyNodeDef {
-  return {
-    name: 'TestNode',
-    display_name: 'Test Node',
-    description: '',
-    category: 'test',
-    input: { required: {}, optional: {} },
-    output: [],
-    output_name: [],
-    output_is_list: [],
-    output_node: false,
-    python_module: 'test',
-    ...overrides
-  } as ComfyNodeDef
-}
-
-function extension(): ComfyExtension {
-  const groupExtension = appMock.registerExtension.mock.calls.find(
-    ([registered]) => registered.name === 'Comfy.GroupNode'
-  )?.[0]
-  if (!groupExtension) throw new Error('GroupNode extension was not registered')
-  return groupExtension as ComfyExtension
-}
-
-function addCustomNodeDefs(defs: Record<string, ComfyNodeDef>) {
-  extension().addCustomNodeDefs?.(defs, appMock as unknown as ComfyApp)
-}
-
-beforeEach(() => {
-  setActivePinia(createTestingPinia({ stubActions: false }))
-  appMock.registerNodeDef.mockReset()
-  widgetStoreMock.inputIsWidget.mockClear()
-  LiteGraph.registered_node_types = {}
-  addCustomNodeDefs({})
-})
-
 describe('replaceLegacySeparators', () => {
   it('rewrites the legacy "workflow/" prefix to "workflow>"', () => {
     const nodes = [makeNode('workflow/My Group')]
@@ -172,389 +104,4 @@ describe('GroupNodeConfig.getLinks', () => {
     const config = configFrom([], [[0, 1, 'IMAGE']])
     expect(config.externalFrom[0][1]).toBe('IMAGE')
   })
-
-  it('ignores external links without a type and accumulates multiple slots', () => {
-    const config = configFrom(
-      [],
-      [
-        [0, 1, null as unknown as string],
-        [0, 2, 'LATENT'],
-        [0, 3, 'IMAGE']
-      ]
-    )
-
-    expect(config.externalFrom[0]).toEqual({ 2: 'LATENT', 3: 'IMAGE' })
-  })
-})
-
-describe('GroupNodeConfig.getNodeDef', () => {
-  const imageNodeDef = makeNodeDef({
-    name: 'ImageNode',
-    input: {
-      required: {
-        image: ['IMAGE', {}],
-        mode: [['fast', 'slow'], {}]
-      },
-      optional: {
-        strength: ['FLOAT', { default: 1 }]
-      }
-    },
-    output: ['IMAGE'],
-    output_name: ['image'],
-    output_is_list: [false]
-  })
-
-  beforeEach(() => {
-    addCustomNodeDefs({ ImageNode: imageNodeDef })
-  })
-
-  it('returns registered definitions for normal node types', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [{ index: 0, type: 'ImageNode' }],
-      links: [],
-      external: []
-    })
-
-    expect(config.getNodeDef({ index: 0, type: 'ImageNode' })).toBe(
-      imageNodeDef
-    )
-  })
-
-  it('returns undefined for nodes without an index or a known type', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [{ type: 'UnknownNode' }],
-      links: [],
-      external: []
-    })
-
-    expect(config.getNodeDef({ type: 'UnknownNode' })).toBeUndefined()
-  })
-
-  it('skips unlinked primitive nodes', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [{ index: 0, type: 'PrimitiveNode' }],
-      links: [],
-      external: []
-    })
-
-    expect(
-      config.getNodeDef({ index: 0, type: 'PrimitiveNode' })
-    ).toBeUndefined()
-  })
-
-  it('derives primitive node type from the outgoing link type', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [
-        { index: 0, type: 'PrimitiveNode' },
-        { index: 1, type: 'ImageNode' }
-      ],
-      links: [[0, 0, 1, 0, 1, 'IMAGE'] as SerialisedLLinkArray],
-      external: []
-    })
-
-    expect(
-      config.getNodeDef({ index: 0, type: 'PrimitiveNode' })
-    ).toMatchObject({
-      input: { required: { value: ['IMAGE', {}] } },
-      output: ['IMAGE']
-    })
-  })
-
-  it('falls back to null when primitive combo target spec is not primitive', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [
-        {
-          index: 0,
-          type: 'PrimitiveNode',
-          outputs: [{ name: 'mode', widget: { name: 'mode' } }]
-        },
-        { index: 1, type: 'ImageNode' }
-      ],
-      links: [[0, 0, 1, 0, 1, 'COMBO'] as SerialisedLLinkArray],
-      external: []
-    })
-
-    expect(config.getNodeDef(config.nodeData.nodes[0])).toMatchObject({
-      input: { required: { value: [null, {}] } },
-      output: [null]
-    })
-  })
-
-  it('returns null for reroutes used only inside the group', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [
-        { index: 0, type: 'ImageNode' },
-        { index: 1, type: 'Reroute' },
-        { index: 2, type: 'ImageNode' }
-      ],
-      links: [
-        [0, 0, 1, 0, 1, 'IMAGE'],
-        [1, 0, 2, 0, 2, 'IMAGE']
-      ] as SerialisedLLinkArray[],
-      external: []
-    })
-
-    expect(config.getNodeDef({ index: 1, type: 'Reroute' })).toBeNull()
-  })
-
-  it('derives reroute type from outgoing target inputs', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [
-        { index: 0, type: 'Reroute' },
-        {
-          index: 1,
-          type: 'ImageNode',
-          inputs: [{ name: 'image', type: 'IMAGE' }]
-        }
-      ],
-      links: [[0, 0, 1, 0, 1, 'IMAGE'] as SerialisedLLinkArray],
-      external: [[0, 0, 'IMAGE']]
-    })
-
-    expect(config.getNodeDef({ index: 0, type: 'Reroute' })).toMatchObject({
-      input: { required: { IMAGE: ['IMAGE', { forceInput: true }] } },
-      output: ['IMAGE']
-    })
-  })
-
-  it('derives reroute type from incoming output metadata', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [
-        { index: 0, type: 'ImageNode', outputs: [{ type: 'LATENT' }] },
-        { index: 1, type: 'Reroute' }
-      ],
-      links: [[0, 0, 1, 0, 1, 'LATENT'] as SerialisedLLinkArray],
-      external: [[1, 0, 'LATENT']]
-    })
-
-    expect(config.getNodeDef({ index: 1, type: 'Reroute' })).toMatchObject({
-      input: { required: { LATENT: ['LATENT', { forceInput: true }] } },
-      output: ['LATENT']
-    })
-  })
-
-  it('derives pipe reroute type from external metadata when links omit it', () => {
-    const config = new GroupNodeConfig('group', {
-      nodes: [{ index: 0, type: 'Reroute' }],
-      links: [],
-      external: [[0, 0, 'MASK']]
-    })
-
-    expect(config.getNodeDef({ index: 0, type: 'Reroute' })).toMatchObject({
-      input: { required: { MASK: ['MASK', { forceInput: true }] } },
-      output: ['MASK']
-    })
-  })
-})
-
-describe('GroupNodeConfig input and output mapping', () => {
-  function configWithNode(node: GroupNodeWorkflowData['nodes'][number]) {
-    const config = new GroupNodeConfig('group', {
-      nodes: [node],
-      links: [],
-      external: [],
-      config: {
-        0: {
-          input: {
-            hidden: { visible: false },
-            renamed: { name: 'Custom Name' }
-          },
-          output: {
-            1: { name: 'Custom Output' },
-            2: { visible: false }
-          }
-        }
-      }
-    })
-    config.nodeDef = makeNodeDef({
-      input: { required: {} },
-      output: [],
-      output_name: [],
-      output_is_list: []
-    })
-    return config
-  }
-
-  it('renames duplicate inputs and adds seed control metadata', () => {
-    const config = configWithNode({
-      index: 0,
-      type: 'Sampler',
-      title: 'Sampler A',
-      inputs: [{ name: 'seed', label: 'Seed Label' }]
-    })
-    const seenInputs = { seed: 1, 'Sampler A seed': 1 }
-    const result = config.getInputConfig(
-      { index: 0, type: 'Sampler', title: 'Sampler A' },
-      'seed',
-      seenInputs,
-      ['INT', {}]
-    )
-
-    expect(result.name).toBe('Sampler A 1 seed')
-    expect(result.config).toEqual([
-      'INT',
-      { control_after_generate: 'Sampler A control_after_generate' }
-    ])
-  })
-
-  it('maps image upload widget aliases through converted widget names', () => {
-    const config = configWithNode({ index: 0, type: 'LoadImage' })
-    config.oldToNewWidgetMap[0] = { customImage: 'Uploaded Image' }
-
-    expect(
-      config.getInputConfig({ index: 0, type: 'LoadImage' }, 'renamed', {}, [
-        'IMAGEUPLOAD',
-        { widget: 'customImage' }
-      ])
-    ).toMatchObject({
-      name: 'Custom Name',
-      config: ['IMAGEUPLOAD', { widget: 'Uploaded Image' }]
-    })
-  })
-
-  it('splits widget inputs, socket inputs, and converted widget slots', () => {
-    const config = configWithNode({
-      index: 0,
-      type: 'MixedNode',
-      inputs: [{ name: 'mode', widget: { name: 'mode' } }]
-    })
-
-    const result = config.processWidgetInputs(
-      {
-        mode: ['COMBO', {}],
-        image: ['IMAGE', {}]
-      },
-      {
-        index: 0,
-        type: 'MixedNode',
-        inputs: [{ name: 'mode', widget: { name: 'mode' } }]
-      },
-      ['mode', 'image'],
-      {}
-    )
-
-    expect(result.slots).toEqual(['image'])
-    expect(result.converted.get(0)).toBe('mode')
-    expect(config.oldToNewWidgetMap[0].mode).toBeNull()
-  })
-
-  it('adds visible unlinked input slots and skips hidden configured inputs', () => {
-    const config = configWithNode({
-      index: 0,
-      type: 'InputNode'
-    })
-    const inputMap: Record<number, number> = {}
-    config.processInputSlots(
-      {
-        image: ['IMAGE', {}],
-        hidden: ['LATENT', {}]
-      },
-      { index: 0, type: 'InputNode' },
-      ['image', 'hidden'],
-      {},
-      inputMap,
-      {}
-    )
-
-    expect(config.nodeDef?.input?.required).toEqual({ image: ['IMAGE', {}] })
-    expect(inputMap).toEqual({ 0: 0 })
-  })
-
-  it('adds output metadata, hides linked/internal outputs, and dedupes labels', () => {
-    const config = configWithNode({
-      index: 0,
-      type: 'OutputNode',
-      title: 'Output A',
-      outputs: [{ name: 'image', label: 'Rendered' }]
-    })
-    config.linksFrom[0] = {
-      0: [[0, 0, 1, 0, 1, 'IMAGE'] as SerialisedLLinkArray]
-    }
-    config.processNodeOutputs(
-      { index: 0, type: 'OutputNode', title: 'Output A' },
-      { Rendered: 1 },
-      {
-        input: { required: {} },
-        output: ['IMAGE', 'LATENT', 'MASK'],
-        output_name: ['image', 'latent', 'mask'],
-        output_is_list: [false, true, false]
-      }
-    )
-
-    expect(config.outputVisibility).toEqual([false, true, false])
-    expect(config.nodeDef?.output).toEqual(['LATENT'])
-    expect(config.nodeDef?.output_is_list).toEqual([true])
-    expect(config.nodeDef?.output_name).toEqual(['Custom Output'])
-  })
-})
-
-describe('GroupNodeConfig.registerFromWorkflow', () => {
-  it('adds missing type actions and skips registration for incomplete groups', async () => {
-    const groupNodes: Record<string, GroupNodeWorkflowData> = {
-      Broken: {
-        nodes: [{ index: 0, type: 'MissingNode' }],
-        links: [],
-        external: []
-      }
-    }
-    const missingNodeTypes: Parameters<
-      typeof GroupNodeConfig.registerFromWorkflow
-    >[1] = []
-
-    await GroupNodeConfig.registerFromWorkflow(groupNodes, missingNodeTypes)
-
-    expect(appMock.registerNodeDef).not.toHaveBeenCalled()
-    expect(missingNodeTypes).toHaveLength(2)
-    expect(missingNodeTypes[0]).toMatchObject({
-      type: 'MissingNode',
-      hint: " (In group node 'workflow>Broken')"
-    })
-
-    const action = missingNodeTypes[1]
-    if (typeof action !== 'string') {
-      const target = document.createElement('button')
-      const { callback } = action.action as {
-        callback: (event: MouseEvent) => void
-      }
-      const event = new MouseEvent('click')
-      Object.defineProperty(event, 'target', { value: target })
-      callback(event)
-      expect(groupNodes.Broken).toBeUndefined()
-      expect(target.textContent).toBe('Removed')
-      expect(target.style.pointerEvents).toBe('none')
-    }
-  })
-
-  it('registers complete group node types and stores their generated node defs', async () => {
-    addCustomNodeDefs({
-      ImageNode: makeNodeDef({
-        name: 'ImageNode',
-        input: { required: { image: ['IMAGE', {}] } },
-        output: ['IMAGE'],
-        output_name: ['image'],
-        output_is_list: [false]
-      })
-    })
-    LiteGraph.registered_node_types.ImageNode = class extends LGraphNode {}
-
-    await GroupNodeConfig.registerFromWorkflow(
-      {
-        Complete: {
-          nodes: [{ index: 0, type: 'ImageNode' }],
-          links: [],
-          external: [[0, 0, 'IMAGE']]
-        }
-      },
-      []
-    )
-
-    expect(appMock.registerNodeDef).toHaveBeenCalledWith(
-      'workflow>Complete',
-      expect.objectContaining({
-        category: 'group nodes>workflow',
-        display_name: 'Complete',
-        name: 'workflow>Complete'
-      })
-    )
-  })
 })

src/extensions/core/groupNode.ts

@@ -815,8 +815,10 @@ export class GroupNodeConfig {
  * `configure`. The load-time migration unpacks each instance via
  * {@link convertToNodes} and {@link LGraph.convertToSubgraph} repackages the
  * result as a subgraph.
+ *
+ * @knipIgnoreUnusedButUsedByCustomNodes
  */
-class GroupNodeHandler {
+export class GroupNodeHandler {
   node: LGraphNode
   groupData: GroupNodeConfig
 

src/extensions/core/widgetInputs.ts

@@ -458,7 +458,7 @@ export function setWidgetConfig(slot: INodeInputSlot, config?: InputSpec) {
   if (!(slot instanceof NodeSlot)) return
   const graph = slot.node.graph
   if (!graph) return
-  const link = graph.links[slot.link ?? -1]
+  const link = graph.getLink(slot.link)
   if (!link) return
   const originNode = graph.getNodeById(link.origin_id)
   if (!originNode || !isPrimitiveNode(originNode)) return

src/lib/litegraph/src/LGraph.test.ts

@@ -17,6 +17,8 @@ import type { UUID } from '@/utils/uuid'
 import { zeroUuid } from '@/utils/uuid'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
+import { toLinkId } from '@/types/linkId'
+import { toRerouteId } from '@/types/rerouteId'
 import { UNASSIGNED_NODE_ID, toNodeId } from '@/types/nodeId'
 import { widgetId } from '@/types/widgetId'
 import {
@@ -132,7 +134,7 @@ describe('LGraph', () => {
 
     emptySubgraph.inputNode.pos = [0, 0]
     // Reroute needs offset of ~20y to align with first slot
-    const reroute = new Reroute(1, emptySubgraph, [0, 20])
+    const reroute = new Reroute(toRerouteId(1), emptySubgraph, [0, 20])
 
     node.snapToGrid(10)
     reroute.snapToGrid(10)
@@ -744,7 +746,14 @@ describe('ensureGlobalIdUniqueness', () => {
     subgraph._nodes.push(subNodeB)
     subgraph._nodes_by_id[subNodeB.id] = subNodeB
 
-    const link = new LLink(1, 'number', subNodeA.id, 0, subNodeB.id, 0)
+    const link = new LLink(
+      toLinkId(1),
+      'number',
+      subNodeA.id,
+      0,
+      subNodeB.id,
+      0
+    )
     subgraph._links.set(link.id, link)
 
     rootGraph.ensureGlobalIdUniqueness()
@@ -818,14 +827,9 @@ describe('_removeDuplicateLinks', () => {
     source: LGraphNode,
     target: LGraphNode
   ) {
-    const dup = new LLink(
-      ++graph.state.lastLinkId,
-      'number',
-      source.id,
-      0,
-      target.id,
-      0
-    )
+    const linkId = toLinkId(Number(graph.state.lastLinkId) + 1)
+    graph.state.lastLinkId = linkId
+    const dup = new LLink(linkId, 'number', source.id, 0, target.id, 0)
     graph._links.set(dup.id, dup)
     source.outputs[0].links!.push(dup.id)
     return dup
@@ -1001,8 +1005,10 @@ describe('Subgraph Unpacking', () => {
 
   function duplicateExistingLink(graph: LGraph, source: LGraphNode) {
     const existingLink = graph._links.values().next().value!
+    const linkId = toLinkId(Number(graph.state.lastLinkId) + 1)
+    graph.state.lastLinkId = linkId
     const dup = new LLink(
-      ++graph.state.lastLinkId,
+      linkId,
       existingLink.type,
       existingLink.origin_id,
       existingLink.origin_slot,

src/lib/litegraph/src/LGraph.ts

@@ -9,6 +9,8 @@ import type { UUID } from '@/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/utils/uuid'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { toLinkId } from '@/types/linkId'
+import { toRerouteId } from '@/types/rerouteId'
 import { usePreviewExposureStore } from '@/stores/previewExposureStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import { UNASSIGNED_NODE_ID, parseNodeId, toNodeId } from '@/types/nodeId'
@@ -245,8 +247,8 @@ export class LGraph
   private _state: LGraphState = {
     lastGroupId: 0,
     lastNodeId: 0,
-    lastLinkId: 0,
-    lastRerouteId: 0
+    lastLinkId: toLinkId(0),
+    lastRerouteId: toRerouteId(0)
   }
 
   get state(): LGraphState {
@@ -342,7 +344,7 @@ export class LGraph
   }
 
   set last_link_id(value) {
-    this.state.lastLinkId = value
+    this.state.lastLinkId = toLinkId(value)
   }
 
   onNodeAdded?(node: LGraphNode): void
@@ -370,7 +372,9 @@ export class LGraph
     /** @see MapProxyHandler */
     const links = this._links
     MapProxyHandler.bindAllMethods(links)
-    const handler = new MapProxyHandler<LLink>()
+    const handler = new MapProxyHandler<LinkId, LLink>((value) =>
+      toLinkId(Number(value))
+    )
     this.links = new Proxy(links, handler) as Map<LinkId, LLink> &
       Record<LinkId, LLink>
 
@@ -399,8 +403,8 @@ export class LGraph
     this.state = {
       lastGroupId: 0,
       lastNodeId: 0,
-      lastLinkId: 0,
-      lastRerouteId: 0
+      lastLinkId: toLinkId(0),
+      lastRerouteId: toRerouteId(0)
     }
 
     // used to detect changes
@@ -1415,7 +1419,7 @@ export class LGraph
 
   addFloatingLink(link: LLink): LLink {
     if (link.id === -1) {
-      link.id = ++this._lastFloatingLinkId
+      link.id = toLinkId(++this._lastFloatingLinkId)
     }
     this.floatingLinksInternal.set(link.id, link)
 
@@ -1495,12 +1499,20 @@ export class LGraph
     linkIds,
     floating
   }: OptionalProps<SerialisableReroute, 'id'>): Reroute {
-    id ??= ++this.state.lastRerouteId
-    if (id > this.state.lastRerouteId) this.state.lastRerouteId = id
+    const rerouteId =
+      id === undefined
+        ? toRerouteId(Number(this.state.lastRerouteId) + 1)
+        : toRerouteId(id)
+    if (rerouteId > this.state.lastRerouteId) {
+      this.state.lastRerouteId = rerouteId
+    }
 
-    const reroute = this.reroutes.get(id) ?? new Reroute(id, this)
-    reroute.update(parentId, pos, linkIds, floating)
-    this.reroutes.set(id, reroute)
+    const reroute = this.reroutes.get(rerouteId) ?? new Reroute(rerouteId, this)
+    const typedParentId =
+      parentId === undefined ? undefined : toRerouteId(parentId)
+    const typedLinkIds = linkIds?.map(toLinkId)
+    reroute.update(typedParentId, pos, typedLinkIds, floating)
+    this.reroutes.set(rerouteId, reroute)
     return reroute
   }
 
@@ -1509,11 +1521,15 @@ export class LGraph
    * @param pos Position in graph space
    * @param before The existing link segment (reroute, link) that will be after this reroute,
    * going from the node output to input.
-   * @returns The newly created reroute - typically ignored.
+   * @returns The newly created reroute, or undefined when the segment cannot be resolved.
    */
-  createReroute(pos: Point, before: LinkSegment): Reroute {
+  createReroute(pos: Point, before: LinkSegment): Reroute | undefined {
     const layoutMutations = useLayoutMutations()
-    const rerouteId = ++this.state.lastRerouteId
+    if (!(before instanceof LLink) && !(before instanceof Reroute)) {
+      return
+    }
+    const rerouteId = toRerouteId(Number(this.state.lastRerouteId) + 1)
+    this.state.lastRerouteId = rerouteId
     const linkIds = before instanceof Reroute ? before.linkIds : [before.id]
     const floatingLinkIds =
       before instanceof Reroute ? before.floatingLinkIds : [before.id]
@@ -2192,7 +2208,11 @@ export class LGraph
       ) {
         console.error('Missing Parent ID')
       }
-      const migratedReroute = new Reroute(++this.state.lastRerouteId, this, [
+      const migratedRerouteId = toRerouteId(
+        Number(this.state.lastRerouteId) + 1
+      )
+      this.state.lastRerouteId = migratedRerouteId
+      const migratedReroute = new Reroute(migratedRerouteId, this, [
         reroute.pos[0] + offsetX,
         reroute.pos[1] + offsetY
       ])
@@ -2503,11 +2523,13 @@ export class LGraph
           if (lastGroupId != null)
             state.lastGroupId = Math.max(state.lastGroupId, lastGroupId)
           if (lastLinkId != null)
-            state.lastLinkId = Math.max(state.lastLinkId, lastLinkId)
+            state.lastLinkId = toLinkId(Math.max(state.lastLinkId, lastLinkId))
           if (lastNodeId != null)
             state.lastNodeId = Math.max(state.lastNodeId, lastNodeId)
           if (lastRerouteId != null)
-            state.lastRerouteId = Math.max(state.lastRerouteId, lastRerouteId)
+            state.lastRerouteId = toRerouteId(
+              Math.max(state.lastRerouteId, lastRerouteId)
+            )
         }
 
         // Links

src/lib/litegraph/src/LGraphCanvas.drawConnections.test.ts

@@ -9,6 +9,7 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import { LLink } from '@/lib/litegraph/src/LLink'
+import { toLinkId } from '@/types/linkId'
 import { createMockCanvas2DContext } from '@/utils/__tests__/litegraphTestUtils'
 
 vi.mock('@/renderer/core/layout/store/layoutStore', () => ({
@@ -68,7 +69,8 @@ function createTestLink(
   targetNode: LGraphNode,
   inputSlot: number
 ): LLink {
-  const linkId = ++graph.state.lastLinkId
+  const linkId = toLinkId(Number(graph.state.lastLinkId) + 1)
+  graph.state.lastLinkId = linkId
   const link = new LLink(
     linkId,
     sourceNode.outputs[outputSlot].type,

src/lib/litegraph/src/LGraphCanvas.ts

@@ -11,6 +11,8 @@ import { getSlotPosition } from '@/renderer/core/canvas/litegraph/slotCalculatio
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { toLinkId } from '@/types/linkId'
+import { toRerouteId } from '@/types/rerouteId'
 import { forEachNode } from '@/utils/graphTraversalUtil'
 
 import { CanvasPointer } from './CanvasPointer'
@@ -2589,6 +2591,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
             return
           } else if (e.altKey && !e.shiftKey) {
             const newReroute = graph.createReroute([x, y], linkSegment)
+            if (!newReroute) return
+
             pointer.onDragStart = (pointer) =>
               this._startDraggingItems(newReroute, pointer)
             pointer.onDragEnd = (e) => this._processDraggedItems(e)
@@ -4245,7 +4249,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
 
       const reroute = graph.setReroute(rerouteInfo)
       created.push(reroute)
-      reroutes.set(id, reroute)
+      reroutes.set(toRerouteId(id), reroute)
     }
 
     // Remap reroute parentIds for pasted reroutes
@@ -4262,9 +4266,9 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       let outNode: LGraphNode | null | undefined = nodes.get(
         serializeNodeId(info.origin_id)
       )
-      let afterRerouteId: number | undefined
+      let afterRerouteId: RerouteId | undefined
       if (info.parentId != null)
-        afterRerouteId = reroutes.get(info.parentId)?.id
+        afterRerouteId = reroutes.get(toRerouteId(info.parentId))?.id
 
       // If it wasn't copied, use the original graph value
       if (
@@ -4273,7 +4277,9 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       ) {
         const originNodeId = parseNodeId(info.origin_id)
         outNode ??= originNodeId ? graph.getNodeById(originNodeId) : null
-        afterRerouteId ??= info.parentId
+        if (info.parentId !== undefined) {
+          afterRerouteId ??= toRerouteId(info.parentId)
+        }
       }
 
       const inNode = nodes.get(serializeNodeId(info.target_id))
@@ -4284,7 +4290,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           info.target_slot,
           afterRerouteId
         )
-        if (link) links.set(info.id, link)
+        if (link) links.set(toLinkId(info.id), link)
       }
     }
 
@@ -6700,7 +6706,9 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           const linkId =
             segment instanceof Reroute
               ? segment.linkIds.values().next().value
-              : segment.id
+              : segment instanceof LLink
+                ? segment.id
+                : undefined
           if (linkId !== undefined) {
             graph.removeLink(linkId)
             // Clean up layout store

src/lib/litegraph/src/LGraphNode.test.ts

@@ -185,7 +185,7 @@ describe('LGraphNode', () => {
       expect(disconnected).toBe(true)
       expect(node2.inputs[0].link).toBeNull()
       expect(node1.outputs[0].links?.length).toBe(0)
-      expect(graph._links.has(link?.id ?? -1)).toBe(false)
+      expect(graph._links.has(link!.id)).toBe(false)
 
       // Test disconnecting by slot name
       node1.connect(0, node2, 0)
@@ -248,8 +248,8 @@ describe('LGraphNode', () => {
       expect(disconnectedSpecific).toBe(true)
       expect(targetNode1.inputs[0].link).toBeNull()
       expect(sourceNode.outputs[0].links?.length).toBe(1)
-      expect(graph._links.has(link1?.id ?? -1)).toBe(false)
-      expect(graph._links.has(link2?.id ?? -1)).toBe(true)
+      expect(graph._links.has(link1!.id)).toBe(false)
+      expect(graph._links.has(link2!.id)).toBe(true)
 
       // Test disconnecting by slot name
       const link3 = sourceNode.connect(1, targetNode1, 0)
@@ -271,8 +271,8 @@ describe('LGraphNode', () => {
       expect(sourceNode.outputs[0].links).toBeNull()
       expect(targetNode1.inputs[0].link).toBeNull()
       expect(targetNode2.inputs[0].link).toBeNull()
-      expect(graph._links.has(link2?.id ?? -1)).toBe(false)
-      expect(graph._links.has(link4?.id ?? -1)).toBe(false)
+      expect(graph._links.has(link2!.id)).toBe(false)
+      expect(graph._links.has(link4!.id)).toBe(false)
 
       // Test disconnecting non-existent slot
       const invalidDisconnect = sourceNode.disconnectOutput(999)

src/lib/litegraph/src/LGraphNode.ts

@@ -8,6 +8,7 @@ import {
 import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/slotCalculations'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { toLinkId } from '@/types/linkId'
 import { UNASSIGNED_NODE_ID, toNodeId, serializeNodeId } from '@/types/nodeId'
 import type { NodeId } from '@/types/nodeId'
 import { adjustColor } from '@/utils/colorUtil'
@@ -2940,8 +2941,11 @@ export class LGraphNode
     const maybeCommonType =
       input.type && output.type && commonType(input.type, output.type)
 
+    const linkId = toLinkId(Number(graph.state.lastLinkId) + 1)
+    graph.state.lastLinkId = linkId
+
     const link = new LLink(
-      ++graph.state.lastLinkId,
+      linkId,
       maybeCommonType || input.type || output.type,
       this.id,
       outputIndex,
@@ -3051,7 +3055,7 @@ export class LGraphNode
     // Adding from an output, or a floating reroute that is NOT the tip of an existing floating chain
     if (afterRerouteId == null || !fromLastFloatingReroute) {
       const link = new LLink(
-        -1,
+        toLinkId(-1),
         slot.type,
         outputIndex === -1 ? -1 : id,
         outputIndex,

src/lib/litegraph/src/LLink.test.ts

@@ -1,21 +1,22 @@
 import { describe, expect } from 'vitest'
 
 import { LLink } from '@/lib/litegraph/src/litegraph'
+import { toLinkId } from '@/types/linkId'
 
 import { test } from './__fixtures__/testExtensions'
 
 describe('LLink', () => {
   test('matches previous snapshot', () => {
-    const link = new LLink(1, 'float', 4, 2, 5, 3)
+    const link = new LLink(toLinkId(1), 'float', 4, 2, 5, 3)
     expect(link.serialize()).toMatchSnapshot('Basic')
   })
 
   test('serializes to the previous snapshot', () => {
-    const link = new LLink(1, 'float', 4, 2, 5, 3)
+    const link = new LLink(toLinkId(1), 'float', 4, 2, 5, 3)
     expect(link.serialize()).toMatchSnapshot('Basic')
   })
   test('matches numeric caller ids after endpoint normalization', () => {
-    const link = new LLink(1, 'float', 4, 2, 5, 3)
+    const link = new LLink(toLinkId(1), 'float', 4, 2, 5, 3)
 
     expect(link.hasOrigin(4, 2)).toBe(true)
     expect(link.hasTarget(5, 3)).toBe(true)

src/lib/litegraph/src/LLink.ts

@@ -6,11 +6,15 @@ import type { SubgraphInput } from '@/lib/litegraph/src/subgraph/SubgraphInput'
 import type { SubgraphOutput } from '@/lib/litegraph/src/subgraph/SubgraphOutput'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
+import { toLinkId } from '@/types/linkId'
 import { UNASSIGNED_NODE_ID, toNodeId, serializeNodeId } from '@/types/nodeId'
+import { toRerouteId } from '@/types/rerouteId'
 
+import type { LinkId } from '@/types/linkId'
+import type { RerouteId } from '@/types/rerouteId'
 import type { LGraphNode } from './LGraphNode'
 import type { NodeId, SerializedNodeId } from '@/types/nodeId'
-import type { Reroute, RerouteId } from './Reroute'
+import type { Reroute } from './Reroute'
 import type {
   CanvasColour,
   INodeInputSlot,
@@ -25,9 +29,9 @@ import type { Serialisable, SerialisableLLink } from './types/serialisation'
 
 const layoutMutations = useLayoutMutations()
 
-export type LinkId = number
+export type { LinkId } from '@/types/linkId'
 export type SerialisedLLinkArray = [
-  id: LinkId,
+  id: number,
   origin_id: SerializedNodeId,
   origin_slot: number,
   target_id: SerializedNodeId,
@@ -176,7 +180,14 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
 
   /** @deprecated Use {@link LLink.create} */
   static createFromArray(data: SerialisedLLinkArray): LLink {
-    return new LLink(data[0], data[5], data[1], data[2], data[3], data[4])
+    return new LLink(
+      toLinkId(data[0]),
+      data[5],
+      data[1],
+      data[2],
+      data[3],
+      data[4]
+    )
   }
 
   /**
@@ -186,13 +197,13 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    */
   static create(data: SerialisableLLink): LLink {
     return new LLink(
-      data.id,
+      toLinkId(data.id),
       data.type,
       data.origin_id,
       data.origin_slot,
       data.target_id,
       data.target_slot,
-      data.parentId
+      data.parentId === undefined ? undefined : toRerouteId(data.parentId)
     )
   }
 
@@ -351,7 +362,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
 
   configure(o: LLink | SerialisedLLinkArray) {
     if (Array.isArray(o)) {
-      this.id = o[0]
+      this.id = toLinkId(o[0])
       this.origin_id = toNodeId(o[1])
       this.origin_slot = o[2]
       this.target_id = toNodeId(o[3])
@@ -400,7 +411,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
    */
   toFloating(slotType: 'input' | 'output', parentId: RerouteId): LLink {
     const exported = this.asSerialisable()
-    exported.id = -1
+    exported.id = toLinkId(-1)
     exported.parentId = parentId
 
     if (slotType === 'input') {
@@ -434,7 +445,7 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
     // When floating from inputs, the final (input side) reroute may have many floating links
     if (outputFloating || (keepReroutes === 'input' && lastReroute)) {
       const newLink = LLink.create(this)
-      newLink.id = -1
+      newLink.id = toLinkId(-1)
 
       if (keepReroutes === 'input') {
         newLink.origin_id = UNASSIGNED_NODE_ID

src/lib/litegraph/src/MapProxyHandler.ts

@@ -2,11 +2,19 @@
  * Temporary workaround until downstream consumers migrate to Map.
  * A brittle wrapper with many flaws, but should be fine for simple maps using int indexes.
  */
-export class MapProxyHandler<V> implements ProxyHandler<
-  Map<number | string, V>
-> {
+export class MapProxyHandler<
+  K extends number | string,
+  V
+> implements ProxyHandler<Map<K, V>> {
+  constructor(private readonly toKey: (value: number | string) => K) {}
+
+  private getKey(p: string): K {
+    const int = parseInt(p, 10)
+    return this.toKey(Number.isNaN(int) ? p : int)
+  }
+
   getOwnPropertyDescriptor(
-    target: Map<number | string, V>,
+    target: Map<K, V>,
     p: string | symbol
   ): PropertyDescriptor | undefined {
     const value = this.get(target, p)
@@ -19,40 +27,34 @@ export class MapProxyHandler<V> implements ProxyHandler<
     }
   }
 
-  has(target: Map<number | string, V>, p: string | symbol): boolean {
+  has(target: Map<K, V>, p: string | symbol): boolean {
     if (typeof p === 'symbol') return false
 
-    const int = parseInt(p, 10)
-    return target.has(!isNaN(int) ? int : p)
+    return target.has(this.getKey(p))
   }
 
-  ownKeys(target: Map<number | string, V>): ArrayLike<string | symbol> {
+  ownKeys(target: Map<K, V>): ArrayLike<string | symbol> {
     return [...target.keys()].map(String)
   }
 
-  get(target: Map<number | string, V>, p: string | symbol): V | undefined {
+  get(target: Map<K, V>, p: string | symbol): V | undefined {
     // Workaround does not support link IDs of "values", "entries", "constructor", etc.
     if (p in target) return Reflect.get(target, p, target)
     if (typeof p === 'symbol') return
 
-    const int = parseInt(p, 10)
-    return target.get(!isNaN(int) ? int : p)
+    return target.get(this.getKey(p))
   }
 
-  set(
-    target: Map<number | string, V>,
-    p: string | symbol,
-    newValue: V
-  ): boolean {
+  set(target: Map<K, V>, p: string | symbol, newValue: V): boolean {
     if (typeof p === 'symbol') return false
 
-    const int = parseInt(p, 10)
-    target.set(!isNaN(int) ? int : p, newValue)
+    target.set(this.getKey(p), newValue)
     return true
   }
 
-  deleteProperty(target: Map<number | string, V>, p: string | symbol): boolean {
-    return target.delete(p as number | string)
+  deleteProperty(target: Map<K, V>, p: string | symbol): boolean {
+    if (typeof p === 'symbol') return false
+    return target.delete(this.getKey(p))
   }
 
   static bindAllMethods(map: Map<unknown, unknown>): void {

src/lib/litegraph/src/Reroute.ts

@@ -1,6 +1,7 @@
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { UNASSIGNED_NODE_ID } from '@/types/nodeId'
 import type { NodeId } from '@/types/nodeId'
+import type { RerouteId } from '@/types/rerouteId'
 import { LayoutSource } from '@/renderer/core/layout/types'
 
 import { LGraphBadge } from './LGraphBadge'
@@ -24,7 +25,7 @@ import type { Serialisable, SerialisableReroute } from './types/serialisation'
 
 const layoutMutations = useLayoutMutations()
 
-export type RerouteId = number
+export type { RerouteId } from '@/types/rerouteId'
 
 /** The input or output slot that an incomplete reroute link is connected to. */
 export interface FloatingRerouteSlot {
@@ -53,6 +54,8 @@ export class Reroute
     return Reroute.radius + gap + Reroute.slotRadius
   }
 
+  public readonly id: RerouteId
+
   /** The network this reroute belongs to.  Contains all valid links and reroutes. */
   private readonly network: WeakRef<LinkNetwork>
 
@@ -201,13 +204,14 @@ export class Reroute
    * @param linkIds Link IDs ({@link LLink.id}) of all links that use this reroute
    */
   constructor(
-    public readonly id: RerouteId,
+    id: RerouteId,
     network: LinkNetwork,
     pos?: Point,
     parentId?: RerouteId,
     linkIds?: Iterable<LinkId>,
     floatingLinkIds?: Iterable<LinkId>
   ) {
+    this.id = id
     this.network = new WeakRef(network)
     this.parentId = parentId
     if (pos) this.pos = pos

src/lib/litegraph/src/canvas/LinkConnector.core.test.ts

@@ -17,7 +17,10 @@ import {
   LinkDirection
 } from '@/lib/litegraph/src/litegraph'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
+import type { LinkId } from '@/types/linkId'
+import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
+import { toRerouteId } from '@/types/rerouteId'
 import {
   createMockNodeInputSlot,
   createMockNodeOutputSlot
@@ -39,11 +42,11 @@ interface TestContext {
 const test = baseTest.extend<TestContext>({
   network: async ({}, use) => {
     const graph = new LGraph()
-    const floatingLinks = new Map<number, LLink>()
-    const reroutes = new Map<number, Reroute>()
+    const floatingLinks = new Map<LinkId, LLink>()
+    const reroutes = new Map<RerouteId, Reroute>()
 
     await use({
-      links: new Map<number, LLink>(),
+      links: new Map<LinkId, LLink>(),
       reroutes,
       floatingLinks,
       getLink: graph.getLink.bind(graph),
@@ -55,7 +58,7 @@ const test = baseTest.extend<TestContext>({
       removeFloatingLink: (link: LLink) => floatingLinks.delete(link.id),
       getReroute: ((id: RerouteId | null | undefined) =>
         id == null ? undefined : reroutes.get(id)) as LinkNetwork['getReroute'],
-      removeReroute: (id: number) => reroutes.delete(id),
+      removeReroute: (id: RerouteId) => reroutes.delete(id),
       add: (node: LGraphNode) => graph.add(node)
     })
   },
@@ -88,7 +91,7 @@ const test = baseTest.extend<TestContext>({
         targetId: number,
         slotType: ISlotType = 'number'
       ): LLink => {
-        const link = new LLink(id, slotType, sourceId, 0, targetId, 0)
+        const link = new LLink(toLinkId(id), slotType, sourceId, 0, targetId, 0)
         network.links.set(link.id, link)
         return link
       }
@@ -122,7 +125,7 @@ describe('LinkConnector', () => {
       sourceNode.addOutput('out', slotType)
       targetNode.addInput('in', slotType)
 
-      const link = new LLink(1, slotType, 1, 0, 2, 0)
+      const link = new LLink(toLinkId(1), slotType, 1, 0, 2, 0)
       network.links.set(link.id, link)
       targetNode.inputs[0].link = link.id
 
@@ -141,7 +144,10 @@ describe('LinkConnector', () => {
       connector.state.connectingTo = 'input'
 
       expect(() => {
-        connector.moveInputLink(network, createMockNodeInputSlot({ link: 1 }))
+        connector.moveInputLink(
+          network,
+          createMockNodeInputSlot({ link: toLinkId(1) })
+        )
       }).toThrow('Already dragging links.')
     })
   })
@@ -159,7 +165,7 @@ describe('LinkConnector', () => {
       sourceNode.addOutput('out', slotType)
       targetNode.addInput('in', slotType)
 
-      const link = new LLink(1, slotType, 1, 0, 2, 0)
+      const link = new LLink(toLinkId(1), slotType, 1, 0, 2, 0)
       network.links.set(link.id, link)
       sourceNode.outputs[0].links = [link.id]
 
@@ -181,7 +187,7 @@ describe('LinkConnector', () => {
       expect(() => {
         connector.moveOutputLink(
           network,
-          createMockNodeOutputSlot({ links: [1] })
+          createMockNodeOutputSlot({ links: [toLinkId(1)] })
         )
       }).toThrow('Already dragging links.')
     })
@@ -235,7 +241,9 @@ describe('LinkConnector', () => {
       targetNode.addInput('in', 'number')
 
       const link = createTestLink(1, 1, 2)
-      const reroute = new Reroute(1, network, [0, 0], undefined, [link.id])
+      const reroute = new Reroute(toRerouteId(1), network, [0, 0], undefined, [
+        link.id
+      ])
       network.reroutes.set(reroute.id, reroute)
       link.parentId = reroute.id
 
@@ -262,11 +270,11 @@ describe('LinkConnector', () => {
       connector.state.multi = true
       connector.state.draggingExistingLinks = true
 
-      const link = new LLink(1, 'number', 1, 0, 2, 0)
+      const link = new LLink(toLinkId(1), 'number', 1, 0, 2, 0)
       link._dragging = true
       connector.inputLinks.push(link)
 
-      const reroute = new Reroute(1, network)
+      const reroute = new Reroute(toRerouteId(1), network)
       reroute.pos = [0, 0]
       reroute._dragging = true
       connector.hiddenReroutes.add(reroute)
@@ -303,7 +311,7 @@ describe('LinkConnector', () => {
         fromPos: [0, 0],
         fromDirection: LinkDirection.RIGHT,
         toType: 'input',
-        link: new LLink(1, 'number', 1, 0, 2, 0)
+        link: new LLink(toLinkId(1), 'number', 1, 0, 2, 0)
       } as MovingInputLink
 
       connector.events.dispatch('input-moved', mockRenderLink)
@@ -320,7 +328,7 @@ describe('LinkConnector', () => {
       connector.state.connectingTo = 'input'
       connector.state.multi = true
 
-      const link = new LLink(1, 'number', 1, 0, 2, 0)
+      const link = new LLink(toLinkId(1), 'number', 1, 0, 2, 0)
       connector.inputLinks.push(link)
 
       const exported = connector.export(network)

src/lib/litegraph/src/canvas/LinkConnector.integration.test.ts

@@ -12,7 +12,9 @@ import { LGraphNode, LLink, LinkConnector } from '@/lib/litegraph/src/litegraph'
 
 import { test as baseTest } from '../__fixtures__/testExtensions'
 import type { ConnectingLink } from '@/lib/litegraph/src/interfaces'
+import { toLinkId } from '@/types/linkId'
 import { UNASSIGNED_NODE_ID, toNodeId } from '@/types/nodeId'
+import { toRerouteId } from '@/types/rerouteId'
 import {
   createMockCanvasPointerEvent,
   createMockCanvasRenderingContext2D
@@ -181,7 +183,7 @@ const test = baseTest.extend<TestContext>({
   },
 
   floatingReroute: async ({ graph }, use) => {
-    const floatingReroute = graph.reroutes.get(1)!
+    const floatingReroute = graph.reroutes.get(toRerouteId(1))!
     expect(floatingReroute.floating).toEqual({ slotType: 'output' })
     await use(floatingReroute)
   }
@@ -308,7 +310,7 @@ describe('LinkConnector Integration', () => {
 
       // Should have lost one reroute
       expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1)
-      expect(graph.reroutes.get(1)).toBeUndefined()
+      expect(graph.reroutes.get(toRerouteId(1))).toBeUndefined()
 
       // The two normal links should now be floating
       expect(graph.floatingLinks.size).toBe(2)
@@ -447,7 +449,7 @@ describe('LinkConnector Integration', () => {
 
       // Should have lost one reroute
       expect(graph.reroutes.size).toBe(reroutesBeforeTest.length - 1)
-      expect(graph.reroutes.get(1)).toBeUndefined()
+      expect(graph.reroutes.get(toRerouteId(1))).toBeUndefined()
 
       // The two normal links should now be floating
       expect(graph.floatingLinks.size).toBe(2)
@@ -513,14 +515,16 @@ describe('LinkConnector Integration', () => {
 
       // The normal link should now be floating
       expect(graph.floatingLinks.size).toBe(2)
-      expect(graph.reroutes.get(3)!.floating).toEqual({ slotType: 'output' })
+      expect(graph.reroutes.get(toRerouteId(3))!.floating).toEqual({
+        slotType: 'output'
+      })
 
       const floatingOutNode = graph.getNodeById(toNodeId(1))!
       floatingOutNode.disconnectOutput(0)
 
       // Should have lost one reroute
       expect(graph.reroutes.size).toBe(9)
-      expect(graph.reroutes.get(1)).toBeUndefined()
+      expect(graph.reroutes.get(toRerouteId(1))).toBeUndefined()
 
       // Removed 4 reroutes
       expect(graph.reroutes.size).toBe(9)
@@ -573,9 +577,9 @@ describe('LinkConnector Integration', () => {
     }) => {
       const manyOutputsNode = graph.getNodeById(toNodeId(4))!
 
-      const reroute7 = graph.reroutes.get(7)!
-      const reroute10 = graph.reroutes.get(10)!
-      const reroute13 = graph.reroutes.get(13)!
+      const reroute7 = graph.reroutes.get(toRerouteId(7))!
+      const reroute10 = graph.reroutes.get(toRerouteId(10))!
+      const reroute13 = graph.reroutes.get(toRerouteId(13))!
 
       const canvasX = reroute7.pos[0]
       const canvasY = reroute7.pos[1]
@@ -583,7 +587,7 @@ describe('LinkConnector Integration', () => {
 
       const toSortedRerouteChain = (linkIds: number[]) =>
         linkIds
-          .map((x) => graph.links.get(x)!)
+          .map((x) => graph.links.get(toLinkId(x))!)
           .map((x) => LLink.getReroutes(graph, x))
           .sort((a, b) => a.at(-1)!.id - b.at(-1)!.id)
 
@@ -715,7 +719,7 @@ describe('LinkConnector Integration', () => {
       floatingReroute,
       validateIntegrityFloatingRemoved
     }) => {
-      const reroute8 = graph.reroutes.get(8)!
+      const reroute8 = graph.reroutes.get(toRerouteId(8))!
       const canvasX = reroute8.pos[0]
       const canvasY = reroute8.pos[1]
 
@@ -761,7 +765,7 @@ describe('LinkConnector Integration', () => {
       floatingReroute,
       validateIntegrityNoChanges
     }) => {
-      const rerouteWithTwoLinks = graph.reroutes.get(3)!
+      const rerouteWithTwoLinks = graph.reroutes.get(toRerouteId(3))!
       const targetNode = graph.getNodeById(toNodeId(2))!
 
       const targetDropEvent = mockedInputDropEvent(targetNode, 0)
@@ -951,11 +955,11 @@ describe('LinkConnector Integration', () => {
 
       // Parent reroutes of the target reroute
       for (const [index, parentId] of parentIds.entries()) {
-        const reroute = graph.reroutes.get(parentId)!
+        const reroute = graph.reroutes.get(toRerouteId(parentId))!
         expect(reroute.linkIds.size).toBe(linksBefore[index])
       }
 
-      const targetReroute = graph.reroutes.get(targetRerouteId)!
+      const targetReroute = graph.reroutes.get(toRerouteId(targetRerouteId))!
       const nextLinkIds = getNextLinkIds(targetReroute.linkIds)
       const dropEvent = createMockCanvasPointerEvent(
         targetReroute.pos[0],
@@ -975,7 +979,7 @@ describe('LinkConnector Integration', () => {
 
       // Parent reroutes should have lost the links or been removed
       for (const [index, parentId] of parentIds.entries()) {
-        const reroute = graph.reroutes.get(parentId)!
+        const reroute = graph.reroutes.get(toRerouteId(parentId))!
         if (linksAfter[index] === undefined) {
           expect(reroute).not.toBeUndefined()
         } else {
@@ -995,10 +999,10 @@ describe('LinkConnector Integration', () => {
     /** Drag link from this reroute */
     fromRerouteId: number
     /** Drop link on this reroute */
-    toRerouteId: number
+    targetRerouteId: number
     /** Reroute IDs that should be removed from the resultant reroute chain */
     shouldBeRemoved: number[]
-    /** Reroutes that should have NONE of the link IDs that toReroute has */
+    /** Reroutes that should have NONE of the link IDs that targetReroute has */
     shouldHaveLinkIdsRemoved: number[]
     /** Whether to test floating inputs */
     testFloatingInputs?: true
@@ -1009,43 +1013,43 @@ describe('LinkConnector Integration', () => {
   test.for<ReconnectTestData>([
     {
       fromRerouteId: 10,
-      toRerouteId: 15,
+      targetRerouteId: 15,
       shouldBeRemoved: [14],
       shouldHaveLinkIdsRemoved: [13, 8, 6, 7]
     },
     {
       fromRerouteId: 8,
-      toRerouteId: 2,
+      targetRerouteId: 2,
       shouldBeRemoved: [4],
       shouldHaveLinkIdsRemoved: []
     },
     {
       fromRerouteId: 3,
-      toRerouteId: 12,
+      targetRerouteId: 12,
       shouldBeRemoved: [11],
       shouldHaveLinkIdsRemoved: [10, 13, 14, 15, 8, 6, 7]
     },
     {
       fromRerouteId: 15,
-      toRerouteId: 7,
+      targetRerouteId: 7,
       shouldBeRemoved: [8, 6],
       shouldHaveLinkIdsRemoved: []
     },
     {
       fromRerouteId: 1,
-      toRerouteId: 7,
+      targetRerouteId: 7,
       shouldBeRemoved: [8, 6],
       shouldHaveLinkIdsRemoved: []
     },
     {
       fromRerouteId: 1,
-      toRerouteId: 10,
+      targetRerouteId: 10,
       shouldBeRemoved: [],
       shouldHaveLinkIdsRemoved: []
     },
     {
       fromRerouteId: 4,
-      toRerouteId: 8,
+      targetRerouteId: 8,
       shouldBeRemoved: [],
       shouldHaveLinkIdsRemoved: [],
       testFloatingInputs: true,
@@ -1053,7 +1057,7 @@ describe('LinkConnector Integration', () => {
     },
     {
       fromRerouteId: 2,
-      toRerouteId: 12,
+      targetRerouteId: 12,
       shouldBeRemoved: [11],
       shouldHaveLinkIdsRemoved: [],
       testFloatingInputs: true,
@@ -1064,7 +1068,7 @@ describe('LinkConnector Integration', () => {
     (
       {
         fromRerouteId,
-        toRerouteId,
+        targetRerouteId,
         shouldBeRemoved,
         shouldHaveLinkIdsRemoved,
         testFloatingInputs,
@@ -1077,11 +1081,14 @@ describe('LinkConnector Integration', () => {
         graph.getNodeById(toNodeId(4))!.disconnectOutput(0)
       }
 
-      const fromReroute = graph.reroutes.get(fromRerouteId)!
-      const toReroute = graph.reroutes.get(toRerouteId)!
-      const nextLinkIds = getNextLinkIds(toReroute.linkIds, expectedExtraLinks)
+      const fromReroute = graph.reroutes.get(toRerouteId(fromRerouteId))!
+      const targetReroute = graph.reroutes.get(toRerouteId(targetRerouteId))!
+      const nextLinkIds = getNextLinkIds(
+        targetReroute.linkIds,
+        expectedExtraLinks
+      )
 
-      const originalParentChain = LLink.getReroutes(graph, toReroute)
+      const originalParentChain = LLink.getReroutes(graph, targetReroute)
 
       const sortAndJoin = (numbers: Iterable<number>) =>
         // oxlint-disable-next-line require-array-sort-compare
@@ -1092,7 +1099,7 @@ describe('LinkConnector Integration', () => {
 
       // Sanity check shouldBeRemoved
       const reroutesWithIdenticalLinkIds = originalParentChain.filter(
-        (parent) => hasIdenticalLinks(parent, toReroute)
+        (parent) => hasIdenticalLinks(parent, targetReroute)
       )
       expect(reroutesWithIdenticalLinkIds.map((reroute) => reroute.id)).toEqual(
         shouldBeRemoved
@@ -1101,13 +1108,13 @@ describe('LinkConnector Integration', () => {
       connector.dragFromReroute(graph, fromReroute)
 
       const dropEvent = createMockCanvasPointerEvent(
-        toReroute.pos[0],
-        toReroute.pos[1]
+        targetReroute.pos[0],
+        targetReroute.pos[1]
       )
       connector.dropLinks(graph, dropEvent)
       connector.reset()
 
-      const newParentChain = LLink.getReroutes(graph, toReroute)
+      const newParentChain = LLink.getReroutes(graph, targetReroute)
       for (const rerouteId of shouldBeRemoved) {
         expect(originalParentChain.map((reroute) => reroute.id)).toContain(
           rerouteId
@@ -1117,10 +1124,10 @@ describe('LinkConnector Integration', () => {
         )
       }
 
-      expect([...toReroute.linkIds.values()]).toEqual(nextLinkIds)
+      expect([...targetReroute.linkIds.values()]).toEqual(nextLinkIds)
 
       for (const rerouteId of shouldBeRemoved) {
-        const reroute = graph.reroutes.get(rerouteId)!
+        const reroute = graph.reroutes.get(toRerouteId(rerouteId))!
         if (testFloatingInputs) {
           // Already-floating reroutes should be removed
           expect(reroute).toBeUndefined()
@@ -1131,8 +1138,8 @@ describe('LinkConnector Integration', () => {
       }
 
       for (const rerouteId of shouldHaveLinkIdsRemoved) {
-        const reroute = graph.reroutes.get(rerouteId)!
-        for (const linkId of toReroute.linkIds) {
+        const reroute = graph.reroutes.get(toRerouteId(rerouteId))!
+        for (const linkId of targetReroute.linkIds) {
           expect(reroute.linkIds).not.toContain(linkId)
         }
       }
@@ -1170,8 +1177,8 @@ describe('LinkConnector Integration', () => {
       const listener = vi.fn()
       connector.listenUntilReset('link-created', listener)
 
-      const fromReroute = graph.reroutes.get(from)!
-      const toReroute = graph.reroutes.get(to)!
+      const fromReroute = graph.reroutes.get(toRerouteId(from))!
+      const toReroute = graph.reroutes.get(toRerouteId(to))!
 
       const dropEvent = createMockCanvasPointerEvent(
         toReroute.pos[0],
@@ -1188,15 +1195,15 @@ describe('LinkConnector Integration', () => {
   )
 
   const nodeReroutePairs = [
-    { nodeId: toNodeId(1), rerouteId: 1 },
-    { nodeId: toNodeId(1), rerouteId: 3 },
-    { nodeId: toNodeId(1), rerouteId: 4 },
-    { nodeId: toNodeId(1), rerouteId: 2 },
-    { nodeId: toNodeId(4), rerouteId: 7 },
-    { nodeId: toNodeId(4), rerouteId: 6 },
-    { nodeId: toNodeId(4), rerouteId: 8 },
-    { nodeId: toNodeId(4), rerouteId: 10 },
-    { nodeId: toNodeId(4), rerouteId: 12 }
+    { nodeId: toNodeId(1), rerouteId: toRerouteId(1) },
+    { nodeId: toNodeId(1), rerouteId: toRerouteId(3) },
+    { nodeId: toNodeId(1), rerouteId: toRerouteId(4) },
+    { nodeId: toNodeId(1), rerouteId: toRerouteId(2) },
+    { nodeId: toNodeId(4), rerouteId: toRerouteId(7) },
+    { nodeId: toNodeId(4), rerouteId: toRerouteId(6) },
+    { nodeId: toNodeId(4), rerouteId: toRerouteId(8) },
+    { nodeId: toNodeId(4), rerouteId: toRerouteId(10) },
+    { nodeId: toNodeId(4), rerouteId: toRerouteId(12) }
   ]
   test.for(nodeReroutePairs)(
     'Should ignore connections from input to same node via reroutes',

src/lib/litegraph/src/canvas/LinkConnectorSubgraphInputValidation.test.ts

@@ -14,6 +14,7 @@ import type {
   NodeInputSlot
 } from '@/lib/litegraph/src/litegraph'
 import { LinkDirection } from '@/lib/litegraph/src/types/globalEnums'
+import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
 
 import { createTestSubgraph } from '../subgraph/__fixtures__/subgraphHelpers'
@@ -112,7 +113,14 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       targetNode.addInput('number_in', 'number')
       subgraph.add(targetNode)
 
-      const link = new LLink(1, 'number', sourceNode.id, 0, targetNode.id, 0)
+      const link = new LLink(
+        toLinkId(1),
+        'number',
+        sourceNode.id,
+        0,
+        targetNode.id,
+        0
+      )
       subgraph._links.set(link.id, link)
 
       const movingLink = new MovingOutputLink(subgraph, link)
@@ -138,7 +146,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
 
       // Create valid link (number -> number)
       const validLink = new LLink(
-        1,
+        toLinkId(1),
         'number',
         sourceNode.id,
         0,
@@ -150,7 +158,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
 
       // Create invalid link (string -> number)
       const invalidLink = new LLink(
-        2,
+        toLinkId(2),
         'string',
         sourceNode.id,
         1,
@@ -182,7 +190,14 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       targetNode.addInput('number_in', 'number')
       subgraph.add(targetNode)
 
-      const link = new LLink(1, 'number', sourceNode.id, 0, targetNode.id, 0)
+      const link = new LLink(
+        toLinkId(1),
+        'number',
+        sourceNode.id,
+        0,
+        targetNode.id,
+        0
+      )
       subgraph._links.set(link.id, link)
       const movingLink = new MovingOutputLink(subgraph, link)
 
@@ -225,7 +240,14 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       subgraph.add(targetNode)
 
       // Create an invalid link (string output -> string input, but subgraph expects number)
-      const link = new LLink(1, 'string', sourceNode.id, 0, targetNode.id, 0)
+      const link = new LLink(
+        toLinkId(1),
+        'string',
+        sourceNode.id,
+        0,
+        targetNode.id,
+        0
+      )
       subgraph._links.set(link.id, link)
       const movingLink = new MovingOutputLink(subgraph, link)
 
@@ -277,7 +299,14 @@ describe('LinkConnector SubgraphInput connection validation', () => {
       subgraph.add(targetNode)
 
       // Create a valid link (number -> number)
-      const link = new LLink(1, 'number', sourceNode.id, 0, targetNode.id, 0)
+      const link = new LLink(
+        toLinkId(1),
+        'number',
+        sourceNode.id,
+        0,
+        targetNode.id,
+        0
+      )
       subgraph._links.set(link.id, link)
       const movingLink = new MovingOutputLink(subgraph, link)
 
@@ -324,7 +353,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
 
       // Create valid and invalid links
       const validLink = new LLink(
-        1,
+        toLinkId(1),
         'number',
         sourceNode.id,
         0,
@@ -332,7 +361,7 @@ describe('LinkConnector SubgraphInput connection validation', () => {
         0
       )
       const invalidLink = new LLink(
-        2,
+        toLinkId(2),
         'string',
         sourceNode.id,
         1,

src/lib/litegraph/src/interfaces.ts

@@ -3,8 +3,10 @@ import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import type { WidgetId } from '@/types/widgetId'
 import type { TWidgetValue } from '@/lib/litegraph/src/types/widgets'
 import type { NodeId } from '@/types/nodeId'
+import type { SlotIndex } from '@/types/slotId'
 
 import type { ContextMenu } from './ContextMenu'
+import type { LGraphGroup, GroupId } from './LGraphGroup'
 import type { LGraphNode, NodeProperty } from './LGraphNode'
 import type { LLink, LinkId } from './LLink'
 import type { Reroute, RerouteId } from './Reroute'
@@ -87,7 +89,7 @@ interface Parent<TChild> {
  * May contain other {@link Positionable} objects.
  */
 export interface Positionable extends Parent<Positionable>, HasBoundingRect {
-  readonly id: NodeId | RerouteId | number
+  readonly id: NodeId | RerouteId | GroupId
   /**
    * Position in graph coordinates. This may be the top-left corner,
    * the centre, or another point depending on concrete type.
@@ -237,8 +239,7 @@ export interface IFoundSlot extends IInputOrOutput {
   link_pos: Point
 }
 
-/** Index of an input or output slot on a node. */
-export type SlotIndex = number
+export type { SlotIndex } from '@/types/slotId'
 
 /** A point represented as `[x, y]` co-ordinates */
 export type Point = [x: number, y: number]

src/lib/litegraph/src/node/slotUtils.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
 import type { IWidget } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { toLinkId } from '@/types/linkId'
 
 import { outputAsSerialisable } from './slotUtils'
 
@@ -12,7 +13,7 @@ describe('outputAsSerialisable', () => {
   it('clones the links array to prevent shared reference mutation', () => {
     const node = new LGraphNode('test')
     const output = node.addOutput('out', 'number')
-    output.links = [1, 2, 3]
+    output.links = [toLinkId(1), toLinkId(2), toLinkId(3)]
 
     const serialised = outputAsSerialisable(output as OutputSlotParam)
 
@@ -20,7 +21,7 @@ describe('outputAsSerialisable', () => {
     expect(serialised.links).not.toBe(output.links)
 
     // Mutating the live array should NOT affect the serialised copy
-    output.links.push(4)
+    output.links.push(toLinkId(4))
     expect(serialised.links).toHaveLength(3)
   })
 

src/lib/litegraph/src/subgraph/ExecutableNodeDTO.test.ts

@@ -8,6 +8,7 @@ import {
   LGraphEventMode,
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
+import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
 
 import {
@@ -57,7 +58,7 @@ describe('ExecutableNodeDTO Creation', () => {
     const node = new LGraphNode('Test Node')
     node.addInput('input1', 'number')
     node.addInput('input2', 'string')
-    node.inputs[0].link = 123 // Simulate connected input
+    node.inputs[0].link = toLinkId(123) // Simulate connected input
     graph.add(node)
 
     const dto = new ExecutableNodeDTO(node, [], new Map(), undefined)
@@ -506,7 +507,7 @@ describe('ExecutableNodeDTO Properties', () => {
     const graph = new LGraph()
     const node = new LGraphNode('Test Node')
     node.addInput('testInput', 'number')
-    node.inputs[0].link = 999 // Simulate connection
+    node.inputs[0].link = toLinkId(999) // Simulate connection
     graph.add(node)
 
     const dto = new ExecutableNodeDTO(node, [], new Map(), undefined)