chore: remove unused models showcase components

ModelsShowcaseSection and ShowcaseCard were superseded by AIModelsSection
on the models page and are no longer referenced.

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

.github/actions/start-comfyui-server/action.yaml

@@ -19,8 +19,5 @@ runs:
       run: |
         set -euo pipefail
         cp -r ./tools/devtools/* /ComfyUI/custom_nodes/ComfyUI_devtools/
-        # TODO(FE-729): remove --enable-assets once BE-786 lands in the CI ComfyUI image
-        # (BE-786 removes the gate so /api/assets is always on). Until then, FE-729
-        # routes modelStore through assetService, which 503s without this flag.
-        cd /ComfyUI && python3 main.py --cpu --multi-user --enable-assets --front-end-root "${{ inputs.front_end_root }}" &
+        cd /ComfyUI && python3 main.py --cpu --multi-user --front-end-root "${{ inputs.front_end_root }}" &
         wait-for-it --service 127.0.0.1:8188 -t ${{ inputs.timeout }}

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

@@ -45,12 +45,8 @@ jobs:
           path: dist/
           retention-days: 1
 
-      # Build cloud distribution for @cloud tagged tests
-      # NX_SKIP_NX_CACHE=true is required because `nx build` was already run
-      # for the OSS distribution above. Without skipping cache, Nx returns
-      # the cached OSS build since env vars aren't part of the cache key.
       - name: Build cloud frontend
-        run: NX_SKIP_NX_CACHE=true pnpm build:cloud
+        run: pnpm build:cloud
 
       - name: Upload cloud frontend
         uses: actions/upload-artifact@v6

.github/workflows/release-draft-create.yaml

@@ -59,7 +59,7 @@ jobs:
           pnpm zipdist ./dist ./dist-desktop.zip
 
           # Default release artifact for core/PyPI.
-          NX_SKIP_NX_CACHE=true pnpm build
+          pnpm build
           pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6

.gitignore

@@ -19,6 +19,7 @@ yarn.lock
 
 node_modules
 .pnpm-store
+.nx
 dist
 dist-ssr
 *.local
@@ -89,10 +90,6 @@ storybook-static
 # MCP Servers
 .playwright-mcp/*
 
-.nx/cache
-.nx/workspace-data
-.cursor/rules/nx-rules.mdc
-.github/instructions/nx.instructions.md
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 

.nxignore

@@ -1 +0,0 @@
-.claude/worktrees

.oxlintrc.json

@@ -2,7 +2,6 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    ".nx/*",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
     "components.d.ts",

AGENTS.md

@@ -35,7 +35,7 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 
 ## Monorepo Architecture
 
-The project uses **Nx** for build orchestration and task management
+The project uses **pnpm workspaces** for monorepo organization and native tool CLIs for task execution
 
 ## Package Manager
 
@@ -237,7 +237,6 @@ See @docs/testing/\*.md for detailed patterns.
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
 - [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
 ## Architecture Decision Records

TROUBLESHOOTING.md

@@ -7,7 +7,7 @@ This guide helps you resolve common issues when developing ComfyUI Frontend.
 ```mermaid
 flowchart TD
     A[Having Issues?] --> B{What's the problem?}
-    B -->|Dev server stuck| C[nx serve hangs]
+    B -->|Dev server stuck| C[pnpm dev hangs]
     B -->|Build errors| D[Check build issues]
     B -->|Lint errors| Q[Check linting issues]
     B -->|Dependency issues| E[Package problems]
@@ -23,7 +23,7 @@ flowchart TD
     G -->|No| H[Run: pnpm i]
     G -->|Still stuck| I[Run: pnpm clean]
     I --> J{Still stuck?}
-    J -->|Yes| K[Nuclear option:<br/>pnpm dlx rimraf node_modules<br/>&& pnpm i]
+    J -->|Yes| K[Nuclear option:<br/>pnpm clean:all<br/>&& pnpm i]
     J -->|No| L[Fixed!]
     H --> L
 
@@ -41,11 +41,11 @@ flowchart TD
 
 ### Development Server Issues
 
-#### Q: `pnpm dev` or `nx serve` gets stuck and won't start
+#### Q: `pnpm dev` gets stuck and won't start
 
 **Symptoms:**
 
-- Command hangs on "nx serve"
+- Command hangs during Vite startup
 - Dev server doesn't respond
 - Terminal appears frozen
 
@@ -65,7 +65,7 @@ flowchart TD
 
 3. **Last resort - Full node_modules reset:**
    ```bash
-   pnpm dlx rimraf node_modules && pnpm i
+   pnpm clean:all && pnpm i
    ```
 
 **Why this happens:**
@@ -73,7 +73,7 @@ flowchart TD
 - Corrupted dependency cache
 - Outdated lock files after branch switching
 - Incomplete previous installations
-- NX cache corruption
+- stale local build cache
 
 ---
 

apps/desktop-ui/package.json

@@ -3,8 +3,11 @@
   "version": "0.0.6",
   "type": "module",
   "scripts": {
-    "lint": "nx run @comfyorg/desktop-ui:lint",
-    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
+    "dev": "pnpm -w exec vite --config apps/desktop-ui/vite.config.mts",
+    "build": "pnpm -w exec vite build --config apps/desktop-ui/vite.config.mts",
+    "preview": "pnpm -w exec vite preview --config apps/desktop-ui/vite.config.mts",
+    "lint": "eslint src --cache",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
     "test:unit": "vitest run --config vitest.config.mts",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
@@ -33,88 +36,5 @@
     "vite-plugin-html": "catalog:",
     "vite-plugin-vue-devtools": "catalog:",
     "vue-tsc": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:desktop",
-      "type:app"
-    ],
-    "targets": {
-      "dev": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite --config vite.config.mts"
-        }
-      },
-      "serve": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite --config vite.config.mts"
-        }
-      },
-      "build": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "dependsOn": [
-          "^build"
-        ],
-        "options": {
-          "command": "vite build --config apps/desktop-ui/vite.config.mts"
-        },
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "preview": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "dependsOn": [
-          "build"
-        ],
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vite preview --config vite.config.mts"
-        }
-      },
-      "storybook": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "storybook dev -p 6007"
-        }
-      },
-      "build-storybook": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "storybook build -o dist/storybook"
-        },
-        "outputs": [
-          "{projectRoot}/dist/storybook"
-        ]
-      },
-      "lint": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "eslint src --cache"
-        }
-      },
-      "typecheck": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/desktop-ui",
-          "command": "vue-tsc --noEmit -p tsconfig.json"
-        }
-      }
-    }
   }
 }

apps/website/package.json

@@ -45,88 +45,5 @@
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:website",
-      "type:app"
-    ],
-    "targets": {
-      "dev": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro dev"
-        }
-      },
-      "serve": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro dev"
-        }
-      },
-      "build": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "dependsOn": [
-          "^build"
-        ],
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro build"
-        },
-        "outputs": [
-          "{projectRoot}/dist"
-        ]
-      },
-      "preview": {
-        "executor": "nx:run-commands",
-        "continuous": true,
-        "dependsOn": [
-          "build"
-        ],
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro preview"
-        }
-      },
-      "typecheck": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "astro check"
-        }
-      },
-      "test:unit": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "vitest run"
-        }
-      },
-      "test:coverage": {
-        "executor": "nx:run-commands",
-        "cache": true,
-        "options": {
-          "cwd": "apps/website",
-          "command": "vitest run --coverage"
-        }
-      },
-      "test:e2e": {
-        "executor": "nx:run-commands",
-        "dependsOn": [
-          "build"
-        ],
-        "options": {
-          "cwd": "apps/website",
-          "command": "playwright test"
-        }
-      }
-    }
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+import type { GalleryItem } from '../gallery/GallerySection.vue'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import GalleryCard from '../gallery/GalleryCard.vue'
+import GalleryDetailModal from '../gallery/GalleryDetailModal.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const modelName = 'Grok'
+const ctaHref = 'https://comfy.org/workflows/model/grok'
+
+const items: GalleryItem[] = [
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/eye.webm',
+    title: 'Until Our Eye Interlink harajuku',
+    userAlias: 'ShaneF Motion Design',
+    teamAlias: 'ThinkDiffusion',
+    tool: 'Grok Imagine',
+    href: 'https://www.thinkdiffusion.com/studio#success-stories-anta'
+  },
+  {
+    image: 'https://media.comfy.org/website/gallery/gallery.webp',
+    title: 'Amber Astronaut',
+    userAlias: 'Yogo',
+    teamAlias: '',
+    tool: 'Grok Imagine',
+    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/cigarette.webm',
+    title: 'Autopoiesis',
+    userAlias: 'Yogo',
+    teamAlias: 'Visual Frisson',
+    tool: 'Grok Imagine',
+    href: 'https://www.instagram.com/visualfrisson/?hl=en'
+  },
+  {
+    video: 'https://media.comfy.org/videos/compressed_512/kyrie.webm',
+    title: 'Origins',
+    userAlias: 'ShaneF Motion Design',
+    teamAlias: 'ThinkDiffusion',
+    tool: 'Grok Imagine',
+    href: 'https://vimeo.com/1021360563'
+  },
+  {
+    image: 'https://media.comfy.org/website/gallery/desert.webp',
+    title: 'Desert Landing',
+    userAlias: 'Yogo',
+    teamAlias: '',
+    tool: 'Grok Imagine',
+    href: 'https://de.linkedin.com/in/milan-kastenmueller-18778a174'
+  }
+]
+
+const modalOpen = ref(false)
+const modalIndex = ref(0)
+
+function openDetail(index: number) {
+  modalIndex.value = index
+  modalOpen.value = true
+}
+
+const title = t('models.list.creations.title', locale).replace(
+  '{name}',
+  modelName
+)
+const ctaLabel = t('models.list.creations.cta', locale)
+</script>
+
+<template>
+  <section
+    data-testid="model-creations"
+    class="flex flex-col items-center px-4 pt-12 pb-20 lg:px-20"
+  >
+    <h2
+      class="text-primary-comfy-canvas max-w-4xl text-center text-3xl font-light tracking-tight lg:text-5xl"
+    >
+      {{ title }}
+    </h2>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-16 px-8 py-4 uppercase"
+    >
+      {{ ctaLabel }}
+    </BrandButton>
+
+    <div class="mt-20 hidden w-full flex-col gap-2 lg:flex">
+      <div class="grid grid-cols-2 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(0, 2)"
+          :key="i"
+          :item
+          :locale
+          @click="openDetail(i)"
+        />
+      </div>
+      <div v-if="items.length > 2" class="grid grid-cols-3 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(2, 5)"
+          :key="i + 2"
+          :item
+          :locale
+          @click="openDetail(i + 2)"
+        />
+      </div>
+    </div>
+
+    <div
+      class="rounded-5xl bg-transparency-white-t4 mt-12 flex w-full flex-col gap-6 p-2 lg:hidden"
+    >
+      <GalleryCard
+        v-for="(item, i) in items"
+        :key="i"
+        :item
+        :locale
+        mobile
+        @click="openDetail(i)"
+      />
+    </div>
+
+    <GalleryDetailModal
+      v-if="modalOpen"
+      :items
+      :initial-index="modalIndex"
+      :locale
+      @close="modalOpen = false"
+    />
+  </section>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const {
+  locale = 'en',
+  modelName,
+  ctaHref,
+  mediaSrc,
+  mediaAlt = ''
+} = defineProps<{
+  locale?: Locale
+  modelName: string
+  ctaHref: string
+  mediaSrc: string
+  mediaAlt?: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col items-center px-6 pt-36 pb-16 text-center">
+    <h1
+      class="text-primary-comfy-canvas max-w-4xl text-4xl font-light tracking-tight lg:text-6xl"
+    >
+      {{ modelName }} in <span class="text-primary-comfy-yellow">ComfyUI</span>
+    </h1>
+    <p
+      class="text-primary-comfy-canvas mt-6 max-w-2xl text-sm text-pretty lg:text-base"
+    >
+      {{ t('hero.subtitle', locale) }}
+    </p>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-10 px-8 py-4 uppercase"
+    >
+      {{ t('models.list.heroCta', locale).replace('{name}', modelName) }}
+    </BrandButton>
+    <div class="mt-16 w-full max-w-5xl">
+      <img
+        :src="mediaSrc"
+        :alt="mediaAlt"
+        class="rounded-4.5xl size-full object-cover"
+      />
+    </div>
+  </section>
+</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/website/src/i18n/translations.ts

@@ -4194,6 +4194,76 @@ const translations = {
     'zh-CN': '支持的模型'
   },
 
+  // Models list page (/models)
+  'models.list.label': { en: 'MODELS', 'zh-CN': '模型' },
+  'models.list.heroCta': {
+    en: 'Try {name} Now',
+    'zh-CN': '立即试用 {name}'
+  },
+  'models.list.creations.title': {
+    en: '{name} Image and Video Creations',
+    'zh-CN': '{name} 图像与视频创作'
+  },
+  'models.list.creations.cta': {
+    en: 'Explore Workflows',
+    'zh-CN': '探索工作流'
+  },
+  'models.list.heroTitle.before': {
+    en: 'Run the world’s leading AI models in',
+    'zh-CN': '在以下平台运行世界领先的 AI 模型'
+  },
+  'models.list.heroSubtitle': {
+    en: 'From open-source diffusion checkpoints to partner APIs — every major model, with community workflow templates ready to run.',
+    'zh-CN':
+      '从开源扩散模型到合作伙伴 API，涵盖每一个主流模型，并附带可直接运行的社区工作流模板。'
+  },
+  'models.list.card.workflows': {
+    en: '{count} workflows',
+    'zh-CN': '{count} 个工作流'
+  },
+  'models.list.contact.label': {
+    en: 'COMFY HUB',
+    'zh-CN': 'COMFY HUB'
+  },
+  'models.showcase.label': { en: 'AI MODELS', 'zh-CN': 'AI 模型' },
+  'models.showcase.heading': {
+    en: 'Run the world’s\nleading AI models',
+    'zh-CN': '运行全球领先的\nAI 模型'
+  },
+  'models.showcase.subtitle': {
+    en: 'New models are added as they launch.',
+    'zh-CN': '新模型发布后会第一时间上线。'
+  },
+  'models.showcase.cta': {
+    en: 'EXPLORE WORKFLOWS',
+    'zh-CN': '探索工作流'
+  },
+  'models.showcase.card.grokImagine': {
+    en: 'Grok Imagine',
+    'zh-CN': 'Grok Imagine'
+  },
+  'models.showcase.card.nanoBananaPro': {
+    en: 'Nano Banana Pro',
+    'zh-CN': 'Nano Banana Pro'
+  },
+  'models.showcase.card.ltx23': {
+    en: 'LTX 2.3',
+    'zh-CN': 'LTX 2.3'
+  },
+  'models.showcase.card.qwenAdvancedEdit': {
+    en: 'Advanced image\nediting with Qwen',
+    'zh-CN': '使用 Qwen 进行\n高级图像编辑'
+  },
+  'models.showcase.card.wan22TextToVideo': {
+    en: 'Wan 2.2\ntext to video',
+    'zh-CN': 'Wan 2.2\n文字转视频'
+  },
+  'models.list.contact.heading': {
+    en: 'Pick a model and explore what the community has built. <a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">Browse Comfy Hub</a> for the newest workflows.',
+    'zh-CN':
+      '选择一个模型，浏览社区的创作成果。<a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">访问 Comfy Hub</a> 查看最新工作流。'
+  },
+
   // Payment status pages
   'payment.success.label': {
     en: 'PAYMENT',

apps/website/src/layouts/BaseLayout.astro

@@ -72,6 +72,9 @@ const websiteJsonLd = {
     <title>{title}</title>
 
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon.png" type="image/png" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="canonical" href={canonicalURL.href} />
     <link rel="preconnect" href="https://www.googletagmanager.com" />
     <link rel="dns-prefetch" href="https://www.googletagmanager.com" />

apps/website/src/pages/models.astro

@@ -0,0 +1,22 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue' 
+---
+
+<BaseLayout
+  title="Models — Comfy"
+  description="Run the world's leading AI models in ComfyUI. Browse every supported model with community workflow templates ready to run."
+>
+  <ModelsHeroSection
+    modelName="Grok Imagine"
+    ctaHref="/p/supported-models/grok-image"
+    mediaSrc="https://media.comfy.org/website/gallery/gallery.webp"
+    mediaAlt="Grok Imagine output created with ComfyUI"
+  />
+  <ModelCreationsSection client:load />
+  <AIModelsSection client:load />
+  <ProductShowcaseSection client:load />
+</BaseLayout>

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

@@ -0,0 +1,23 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../../components/home/ProductShowcaseSection.vue'
+---
+
+<BaseLayout
+  title="模型 — Comfy"
+  description="在 ComfyUI 中运行世界领先的 AI 模型。浏览所有支持的模型及社区工作流模板。"
+>
+  <ModelsHeroSection
+    locale="zh-CN"
+    modelName="Grok Imagine"
+    ctaHref="/zh-CN/p/supported-models/grok-image"
+    mediaSrc="https://media.comfy.org/website/gallery/gallery.webp"
+    mediaAlt="Grok Imagine output created with ComfyUI"
+  />
+  <ModelCreationsSection client:load locale="zh-CN" />
+  <AIModelsSection client:load locale="zh-CN" />
+  <ProductShowcaseSection client:load locale="zh-CN" />
+</BaseLayout>

browser_tests/assets/missing/fe746_load_image_bare_filename.json

@@ -1,42 +0,0 @@
-{
-  "last_node_id": 10,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "LoadImage",
-      "pos": [50, 200],
-      "size": [315, 314],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["fe746_photo.png", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -119,22 +119,9 @@ export class BuilderSelectHelper {
     )[0]
     if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
     await nodeRef.centerOnNode()
-    const node = this.comfyPage.vueNodes.getNodeLocator(String(nodeRef.id))
-    // Grid-mode widgets (WidgetSelectDefault) and number widgets expose
-    // aria-label on a wrapper/input. Asset-mode widgets (WidgetSelectDropdown)
-    // do not — the widget name lives in a sibling
-    // [data-testid="widget-layout-field-label"] div, so fall back to clicking
-    // the dropdown trigger button in the same row.
-    const byAriaLabel = node.getByLabel(widgetName, { exact: true })
-    const widgetLocator =
-      (await byAriaLabel.count()) > 0
-        ? byAriaLabel
-        : node
-            .getByTestId('widget-layout-field-label')
-            .filter({ hasText: widgetName })
-            .locator('..')
-            .locator('button')
-            .first()
+    const widgetLocator = this.comfyPage.vueNodes
+      .getNodeLocator(String(nodeRef.id))
+      .getByLabel(widgetName, { exact: true })
     // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
     await widgetLocator.click({ force: true })
     await this.comfyPage.nextFrame()

browser_tests/fixtures/helpers/WorkflowHelper.ts

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

browser_tests/tests/assetDeleteClearsLoadImage.spec.ts

@@ -2,15 +2,13 @@
  * FE-230: Deleting an asset must clear the Load Image node preview, widget
  * value, and mark the workflow dirty.
  *
- * FE-732: Input-asset deletion is no longer gated on `isCloud`; the same
- * teardown flow now applies to both Cloud and OSS builds. Cloud and OSS
- * variants below cover both Playwright projects against the shared mock.
+ * Local run (requires cloud build of the frontend):
+ *   pnpm build:cloud
+ *   pnpm exec playwright test --project=cloud \
+ *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
  *
- * Local run examples:
- *   pnpm build:cloud && pnpm exec playwright test --project=cloud \
- *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
- *   pnpm build && pnpm exec playwright test --project=chromium \
- *     browser_tests/tests/assetDeleteClearsLoadImage.spec.ts --reporter=list
+ * The cloud project is required because input-asset deletion is gated on
+ * `isCloud === true` (see `useMediaAssetActions.deleteAssetApi`).
  */
 import type { Page, Route } from '@playwright/test'
 import { expect } from '@playwright/test'
@@ -121,88 +119,81 @@ const baseTest = comfyPageFixture.extend<{ assetMock: AssetMockApi }>({
   }
 })
 
-function registerDeleteFlowTest() {
-  baseTest(
-    'deleting an input asset clears widget value, preview cache, and marks workflow modified',
-    async ({ comfyPage, assetMock }) => {
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-
-      // Drive the production drag-and-drop flow to point the Load Image
-      // widget at the asset we are about to delete and populate the preview
-      // cache. FE-230 is asserting that the deletion tears these down.
-      const loadImageNode = (
-        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-      )[0]
-      const { x, y } = await loadImageNode.getPosition()
-      await comfyPage.dragDrop.dragAndDropFile(DROPPED_FILE, {
-        dropPosition: { x, y },
-        waitForUpload: true
-      })
-      const imageWidget = await loadImageNode.getWidget(0)
-      await expect.poll(() => imageWidget.getValue()).toBe(DROPPED_FILE)
-
-      // Re-baseline the change tracker so the deletion-side mutation is the
-      // only thing that can flip `isModified` later.
-      await comfyPage.page.evaluate(() => {
-        const tracker =
-          window.app?.extensionManager?.workflow?.activeWorkflow?.changeTracker
-        tracker?.reset?.()
-      })
-      await expect
-        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-        .toBe(false)
-
-      // Drive the real production flow: assets sidebar → Imported tab →
-      // right-click asset card → Delete → confirm dialog.
-      const sidebar = comfyPage.menu.assetsTab
-      // The default `open()` waits for assets on the Generated tab; we seed
-      // only an input asset, so skip that wait and let `waitForAssets(1)`
-      // gate on the Imported tab instead.
-      await sidebar.open({ waitForAssets: false })
-      await sidebar.switchToImported()
-      await sidebar.waitForAssets(1)
-      await sidebar.rightClickAsset(TARGET_CARD_TEXT)
-
-      const deleteMenuItem = sidebar.contextMenuItem('Delete')
-      await expect(deleteMenuItem).toBeVisible()
-      await deleteMenuItem.click()
-
-      await comfyPage.confirmDialog.click('delete')
-
-      // Mocked DELETE was issued.
-      await expect
-        .poll(() => assetMock.deleteCalls.includes(TARGET_ASSET.id))
-        .toBe(true)
-
-      // Widget value was cleared.
-      await expect.poll(() => imageWidget.getValue()).toBe('')
-
-      // Preview cache was cleared.
-      await expect
-        .poll(() =>
-          comfyPage.page.evaluate((nodeId) => {
-            const node = window.app!.graph.getNodeById(nodeId)
-            return node?.imgs?.length ?? 0
-          }, loadImageNode.id)
-        )
-        .toBe(0)
-
-      // Workflow was marked dirty by changeTracker.captureCanvasState().
-      await expect
-        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
-        .toBe(true)
-    }
-  )
-}
-
 baseTest.describe(
-  'FE-230 asset delete clears Load Image preview (cloud)',
+  'FE-230 asset delete clears Load Image preview',
   { tag: '@cloud' },
-  registerDeleteFlowTest
-)
+  () => {
+    baseTest(
+      'deleting an input asset clears widget value, preview cache, and marks workflow modified',
+      async ({ comfyPage, assetMock }) => {
+        await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
 
-baseTest.describe(
-  'FE-230 asset delete clears Load Image preview (oss)',
-  { tag: '@oss' },
-  registerDeleteFlowTest
+        // Drive the production drag-and-drop flow to point the Load Image
+        // widget at the asset we are about to delete and populate the preview
+        // cache. FE-230 is asserting that the deletion tears these down.
+        const loadImageNode = (
+          await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+        )[0]
+        const { x, y } = await loadImageNode.getPosition()
+        await comfyPage.dragDrop.dragAndDropFile(DROPPED_FILE, {
+          dropPosition: { x, y },
+          waitForUpload: true
+        })
+        const imageWidget = await loadImageNode.getWidget(0)
+        await expect.poll(() => imageWidget.getValue()).toBe(DROPPED_FILE)
+
+        // Re-baseline the change tracker so the deletion-side mutation is the
+        // only thing that can flip `isModified` later.
+        await comfyPage.page.evaluate(() => {
+          const tracker =
+            window.app?.extensionManager?.workflow?.activeWorkflow
+              ?.changeTracker
+          tracker?.reset?.()
+        })
+        await expect
+          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+          .toBe(false)
+
+        // Drive the real production flow: assets sidebar → Imported tab →
+        // right-click asset card → Delete → confirm dialog.
+        const sidebar = comfyPage.menu.assetsTab
+        // The default `open()` waits for assets on the Generated tab; we seed
+        // only an input asset, so skip that wait and let `waitForAssets(1)`
+        // gate on the Imported tab instead.
+        await sidebar.open({ waitForAssets: false })
+        await sidebar.switchToImported()
+        await sidebar.waitForAssets(1)
+        await sidebar.rightClickAsset(TARGET_CARD_TEXT)
+
+        const deleteMenuItem = sidebar.contextMenuItem('Delete')
+        await expect(deleteMenuItem).toBeVisible()
+        await deleteMenuItem.click()
+
+        await comfyPage.confirmDialog.click('delete')
+
+        // Mocked DELETE was issued.
+        await expect
+          .poll(() => assetMock.deleteCalls.includes(TARGET_ASSET.id))
+          .toBe(true)
+
+        // Widget value was cleared.
+        await expect.poll(() => imageWidget.getValue()).toBe('')
+
+        // Preview cache was cleared.
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate((nodeId) => {
+              const node = window.app!.graph.getNodeById(nodeId)
+              return node?.imgs?.length ?? 0
+            }, loadImageNode.id)
+          )
+          .toBe(0)
+
+        // Workflow was marked dirty by changeTracker.captureCanvasState().
+        await expect
+          .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+          .toBe(true)
+      }
+    )
+  }
 )

browser_tests/tests/defaultKeybindings.spec.ts

@@ -27,6 +27,7 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
     const sidebarTabs = [
       { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
       { key: 'KeyN', tabId: 'node-library', label: 'node library' },
+      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
       { key: 'KeyA', tabId: 'assets', label: 'assets' }
     ] as const
 

browser_tests/tests/maskEditor.spec.ts

@@ -218,8 +218,21 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
   }) => {
     const dialog = await maskEditor.openDialog()
 
+    let maskUploadCount = 0
     let imageUploadCount = 0
 
+    await comfyPage.page.route('**/upload/mask', (route) => {
+      maskUploadCount++
+      return route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          name: `test-mask-${maskUploadCount}.png`,
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+      })
+    })
     await comfyPage.page.route('**/upload/image', (route) => {
       imageUploadCount++
       return route.fulfill({
@@ -239,17 +252,20 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
 
     await expect(dialog).toBeHidden()
 
-    // The save pipeline uploads four layers (masked, paint, painted, paintedMasked)
-    // through the unified /upload/image endpoint.
+    // The save pipeline uploads multiple layers (mask + image variants)
     expect(
-      imageUploadCount,
-      'save should upload all four layers via /upload/image'
-    ).toBe(4)
+      maskUploadCount + imageUploadCount,
+      'save should trigger upload calls'
+    ).toBeGreaterThan(0)
   })
 
   test('save failure keeps dialog open', async ({ comfyPage, maskEditor }) => {
     const dialog = await maskEditor.openDialog()
 
+    // Fail all upload routes
+    await comfyPage.page.route('**/upload/mask', (route) =>
+      route.fulfill({ status: 500 })
+    )
     await comfyPage.page.route('**/upload/image', (route) =>
       route.fulfill({ status: 500 })
     )

browser_tests/tests/missingMediaAssetUnion.spec.ts

@@ -1,197 +0,0 @@
-import type { Page } from '@playwright/test'
-import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
-
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
-import type { WorkspaceStore } from '@e2e/types/globals'
-
-// BE-933 / BE-934 add `file_path` (and BE-933 also `display_name`) to the asset
-// wire shape. `@comfyorg/ingest-types` is not yet regenerated from the updated
-// OpenAPI (tracked under BE-932); extend the local type so mocks can carry the
-// post-BE field without an `any` cast.
-type PostBEAsset = Asset & {
-  file_path?: string | null
-  display_name?: string | null
-}
-
-const WORKFLOW_WIDGET_VALUE = 'fe746_photo.png'
-
-async function mockAssetListing(
-  page: Page,
-  assets: PostBEAsset[]
-): Promise<void> {
-  await page.route(/\/api\/assets(?=\?|$)/, async (route) => {
-    const response: ListAssetsResponse = {
-      assets: assets as Asset[],
-      total: assets.length,
-      has_more: false
-    }
-    await route.fulfill({
-      status: 200,
-      contentType: 'application/json',
-      body: JSON.stringify(response)
-    })
-  })
-}
-
-async function mockAssetListingFailure(
-  page: Page,
-  status: number
-): Promise<void> {
-  await page.route(/\/api\/assets(?=\?|$)/, async (route) => {
-    await route.fulfill({
-      status,
-      contentType: 'application/json',
-      body: JSON.stringify({ detail: `forced ${status} for FE-746 test` })
-    })
-  })
-}
-
-async function getCachedMissingMediaNames(
-  comfyPage: ComfyPage
-): Promise<string[] | null> {
-  return await comfyPage.page.evaluate(() => {
-    const workflow = (window.app!.extensionManager as WorkspaceStore).workflow
-      .activeWorkflow
-    if (!workflow) return null
-    return (
-      workflow.pendingWarnings?.missingMediaCandidates?.map(
-        (candidate) => candidate.name
-      ) ?? []
-    )
-  })
-}
-
-test.describe(
-  'Missing media detection — file_path union (FE-746)',
-  { tag: '@cloud' },
-  () => {
-    test.use({
-      initialSettings: {
-        'Comfy.RightSidePanel.ShowErrorsTab': true
-      }
-    })
-
-    test('does not surface missing media when a post-BE asset emits file_path that diverges from the workflow widget value (Case B regression)', async ({
-      comfyPage
-    }) => {
-      // BE-933 / BE-934 post-deploy shape: asset emits a namespace-rooted
-      // file_path that differs from the bare `name` the user originally chose.
-      // The workflow widget value (`fe746_photo.png`) predates the rollout, so
-      // it must still match via the `name` arm of the detection-key union.
-      // Case A (file_path-only early return) would mark this as missing.
-      await mockAssetListing(comfyPage.page, [
-        {
-          id: 'fe746-asset-1',
-          name: WORKFLOW_WIDGET_VALUE,
-          asset_hash: 'blake3:fe7460000000000000000000000000000',
-          file_path: 'input/sub/fe746_photo.png',
-          size: 1024,
-          mime_type: 'image/png',
-          tags: ['input'],
-          created_at: '2026-05-22T00:00:00Z',
-          updated_at: '2026-05-22T00:00:00Z',
-          last_access_time: '2026-05-22T00:00:00Z'
-        }
-      ])
-
-      await comfyPage.workflow.loadWorkflow(
-        'missing/fe746_load_image_bare_filename'
-      )
-
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-      ).toBeHidden()
-      await expect.poll(() => getCachedMissingMediaNames(comfyPage)).toEqual([])
-    })
-
-    test('matches via legacy `name` fallback when the asset has no file_path (BE-933 hash-only registration)', async ({
-      comfyPage
-    }) => {
-      // BE-933 hash-only null case: asset registered via POST /assets/from-hash
-      // has no on-disk path, so `file_path` (and `display_name`) come back null.
-      // Detection must still succeed via the legacy `name` arm.
-      await mockAssetListing(comfyPage.page, [
-        {
-          id: 'fe746-asset-hash-only',
-          name: WORKFLOW_WIDGET_VALUE,
-          asset_hash: 'blake3:fe7460000000000000000000000000001',
-          file_path: null,
-          display_name: null,
-          size: 1024,
-          mime_type: 'image/png',
-          tags: ['input'],
-          created_at: '2026-05-22T00:00:00Z',
-          updated_at: '2026-05-22T00:00:00Z',
-          last_access_time: '2026-05-22T00:00:00Z'
-        }
-      ])
-
-      await comfyPage.workflow.loadWorkflow(
-        'missing/fe746_load_image_bare_filename'
-      )
-
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-      ).toBeHidden()
-      await expect.poll(() => getCachedMissingMediaNames(comfyPage)).toEqual([])
-    })
-
-    test('surfaces missing media when no asset in the listing covers the widget value', async ({
-      comfyPage
-    }) => {
-      // Sanity: with the union still in place, an asset listing that does not
-      // include the widget value via any key (file_path / asset_hash / name)
-      // must still report missing. Guards against accidental "match
-      // everything" regressions when the early-return was removed.
-      await mockAssetListing(comfyPage.page, [
-        {
-          id: 'fe746-unrelated-asset',
-          name: 'unrelated.png',
-          asset_hash: 'blake3:fe7460000000000000000000000000002',
-          file_path: 'input/unrelated.png',
-          size: 1024,
-          mime_type: 'image/png',
-          tags: ['input'],
-          created_at: '2026-05-22T00:00:00Z',
-          updated_at: '2026-05-22T00:00:00Z',
-          last_access_time: '2026-05-22T00:00:00Z'
-        }
-      ])
-
-      await comfyPage.workflow.loadWorkflow(
-        'missing/fe746_load_image_bare_filename'
-      )
-
-      await expect
-        .poll(() => getCachedMissingMediaNames(comfyPage))
-        .toContain(WORKFLOW_WIDGET_VALUE)
-      await expect(
-        comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-      ).toBeVisible()
-    })
-
-    test('soft-degrades when /api/assets fails so verification does not deadlock pending candidates', async ({
-      comfyPage
-    }) => {
-      // Promise.allSettled + per-branch soft-degrade (Finding 2): when the
-      // input-asset oracle fails (pre-BE-786 OSS without /api/assets, partial
-      // BE-934 deploys, transient network errors), the verifier must finish
-      // — marking the candidate missing — rather than leaving isMissing
-      // stuck at undefined behind a silent toast.
-      await mockAssetListingFailure(comfyPage.page, 500)
-
-      await comfyPage.workflow.loadWorkflow(
-        'missing/fe746_load_image_bare_filename'
-      )
-
-      await expect
-        .poll(() => getCachedMissingMediaNames(comfyPage))
-        .toContain(WORKFLOW_WIDGET_VALUE)
-    })
-  }
-)

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -115,5 +115,42 @@ test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
         comfyPage.page.getByTestId(TestIds.dialogs.missingModelRefresh)
       ).toBeVisible()
     })
+
+    test('Should clear resolved missing model when Refresh is clicked', async ({
+      comfyPage
+    }) => {
+      await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_models')
+      await comfyPage.page.route(/\/object_info$/, async (route) => {
+        const response = await route.fetch()
+        const objectInfo = await response.json()
+        const ckptName =
+          objectInfo.CheckpointLoaderSimple.input.required.ckpt_name
+        ckptName[0] = [...ckptName[0], 'fake_model.safetensors']
+        await route.fulfill({ response, json: objectInfo })
+      })
+
+      const objectInfoResponse = comfyPage.page.waitForResponse((response) => {
+        const url = new URL(response.url())
+        return url.pathname.endsWith('/object_info') && response.ok()
+      })
+      const modelFoldersResponse = comfyPage.page.waitForResponse(
+        (response) => {
+          const url = new URL(response.url())
+          return url.pathname.endsWith('/experiment/models') && response.ok()
+        }
+      )
+      const refreshButton = comfyPage.page.getByTestId(
+        TestIds.dialogs.missingModelRefresh
+      )
+
+      await Promise.all([
+        objectInfoResponse,
+        modelFoldersResponse,
+        refreshButton.click()
+      ])
+      await expect(
+        comfyPage.page.getByTestId(TestIds.dialogs.missingModelsGroup)
+      ).toBeHidden()
+    })
   })
 })

browser_tests/tests/sidebar/assets-filter.spec.ts

@@ -8,14 +8,13 @@ import type {
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { createMixedMediaJobs } from '@e2e/fixtures/helpers/AssetsHelper'
 
-// Post-FE-732 the media-type filter menu renders unconditionally on both
-// Cloud and OSS builds. These tests keep the `@cloud` tag because the
-// `/api/jobs` dependency is still cloud-only; once OSS exposes equivalent
-// jobs data we can drop the tag. Auto fixtures register `/api/assets` and
-// `/api/jobs` route handlers — Playwright runs auto fixtures before the
-// `comfyPage` fixture's internal `setup()`, so the page first-loads with
-// mocks already in place. See cloud-asset-default.spec.ts for the same
-// pattern.
+// The assets sidebar's media-type filter menu only renders in cloud mode
+// (`MediaAssetFilterBar.vue` gates `MediaAssetFilterButton` behind `isCloud`).
+// We tag tests `@cloud` so they run against the cloud Playwright project,
+// and register both `/api/assets` and `/api/jobs` route handlers as auto
+// fixtures — Playwright runs auto fixtures before the `comfyPage` fixture's
+// internal `setup()`, so the page first-loads with mocks already in place.
+// See cloud-asset-default.spec.ts for the same pattern.
 
 const MIXED_JOBS = createMixedMediaJobs(['images', 'video', 'audio', '3D'])
 

browser_tests/tests/sidebar/assets-sort.spec.ts

@@ -8,14 +8,13 @@ import type {
 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
 import { createJobsWithExecutionTimes } from '@e2e/fixtures/helpers/AssetsHelper'
 
-// Post-FE-732 the sort options inside the settings popover render
-// unconditionally on both Cloud and OSS builds. These tests keep the
-// `@cloud` tag because the `/api/jobs` dependency (used by the generation-
-// time sort) is still cloud-only; once OSS exposes equivalent jobs data we
-// can drop the tag. Auto fixtures register `/api/assets`, `/api/jobs`, and
-// `/internal/files/input` route handlers — Playwright runs auto fixtures
-// before the `comfyPage` fixture's internal `setup()`, so the page first-
-// loads with mocks already in place.
+// The assets sidebar's sort options live inside the settings popover and are
+// only rendered in cloud mode (`MediaAssetFilterBar.vue`:
+// `:show-sort-options="isCloud"`). We tag tests `@cloud` so they run against
+// the cloud Playwright project, and register `/api/assets`, `/api/jobs`, and
+// `/internal/files/input` route handlers as auto fixtures — Playwright runs
+// auto fixtures before the `comfyPage` fixture's internal `setup()`, so the
+// page first-loads with mocks already in place.
 
 // Three jobs whose `(create_time, duration)` axes are intentionally
 // misaligned so newest/oldest and longest/fastest sorts produce *different*

browser_tests/tests/sidebar/modelLibrary.spec.ts

@@ -0,0 +1,236 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+const MOCK_FOLDERS: Record<string, string[]> = {
+  checkpoints: [
+    'sd_xl_base_1.0.safetensors',
+    'dreamshaper_8.safetensors',
+    'realisticVision_v51.safetensors'
+  ],
+  loras: ['detail_tweaker_xl.safetensors', 'add_brightness.safetensors'],
+  vae: ['sdxl_vae.safetensors']
+}
+
+// ==========================================================================
+// 1. Tab open/close
+// ==========================================================================
+
+test.describe('Model library sidebar - tab', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Opens model library tab and shows tree', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.modelTree).toBeVisible()
+    await expect(tab.searchInput).toBeVisible()
+  })
+
+  test('Shows refresh and load all folders buttons', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.refreshButton).toBeVisible()
+    await expect(tab.loadAllFoldersButton).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 2. Folder display
+// ==========================================================================
+
+test.describe('Model library sidebar - folders', () => {
+  // Mocks are set up before setup(), so app.ts's loadModelFolders()
+  // call during initialization hits the mock and populates the store.
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Displays model folders after opening tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+    await expect(tab.getFolderByLabel('vae')).toBeVisible()
+  })
+
+  test('Expanding a folder loads and shows models', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Click the folder to expand it
+    await tab.getFolderByLabel('checkpoints').click()
+
+    // Models should appear as leaf nodes
+    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+    await expect(tab.getLeafByLabel('realisticVision_v51')).toBeVisible()
+  })
+
+  test('Expanding a different folder shows its models', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.getFolderByLabel('loras').click()
+
+    await expect(tab.getLeafByLabel('detail_tweaker_xl')).toBeVisible()
+    await expect(tab.getLeafByLabel('add_brightness')).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 3. Search
+// ==========================================================================
+
+test.describe('Model library sidebar - search', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Search filters models by filename', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.searchInput.fill('dreamshaper')
+
+    // Wait for debounce (300ms) + load + render
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+
+    // Other models should not be visible
+    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeHidden()
+  })
+
+  test('Clearing search restores folder view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await tab.searchInput.fill('dreamshaper')
+    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
+
+    // Clear the search
+    await tab.searchInput.fill('')
+
+    // Folders should be visible again (collapsed)
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+  })
+
+  test('Search with no matches shows empty tree', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Expand a folder and verify models are present before searching
+    await tab.getFolderByLabel('checkpoints').click()
+    await expect(tab.leafNodes).not.toHaveCount(0)
+
+    await tab.searchInput.fill('nonexistent_model_xyz')
+
+    // Wait for debounce, then verify no leaf nodes
+    await expect.poll(() => tab.leafNodes.count()).toBe(0)
+  })
+})
+
+// ==========================================================================
+// 4. Refresh and load all
+// ==========================================================================
+
+test.describe('Model library sidebar - refresh', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Refresh button reloads folder list', async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles({
+      checkpoints: ['model_a.safetensors']
+    })
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
+
+    // Update mock to include a new folder
+    await comfyPage.modelLibrary.clearMocks()
+    await comfyPage.modelLibrary.mockFoldersWithFiles({
+      checkpoints: ['model_a.safetensors'],
+      loras: ['lora_b.safetensors']
+    })
+
+    // Wait for the refresh request to complete
+    const refreshRequest = comfyPage.page.waitForRequest(
+      (req) => req.url().endsWith('/experiment/models'),
+      { timeout: 5000 }
+    )
+    await tab.refreshButton.click()
+    await refreshRequest
+
+    await expect(tab.getFolderByLabel('loras')).toBeVisible()
+  })
+
+  test('Load all folders button triggers loading all model data', async ({
+    comfyPage
+  }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    // Wait for a per-folder model files request triggered by load all
+    const folderRequest = comfyPage.page.waitForRequest(
+      (req) =>
+        /\/api\/experiment\/models\/[^/]+$/.test(req.url()) &&
+        req.method() === 'GET',
+      { timeout: 5000 }
+    )
+
+    await tab.loadAllFoldersButton.click()
+    await folderRequest
+  })
+})
+
+// ==========================================================================
+// 5. Empty state
+// ==========================================================================
+
+test.describe('Model library sidebar - empty state', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.modelLibrary.clearMocks()
+  })
+
+  test('Shows empty tree when no model folders exist', async ({
+    comfyPage
+  }) => {
+    await comfyPage.modelLibrary.mockFoldersWithFiles({})
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.modelLibraryTab
+    await tab.open()
+
+    await expect(tab.modelTree).toBeVisible()
+    await expect(tab.folderNodes).toHaveCount(0)
+    await expect(tab.leafNodes).toHaveCount(0)
+  })
+})

browser_tests/tests/vueNodes/slots.spec.ts

@@ -19,3 +19,19 @@ test('Can display a slot mismatched from widget type', async ({
   await expect(width.locator('path[fill*="INT"]')).toBeVisible()
   await expect(width.locator('path[fill*="FLOAT"]')).toBeVisible()
 })
+
+test('MatchType updates output color @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
+
+  await comfyPage.searchBoxV2.addNode('Load Image')
+  const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+  await comfyPage.searchBoxV2.addNode('Switch', {
+    position: { x: 600, y: 200 }
+  })
+  const switchNode = await comfyPage.vueNodes.getFixtureByTitle('switch')
+
+  await loadImage.getSlot('MASK').dragTo(switchNode.getSlot('on_false'))
+  const slotEl = switchNode.getSlot('output').locator('.slot-dot')
+  await expect.poll(() => slotEl.getAttribute('style')).toContain('MASK')
+})

browser_tests/tests/workflowPersistence.spec.ts

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

docs/adr/0002-monorepo-conversion.md

@@ -4,7 +4,7 @@ Date: 2025-08-25
 
 ## Status
 
-Proposed
+Accepted (Nx tooling choice superseded by [ADR-0010](0010-remove-nx-orchestration.md))
 
 <!-- [Proposed | Accepted | Rejected | Deprecated | Superseded by [ADR-NNNN](NNNN-title.md)] -->
 
@@ -31,6 +31,8 @@ For more information on Monorepos, check out [monorepo.tools](https://monorepo.t
 For monorepo management, I'd probably go with [Nx](https://nx.dev/), but I could be conviced otherwise.
 There's a [whole list here](https://monorepo.tools/#tools-review) if you're interested.
 
+> **Update:** The Nx tooling choice has since been reversed. See [ADR-0010: Remove Nx Orchestration](0010-remove-nx-orchestration.md) for the migration to direct pnpm workspace scripts and native tool CLIs.
+
 ## Consequences
 
 ### Positive

docs/adr/0010-remove-nx-orchestration.md

@@ -0,0 +1,92 @@
+# 10. Remove Nx Orchestration
+
+Date: 2026-05-19
+
+## Status
+
+Accepted
+
+<!-- [Proposed | Accepted | Rejected | Deprecated | Superseded by [ADR-NNNN](NNNN-title.md)] -->
+
+## Context
+
+[ADR-0002](0002-monorepo-conversion.md) adopted [Nx](https://nx.dev/) as a tooling option for managing the
+ComfyUI Frontend monorepo on top of pnpm workspaces. Nx was introduced as task
+orchestration to coordinate builds, tests, lints, and types across the apps and
+packages workspaces.
+
+In practice, Nx provided little value beyond what pnpm workspaces and the
+underlying native tool CLIs (Vite, Vitest, Playwright, ESLint, oxlint, oxfmt,
+TypeScript) already offer:
+
+- pnpm's `--filter` and `--recursive` flags already provide topological,
+  parallel, and selective execution across workspaces.
+- Each underlying tool already has fast, well-supported caching (Vite, Vitest,
+  ESLint, oxlint, TS incremental builds, etc.).
+- Nx added an extra configuration surface (`nx.json`, `.nxignore`, per-package
+  `nx` blocks), an extra cache layer, an extra `node_modules/.cache/nx`
+  artifact, and an extra CI dimension to debug.
+- Contributors and AI agents had to learn the Nx mental model in addition to
+  pnpm and the individual tool CLIs.
+- The Nx daemon and remote-cache features were not in use, so the runtime
+  benefit was limited to local task graph caching, which is largely redundant
+  with the per-tool caches.
+
+The cost (configuration, mental overhead, surprise behavior, occasional
+cache-related failures) exceeded the benefit.
+
+## Decision
+
+Remove Nx from the repository and run monorepo tasks using:
+
+- pnpm workspace scripts (`pnpm -r run <script>`,
+  `pnpm --filter <pkg> run <script>`).
+- Each tool's native CLI (Vite, Vitest, Playwright, ESLint, oxlint, oxfmt,
+  `vue-tsc`, etc.) invoked directly from the relevant workspace.
+
+Concretely, this change:
+
+- Deletes `nx.json` and `.nxignore`.
+- Removes `nx` entries from root and per-package `package.json` files (the
+  `nx` block on each `package.json`, the dev dependency, and Nx-specific
+  scripts).
+- Removes `nx`-related entries from `pnpm-workspace.yaml`'s `allowBuilds`.
+- Rewrites the affected CI workflows (`.github/workflows/ci-tests-e2e.yaml`,
+  `.github/workflows/release-draft-create.yaml`) to call pnpm/native CLIs
+  directly.
+- Updates `AGENTS.md`, `TROUBLESHOOTING.md`, and
+  [ADR-0002](0002-monorepo-conversion.md) to reflect the new tooling story.
+- Cleans up Nx-specific lint/format/ignore rules in `.oxlintrc.json`,
+  `eslint.config.ts`, `vite.config.mts`, and `.gitignore`.
+
+## Consequences
+
+### Positive
+
+- Fewer moving parts: no `nx.json`, no `.nx/` cache, no Nx daemon, no
+  Nx-specific scripts to maintain.
+- Easier onboarding for contributors and AI agents: pnpm + each tool's CLI is
+  the only required knowledge.
+- CI logs and failures are easier to read because tasks run directly under the
+  tool that owns them, instead of being wrapped by Nx.
+- Faster, more predictable cache invalidation behavior — each tool owns its
+  own cache and we no longer hit Nx-cache edge cases.
+- Smaller dependency tree (~2k fewer lines in `pnpm-lock.yaml`).
+
+### Negative
+
+- We lose Nx's unified task graph and project graph commands; coordination
+  across workspaces now relies on pnpm filters and explicit script wiring.
+- We lose Nx's remote/distributed caching as a future option without
+  re-adopting Nx (or a comparable tool like Turborepo).
+- Contributors who already knew Nx workflows need to relearn the equivalent
+  pnpm invocations.
+
+## Notes
+
+- The migration is purely a tooling change; no application behavior, public
+  API, or build output changes.
+- If we later need more sophisticated task orchestration (e.g. distributed
+  remote cache, fine-grained affected-graph queries), revisit this decision and
+  evaluate Nx, Turborepo, or Moon at that time, with concrete CI/perf data to
+  justify the additional complexity.

docs/adr/README.md

@@ -8,16 +8,18 @@ An Architecture Decision Record captures an important architectural decision mad
 
 ## ADR Index
 
-| ADR                                                      | Title                                    | Status   | Date       |
-| -------------------------------------------------------- | ---------------------------------------- | -------- | ---------- |
-| [0001](0001-merge-litegraph-into-frontend.md)            | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
-| [0002](0002-monorepo-conversion.md)                      | Restructure as a Monorepo                | Accepted | 2025-08-25 |
-| [0003](0003-crdt-based-layout-system.md)                 | Centralized Layout Management with CRDT  | Proposed | 2025-08-27 |
-| [0004](0004-fork-primevue-ui-library.md)                 | Fork PrimeVue UI Library                 | Rejected | 2025-08-27 |
-| [0005](0005-remove-importmap-for-vue-extensions.md)      | Remove Import Map for Vue Extensions     | Accepted | 2025-12-13 |
-| [0006](0006-primitive-node-copy-paste-lifecycle.md)      | PrimitiveNode Copy/Paste Lifecycle       | Proposed | 2026-02-22 |
-| [0007](0007-node-execution-output-passthrough-schema.md) | NodeExecutionOutput Passthrough Schema   | Accepted | 2026-03-11 |
-| [0008](0008-entity-component-system.md)                  | Entity Component System                  | Proposed | 2026-03-23 |
+| ADR                                                         | Title                                       | Status   | Date       |
+| ----------------------------------------------------------- | ------------------------------------------- | -------- | ---------- |
+| [0001](0001-merge-litegraph-into-frontend.md)               | Merge LiteGraph.js into ComfyUI Frontend    | Accepted | 2025-08-05 |
+| [0002](0002-monorepo-conversion.md)                         | Restructure as a Monorepo                   | Accepted | 2025-08-25 |
+| [0003](0003-crdt-based-layout-system.md)                    | Centralized Layout Management with CRDT     | Proposed | 2025-08-27 |
+| [0004](0004-fork-primevue-ui-library.md)                    | Fork PrimeVue UI Library                    | Rejected | 2025-08-27 |
+| [0005](0005-remove-importmap-for-vue-extensions.md)         | Remove Import Map for Vue Extensions        | Accepted | 2025-12-13 |
+| [0006](0006-primitive-node-copy-paste-lifecycle.md)         | PrimitiveNode Copy/Paste Lifecycle          | Proposed | 2026-02-22 |
+| [0007](0007-node-execution-output-passthrough-schema.md)    | NodeExecutionOutput Passthrough Schema      | Accepted | 2026-03-11 |
+| [0008](0008-entity-component-system.md)                     | Entity Component System                     | Proposed | 2026-03-23 |
+| [0009](0009-subgraph-promoted-widgets-use-linked-inputs.md) | Subgraph Promoted Widgets Use Linked Inputs | Proposed | 2026-05-05 |
+| [0010](0010-remove-nx-orchestration.md)                     | Remove Nx Orchestration                     | Accepted | 2026-05-19 |
 
 ## Creating a New ADR
 

eslint.config.ts

@@ -76,7 +76,6 @@ export default defineConfig([
   {
     ignores: [
       '.i18nrc.cjs',
-      '.nx/*',
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*',
       'components.d.ts',

nx.json

@@ -1,41 +0,0 @@
-{
-  "$schema": "./node_modules/nx/schemas/nx-schema.json",
-  "plugins": [
-    {
-      "plugin": "@nx/eslint/plugin",
-      "options": {
-        "targetName": "lint"
-      }
-    },
-    {
-      "plugin": "@nx/storybook/plugin",
-      "options": {
-        "serveStorybookTargetName": "storybook",
-        "buildStorybookTargetName": "build-storybook",
-        "testStorybookTargetName": "test-storybook",
-        "staticStorybookTargetName": "static-storybook"
-      }
-    },
-    {
-      "plugin": "@nx/vite/plugin",
-      "options": {
-        "buildTargetName": "build",
-        "testTargetName": "test",
-        "serveTargetName": "serve",
-        "devTargetName": "dev",
-        "previewTargetName": "preview",
-        "serveStaticTargetName": "serve-static",
-        "typecheckTargetName": "typecheck",
-        "buildDepsTargetName": "build-deps",
-        "watchDepsTargetName": "watch-deps"
-      }
-    },
-    {
-      "plugin": "@nx/playwright/plugin",
-      "options": {
-        "targetName": "e2e"
-      }
-    }
-  ],
-  "analytics": false
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.45.12",
+  "version": "1.45.13",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -8,20 +8,22 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
-    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
-    "build:desktop": "nx build @comfyorg/desktop-ui",
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.config.mts",
+    "build:desktop": "pnpm --filter @comfyorg/desktop-ui run build",
     "build-storybook": "storybook build",
-    "build:types": "cross-env NODE_OPTIONS='--max-old-space-size=8192' nx build --config vite.types.config.mts && node scripts/prepare-types.js",
+    "build:types": "cross-env NODE_OPTIONS='--max-old-space-size=8192' vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "build:analyze": "cross-env ANALYZE_BUNDLE=true pnpm build",
-    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && nx build",
+    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' pnpm typecheck && vite build --config vite.config.mts",
+    "clean": "pnpm dlx rimraf dist dist-ssr coverage playwright-report blob-report test-results node_modules/.vite apps/desktop-ui/dist apps/website/dist",
+    "clean:all": "pnpm clean && pnpm dlx rimraf node_modules",
     "size:collect": "node scripts/size-collect.js",
     "size:report": "node scripts/size-report.js",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
-    "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
-    "dev:desktop": "nx dev @comfyorg/desktop-ui",
-    "dev:electron": "cross-env DISTRIBUTION=desktop nx serve --config vite.electron.config.mts",
-    "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
-    "dev": "nx serve",
+    "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' vite --config vite.config.mts",
+    "dev:desktop": "pnpm --filter @comfyorg/desktop-ui run dev",
+    "dev:electron": "cross-env DISTRIBUTION=desktop vite --config vite.electron.config.mts",
+    "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true vite --config vite.config.mts",
+    "dev": "vite --config vite.config.mts",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check": "oxfmt --check",
     "format": "oxfmt --write",
@@ -34,26 +36,25 @@
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
     "lint": "pnpm stylelint && oxlint src browser_tests --type-aware && eslint src --cache",
-    "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
+    "lint:desktop": "pnpm --filter @comfyorg/desktop-ui run lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src browser_tests --type-aware",
     "prepare": "pnpm exec husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
-    "preview": "nx preview",
-    "storybook": "nx storybook",
-    "storybook:desktop": "nx run @comfyorg/desktop-ui:storybook",
+    "preview": "vite preview --config vite.config.mts",
+    "storybook": "storybook dev -p 6006",
+    "storybook:desktop": "pnpm --filter @comfyorg/desktop-ui run storybook",
     "stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
-    "test:browser": "pnpm exec nx e2e",
+    "test:browser": "pnpm exec playwright test",
     "test:browser:coverage": "cross-env COLLECT_COVERAGE=true pnpm test:browser",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
     "test:coverage": "vitest run --coverage",
-    "test:unit": "nx run test",
+    "test:unit": "vitest run",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",
-    "typecheck:desktop": "nx run @comfyorg/desktop-ui:typecheck",
-    "typecheck:website": "nx run @comfyorg/website:typecheck",
-    "zipdist": "node scripts/zipdist.js",
-    "clean": "nx reset"
+    "typecheck:desktop": "pnpm --filter @comfyorg/desktop-ui run typecheck",
+    "typecheck:website": "pnpm --filter @comfyorg/website run typecheck",
+    "zipdist": "node scripts/zipdist.js"
   },
   "dependencies": {
     "@alloc/quick-lru": "catalog:",
@@ -131,10 +132,6 @@
     "@eslint/js": "catalog:",
     "@intlify/eslint-plugin-vue-i18n": "catalog:",
     "@lobehub/i18n-cli": "catalog:",
-    "@nx/eslint": "catalog:",
-    "@nx/playwright": "catalog:",
-    "@nx/storybook": "catalog:",
-    "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
     "@sentry/vite-plugin": "catalog:",
@@ -180,7 +177,6 @@
     "markdown-table": "catalog:",
     "mixpanel-browser": "catalog:",
     "monocart-coverage-reports": "catalog:",
-    "nx": "catalog:",
     "oxfmt": "catalog:",
     "oxlint": "catalog:",
     "oxlint-tsgolint": "catalog:",

packages/design-system/package.json

@@ -19,11 +19,5 @@
   "devDependencies": {
     "tailwindcss": "catalog:",
     "typescript": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:design"
-    ]
   }
 }

packages/ingest-types/package.json

@@ -15,11 +15,5 @@
   },
   "devDependencies": {
     "@hey-api/openapi-ts": "0.93.0"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:types"
-    ]
   }
 }

packages/object-info-parser/package.json

@@ -20,11 +20,5 @@
   "devDependencies": {
     "typescript": "catalog:",
     "vitest": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:util"
-    ]
   }
 }

packages/registry-types/package.json

@@ -5,11 +5,5 @@
   "type": "module",
   "exports": {
     ".": "./src/comfyRegistryTypes.ts"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:types"
-    ]
   }
 }

packages/tailwind-utils/package.json

@@ -17,11 +17,5 @@
   },
   "devDependencies": {
     "typescript": "catalog:"
-  },
-  "nx": {
-    "tags": [
-      "scope:shared",
-      "type:util"
-    ]
   }
 }

pnpm-workspace.yaml

@@ -21,10 +21,6 @@ catalog:
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.6.1
-  '@nx/playwright': 22.6.1
-  '@nx/storybook': 22.6.1
-  '@nx/vite': 22.6.1
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -102,7 +98,6 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   monocart-coverage-reports: ^2.12.9
-  nx: 22.6.1
   oxfmt: ^0.44.0
   oxlint: ^1.59.0
   oxlint-tsgolint: ^0.20.0
@@ -155,7 +150,6 @@ allowBuilds:
   '@tailwindcss/oxide': true
   core-js: false
   esbuild: true
-  nx: true
   oxc-resolver: true
   protobufjs: false
   sharp: false

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -744,10 +744,6 @@ const sortOptions = computed(() => [
     value: 'popular'
   },
   { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
-  {
-    name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Usage (Low to High)'),
-    value: 'vram-low-to-high'
-  },
   {
     name: t(
       'templateWorkflows.sort.modelSizeLowToHigh',

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

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

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

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

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -141,6 +141,7 @@
           <template v-if="isCompact">
             <!-- Compact mode: Icon only -->
             <Button
+              v-if="shouldShowDeleteButton"
               size="icon"
               data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
@@ -158,6 +159,7 @@
           <template v-else>
             <!-- Normal mode: Icon + Text -->
             <Button
+              v-if="shouldShowDeleteButton"
               variant="secondary"
               data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
@@ -188,6 +190,7 @@
     :asset="contextMenuAsset"
     :asset-type="contextMenuAssetType"
     :file-kind="contextMenuFileKind"
+    :show-delete-button="shouldShowDeleteButton"
     :selected-assets="selectedAssets"
     :is-bulk-mode="isBulkMode"
     @zoom="handleZoomClick(contextMenuAsset)"
@@ -246,6 +249,7 @@ import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
 import { getAssetUrl } from '@/platform/assets/utils/assetUrlUtil'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
 import {
@@ -277,6 +281,13 @@ const isListView = computed(() => viewMode.value === 'list')
 const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
 const contextMenuAsset = ref<AssetItem | null>(null)
 
+// Determine if delete button should be shown
+// Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
+const shouldShowDeleteButton = computed(() => {
+  if (activeTab.value === 'input' && !isCloud) return false
+  return true
+})
+
 const contextMenuAssetType = computed(() =>
   contextMenuAsset.value ? getAssetType(contextMenuAsset.value.tags) : 'input'
 )

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts

@@ -3,10 +3,20 @@ import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import { render, screen } from '@testing-library/vue'
+import { fireEvent, render, screen } from '@testing-library/vue'
 
 import NodeLibrarySidebarTabV2 from './NodeLibrarySidebarTabV2.vue'
 
+const hoisted = vi.hoisted(() => ({
+  mockSearchNode: vi.fn<(query: string) => unknown[]>(() => [])
+}))
+
+vi.mock('@/services/nodeSearchService', () => ({
+  NodeSearchService: class {
+    searchNode = hoisted.mockSearchNode
+  }
+}))
+
 vi.mock('@vueuse/core', async () => {
   const actual = await vi.importActual('@vueuse/core')
   return {
@@ -72,8 +82,10 @@ vi.mock('./nodeLibrary/NodeDragPreview.vue', () => ({
 vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
   default: {
     name: 'SearchBox',
-    template: '<input data-testid="search-box" />',
+    template:
+      '<input data-testid="search-box" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
     props: ['modelValue', 'placeholder'],
+    emits: ['update:modelValue', 'search'],
     setup() {
       return { focus: vi.fn() }
     },
@@ -84,12 +96,22 @@ vi.mock('@/components/ui/search-input/SearchInput.vue', () => ({
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: {} }
+  messages: {
+    en: {
+      sideToolbar: {
+        nodeLibraryTab: {
+          noMatchingNodes: 'No nodes match "{query}"'
+        }
+      }
+    }
+  }
 })
 
 describe('NodeLibrarySidebarTabV2', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    hoisted.mockSearchNode.mockReset()
+    hoisted.mockSearchNode.mockReturnValue([])
   })
 
   function renderComponent() {
@@ -123,4 +145,49 @@ describe('NodeLibrarySidebarTabV2', () => {
     expect(screen.queryByTestId('all-panel')).not.toBeInTheDocument()
     expect(screen.queryByTestId('blueprints-panel')).not.toBeInTheDocument()
   })
+
+  describe('search empty state', () => {
+    it('does not render the empty state when search query is empty', () => {
+      renderComponent()
+
+      expect(screen.queryByText(/No nodes match/)).not.toBeInTheDocument()
+      expect(screen.getByTestId('essential-panel')).toBeInTheDocument()
+    })
+
+    it('renders the empty state with the query when search has no matches', async () => {
+      hoisted.mockSearchNode.mockReturnValue([])
+      renderComponent()
+
+      await fireEvent.update(screen.getByTestId('search-box'), 'gibberish')
+
+      expect(screen.getByText('No nodes match "gibberish"')).toBeInTheDocument()
+      expect(screen.queryByTestId('essential-panel')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('all-panel')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('blueprints-panel')).not.toBeInTheDocument()
+    })
+
+    it('hides the empty state when the search has matches', async () => {
+      hoisted.mockSearchNode.mockReturnValue([{ name: 'KSampler' }])
+      renderComponent()
+
+      await fireEvent.update(screen.getByTestId('search-box'), 'ksampler')
+
+      expect(screen.queryByText(/No nodes match/)).not.toBeInTheDocument()
+      expect(screen.getByTestId('essential-panel')).toBeInTheDocument()
+    })
+
+    it('hides the empty state once the query is cleared', async () => {
+      hoisted.mockSearchNode.mockReturnValue([])
+      renderComponent()
+
+      const input = screen.getByTestId('search-box')
+      await fireEvent.update(input, 'gibberish')
+      expect(screen.getByText('No nodes match "gibberish"')).toBeInTheDocument()
+
+      await fireEvent.update(input, '')
+
+      expect(screen.queryByText(/No nodes match/)).not.toBeInTheDocument()
+      expect(screen.getByTestId('essential-panel')).toBeInTheDocument()
+    })
+  })
 })

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -117,7 +117,17 @@
     <template #body>
       <NodeDragPreview />
       <div class="flex h-full flex-col">
-        <div class="min-h-0 flex-1 overflow-y-auto py-2">
+        <div
+          v-if="hasNoMatches"
+          class="flex min-h-0 flex-1 items-center justify-center px-6 py-8 text-center text-sm text-muted-foreground"
+        >
+          {{
+            $t('sideToolbar.nodeLibraryTab.noMatchingNodes', {
+              query: searchQuery
+            })
+          }}
+        </div>
+        <div v-else class="min-h-0 flex-1 overflow-y-auto py-2">
           <TabPanel
             v-if="flags.nodeLibraryEssentialsEnabled"
             :model-value="selectedTab"
@@ -274,9 +284,13 @@ const filteredNodeDefs = computed(() => {
 })
 
 const activeNodes = computed(() =>
-  filteredNodeDefs.value.length > 0
-    ? filteredNodeDefs.value
-    : nodeDefStore.visibleNodeDefs
+  searchQuery.value.length === 0
+    ? nodeDefStore.visibleNodeDefs
+    : filteredNodeDefs.value
+)
+
+const hasNoMatches = computed(
+  () => searchQuery.value.length > 0 && filteredNodeDefs.value.length === 0
 )
 
 const sections = computed(() => {

src/components/ui/select/SelectDropdown.stories.ts

@@ -53,7 +53,6 @@ const sortOptions: SelectOption[] = [
   { name: 'Recommended', value: 'recommended' },
   { name: 'Popular', value: 'popular' },
   { name: 'Newest', value: 'newest' },
-  { name: 'VRAM Usage (Low to High)', value: 'vram-low-to-high' },
   { name: 'Model Size (Low to High)', value: 'model-size-low-to-high' },
   { name: 'Alphabetical (A-Z)', value: 'alphabetical' }
 ]

src/composables/graph/useErrorClearingHooks.test.ts

@@ -989,8 +989,12 @@ describe('scan skips interior of bypassed subgraph containers', () => {
       expect.any(Function),
       expect.any(Function)
     )
-    expect(mediaScanSpy).toHaveBeenCalledWith(rootGraph, leafNode)
-    expect(mediaScanSpy).not.toHaveBeenCalledWith(rootGraph, innerSubgraphNode)
+    expect(mediaScanSpy).toHaveBeenCalledWith(rootGraph, leafNode, false)
+    expect(mediaScanSpy).not.toHaveBeenCalledWith(
+      rootGraph,
+      innerSubgraphNode,
+      false
+    )
   })
 })
 

src/composables/graph/useErrorClearingHooks.ts

@@ -246,7 +246,7 @@ function scanSingleNodeMedia(node: LGraphNode): void {
   if (!app.rootGraph) return
   if (!getActiveExecutionId(node)) return
 
-  const mediaCandidates = scanNodeMediaCandidates(app.rootGraph, node)
+  const mediaCandidates = scanNodeMediaCandidates(app.rootGraph, node, isCloud)
   const confirmedMedia = mediaCandidates.filter((c) => c.isMissing === true)
   if (confirmedMedia.length) {
     useMissingMediaStore().addMissingMedia(confirmedMedia)
@@ -302,7 +302,7 @@ async function verifyAndAddPendingMedia(
 ): Promise<void> {
   const rootGraphAtScan = app.rootGraph
   try {
-    await verifyMediaCandidates(pending, { allowCompactSuffix: isCloud })
+    await verifyMediaCandidates(pending, { isCloud })
     if (app.rootGraph !== rootGraphAtScan) return
     const verified = pending.filter(
       (c) => c.isMissing === true && isCandidateStillActive(c.nodeId)

src/composables/maskeditor/useMaskEditorSaver.ts

@@ -1,5 +1,3 @@
-import type { UploadImageResponse } from '@comfyorg/ingest-types'
-
 import { useMaskEditorDataStore } from '@/stores/maskEditorDataStore'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
@@ -8,6 +6,7 @@ import type {
   EditorOutputLayer,
   ImageRef
 } from '@/stores/maskEditorDataStore'
+import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
@@ -210,11 +209,18 @@ export function useMaskEditorSaver() {
   }
 
   async function uploadAllLayers(outputData: EditorOutputData): Promise<void> {
-    const actualMaskedRef = await uploadLayer(outputData.maskedImage)
-    const actualPaintRef = await uploadLayer(outputData.paintLayer)
-    const actualPaintedRef = await uploadLayer(outputData.paintedImage)
-    const actualPaintedMaskedRef = await uploadLayer(
-      outputData.paintedMaskedImage
+    const sourceRef = dataStore.inputData!.sourceRef
+
+    const actualMaskedRef = await uploadMask(outputData.maskedImage, sourceRef)
+    const actualPaintRef = await uploadImage(outputData.paintLayer, sourceRef)
+    const actualPaintedRef = await uploadImage(
+      outputData.paintedImage,
+      sourceRef
+    )
+
+    const actualPaintedMaskedRef = await uploadMask(
+      outputData.paintedMaskedImage,
+      actualPaintedRef
     )
 
     outputData.maskedImage.ref = actualMaskedRef
@@ -223,10 +229,50 @@ export function useMaskEditorSaver() {
     outputData.paintedMaskedImage.ref = actualPaintedMaskedRef
   }
 
-  async function uploadLayer(layer: EditorOutputLayer): Promise<ImageRef> {
+  async function uploadMask(
+    layer: EditorOutputLayer,
+    originalRef: ImageRef
+  ): Promise<ImageRef> {
     const formData = new FormData()
     formData.append('image', layer.blob, layer.ref.filename)
+    formData.append('original_ref', JSON.stringify(originalRef))
     formData.append('type', 'input')
+    formData.append('subfolder', 'clipspace')
+
+    const response = await api.fetchApi('/upload/mask', {
+      method: 'POST',
+      body: formData
+    })
+
+    if (!response.ok) {
+      throw new Error(`Failed to upload mask: ${layer.ref.filename}`)
+    }
+
+    try {
+      const data = await response.json()
+      if (data?.name) {
+        return {
+          filename: data.name,
+          subfolder: data.subfolder || layer.ref.subfolder,
+          type: data.type || layer.ref.type
+        }
+      }
+    } catch (error) {
+      console.warn('[MaskEditorSaver] Failed to parse upload response:', error)
+    }
+
+    return layer.ref
+  }
+
+  async function uploadImage(
+    layer: EditorOutputLayer,
+    originalRef: ImageRef
+  ): Promise<ImageRef> {
+    const formData = new FormData()
+    formData.append('image', layer.blob, layer.ref.filename)
+    formData.append('original_ref', JSON.stringify(originalRef))
+    formData.append('type', 'input')
+    formData.append('subfolder', 'clipspace')
 
     const response = await api.fetchApi('/upload/image', {
       method: 'POST',
@@ -234,31 +280,23 @@ export function useMaskEditorSaver() {
     })
 
     if (!response.ok) {
-      throw new Error(`Failed to upload: ${layer.ref.filename}`)
+      throw new Error(`Failed to upload image: ${layer.ref.filename}`)
     }
 
-    let data: UploadImageResponse
     try {
-      data = await response.json()
+      const data = await response.json()
+      if (data?.name) {
+        return {
+          filename: data.name,
+          subfolder: data.subfolder || layer.ref.subfolder,
+          type: data.type || layer.ref.type
+        }
+      }
     } catch (error) {
-      throw new Error(
-        `Invalid upload response for ${layer.ref.filename}: ${
-          error instanceof Error ? error.message : String(error)
-        }`
-      )
+      console.warn('[MaskEditorSaver] Failed to parse upload response:', error)
     }
 
-    if (!data?.name) {
-      throw new Error(
-        `Upload response missing 'name' for ${layer.ref.filename}`
-      )
-    }
-
-    return {
-      filename: data.name,
-      subfolder: data.subfolder || '',
-      type: data.type || 'input'
-    }
+    return layer.ref
   }
 
   async function updateNodePreview(
@@ -284,8 +322,19 @@ export function useMaskEditorSaver() {
 
     const imageWidget = node.widgets?.find((w) => w.name === 'image')
     if (imageWidget) {
-      const widgetValue =
-        mainRef.filename + (mainRef.type ? ` [${mainRef.type}]` : '')
+      // Widget value format differs between Cloud and OSS:
+      // - Cloud: JUST the filename (subfolder handled by backend)
+      // - OSS: subfolder/filename (traditional format)
+      let widgetValue: string
+      if (isCloud) {
+        widgetValue =
+          mainRef.filename + (mainRef.type ? ` [${mainRef.type}]` : '')
+      } else {
+        widgetValue =
+          (mainRef.subfolder ? mainRef.subfolder + '/' : '') +
+          mainRef.filename +
+          (mainRef.type ? ` [${mainRef.type}]` : '')
+      }
 
       imageWidget.value = widgetValue
 

src/composables/painter/usePainter.test.ts

@@ -384,63 +384,7 @@ describe('usePainter', () => {
         '/upload/image',
         expect.objectContaining({ method: 'POST' })
       )
-      expect(result).toBe('uploaded.png [input]')
-
-      const [, init] = fetchApiMock.mock.calls[0]
-      const body = init?.body as FormData
-      expect(body).toBeInstanceOf(FormData)
-      expect(body.get('type')).toBe('input')
-      expect(body.get('subfolder')).toBeNull()
-    })
-
-    it('throws when the upload response is missing a name', async () => {
-      const maskWidget = makeWidget('mask', '')
-      mockWidgets.push(maskWidget)
-
-      vi.mocked(api.fetchApi).mockResolvedValueOnce({
-        status: 200,
-        json: async () => ({})
-      } as Response)
-
-      const fakeCanvas = {
-        width: 4,
-        height: 4,
-        toBlob: (cb: BlobCallback) => cb(new Blob(['x']))
-      } as unknown as HTMLCanvasElement
-
-      const { canvasEl } = mountPainter('test-node', '')
-      canvasEl.value = fakeCanvas
-      await nextTick()
-
-      await expect(
-        maskWidget.serializeValue!({} as LGraphNode, 0)
-      ).rejects.toThrow(/painter\.uploadError/)
-    })
-
-    it('throws when the upload response body is not valid JSON', async () => {
-      const maskWidget = makeWidget('mask', '')
-      mockWidgets.push(maskWidget)
-
-      vi.mocked(api.fetchApi).mockResolvedValueOnce({
-        status: 200,
-        json: async () => {
-          throw new SyntaxError('Unexpected token')
-        }
-      } as unknown as Response)
-
-      const fakeCanvas = {
-        width: 4,
-        height: 4,
-        toBlob: (cb: BlobCallback) => cb(new Blob(['x']))
-      } as unknown as HTMLCanvasElement
-
-      const { canvasEl } = mountPainter('test-node', '')
-      canvasEl.value = fakeCanvas
-      await nextTick()
-
-      await expect(
-        maskWidget.serializeValue!({} as LGraphNode, 0)
-      ).rejects.toThrow(/painter\.uploadError/)
+      expect(result).toBe('painter/uploaded.png [temp]')
     })
 
     it('returns existing modelValue when canvas element is unmounted at serialize time', async () => {

src/composables/painter/usePainter.ts

@@ -1,4 +1,3 @@
-import type { UploadImageResponse } from '@comfyorg/ingest-types'
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useElementSize } from '@vueuse/core'
@@ -13,6 +12,7 @@ import { hexToRgb } from '@/utils/colorUtil'
 import type { Point } from '@/extensions/core/maskeditor/types'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { isCloud } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
@@ -631,7 +631,8 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
     const name = `painter-${nodeId}-${Date.now()}.png`
     const body = new FormData()
     body.append('image', blob, name)
-    body.append('type', 'input')
+    if (!isCloud) body.append('subfolder', 'painter')
+    body.append('type', isCloud ? 'input' : 'temp')
 
     let resp: Response
     try {
@@ -657,7 +658,7 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
       throw new Error(err)
     }
 
-    let data: UploadImageResponse
+    let data: { name: string }
     try {
       data = await resp.json()
     } catch (e) {
@@ -669,16 +670,9 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
       throw new Error(err)
     }
 
-    if (!data?.name) {
-      const err = t('painter.uploadError', {
-        status: resp.status,
-        statusText: "missing 'name' in response"
-      })
-      toastStore.addAlert(err)
-      throw new Error(err)
-    }
-
-    const result = `${data.name} [input]`
+    const result = isCloud
+      ? `${data.name} [input]`
+      : `painter/${data.name} [temp]`
     modelValue.value = result
     isDirty.value = false
     return result

src/composables/useCoreCommands.ts

@@ -1283,9 +1283,23 @@ export function useCoreCommands(): ComfyCommand[] {
     {
       id: 'Comfy.BrowseModelAssets',
       icon: 'pi pi-folder-open',
-      label: 'Browse Model Assets',
+      label: 'Experimental: Browse Model Assets',
       versionAdded: '1.28.3',
       function: async () => {
+        if (!useSettingStore().get('Comfy.Assets.UseAssetAPI')) {
+          const confirmed = await dialogService.confirm({
+            title: 'Enable Asset API',
+            message:
+              'The Asset API is currently disabled. Would you like to enable it?',
+            type: 'default'
+          })
+
+          if (!confirmed) return
+
+          const settingStore = useSettingStore()
+          await settingStore.set('Comfy.Assets.UseAssetAPI', true)
+          await workflowService.reloadCurrentWorkflow()
+        }
         const assetBrowserDialog = useAssetBrowserDialog()
         await assetBrowserDialog.browse({
           assetType: 'models',
@@ -1304,6 +1318,22 @@ export function useCoreCommands(): ComfyCommand[] {
         })
       }
     },
+    {
+      id: 'Comfy.ToggleAssetAPI',
+      icon: 'pi pi-database',
+      label: () =>
+        `Experimental: ${
+          useSettingStore().get('Comfy.Assets.UseAssetAPI')
+            ? 'Disable'
+            : 'Enable'
+        } AssetAPI`,
+      function: async () => {
+        const settingStore = useSettingStore()
+        const current = settingStore.get('Comfy.Assets.UseAssetAPI') ?? false
+        await settingStore.set('Comfy.Assets.UseAssetAPI', !current)
+        await useWorkflowService().reloadCurrentWorkflow() // ensure changes take effect immediately
+      }
+    },
     {
       id: 'Comfy.ToggleQPOV2',
       icon: 'pi pi-list',

src/composables/useFeatureFlags.ts

@@ -43,12 +43,6 @@ function resolveFlag<T>(
   return remoteConfigValue ?? api.getServerFeature(flagKey, defaultValue)
 }
 
-/**
- * Reactive feature-flag shape returned by {@link useFeatureFlags}.
- * Exported so test mocks can stay in sync with the real shape.
- */
-export type FeatureFlags = ReturnType<typeof useFeatureFlags>['flags']
-
 /**
  * Composable for reactive access to server-side feature flags
  */

src/composables/useLoad3d.test.ts

@@ -75,6 +75,7 @@ vi.mock('@/renderer/core/canvas/canvasStore', () => ({
 }))
 
 vi.mock('@/platform/assets/utils/assetPreviewUtil', () => ({
+  isAssetPreviewSupported: vi.fn(() => false),
   persistThumbnail: vi.fn().mockResolvedValue(undefined)
 }))
 
@@ -1482,9 +1483,22 @@ describe('useLoad3d', () => {
       expect(composable).toBeDefined()
     })
 
-    it('captures thumbnail and persists it when a model_file widget has a value', async () => {
-      const { persistThumbnail } =
+    it('does not call captureThumbnail when asset preview is unsupported', async () => {
+      const { isAssetPreviewSupported } =
         await import('@/platform/assets/utils/assetPreviewUtil')
+      vi.mocked(isAssetPreviewSupported).mockReturnValue(false)
+
+      const { handler } = await getModelReadyHandler()
+      handler()
+      await Promise.resolve()
+
+      expect(mockLoad3d.captureThumbnail).not.toHaveBeenCalled()
+    })
+
+    it('captures thumbnail and persists it when asset preview is supported and a model_file widget has a value', async () => {
+      const { isAssetPreviewSupported, persistThumbnail } =
+        await import('@/platform/assets/utils/assetPreviewUtil')
+      vi.mocked(isAssetPreviewSupported).mockReturnValue(true)
       vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
         '',
         'cube.glb'
@@ -1509,8 +1523,9 @@ describe('useLoad3d', () => {
     })
 
     it('skips persistence when the model widget has no value', async () => {
-      const { persistThumbnail } =
+      const { isAssetPreviewSupported, persistThumbnail } =
         await import('@/platform/assets/utils/assetPreviewUtil')
+      vi.mocked(isAssetPreviewSupported).mockReturnValue(true)
       mockNode.widgets = [
         { name: 'model_file', value: '' } as unknown as IWidget
       ]
@@ -1524,8 +1539,9 @@ describe('useLoad3d', () => {
     })
 
     it('swallows captureThumbnail rejections silently', async () => {
-      const { persistThumbnail } =
+      const { isAssetPreviewSupported, persistThumbnail } =
         await import('@/platform/assets/utils/assetPreviewUtil')
+      vi.mocked(isAssetPreviewSupported).mockReturnValue(true)
       vi.mocked(Load3dUtils.splitFilePath).mockReturnValue([
         '',
         'broken.glb'