chore: trigger CI

## Summary

Makes the save/save as buttons in the builder footer toolbar all a fixed
size so when switching states the elements dont jump

## Changes

- **What**: 
- Apply widths from design to the buttons
- Add tests that measure the sizes of the buttons

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10681-fix-Ensure-all-save-save-as-buttons-are-the-same-width-3316d73d36508187bb74c5a977ea876f)
by [Unito](https://www.unito.io)

.github/workflows/ci-oss-assets-validation.yaml

@@ -95,7 +95,7 @@ jobs:
           if npx license-checker-rseidelsohn@4 \
             --production \
             --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
+            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/ingest-types;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
             --clarificationsFile .github/license-clarifications.json \
             --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
             echo ''

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

@@ -33,6 +33,20 @@ 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
+
+      - name: Upload cloud frontend
+        uses: actions/upload-artifact@v6
+        with:
+          name: frontend-dist-cloud
+          path: dist/
+          retention-days: 1
+
   # Sharded chromium tests
   playwright-tests-chromium-sharded:
     needs: setup
@@ -97,14 +111,14 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium-2x, chromium-0.5x, mobile-chrome]
+        browser: [chromium-2x, chromium-0.5x, mobile-chrome, cloud]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v6
       - name: Download built frontend
         uses: actions/download-artifact@v7
         with:
-          name: frontend-dist
+          name: ${{ matrix.browser == 'cloud' && 'frontend-dist-cloud' || 'frontend-dist' }}
           path: dist/
 
       - name: Start ComfyUI server

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

@@ -1,4 +1,4 @@
-# Description: Unit and component testing with Vitest
+# Description: Unit and component testing with Vitest + coverage reporting
 name: 'CI: Tests Unit'
 
 on:
@@ -23,5 +23,12 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Run Vitest tests
-        run: pnpm test:unit
+      - name: Run Vitest tests with coverage
+        run: pnpm test:coverage
+
+      - name: Upload coverage to Codecov
+        if: always()
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
+        with:
+          files: coverage/lcov.info
+          fail_ci_if_error: false

AGENTS.md

@@ -216,6 +216,7 @@ See @docs/testing/\*.md for detailed patterns.
 1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
 2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
 3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
+4. Type all API mock responses in `route.fulfill()` using generated types or schemas from `packages/ingest-types`, `packages/registry-types`, `src/workbench/extensions/manager/types/generatedManagerTypes.ts`, or `src/schemas/` — see `docs/guidance/playwright.md` for the full source-of-truth table
 
 ## External Resources
 

CODEOWNERS

@@ -41,12 +41,46 @@
 /src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @jtydhr88
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @jtydhr88
+/src/components/maskeditor/                       @trsommer @brucew4yn3rp @jtydhr88
+/src/composables/maskeditor/                      @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorStore.ts                    @trsommer @brucew4yn3rp @jtydhr88
+/src/stores/maskEditorDataStore.ts                @trsommer @brucew4yn3rp @jtydhr88
+
+# Image Crop
+/src/extensions/core/imageCrop.ts                 @jtydhr88
+/src/components/imagecrop/                        @jtydhr88
+/src/composables/useImageCrop.ts                  @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCropWidget.ts @jtydhr88
+
+# Image Compare
+/src/extensions/core/imageCompare.ts              @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue       @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.test.ts   @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.stories.ts @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/useImageCompareWidget.ts    @jtydhr88
+/src/lib/litegraph/src/widgets/ImageCompareWidget.ts @jtydhr88
+
+# Painter
+/src/extensions/core/painter.ts                   @jtydhr88
+/src/components/painter/                           @jtydhr88
+/src/composables/painter/                          @jtydhr88
+/src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
+/src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88
 
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
+/src/extensions/core/load3dLazy.ts                @jtydhr88
+/src/extensions/core/load3d/                      @jtydhr88
 /src/components/load3d/                           @jtydhr88
+/src/composables/useLoad3d.ts                     @jtydhr88
+/src/composables/useLoad3d.test.ts                @jtydhr88
+/src/composables/useLoad3dDrag.ts                 @jtydhr88
+/src/composables/useLoad3dDrag.test.ts            @jtydhr88
+/src/composables/useLoad3dViewer.ts               @jtydhr88
+/src/composables/useLoad3dViewer.test.ts          @jtydhr88
+/src/services/load3dService.ts                    @jtydhr88
 
 # Manager
 /src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata

apps/website/src/components/AcademySection.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const features = [
+  { icon: '📚', label: 'Guided Tutorials' },
+  { icon: '🎥', label: 'Video Courses' },
+  { icon: '🛠️', label: 'Hands-on Projects' }
+]
+</script>
+
+<template>
+  <section class="bg-charcoal-800 py-24">
+    <div class="mx-auto max-w-3xl px-6 text-center">
+      <!-- Badge -->
+      <span
+        class="inline-block rounded-full bg-brand-yellow/10 px-4 py-1.5 text-xs uppercase tracking-widest text-brand-yellow"
+      >
+        COMFY ACADEMY
+      </span>
+
+      <h2 class="mt-6 text-3xl font-bold text-white">Master AI Workflows</h2>
+
+      <p class="mt-4 text-smoke-700">
+        Learn to build professional AI workflows with guided tutorials, video
+        courses, and hands-on projects.
+      </p>
+
+      <!-- Feature bullets -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-8">
+        <div
+          v-for="feature in features"
+          :key="feature.label"
+          class="flex items-center gap-2 text-sm text-white"
+        >
+          <span aria-hidden="true">{{ feature.icon }}</span>
+          <span>{{ feature.label }}</span>
+        </div>
+      </div>
+
+      <!-- CTA -->
+      <a
+        href="/academy"
+        class="mt-8 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+      >
+        EXPLORE ACADEMY
+      </a>
+    </div>
+  </section>
+</template>

apps/website/src/components/CTASection.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const cards = [
+  {
+    icon: '🖥️',
+    title: 'Comfy Desktop',
+    description: 'Full power on your local machine. Free and open source.',
+    cta: 'DOWNLOAD',
+    href: '/download',
+    outlined: false
+  },
+  {
+    icon: '☁️',
+    title: 'Comfy Cloud',
+    description: 'Run workflows in the cloud. No GPU required.',
+    cta: 'TRY CLOUD',
+    href: 'https://app.comfy.org',
+    outlined: false
+  },
+  {
+    icon: '⚡',
+    title: 'Comfy API',
+    description: 'Integrate AI generation into your applications.',
+    cta: 'VIEW DOCS',
+    href: 'https://docs.comfy.org',
+    outlined: true
+  }
+]
+</script>
+
+<template>
+  <section class="bg-charcoal-800 py-24">
+    <div class="mx-auto max-w-5xl px-6">
+      <h2 class="text-center text-3xl font-bold text-white">
+        Choose Your Way to Comfy
+      </h2>
+
+      <!-- CTA cards -->
+      <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+        <a
+          v-for="card in cards"
+          :key="card.title"
+          :href="card.href"
+          class="flex flex-1 flex-col items-center rounded-xl border border-white/10 bg-charcoal-600 p-8 text-center transition-colors hover:border-brand-yellow"
+        >
+          <span class="text-4xl" aria-hidden="true">{{ card.icon }}</span>
+          <h3 class="mt-4 text-xl font-semibold text-white">
+            {{ card.title }}
+          </h3>
+          <p class="mt-2 text-sm text-smoke-700">
+            {{ card.description }}
+          </p>
+          <span
+            class="mt-6 inline-block rounded-full px-6 py-2 text-sm font-semibold transition-opacity hover:opacity-90"
+            :class="
+              card.outlined
+                ? 'border border-brand-yellow text-brand-yellow'
+                : 'bg-brand-yellow text-black'
+            "
+          >
+            {{ card.cta }}
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/CaseStudySpotlight.vue

@@ -0,0 +1,77 @@
+<!-- TODO: Replace placeholder content with real quotes and case studies -->
+<script setup lang="ts">
+const studies = [
+  {
+    title: 'New Pipelines with Chord Mode',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'md:row-span-2'
+  },
+  {
+    title: 'AI-Assisted Texture and Environment',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'min-h-[300px] lg:col-span-2'
+  },
+  {
+    title: 'Open-sourced the Chord Mode',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: false,
+    gridClass: 'min-h-[200px]'
+  },
+  {
+    title: 'Environment Generation',
+    body: 'For AI-assisted texture and environment generation across studio pipelines.',
+    highlight: true,
+    gridClass: 'min-h-[200px]'
+  }
+]
+</script>
+
+<template>
+  <section class="bg-black px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <header class="mb-12">
+        <h2 class="text-3xl font-bold text-white">Customer Stories</h2>
+        <p class="mt-2 text-smoke-700">
+          See how leading studios use Comfy in production
+        </p>
+      </header>
+
+      <!-- Bento grid -->
+      <div
+        class="relative grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
+      >
+        <article
+          v-for="study in studies"
+          :key="study.title"
+          class="flex flex-col justify-end rounded-2xl border border-brand-yellow/30 p-6"
+          :class="[
+            study.gridClass,
+            study.highlight ? 'bg-brand-yellow' : 'bg-charcoal-600'
+          ]"
+        >
+          <h3
+            class="font-semibold"
+            :class="study.highlight ? 'text-black' : 'text-white'"
+          >
+            {{ study.title }}
+          </h3>
+          <p
+            class="mt-2 text-sm"
+            :class="study.highlight ? 'text-black/70' : 'text-smoke-700'"
+          >
+            {{ study.body }}
+          </p>
+          <a
+            href="/case-studies"
+            class="mt-4 text-sm underline"
+            :class="study.highlight ? 'text-black' : 'text-brand-yellow'"
+          >
+            READ CASE STUDY
+          </a>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/GetStartedSection.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const steps = [
+  {
+    number: '1',
+    title: 'Download & Sign Up',
+    description: 'Get Comfy Desktop for free or create a Cloud account'
+  },
+  {
+    number: '2',
+    title: 'Load a Workflow',
+    description:
+      'Choose from thousands of community workflows or build your own'
+  },
+  {
+    number: '3',
+    title: 'Generate',
+    description: 'Hit run and watch your AI workflow come to life'
+  }
+]
+</script>
+
+<template>
+  <section class="border-t border-white/10 bg-black py-24">
+    <div class="mx-auto max-w-7xl px-6 text-center">
+      <h2 class="text-3xl font-bold text-white">Get Started in Minutes</h2>
+      <p class="mt-4 text-smoke-700">
+        From download to your first AI-generated output in three simple steps
+      </p>
+
+      <!-- Steps -->
+      <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
+        <div v-for="(step, index) in steps" :key="step.number" class="relative">
+          <!-- Connecting line between steps (desktop only) -->
+          <div
+            v-if="index < steps.length - 1"
+            class="absolute right-0 top-8 hidden w-full translate-x-1/2 border-t border-brand-yellow/20 md:block"
+          />
+
+          <div class="relative">
+            <span class="text-6xl font-bold text-brand-yellow/20">
+              {{ step.number }}
+            </span>
+            <h3 class="mt-2 text-xl font-semibold text-white">
+              {{ step.title }}
+            </h3>
+            <p class="mt-2 text-sm text-smoke-700">
+              {{ step.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- CTA -->
+      <a
+        href="/download"
+        class="mt-12 inline-block rounded-full bg-brand-yellow px-8 py-3 text-sm font-semibold text-black transition-opacity hover:opacity-90"
+      >
+        DOWNLOAD COMFY
+      </a>
+    </div>
+  </section>
+</template>

apps/website/src/components/HeroSection.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const ctaButtons = [
+  {
+    label: 'GET STARTED',
+    href: 'https://app.comfy.org',
+    variant: 'solid' as const
+  },
+  {
+    label: 'LEARN MORE',
+    href: '/about',
+    variant: 'outline' as const
+  }
+]
+</script>
+
+<template>
+  <section
+    class="relative flex min-h-screen items-center overflow-hidden bg-black pt-16"
+  >
+    <div
+      class="mx-auto flex w-full max-w-7xl flex-col items-center gap-12 px-6 md:flex-row md:gap-0"
+    >
+      <!-- Left: C Monogram -->
+      <div class="flex w-full items-center justify-center md:w-[55%]">
+        <div class="relative -ml-12 -rotate-15 md:-ml-24" aria-hidden="true">
+          <div
+            class="h-64 w-64 rounded-full border-[40px] border-brand-yellow md:h-[28rem] md:w-[28rem] md:border-[64px] lg:h-[36rem] lg:w-[36rem] lg:border-[80px]"
+          >
+            <!-- Gap on the right side to form "C" shape -->
+            <div
+              class="absolute right-0 top-1/2 h-32 w-24 -translate-y-1/2 translate-x-1/2 bg-black md:h-48 md:w-36 lg:h-64 lg:w-48"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Right: Text content -->
+      <div class="flex w-full flex-col items-start md:w-[45%]">
+        <h1
+          class="text-5xl font-bold leading-tight tracking-tight text-white md:text-6xl lg:text-7xl"
+        >
+          Professional Control of Visual AI
+        </h1>
+
+        <p class="mt-6 max-w-lg text-lg text-smoke-700">
+          Comfy is the AI creation engine for visual professionals who demand
+          control over every model, every parameter, and every output.
+        </p>
+
+        <div class="mt-8 flex flex-wrap gap-4">
+          <a
+            v-for="btn in ctaButtons"
+            :key="btn.label"
+            :href="btn.href"
+            class="rounded-full px-8 py-3 text-sm font-semibold transition-opacity hover:opacity-90"
+            :class="
+              btn.variant === 'solid'
+                ? 'bg-brand-yellow text-black'
+                : 'border border-brand-yellow text-brand-yellow'
+            "
+          >
+            {{ btn.label }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/ManifestoSection.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="bg-black py-24">
+    <div class="mx-auto max-w-4xl px-6 text-center">
+      <!-- Decorative quote mark -->
+      <span class="text-6xl text-brand-yellow opacity-30" aria-hidden="true">
+        &laquo;
+      </span>
+
+      <h2 class="text-4xl font-bold text-white md:text-5xl">
+        Method, Not Magic
+      </h2>
+
+      <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-smoke-700">
+        We believe in giving creators real control over AI. Not black boxes. Not
+        magic buttons. But transparent, reproducible, node-by-node control over
+        every step of the creative process.
+      </p>
+
+      <!-- Separator line -->
+      <div
+        class="mx-auto mt-8 h-0.5 w-24 bg-brand-yellow opacity-30"
+        aria-hidden="true"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/ProductShowcase.vue

@@ -0,0 +1,51 @@
+<!-- TODO: Replace with actual workflow demo content -->
+<script setup lang="ts">
+const features = ['Node-Based Editor', 'Real-Time Preview', 'Version Control']
+</script>
+
+<template>
+  <section class="bg-charcoal-800 py-24">
+    <div class="mx-auto max-w-7xl px-6">
+      <!-- Section header -->
+      <div class="text-center">
+        <h2 class="text-3xl font-bold text-white">See Comfy in Action</h2>
+        <p class="mx-auto mt-4 max-w-2xl text-smoke-700">
+          Watch how professionals build AI workflows with unprecedented control
+        </p>
+      </div>
+
+      <!-- Placeholder video area -->
+      <div
+        class="mt-12 flex aspect-video items-center justify-center rounded-2xl border border-white/10 bg-charcoal-600"
+      >
+        <div class="flex flex-col items-center gap-4">
+          <!-- Play button triangle -->
+          <div
+            class="flex h-16 w-16 items-center justify-center rounded-full border-2 border-white/20"
+            aria-hidden="true"
+          >
+            <div
+              class="ml-1 h-0 w-0 border-y-8 border-l-[14px] border-y-transparent border-l-white"
+            />
+          </div>
+          <p class="text-sm text-smoke-700">Workflow Demo Coming Soon</p>
+        </div>
+      </div>
+
+      <!-- Feature labels -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-6">
+        <div
+          v-for="feature in features"
+          :key="feature"
+          class="flex items-center gap-2"
+        >
+          <span
+            class="h-2 w-2 rounded-full bg-brand-yellow"
+            aria-hidden="true"
+          />
+          <span class="text-sm text-smoke-700">{{ feature }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/SocialProofBar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const logos = [
+  'Harman',
+  'Tencent',
+  'Nike',
+  'HP',
+  'Autodesk',
+  'Apple',
+  'Ubisoft',
+  'Lucid',
+  'Amazon',
+  'Netflix',
+  'Pixomondo',
+  'EA'
+]
+
+const metrics = [
+  { value: '60K+', label: 'Custom Nodes' },
+  { value: '106K+', label: 'GitHub Stars' },
+  { value: '500K+', label: 'Community Members' }
+]
+</script>
+
+<template>
+  <section class="border-y border-white/10 bg-black py-16">
+    <div class="mx-auto max-w-7xl px-6">
+      <!-- Heading -->
+      <p
+        class="text-center text-xs font-medium uppercase tracking-widest text-smoke-700"
+      >
+        Trusted by Industry Leaders
+      </p>
+
+      <!-- Logo row -->
+      <div
+        class="mt-10 flex flex-wrap items-center justify-center gap-4 md:gap-6"
+      >
+        <span
+          v-for="company in logos"
+          :key="company"
+          class="rounded-full border border-white/10 px-6 py-2 text-sm text-smoke-700"
+        >
+          {{ company }}
+        </span>
+      </div>
+
+      <!-- Metrics row -->
+      <div
+        class="mt-14 flex flex-col items-center justify-center gap-10 sm:flex-row sm:gap-12"
+      >
+        <div v-for="metric in metrics" :key="metric.label" class="text-center">
+          <p class="text-3xl font-bold text-white">{{ metric.value }}</p>
+          <p class="mt-1 text-sm text-smoke-700">{{ metric.label }}</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/TestimonialsSection.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const activeFilter = ref('All')
+
+const industries = ['All', 'VFX', 'Gaming', 'Advertising', 'Photography']
+
+const testimonials = [
+  {
+    quote:
+      'Comfy has transformed our VFX pipeline. The node-based approach gives us unprecedented control over every step of the generation process.',
+    name: 'Sarah Chen',
+    title: 'Lead Technical Artist',
+    company: 'Studio Alpha',
+    industry: 'VFX'
+  },
+  {
+    quote:
+      'The level of control over AI generation is unmatched. We can iterate on game assets faster than ever before.',
+    name: 'Marcus Rivera',
+    title: 'Creative Director',
+    company: 'PixelForge',
+    industry: 'Gaming'
+  },
+  {
+    quote:
+      'We\u2019ve cut our iteration time by 70%. Comfy workflows let our team produce high-quality creative assets at scale.',
+    name: 'Yuki Tanaka',
+    title: 'Head of AI',
+    company: 'CreativeX',
+    industry: 'Advertising'
+  }
+]
+
+const filteredTestimonials = computed(() => {
+  if (activeFilter.value === 'All') return testimonials
+  return testimonials.filter((t) => t.industry === activeFilter.value)
+})
+</script>
+
+<template>
+  <section class="bg-black py-24">
+    <div class="mx-auto max-w-7xl px-6">
+      <h2 class="text-center text-3xl font-bold text-white">
+        What Professionals Say
+      </h2>
+
+      <!-- Industry filter pills -->
+      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <button
+          v-for="industry in industries"
+          :key="industry"
+          class="cursor-pointer rounded-full px-4 py-1.5 text-sm transition-colors"
+          :class="
+            activeFilter === industry
+              ? 'bg-brand-yellow text-black'
+              : 'border border-white/10 text-smoke-700 hover:border-brand-yellow'
+          "
+          @click="activeFilter = industry"
+        >
+          {{ industry }}
+        </button>
+      </div>
+
+      <!-- Testimonial cards -->
+      <div class="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+        <article
+          v-for="testimonial in filteredTestimonials"
+          :key="testimonial.name"
+          class="rounded-xl border border-white/10 bg-charcoal-600 p-6"
+        >
+          <blockquote class="text-base italic text-white">
+            &ldquo;{{ testimonial.quote }}&rdquo;
+          </blockquote>
+
+          <p class="mt-4 text-sm font-semibold text-white">
+            {{ testimonial.name }}
+          </p>
+          <p class="text-sm text-smoke-700">
+            {{ testimonial.title }}, {{ testimonial.company }}
+          </p>
+
+          <span
+            class="mt-3 inline-block rounded-full bg-white/5 px-2 py-0.5 text-xs text-smoke-700"
+          >
+            {{ testimonial.industry }}
+          </span>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/UseCaseSection.vue

@@ -0,0 +1,74 @@
+<!-- TODO: Wire category content swap when final assets arrive -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const categories = [
+  'VFX & Animation',
+  'Creative Agencies',
+  'Gaming',
+  'eCommerce & Fashion',
+  'Community & Hobbyists'
+]
+
+const activeCategory = ref(0)
+</script>
+
+<template>
+  <section class="bg-charcoal-800 px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <div class="flex flex-col items-center gap-12 lg:flex-row lg:gap-8">
+        <!-- Left placeholder image (desktop only) -->
+        <div class="hidden flex-1 lg:block">
+          <div
+            class="aspect-[2/3] rounded-full border border-white/10 bg-charcoal-600"
+          />
+        </div>
+
+        <!-- Center content -->
+        <div class="flex flex-col items-center text-center lg:flex-[2]">
+          <h2 class="text-3xl font-bold text-white">
+            Built for Every Creative Industry
+          </h2>
+
+          <nav
+            class="mt-10 flex flex-col items-center gap-4"
+            aria-label="Industry categories"
+          >
+            <button
+              v-for="(category, index) in categories"
+              :key="category"
+              class="transition-colors"
+              :class="
+                index === activeCategory
+                  ? 'text-2xl text-white'
+                  : 'text-xl text-ash-500 hover:text-white/70'
+              "
+              @click="activeCategory = index"
+            >
+              {{ category }}
+            </button>
+          </nav>
+
+          <p class="mt-10 max-w-lg text-smoke-700">
+            Powered by 60,000+ nodes, thousands of workflows, and a community
+            that builds faster than any one company could.
+          </p>
+
+          <a
+            href="/workflows"
+            class="mt-8 rounded-full border border-brand-yellow px-8 py-3 text-sm font-semibold text-brand-yellow transition-colors hover:bg-brand-yellow hover:text-black"
+          >
+            EXPLORE WORKFLOWS
+          </a>
+        </div>
+
+        <!-- Right placeholder image (desktop only) -->
+        <div class="hidden flex-1 lg:block">
+          <div
+            class="aspect-[2/3] rounded-3xl border border-white/10 bg-charcoal-600"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/ValuePillars.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const pillars = [
+  {
+    icon: '⚡',
+    title: 'Build',
+    description:
+      'Design complex AI workflows visually with our node-based editor'
+  },
+  {
+    icon: '🎨',
+    title: 'Customize',
+    description: 'Fine-tune every parameter across any model architecture'
+  },
+  {
+    icon: '🔧',
+    title: 'Refine',
+    description:
+      'Iterate on outputs with precision controls and real-time preview'
+  },
+  {
+    icon: '⚙️',
+    title: 'Automate',
+    description:
+      'Scale your workflows with batch processing and API integration'
+  },
+  {
+    icon: '🚀',
+    title: 'Run',
+    description: 'Deploy locally or in the cloud with identical results'
+  }
+]
+</script>
+
+<template>
+  <section class="bg-black px-6 py-24">
+    <div class="mx-auto max-w-7xl">
+      <header class="mb-16 text-center">
+        <h2 class="text-3xl font-bold text-white md:text-4xl">
+          The Building Blocks of AI Production
+        </h2>
+        <p class="mt-4 text-smoke-700">
+          Five powerful capabilities that give you complete control
+        </p>
+      </header>
+
+      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
+        <article
+          v-for="pillar in pillars"
+          :key="pillar.title"
+          class="rounded-xl border border-white/10 bg-charcoal-600 p-6 transition-colors hover:border-brand-yellow"
+        >
+          <div
+            class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-yellow text-xl"
+          >
+            {{ pillar.icon }}
+          </div>
+          <h3 class="mt-4 text-lg font-semibold text-white">
+            {{ pillar.title }}
+          </h3>
+          <p class="mt-2 text-sm text-smoke-700">
+            {{ pillar.description }}
+          </p>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/pages/index.astro

@@ -0,0 +1,34 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import SiteNav from '../components/SiteNav.vue'
+import HeroSection from '../components/HeroSection.vue'
+import SocialProofBar from '../components/SocialProofBar.vue'
+import ProductShowcase from '../components/ProductShowcase.vue'
+import ValuePillars from '../components/ValuePillars.vue'
+import UseCaseSection from '../components/UseCaseSection.vue'
+import CaseStudySpotlight from '../components/CaseStudySpotlight.vue'
+import TestimonialsSection from '../components/TestimonialsSection.vue'
+import GetStartedSection from '../components/GetStartedSection.vue'
+import CTASection from '../components/CTASection.vue'
+import ManifestoSection from '../components/ManifestoSection.vue'
+import AcademySection from '../components/AcademySection.vue'
+import SiteFooter from '../components/SiteFooter.vue'
+---
+
+<BaseLayout title="Comfy — Professional Control of Visual AI">
+  <SiteNav client:load />
+  <main>
+    <HeroSection />
+    <SocialProofBar />
+    <ProductShowcase />
+    <ValuePillars />
+    <UseCaseSection client:visible />
+    <CaseStudySpotlight />
+    <TestimonialsSection client:visible />
+    <GetStartedSection />
+    <CTASection />
+    <ManifestoSection />
+    <AcademySection />
+  </main>
+  <SiteFooter />
+</BaseLayout>

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

@@ -0,0 +1,34 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import SiteNav from '../../components/SiteNav.vue'
+import HeroSection from '../../components/HeroSection.vue'
+import SocialProofBar from '../../components/SocialProofBar.vue'
+import ProductShowcase from '../../components/ProductShowcase.vue'
+import ValuePillars from '../../components/ValuePillars.vue'
+import UseCaseSection from '../../components/UseCaseSection.vue'
+import CaseStudySpotlight from '../../components/CaseStudySpotlight.vue'
+import TestimonialsSection from '../../components/TestimonialsSection.vue'
+import GetStartedSection from '../../components/GetStartedSection.vue'
+import CTASection from '../../components/CTASection.vue'
+import ManifestoSection from '../../components/ManifestoSection.vue'
+import AcademySection from '../../components/AcademySection.vue'
+import SiteFooter from '../../components/SiteFooter.vue'
+---
+
+<BaseLayout title="Comfy — 视觉 AI 的专业控制">
+  <SiteNav client:load />
+  <main>
+    <HeroSection />
+    <SocialProofBar />
+    <ProductShowcase />
+    <ValuePillars />
+    <UseCaseSection client:visible />
+    <CaseStudySpotlight />
+    <TestimonialsSection client:visible />
+    <GetStartedSection />
+    <CTASection />
+    <ManifestoSection />
+    <AcademySection />
+  </main>
+  <SiteFooter />
+</BaseLayout>

browser_tests/AGENTS.md

@@ -12,12 +12,13 @@ browser_tests/
 │   ├── ComfyMouse.ts     - Mouse interaction helper
 │   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
 │   ├── selectors.ts      - Centralized TestIds
-│   ├── components/       - Page object components
+│   ├── data/             - Static test data (mock API responses, workflow JSONs, node definitions)
+│   ├── components/       - Page object components (locators, user interactions)
 │   │   ├── ContextMenu.ts
 │   │   ├── SettingDialog.ts
 │   │   ├── SidebarTab.ts
 │   │   └── Topbar.ts
-│   ├── helpers/          - Focused helper classes
+│   ├── helpers/          - Focused helper classes (domain-specific actions)
 │   │   ├── CanvasHelper.ts
 │   │   ├── CommandHelper.ts
 │   │   ├── KeyboardHelper.ts
@@ -25,11 +26,18 @@ browser_tests/
 │   │   ├── SettingsHelper.ts
 │   │   ├── WorkflowHelper.ts
 │   │   └── ...
-│   └── utils/            - Utility functions
+│   └── utils/            - Pure utility functions (no page dependency)
 ├── helpers/          - Test-specific utilities
 └── tests/            - Test files (*.spec.ts)
 ```
 
+### Architectural Separation
+
+- **`fixtures/data/`** — Static test data only. Mock API responses, workflow JSONs, node definitions. No code, no imports from Playwright.
+- **`fixtures/components/`** — Page object components. Encapsulate locators and user interactions for a specific UI area.
+- **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
+- **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.
+
 ## Polling Assertions
 
 Prefer `expect.poll()` over `expect(async () => { ... }).toPass()` when the block contains a single async call with a single assertion. `expect.poll()` is more readable and gives better error messages (shows actual vs expected on failure).

browser_tests/README.md

@@ -119,7 +119,7 @@ When writing new tests, follow these patterns:
 
 ```typescript
 // Import the test fixture
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Feature Name', () => {
   // Set up test environment if needed
@@ -148,6 +148,12 @@ Always check for existing helpers and fixtures before implementing new ones:
 
 Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
 
+### Import Conventions
+
+- Prefer `@e2e/*` for imports within `browser_tests/`
+- Continue using `@/*` for imports from `src/`
+- Avoid introducing new deep relative imports within `browser_tests/` when the alias is available
+
 ### Key Testing Patterns
 
 1. **Focus elements explicitly**:

browser_tests/assets/nodes/api_workflow_with_missing_nodes.json

@@ -0,0 +1,30 @@
+{
+  "1": {
+    "class_type": "KSampler",
+    "inputs": {
+      "seed": 42,
+      "steps": 20,
+      "cfg": 8.0,
+      "sampler_name": "euler",
+      "scheduler": "normal",
+      "denoise": 1.0
+    },
+    "_meta": { "title": "KSampler" }
+  },
+  "2": {
+    "class_type": "NonExistentCustomNode_XYZ_12345",
+    "inputs": {
+      "input1": "test"
+    },
+    "_meta": { "title": "Missing Node" }
+  },
+  "3": {
+    "class_type": "EmptyLatentImage",
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "_meta": { "title": "Empty Latent Image" }
+  }
+}

browser_tests/fixtures/ComfyPage.ts

@@ -1,45 +1,43 @@
-import type {
-  APIRequestContext,
-  ExpectMatcherState,
-  Locator,
-  Page
-} from '@playwright/test'
-import { test as base, expect } from '@playwright/test'
+import type { APIRequestContext, Locator, Page } from '@playwright/test'
+import { test as base } from '@playwright/test'
 import { config as dotenvConfig } from 'dotenv'
 
-import { TestIds } from './selectors'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
-import { ComfyActionbar } from '../helpers/actionbar'
-import { ComfyTemplates } from '../helpers/templates'
-import { ComfyMouse } from './ComfyMouse'
-import { VueNodeHelpers } from './VueNodeHelpers'
-import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
-import { ContextMenu } from './components/ContextMenu'
-import { SettingDialog } from './components/SettingDialog'
-import { BottomPanel } from './components/BottomPanel'
+import { ComfyActionbar } from '@e2e/helpers/actionbar'
+import { ComfyTemplates } from '@e2e/helpers/templates'
+import { ComfyMouse } from '@e2e/fixtures/ComfyMouse'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { comfyExpect } from '@e2e/fixtures/utils/customMatchers'
+import { assetPath } from '@e2e/fixtures/utils/paths'
+import { sleep } from '@e2e/fixtures/utils/timing'
+import { VueNodeHelpers } from '@e2e/fixtures/VueNodeHelpers'
+import { BottomPanel } from '@e2e/fixtures/components/BottomPanel'
+import { ComfyNodeSearchBox } from '@e2e/fixtures/components/ComfyNodeSearchBox'
+import { ComfyNodeSearchBoxV2 } from '@e2e/fixtures/components/ComfyNodeSearchBoxV2'
+import { ContextMenu } from '@e2e/fixtures/components/ContextMenu'
+import { QueuePanel } from '@e2e/fixtures/components/QueuePanel'
+import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import {
   AssetsSidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
-} from './components/SidebarTab'
-import { Topbar } from './components/Topbar'
-import { AssetsHelper } from './helpers/AssetsHelper'
-import { CanvasHelper } from './helpers/CanvasHelper'
-import { PerformanceHelper } from './helpers/PerformanceHelper'
-import { QueueHelper } from './helpers/QueueHelper'
-import { ClipboardHelper } from './helpers/ClipboardHelper'
-import { CommandHelper } from './helpers/CommandHelper'
-import { DragDropHelper } from './helpers/DragDropHelper'
-import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
-import { KeyboardHelper } from './helpers/KeyboardHelper'
-import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
-import { SettingsHelper } from './helpers/SettingsHelper'
-import { AppModeHelper } from './helpers/AppModeHelper'
-import { SubgraphHelper } from './helpers/SubgraphHelper'
-import { ToastHelper } from './helpers/ToastHelper'
-import { WorkflowHelper } from './helpers/WorkflowHelper'
-import type { NodeReference } from './utils/litegraphUtils'
+} from '@e2e/fixtures/components/SidebarTab'
+import { Topbar } from '@e2e/fixtures/components/Topbar'
+import { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
+import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
+import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
+import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
+import { CommandHelper } from '@e2e/fixtures/helpers/CommandHelper'
+import { DragDropHelper } from '@e2e/fixtures/helpers/DragDropHelper'
+import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
+import { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
+import { NodeOperationsHelper } from '@e2e/fixtures/helpers/NodeOperationsHelper'
+import { PerformanceHelper } from '@e2e/fixtures/helpers/PerformanceHelper'
+import { QueueHelper } from '@e2e/fixtures/helpers/QueueHelper'
+import { SettingsHelper } from '@e2e/fixtures/helpers/SettingsHelper'
+import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
+import { ToastHelper } from '@e2e/fixtures/helpers/ToastHelper'
+import { WorkflowHelper } from '@e2e/fixtures/helpers/WorkflowHelper'
 import type { WorkspaceStore } from '../types/globals'
 
 dotenvConfig()
@@ -124,7 +122,7 @@ type KeysOfType<T, Match> = {
 }[keyof T]
 
 class ConfirmDialog {
-  private readonly root: Locator
+  public readonly root: Locator
   public readonly delete: Locator
   public readonly overwrite: Locator
   public readonly reject: Locator
@@ -199,6 +197,7 @@ export class ComfyPage {
   public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
+  public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
   public readonly assets: AssetsHelper
   public readonly queue: QueueHelper
@@ -242,10 +241,11 @@ export class ComfyPage {
     this.workflow = new WorkflowHelper(this)
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
-    this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
+    this.dragDrop = new DragDropHelper(page)
     this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
+    this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
     this.assets = new AssetsHelper(page)
     this.queue = new QueueHelper(page)
@@ -343,8 +343,9 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  /** @deprecated Use standalone `assetPath` from `browser_tests/fixtures/utils/assetPath` directly. */
   public assetPath(fileName: string) {
-    return `./browser_tests/assets/${fileName}`
+    return assetPath(fileName)
   }
 
   async goto() {
@@ -358,7 +359,7 @@ export class ComfyPage {
   }
 
   async delay(ms: number) {
-    return new Promise((resolve) => setTimeout(resolve, ms))
+    return sleep(ms)
   }
 
   /**
@@ -476,49 +477,4 @@ export const comfyPageFixture = base.extend<{
   }
 })
 
-const makeMatcher = function <T>(
-  getValue: (node: NodeReference) => Promise<T> | T,
-  type: string
-) {
-  return async function (
-    this: ExpectMatcherState,
-    node: NodeReference,
-    options?: { timeout?: number; intervals?: number[] }
-  ) {
-    const value = await getValue(node)
-    let assertion = expect(
-      value,
-      'Node is ' + (this.isNot ? '' : 'not ') + type
-    )
-    if (this.isNot) {
-      assertion = assertion.not
-    }
-    await expect(async () => {
-      assertion.toBeTruthy()
-    }).toPass({ timeout: 250, ...options })
-    return {
-      pass: !this.isNot,
-      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
-    }
-  }
-}
-
-export const comfyExpect = expect.extend({
-  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
-  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
-  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
-  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
-    const isFocused = await locator.evaluate(
-      (el) => el === document.activeElement
-    )
-
-    await expect(async () => {
-      expect(isFocused).toBe(!this.isNot)
-    }).toPass(options)
-
-    return {
-      pass: isFocused,
-      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
-    }
-  }
-})
+export { comfyExpect }

browser_tests/fixtures/components/QueuePanel.ts

@@ -0,0 +1,24 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { comfyExpect as expect } from '../ComfyPage'
+import { TestIds } from '../selectors'
+
+export class QueuePanel {
+  readonly overlayToggle: Locator
+  readonly moreOptionsButton: Locator
+
+  constructor(readonly page: Page) {
+    this.overlayToggle = page.getByTestId(TestIds.queue.overlayToggle)
+    this.moreOptionsButton = page.getByLabel(/More options/i).first()
+  }
+
+  async openClearHistoryDialog() {
+    await this.moreOptionsButton.click()
+
+    const clearHistoryAction = this.page.getByTestId(
+      TestIds.queue.clearHistoryAction
+    )
+    await expect(clearHistoryAction).toBeVisible()
+    await clearHistoryAction.click()
+  }
+}

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,4 +1,5 @@
 import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import type { WorkspaceStore } from '../../types/globals'
 import { TestIds } from '../selectors'
@@ -174,6 +175,8 @@ export class AssetsSidebarTab extends SidebarTab {
     super(page, 'assets')
   }
 
+  // --- Tab navigation ---
+
   get generatedTab() {
     return this.page.getByRole('tab', { name: 'Generated' })
   }
@@ -182,6 +185,8 @@ export class AssetsSidebarTab extends SidebarTab {
     return this.page.getByRole('tab', { name: 'Imported' })
   }
 
+  // --- Empty state ---
+
   get emptyStateMessage() {
     return this.page.getByText(
       'Upload files or generate content to see them here'
@@ -192,8 +197,177 @@ export class AssetsSidebarTab extends SidebarTab {
     return this.page.getByText(title)
   }
 
+  // --- Search & filter ---
+
+  get searchInput() {
+    return this.page.getByPlaceholder('Search Assets...')
+  }
+
+  get settingsButton() {
+    return this.page.getByRole('button', { name: 'View settings' })
+  }
+
+  // --- View mode ---
+
+  get listViewOption() {
+    return this.page.getByText('List view')
+  }
+
+  get gridViewOption() {
+    return this.page.getByText('Grid view')
+  }
+
+  // --- Sort options (cloud-only, shown inside settings popover) ---
+
+  get sortNewestFirst() {
+    return this.page.getByText('Newest first')
+  }
+
+  get sortOldestFirst() {
+    return this.page.getByText('Oldest first')
+  }
+
+  get sortLongestFirst() {
+    return this.page.getByText('Generation time (longest first)')
+  }
+
+  get sortFastestFirst() {
+    return this.page.getByText('Generation time (fastest first)')
+  }
+
+  // --- Asset cards ---
+
+  get assetCards() {
+    return this.page.locator('[role="button"][data-selected]')
+  }
+
+  getAssetCardByName(name: string) {
+    return this.page.locator('[role="button"][data-selected]', {
+      hasText: name
+    })
+  }
+
+  get selectedCards() {
+    return this.page.locator('[data-selected="true"]')
+  }
+
+  // --- List view items ---
+
+  get listViewItems() {
+    return this.page.locator(
+      '.sidebar-content-container [role="button"][tabindex="0"]'
+    )
+  }
+
+  // --- Selection footer ---
+
+  get selectionFooter() {
+    return this.page
+      .locator('.sidebar-content-container')
+      .locator('..')
+      .locator('[class*="h-18"]')
+  }
+
+  get selectionCountButton() {
+    return this.page.getByText(/Assets Selected: \d+/)
+  }
+
+  get deselectAllButton() {
+    return this.page.getByText('Deselect all')
+  }
+
+  get deleteSelectedButton() {
+    return this.page
+      .getByTestId('assets-delete-selected')
+      .or(this.page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
+      .first()
+  }
+
+  get downloadSelectedButton() {
+    return this.page
+      .getByTestId('assets-download-selected')
+      .or(this.page.locator('button:has(.icon-\\[lucide--download\\])').last())
+      .first()
+  }
+
+  // --- Context menu ---
+
+  contextMenuItem(label: string) {
+    return this.page.locator('.p-contextmenu').getByText(label)
+  }
+
+  // --- Folder view ---
+
+  get backToAssetsButton() {
+    return this.page.getByText('Back to all assets')
+  }
+
+  // --- Loading ---
+
+  get skeletonLoaders() {
+    return this.page.locator('.sidebar-content-container .animate-pulse')
+  }
+
+  // --- Helpers ---
+
   override async open() {
+    // Remove any toast notifications that may overlay the sidebar button
+    await this.dismissToasts()
     await super.open()
     await this.generatedTab.waitFor({ state: 'visible' })
   }
+
+  /** Dismiss all visible toast notifications by clicking their close buttons. */
+  async dismissToasts() {
+    const closeButtons = this.page.locator('.p-toast-close-button')
+    for (const btn of await closeButtons.all()) {
+      await btn.click({ force: true }).catch(() => {})
+    }
+    // Wait for all toast elements to fully animate out and detach from DOM
+    await expect(this.page.locator('.p-toast-message'))
+      .toHaveCount(0, { timeout: 5000 })
+      .catch(() => {})
+  }
+
+  async switchToImported() {
+    await this.dismissToasts()
+    await this.importedTab.click()
+    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
+  }
+
+  async switchToGenerated() {
+    await this.dismissToasts()
+    await this.generatedTab.click()
+    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true', {
+      timeout: 3000
+    })
+  }
+
+  async openSettingsMenu() {
+    await this.dismissToasts()
+    await this.settingsButton.click()
+    // Wait for popover content to render
+    await this.listViewOption
+      .or(this.gridViewOption)
+      .first()
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async rightClickAsset(name: string) {
+    const card = this.getAssetCardByName(name)
+    await card.click({ button: 'right' })
+    await this.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async waitForAssets(count?: number) {
+    if (count !== undefined) {
+      await expect(this.assetCards).toHaveCount(count, { timeout: 5000 })
+    } else {
+      await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
+    }
+  }
 }

browser_tests/fixtures/components/SignInDialog.ts

@@ -0,0 +1,77 @@
+import type { Locator, Page } from '@playwright/test'
+
+import { BaseDialog } from './BaseDialog'
+
+export class SignInDialog extends BaseDialog {
+  readonly emailInput: Locator
+  readonly passwordInput: Locator
+  readonly signInButton: Locator
+  readonly forgotPasswordLink: Locator
+  readonly apiKeyButton: Locator
+  readonly termsLink: Locator
+  readonly privacyLink: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.emailInput = this.root.locator('#comfy-org-sign-in-email')
+    this.passwordInput = this.root.locator('#comfy-org-sign-in-password')
+    this.signInButton = this.root.getByRole('button', { name: 'Sign in' })
+    this.forgotPasswordLink = this.root.getByText('Forgot password?')
+    this.apiKeyButton = this.root.getByRole('button', {
+      name: 'Comfy API Key'
+    })
+    this.termsLink = this.root.getByRole('link', { name: 'Terms of Use' })
+    this.privacyLink = this.root.getByRole('link', { name: 'Privacy Policy' })
+  }
+
+  async open() {
+    await this.page.evaluate(() => {
+      void window.app!.extensionManager.dialog.showSignInDialog()
+    })
+    await this.waitForVisible()
+  }
+
+  get heading() {
+    return this.root.getByRole('heading').first()
+  }
+
+  get signUpLink() {
+    return this.root.getByText('Sign up', { exact: true })
+  }
+
+  get signInLink() {
+    return this.root.getByText('Sign in', { exact: true })
+  }
+
+  get signUpEmailInput() {
+    return this.root.locator('#comfy-org-sign-up-email')
+  }
+
+  get signUpPasswordInput() {
+    return this.root.locator('#comfy-org-sign-up-password')
+  }
+
+  get signUpConfirmPasswordInput() {
+    return this.root.locator('#comfy-org-sign-up-confirm-password')
+  }
+
+  get signUpButton() {
+    return this.root.getByRole('button', { name: 'Sign up', exact: true })
+  }
+
+  get apiKeyHeading() {
+    return this.root.getByRole('heading', { name: 'API Key' })
+  }
+
+  get apiKeyInput() {
+    return this.root.locator('#comfy-org-api-key')
+  }
+
+  get backButton() {
+    return this.root.getByRole('button', { name: 'Back' })
+  }
+
+  get dividerText() {
+    return this.root.getByText('Or continue with')
+  }
+}

browser_tests/fixtures/data/README.md

@@ -0,0 +1,41 @@
+# Mock Data Fixtures
+
+Deterministic mock data for browser (Playwright) tests. Each fixture
+exports typed objects that conform to generated types from
+`packages/ingest-types` or Zod schemas in `src/schemas/`.
+
+## Usage with `page.route()`
+
+> **Note:** `comfyPageFixture` navigates to the app during `setup()`,
+> before the test body runs. Routes must be registered before navigation
+> to intercept initial page-load requests. Set up routes in a custom
+> fixture or `test.beforeEach` that runs before `comfyPage.setup()`.
+
+```ts
+import { createMockNodeDefinitions } from '../fixtures/data/nodeDefinitions'
+import { mockSystemStats } from '../fixtures/data/systemStats'
+
+// Extend the base set with test-specific nodes
+const nodeDefs = createMockNodeDefinitions({
+  MyCustomNode: {
+    /* ... */
+  }
+})
+
+await page.route('**/api/object_info', (route) =>
+  route.fulfill({ json: nodeDefs })
+)
+
+await page.route('**/api/system_stats', (route) =>
+  route.fulfill({ json: mockSystemStats })
+)
+```
+
+## Adding new fixtures
+
+1. Locate the generated type in `packages/ingest-types` or Zod schema
+   in `src/schemas/` for the endpoint you need.
+2. Create a new `.ts` file here that imports and satisfies the
+   corresponding TypeScript type.
+3. Keep values realistic but stable — avoid dates, random IDs, or
+   values that would cause test flakiness.

browser_tests/fixtures/data/nodeDefinitions.ts

@@ -0,0 +1,155 @@
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+
+/**
+ * Base node definitions covering the default workflow.
+ * Use {@link createMockNodeDefinitions} to extend with per-test overrides.
+ */
+const baseNodeDefinitions: Record<string, ComfyNodeDef> = {
+  KSampler: {
+    input: {
+      required: {
+        model: ['MODEL', {}],
+        seed: [
+          'INT',
+          {
+            default: 0,
+            min: 0,
+            max: 0xfffffffffffff,
+            control_after_generate: true
+          }
+        ],
+        steps: ['INT', { default: 20, min: 1, max: 10000 }],
+        cfg: ['FLOAT', { default: 8.0, min: 0.0, max: 100.0, step: 0.1 }],
+        sampler_name: [['euler', 'euler_ancestral', 'heun', 'dpm_2'], {}],
+        scheduler: [['normal', 'karras', 'exponential', 'simple'], {}],
+        positive: ['CONDITIONING', {}],
+        negative: ['CONDITIONING', {}],
+        latent_image: ['LATENT', {}]
+      },
+      optional: {
+        denoise: ['FLOAT', { default: 1.0, min: 0.0, max: 1.0, step: 0.01 }]
+      }
+    },
+    output: ['LATENT'],
+    output_is_list: [false],
+    output_name: ['LATENT'],
+    name: 'KSampler',
+    display_name: 'KSampler',
+    description: 'Samples latents using the provided model and conditioning.',
+    category: 'sampling',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  CheckpointLoaderSimple: {
+    input: {
+      required: {
+        ckpt_name: [
+          ['v1-5-pruned.safetensors', 'sd_xl_base_1.0.safetensors'],
+          {}
+        ]
+      }
+    },
+    output: ['MODEL', 'CLIP', 'VAE'],
+    output_is_list: [false, false, false],
+    output_name: ['MODEL', 'CLIP', 'VAE'],
+    name: 'CheckpointLoaderSimple',
+    display_name: 'Load Checkpoint',
+    description: 'Loads a diffusion model checkpoint.',
+    category: 'loaders',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  CLIPTextEncode: {
+    input: {
+      required: {
+        text: ['STRING', { multiline: true, dynamicPrompts: true }],
+        clip: ['CLIP', {}]
+      }
+    },
+    output: ['CONDITIONING'],
+    output_is_list: [false],
+    output_name: ['CONDITIONING'],
+    name: 'CLIPTextEncode',
+    display_name: 'CLIP Text Encode (Prompt)',
+    description: 'Encodes a text prompt using a CLIP model.',
+    category: 'conditioning',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  EmptyLatentImage: {
+    input: {
+      required: {
+        width: ['INT', { default: 512, min: 16, max: 16384, step: 8 }],
+        height: ['INT', { default: 512, min: 16, max: 16384, step: 8 }],
+        batch_size: ['INT', { default: 1, min: 1, max: 4096 }]
+      }
+    },
+    output: ['LATENT'],
+    output_is_list: [false],
+    output_name: ['LATENT'],
+    name: 'EmptyLatentImage',
+    display_name: 'Empty Latent Image',
+    description: 'Creates an empty latent image of the specified dimensions.',
+    category: 'latent',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  VAEDecode: {
+    input: {
+      required: {
+        samples: ['LATENT', {}],
+        vae: ['VAE', {}]
+      }
+    },
+    output: ['IMAGE'],
+    output_is_list: [false],
+    output_name: ['IMAGE'],
+    name: 'VAEDecode',
+    display_name: 'VAE Decode',
+    description: 'Decodes latent images back into pixel space.',
+    category: 'latent',
+    output_node: false,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  },
+
+  SaveImage: {
+    input: {
+      required: {
+        images: ['IMAGE', {}],
+        filename_prefix: ['STRING', { default: 'ComfyUI' }]
+      }
+    },
+    output: [],
+    output_is_list: [],
+    output_name: [],
+    name: 'SaveImage',
+    display_name: 'Save Image',
+    description: 'Saves images to the output directory.',
+    category: 'image',
+    output_node: true,
+    python_module: 'nodes',
+    deprecated: false,
+    experimental: false
+  }
+}
+
+export function createMockNodeDefinitions(
+  overrides?: Record<string, ComfyNodeDef>
+): Record<string, ComfyNodeDef> {
+  const base = structuredClone(baseNodeDefinitions)
+  return overrides ? { ...base, ...overrides } : base
+}

browser_tests/fixtures/data/systemStats.ts

@@ -0,0 +1,22 @@
+import type { SystemStatsResponse } from '@comfyorg/ingest-types'
+
+export const mockSystemStats: SystemStatsResponse = {
+  system: {
+    os: 'posix',
+    python_version: '3.11.9 (main, Apr  2 2024, 08:25:04) [GCC 13.2.0]',
+    embedded_python: false,
+    comfyui_version: '0.3.10',
+    pytorch_version: '2.4.0+cu124',
+    argv: ['main.py', '--listen', '0.0.0.0'],
+    ram_total: 67108864000,
+    ram_free: 52428800000
+  },
+  devices: [
+    {
+      name: 'NVIDIA GeForce RTX 4090',
+      type: 'cuda',
+      vram_total: 25769803776,
+      vram_free: 23622320128
+    }
+  ]
+}

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -5,6 +5,63 @@ import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/j
 const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
 const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
 
+/** Factory to create a mock completed job with preview output. */
+export function createMockJob(
+  overrides: Partial<RawJobListItem> & { id: string }
+): RawJobListItem {
+  const now = Date.now() / 1000
+  return {
+    status: 'completed',
+    create_time: now,
+    execution_start_time: now,
+    execution_end_time: now + 5,
+    preview_output: {
+      filename: `output_${overrides.id}.png`,
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1,
+    priority: 0,
+    ...overrides
+  }
+}
+
+/** Create multiple mock jobs with sequential IDs and staggered timestamps. */
+export function createMockJobs(
+  count: number,
+  baseOverrides?: Partial<RawJobListItem>
+): RawJobListItem[] {
+  const now = Date.now() / 1000
+  return Array.from({ length: count }, (_, i) =>
+    createMockJob({
+      id: `job-${String(i + 1).padStart(3, '0')}`,
+      create_time: now - i * 60,
+      execution_start_time: now - i * 60,
+      execution_end_time: now - i * 60 + 5 + i,
+      preview_output: {
+        filename: `image_${String(i + 1).padStart(3, '0')}.png`,
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      },
+      ...baseOverrides
+    })
+  )
+}
+
+/** Create mock imported file names with various media types. */
+export function createMockImportedFiles(count: number): string[] {
+  const extensions = ['png', 'jpg', 'mp4', 'wav', 'glb', 'txt']
+  return Array.from(
+    { length: count },
+    (_, i) =>
+      `imported_${String(i + 1).padStart(3, '0')}.${extensions[i % extensions.length]}`
+  )
+}
+
 function parseLimit(url: URL, total: number): number {
   const value = Number(url.searchParams.get('limit'))
   if (!Number.isInteger(value) || value <= 0) {

browser_tests/fixtures/helpers/BuilderFooterHelper.ts

@@ -30,6 +30,10 @@ export class BuilderFooterHelper {
     return this.page.getByTestId(TestIds.builder.saveButton)
   }
 
+  get saveGroup(): Locator {
+    return this.page.getByTestId(TestIds.builder.saveGroup)
+  }
+
   get saveAsButton(): Locator {
     return this.page.getByTestId(TestIds.builder.saveAsButton)
   }

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -4,12 +4,10 @@ import type { Page } from '@playwright/test'
 
 import type { Position } from '../types'
 import { getMimeType } from './mimeTypeUtil'
+import { assetPath } from '../utils/paths'
 
 export class DragDropHelper {
-  constructor(
-    private readonly page: Page,
-    private readonly assetPath: (fileName: string) => string
-  ) {}
+  constructor(private readonly page: Page) {}
 
   private async nextFrame(): Promise<void> {
     await this.page.evaluate(() => {
@@ -49,7 +47,7 @@ export class DragDropHelper {
     } = { dropPosition, preserveNativePropagation }
 
     if (fileName) {
-      const filePath = this.assetPath(fileName)
+      const filePath = assetPath(fileName)
       const buffer = readFileSync(filePath)
 
       evaluateParams.fileName = fileName

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -30,6 +30,8 @@ export interface PerfMeasurement {
   eventListeners: number
   totalBlockingTimeMs: number
   frameDurationMs: number
+  p95FrameDurationMs: number
+  allFrameDurationsMs: number[]
 }
 
 export class PerformanceHelper {
@@ -101,13 +103,13 @@ export class PerformanceHelper {
   }
 
   /**
-   * Measure average frame duration via rAF timing over a sample window.
-   * Returns average ms per frame (lower = better, 16.67 = 60fps).
+   * Measure individual frame durations via rAF timing over a sample window.
+   * Returns all per-frame durations so callers can compute avg, p95, etc.
    */
-  private async measureFrameDuration(sampleFrames = 10): Promise<number> {
+  private async measureFrameDurations(sampleFrames = 30): Promise<number[]> {
     return this.page.evaluate((frames) => {
-      return new Promise<number>((resolve) => {
-        const timeout = setTimeout(() => resolve(0), 5000)
+      return new Promise<number[]>((resolve) => {
+        const timeout = setTimeout(() => resolve([]), 5000)
         const timestamps: number[] = []
         let count = 0
         function tick(ts: number) {
@@ -118,11 +120,14 @@ export class PerformanceHelper {
           } else {
             clearTimeout(timeout)
             if (timestamps.length < 2) {
-              resolve(0)
+              resolve([])
               return
             }
-            const total = timestamps[timestamps.length - 1] - timestamps[0]
-            resolve(total / (timestamps.length - 1))
+            const durations: number[] = []
+            for (let i = 1; i < timestamps.length; i++) {
+              durations.push(timestamps[i] - timestamps[i - 1])
+            }
+            resolve(durations)
           }
         }
         requestAnimationFrame(tick)
@@ -177,11 +182,21 @@ export class PerformanceHelper {
       return after[key] - before[key]
     }
 
-    const [totalBlockingTimeMs, frameDurationMs] = await Promise.all([
+    const [totalBlockingTimeMs, allFrameDurationsMs] = await Promise.all([
       this.collectTBT(),
-      this.measureFrameDuration()
+      this.measureFrameDurations()
     ])
 
+    const frameDurationMs =
+      allFrameDurationsMs.length > 0
+        ? allFrameDurationsMs.reduce((a, b) => a + b, 0) /
+          allFrameDurationsMs.length
+        : 0
+
+    const sorted = [...allFrameDurationsMs].sort((a, b) => a - b)
+    const p95FrameDurationMs =
+      sorted.length > 0 ? sorted[Math.ceil(sorted.length * 0.95) - 1] : 0
+
     return {
       name,
       durationMs: delta('Timestamp') * 1000,
@@ -197,7 +212,9 @@ export class PerformanceHelper {
       scriptDurationMs: delta('ScriptDuration') * 1000,
       eventListeners: delta('JSEventListeners'),
       totalBlockingTimeMs,
-      frameDurationMs
+      frameDurationMs,
+      p95FrameDurationMs,
+      allFrameDurationsMs
     }
   }
 }

browser_tests/fixtures/helpers/WorkflowHelper.ts

@@ -7,6 +7,7 @@ import type {
 } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
 import type { WorkspaceStore } from '../../types/globals'
 import type { ComfyPage } from '../ComfyPage'
+import { assetPath } from '../utils/paths'
 
 type FolderStructure = {
   [key: string]: FolderStructure | string
@@ -20,7 +21,7 @@ export class WorkflowHelper {
 
     for (const [key, value] of Object.entries(structure)) {
       if (typeof value === 'string') {
-        const filePath = this.comfyPage.assetPath(value)
+        const filePath = assetPath(value)
         result[key] = readFileSync(filePath, 'utf-8')
       } else {
         result[key] = this.convertLeafToContent(value)
@@ -59,7 +60,7 @@ export class WorkflowHelper {
 
   async loadWorkflow(workflowName: string) {
     await this.comfyPage.workflowUploadInput.setInputFiles(
-      this.comfyPage.assetPath(`${workflowName}.json`)
+      assetPath(`${workflowName}.json`)
     )
     await this.comfyPage.nextFrame()
   }
@@ -146,6 +147,16 @@ export class WorkflowHelper {
     })
   }
 
+  async waitForWorkflowIdle(timeout = 5000): Promise<void> {
+    await this.comfyPage.page.waitForFunction(
+      () =>
+        !(window.app?.extensionManager as WorkspaceStore | undefined)?.workflow
+          ?.isBusy,
+      undefined,
+      { timeout }
+    )
+  }
+
   async getExportedWorkflow(options: { api: true }): Promise<ComfyApiWorkflow>
   async getExportedWorkflow(options?: {
     api?: false

browser_tests/fixtures/selectors.ts

@@ -20,6 +20,7 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
+    closeMinimapButton: 'close-minimap-button',
     toggleLinkVisibilityButton: 'toggle-link-visibility-button',
     zoomControlsButton: 'zoom-controls-button',
     zoomInAction: 'zoom-in-action',
@@ -51,7 +52,8 @@ export const TestIds = {
   topbar: {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    saveButton: 'save-workflow-button',
+    subscribeButton: 'topbar-subscribe-button'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'
@@ -80,6 +82,7 @@ export const TestIds = {
     footerNav: 'builder-footer-nav',
     saveButton: 'builder-save-button',
     saveAsButton: 'builder-save-as-button',
+    saveGroup: 'builder-save-group',
     saveAsChevron: 'builder-save-as-chevron',
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
@@ -96,6 +99,10 @@ export const TestIds = {
   user: {
     currentUserIndicator: 'current-user-indicator'
   },
+  queue: {
+    overlayToggle: 'queue-overlay-toggle',
+    clearHistoryAction: 'clear-history-action'
+  },
   errors: {
     imageLoadError: 'error-loading-image',
     videoLoadError: 'error-loading-video'
@@ -124,4 +131,5 @@ export type TestIdValue =
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.queue)[keyof typeof TestIds.queue]
   | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/fixtures/utils/customMatchers.ts

@@ -0,0 +1,49 @@
+import type { ExpectMatcherState, Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+function makeMatcher<T>(
+  getValue: (node: NodeReference) => Promise<T> | T,
+  type: string
+) {
+  return async function (
+    this: ExpectMatcherState,
+    node: NodeReference,
+    options?: { timeout?: number; intervals?: number[] }
+  ) {
+    await expect(async () => {
+      const value = await getValue(node)
+      const assertion = this.isNot
+        ? expect(value, 'Node is ' + type).not
+        : expect(value, 'Node is not ' + type)
+      assertion.toBeTruthy()
+    }).toPass({ timeout: 250, ...options })
+    return {
+      pass: !this.isNot,
+      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
+    }
+  }
+}
+
+export const comfyExpect = expect.extend({
+  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
+  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
+  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
+    await expect
+      .poll(
+        () => locator.evaluate((el) => el === document.activeElement),
+        options
+      )
+      .toBe(!this.isNot)
+
+    const isFocused = await locator.evaluate(
+      (el) => el === document.activeElement
+    )
+    return {
+      pass: isFocused,
+      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
+    }
+  }
+})

browser_tests/fixtures/utils/paths.ts

@@ -0,0 +1,3 @@
+export function assetPath(fileName: string): string {
+  return `./browser_tests/assets/${fileName}`
+}

browser_tests/fixtures/utils/timing.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}

browser_tests/helpers/perfReporter.ts

@@ -47,7 +47,8 @@ export function logMeasurement(
 export function recordMeasurement(m: PerfMeasurement) {
   mkdirSync(TEMP_DIR, { recursive: true })
   const filename = `${m.name}-${Date.now()}.json`
-  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(m))
+  const { allFrameDurationsMs: _, ...serializable } = m
+  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(serializable))
 }
 
 export function writePerfReport(

browser_tests/tests/actionbar.spec.ts

@@ -2,8 +2,8 @@ import type { Response } from '@playwright/test'
 import { expect, mergeTests } from '@playwright/test'
 
 import type { StatusWsMessage } from '../../src/schemas/apiSchema'
-import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { webSocketFixture } from '../fixtures/ws'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { webSocketFixture } from '@e2e/fixtures/ws'
 import type { WorkspaceStore } from '../types/globals'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)

browser_tests/tests/builderSaveFlow.spec.ts

@@ -189,6 +189,41 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
     await expect(saveAs.nameInput).toBeVisible()
   })
 
+  test('Save button width is consistent across all states', async ({
+    comfyPage
+  }) => {
+    const { appMode } = comfyPage
+    await comfyPage.workflow.loadWorkflow('default')
+    await fitToViewInstant(comfyPage)
+    await appMode.enterBuilder()
+
+    // State 1: Disabled "Save as" (no outputs selected)
+    const disabledBox = await appMode.footer.saveAsButton.boundingBox()
+    expect(disabledBox).toBeTruthy()
+
+    // Select I/O to enable the button
+    await appMode.steps.goToInputs()
+    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+    await appMode.select.selectInputWidget(ksampler)
+    await appMode.steps.goToOutputs()
+    await appMode.select.selectOutputNode()
+
+    // State 2: Enabled "Save as" (unsaved, has outputs)
+    const enabledBox = await appMode.footer.saveAsButton.boundingBox()
+    expect(enabledBox).toBeTruthy()
+    expect(enabledBox!.width).toBe(disabledBox!.width)
+
+    // Save the workflow to transition to the Save + chevron state
+    await builderSaveAs(appMode, `${Date.now()} width-test`, 'App')
+    await appMode.saveAs.closeButton.click()
+    await comfyPage.nextFrame()
+
+    // State 3: Save + chevron button group (saved workflow)
+    const saveButtonGroupBox = await appMode.footer.saveGroup.boundingBox()
+    expect(saveButtonGroupBox).toBeTruthy()
+    expect(saveButtonGroupBox!.width).toBe(disabledBox!.width)
+  })
+
   test('Connect output popover appears when no outputs selected', async ({
     comfyPage
   }) => {

browser_tests/tests/cloud.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+
+/**
+ * Cloud distribution E2E tests.
+ *
+ * These tests run against the cloud build (DISTRIBUTION=cloud) and verify
+ * that cloud-specific behavior is present. In CI, no Firebase auth is
+ * configured, so the auth guard redirects to /cloud/login. The tests
+ * verify the cloud build loaded correctly by checking for cloud-only
+ * routes and elements.
+ */
+test.describe('Cloud distribution UI', { tag: '@cloud' }, () => {
+  test('cloud build redirects unauthenticated users to login', async ({
+    page
+  }) => {
+    await page.goto('http://localhost:8188')
+    // Cloud build has an auth guard that redirects to /cloud/login.
+    // This route only exists in the cloud distribution — it's tree-shaken
+    // in the OSS build. Its presence confirms the cloud build is active.
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+  })
+
+  test('cloud login page renders sign-in options', async ({ page }) => {
+    await page.goto('http://localhost:8188')
+    await expect(page).toHaveURL(/\/cloud\/login/, { timeout: 10_000 })
+    // Verify cloud-specific login UI is rendered
+    await expect(page.getByRole('button', { name: /google/i })).toBeVisible()
+  })
+})

browser_tests/tests/dialogs/queueClearHistory.spec.ts

@@ -0,0 +1,126 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../../fixtures/ComfyPage'
+
+test.describe('Queue Clear History Dialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.queuePanel.overlayToggle.click()
+  })
+
+  test('Dialog opens from queue panel history actions menu', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Dialog shows confirmation message with title, description, and assets note', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByText('Clear your job queue history?')
+    ).toBeVisible()
+
+    await expect(
+      dialog.getByText(
+        'All the finished or failed jobs below will be removed from this Job queue panel.'
+      )
+    ).toBeVisible()
+
+    await expect(
+      dialog.getByText(
+        'Assets generated by these jobs won\u2019t be deleted and can always be viewed from the assets panel.'
+      )
+    ).toBeVisible()
+  })
+
+  test('Cancel button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+    await expect(dialog).not.toBeVisible()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Close (X) button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    await dialog.getByLabel('Close').click()
+    await expect(dialog).not.toBeVisible()
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Confirm clears queue history and closes dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+
+    const clearPromise = comfyPage.page.waitForRequest(
+      (req) => req.url().includes('/api/history') && req.method() === 'POST'
+    )
+
+    await dialog.getByRole('button', { name: 'Clear' }).click()
+
+    const request = await clearPromise
+    expect(request.postDataJSON()).toEqual({ clear: true })
+
+    await expect(dialog).not.toBeVisible()
+  })
+
+  test('Dialog state resets after close and reopen', async ({ comfyPage }) => {
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    const dialog = comfyPage.confirmDialog.root
+    await expect(dialog).toBeVisible()
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+    await expect(dialog).not.toBeVisible()
+
+    await comfyPage.queuePanel.openClearHistoryDialog()
+    await expect(dialog).toBeVisible()
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await expect(clearButton).toBeEnabled()
+  })
+})

browser_tests/tests/dialogs/signInDialog.spec.ts

@@ -0,0 +1,94 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { SignInDialog } from '../../fixtures/components/SignInDialog'
+
+test.describe('Sign In dialog', { tag: '@ui' }, () => {
+  let dialog: SignInDialog
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    dialog = new SignInDialog(comfyPage.page)
+    await dialog.open()
+  })
+
+  test('Should open and show the sign-in form by default', async () => {
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+    await expect(dialog.emailInput).toBeVisible()
+    await expect(dialog.passwordInput).toBeVisible()
+    await expect(dialog.signInButton).toBeVisible()
+  })
+
+  test('Should toggle from sign-in to sign-up form', async () => {
+    await dialog.signUpLink.click()
+
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Create an account' })
+    ).toBeVisible()
+    await expect(dialog.signUpEmailInput).toBeVisible()
+    await expect(dialog.signUpPasswordInput).toBeVisible()
+    await expect(dialog.signUpConfirmPasswordInput).toBeVisible()
+    await expect(dialog.signUpButton).toBeVisible()
+  })
+
+  test('Should toggle back from sign-up to sign-in form', async () => {
+    await dialog.signUpLink.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Create an account' })
+    ).toBeVisible()
+
+    await dialog.signInLink.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+    await expect(dialog.emailInput).toBeVisible()
+    await expect(dialog.passwordInput).toBeVisible()
+  })
+
+  test('Should navigate to the API Key form and back', async () => {
+    await dialog.apiKeyButton.click()
+
+    await expect(dialog.apiKeyHeading).toBeVisible()
+    await expect(dialog.apiKeyInput).toBeVisible()
+
+    await dialog.backButton.click()
+    await expect(
+      dialog.root.getByRole('heading', { name: 'Log in to your account' })
+    ).toBeVisible()
+  })
+
+  test('Should display Terms of Service and Privacy Policy links', async () => {
+    await expect(dialog.termsLink).toBeVisible()
+    await expect(dialog.termsLink).toHaveAttribute(
+      'href',
+      'https://www.comfy.org/terms-of-service'
+    )
+
+    await expect(dialog.privacyLink).toBeVisible()
+    await expect(dialog.privacyLink).toHaveAttribute(
+      'href',
+      'https://www.comfy.org/privacy'
+    )
+  })
+
+  test('Should display the "Or continue with" divider and API key button', async () => {
+    await expect(dialog.dividerText).toBeVisible()
+    await expect(dialog.apiKeyButton).toBeVisible()
+  })
+
+  test('Should show forgot password link on sign-in form', async () => {
+    await expect(dialog.forgotPasswordLink).toBeVisible()
+  })
+
+  test('Should close dialog via close button', async () => {
+    await dialog.close()
+    await expect(dialog.root).toBeHidden()
+  })
+
+  test('Should close dialog via Escape key', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(dialog.root).toBeHidden()
+  })
+})

browser_tests/tests/minimap.spec.ts

@@ -78,4 +78,66 @@ test.describe('Minimap', { tag: '@canvas' }, () => {
 
     await expect(minimapContainer).toBeVisible()
   })
+
+  test('Close button hides minimap', async ({ comfyPage }) => {
+    const minimap = comfyPage.page.locator('.litegraph-minimap')
+    await expect(minimap).toBeVisible()
+
+    await comfyPage.page.getByTestId(TestIds.canvas.closeMinimapButton).click()
+    await expect(minimap).not.toBeVisible()
+
+    const toggleButton = comfyPage.page.getByTestId(
+      TestIds.canvas.toggleMinimapButton
+    )
+    await expect(toggleButton).toBeVisible()
+  })
+
+  test(
+    'Panning canvas moves minimap viewport',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      await expect(minimap).toHaveScreenshot('minimap-before-pan.png')
+
+      await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        canvas.ds.scale = 3
+        canvas.ds.offset[0] = -800
+        canvas.ds.offset[1] = -600
+        canvas.setDirty(true, true)
+      })
+      await expect(minimap).toHaveScreenshot('minimap-after-pan.png')
+    }
+  )
+
+  test(
+    'Viewport rectangle is visible and positioned within minimap',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      const viewport = minimap.locator('.minimap-viewport')
+      await expect(viewport).toBeVisible()
+
+      const minimapBox = await minimap.boundingBox()
+      const viewportBox = await viewport.boundingBox()
+
+      expect(minimapBox).toBeTruthy()
+      expect(viewportBox).toBeTruthy()
+      expect(viewportBox!.width).toBeGreaterThan(0)
+      expect(viewportBox!.height).toBeGreaterThan(0)
+
+      expect(viewportBox!.x + viewportBox!.width).toBeGreaterThan(minimapBox!.x)
+      expect(viewportBox!.y + viewportBox!.height).toBeGreaterThan(
+        minimapBox!.y
+      )
+      expect(viewportBox!.x).toBeLessThan(minimapBox!.x + minimapBox!.width)
+      expect(viewportBox!.y).toBeLessThan(minimapBox!.y + minimapBox!.height)
+
+      await expect(minimap).toHaveScreenshot('minimap-with-viewport.png')
+    }
+  )
 })

browser_tests/tests/propertiesPanel/AGENTS.md

@@ -0,0 +1,34 @@
+# Properties Panel E2E Tests
+
+Tests for the right-side properties panel (`RightSidePanel.vue`).
+
+## Structure
+
+| File                              | Coverage                                                    |
+| --------------------------------- | ----------------------------------------------------------- |
+| `openClose.spec.ts`               | Panel open/close via actionbar and close button             |
+| `workflowOverview.spec.ts`        | No-selection state: tabs, nodes list, global settings       |
+| `nodeSelection.spec.ts`           | Single/multi-node selection, selection changes, tab labels  |
+| `titleEditing.spec.ts`            | Node title editing via pencil icon                          |
+| `searchFiltering.spec.ts`         | Widget search and clear                                     |
+| `nodeSettings.spec.ts`            | Settings tab: node state, color, pinned (requires VueNodes) |
+| `infoTab.spec.ts`                 | Node help content                                           |
+| `errorsTab.spec.ts`               | Errors tab visibility                                       |
+| `propertiesPanelPosition.spec.ts` | Panel position relative to sidebar                          |
+
+## Shared Helper
+
+`PropertiesPanelHelper.ts` — Encapsulates panel locators and actions. Instantiated in `beforeEach`:
+
+```typescript
+let panel: PropertiesPanelHelper
+test.beforeEach(async ({ comfyPage }) => {
+  panel = new PropertiesPanelHelper(comfyPage.page)
+})
+```
+
+## Conventions
+
+- Tests requiring VueNodes rendering enable it in `beforeEach` via `comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)` and call `comfyPage.vueNodes.waitForNodes()`.
+- Verify node state changes via user-facing indicators (text labels like "Bypassed"/"Muted", pin indicator test IDs) rather than internal properties.
+- Color changes are verified via `page.evaluate` accessing node properties, per the guidance in `docs/guidance/playwright.md`.

browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts

@@ -0,0 +1,100 @@
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { TestIds } from '../../fixtures/selectors'
+
+export class PropertiesPanelHelper {
+  readonly root: Locator
+  readonly panelTitle: Locator
+  readonly searchBox: Locator
+  readonly closeButton: Locator
+
+  constructor(readonly page: Page) {
+    this.root = page.getByTestId(TestIds.propertiesPanel.root)
+    this.panelTitle = this.root.locator('h3')
+    this.searchBox = this.root.getByPlaceholder(/^Search/)
+    this.closeButton = this.root.locator('button[aria-pressed]')
+  }
+
+  get tabs(): Locator {
+    return this.root.locator('nav button')
+  }
+
+  getTab(label: string): Locator {
+    return this.root.locator('nav button', { hasText: label })
+  }
+
+  get titleEditIcon(): Locator {
+    return this.panelTitle.locator('i[class*="lucide--pencil"]')
+  }
+
+  get titleInput(): Locator {
+    return this.root.getByTestId(TestIds.node.titleInput)
+  }
+
+  getNodeStateButton(state: 'Normal' | 'Bypass' | 'Mute'): Locator {
+    return this.root.locator('button', { hasText: state })
+  }
+
+  getColorSwatch(colorName: string): Locator {
+    return this.root.locator(`[data-testid="${colorName}"]`)
+  }
+
+  get pinnedSwitch(): Locator {
+    return this.root.locator('[data-p-checked]').first()
+  }
+
+  get subgraphEditButton(): Locator {
+    return this.root.locator('button:has(i[class*="lucide--settings-2"])')
+  }
+
+  get contentArea(): Locator {
+    return this.root.locator('.scrollbar-thin')
+  }
+
+  get errorsTabIcon(): Locator {
+    return this.root.locator('nav i[class*="lucide--octagon-alert"]')
+  }
+
+  get viewAllSettingsButton(): Locator {
+    return this.root.getByRole('button', { name: /view all settings/i })
+  }
+
+  get collapseToggleButton(): Locator {
+    return this.root.locator(
+      'button:has(i[class*="lucide--chevrons-down-up"]), button:has(i[class*="lucide--chevrons-up-down"])'
+    )
+  }
+
+  async open(actionbar: Locator): Promise<void> {
+    if (!(await this.root.isVisible())) {
+      await actionbar.click()
+      await expect(this.root).toBeVisible()
+    }
+  }
+
+  async close(): Promise<void> {
+    if (await this.root.isVisible()) {
+      await this.closeButton.click()
+      await expect(this.root).not.toBeVisible()
+    }
+  }
+
+  async switchToTab(label: string): Promise<void> {
+    await this.getTab(label).click()
+  }
+
+  async editTitle(newTitle: string): Promise<void> {
+    await this.titleEditIcon.click()
+    await this.titleInput.fill(newTitle)
+    await this.titleInput.press('Enter')
+  }
+
+  async searchWidgets(query: string): Promise<void> {
+    await this.searchBox.fill(query)
+  }
+
+  async clearSearch(): Promise<void> {
+    await this.searchBox.fill('')
+  }
+}

browser_tests/tests/propertiesPanel/errorsTab.spec.ts

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Errors tab', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+  })
+
+  test('should show Errors tab when errors exist', async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nextFrame()
+
+    await expect(panel.errorsTabIcon).toBeVisible()
+  })
+
+  test('should not show Errors tab when errors are disabled', async ({
+    comfyPage
+  }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.errorsTabIcon).not.toBeVisible()
+  })
+})

browser_tests/tests/propertiesPanel/infoTab.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Info tab', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+    await panel.switchToTab('Info')
+  })
+
+  test('should show node help content', async () => {
+    await expect(panel.contentArea).toBeVisible()
+    await expect(
+      panel.contentArea.getByRole('heading', { name: 'Inputs' })
+    ).toBeVisible()
+  })
+})

browser_tests/tests/propertiesPanel/nodeSelection.spec.ts

@@ -0,0 +1,126 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Node selection', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+  })
+
+  test.describe('Single node', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+    })
+
+    test('should show node title in panel header', async () => {
+      await expect(panel.panelTitle).toContainText('KSampler')
+    })
+
+    test('should show Parameters, Info, and Settings tabs', async () => {
+      await expect(panel.getTab('Parameters')).toBeVisible()
+      await expect(panel.getTab('Info')).toBeVisible()
+      await expect(panel.getTab('Settings')).toBeVisible()
+    })
+
+    test('should not show Nodes tab for single node', async () => {
+      await expect(panel.getTab('Nodes')).not.toBeVisible()
+    })
+
+    test('should display node widgets in Parameters tab', async () => {
+      await expect(panel.contentArea.getByText('seed')).toBeVisible()
+      await expect(panel.contentArea.getByText('steps')).toBeVisible()
+    })
+  })
+
+  test.describe('Multi-node', () => {
+    test('should show item count in title', async ({ comfyPage }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.panelTitle).toContainText('3 items selected')
+    })
+
+    test('should list all selected nodes in Parameters tab', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+      await expect(
+        panel.root.getByText('CLIP Text Encode (Prompt)')
+      ).toHaveCount(2)
+    })
+
+    test('should not show Info tab for multi-selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.getTab('Info')).not.toBeVisible()
+    })
+  })
+
+  test.describe('Selection changes', () => {
+    test('should update from no selection to node selection', async ({
+      comfyPage
+    }) => {
+      await expect(panel.panelTitle).toContainText('Workflow Overview')
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+    })
+
+    test('should update from node selection back to no selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.deselectAll()
+      })
+      await comfyPage.nextFrame()
+      await expect(panel.panelTitle).toContainText('Workflow Overview')
+    })
+
+    test('should update between different single node selections', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.panelTitle).toContainText('KSampler')
+
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.deselectAll()
+      })
+      await comfyPage.nextFrame()
+      await comfyPage.nodeOps.selectNodes(['Empty Latent Image'])
+      await expect(panel.panelTitle).toContainText('Empty Latent Image')
+    })
+  })
+
+  test.describe('Tab labels', () => {
+    test('should show "Parameters" tab for single node', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes(['KSampler'])
+      await expect(panel.getTab('Parameters')).toBeVisible()
+    })
+
+    test('should show "Nodes" tab label for multi-selection', async ({
+      comfyPage
+    }) => {
+      await comfyPage.nodeOps.selectNodes([
+        'KSampler',
+        'CLIP Text Encode (Prompt)'
+      ])
+      await expect(panel.getTab('Nodes')).toBeVisible()
+    })
+  })
+})

browser_tests/tests/propertiesPanel/nodeSettings.spec.ts

@@ -0,0 +1,122 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Node settings', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+    await panel.switchToTab('Settings')
+  })
+
+  test.describe('Node state', () => {
+    test('should show Normal, Bypass, and Mute state buttons', async () => {
+      await expect(panel.getNodeStateButton('Normal')).toBeVisible()
+      await expect(panel.getNodeStateButton('Bypass')).toBeVisible()
+      await expect(panel.getNodeStateButton('Mute')).toBeVisible()
+    })
+
+    test('should set node to Bypass mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Bypass').click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Bypassed')).toBeVisible()
+    })
+
+    test('should set node to Mute mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Mute').click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Muted')).toBeVisible()
+    })
+
+    test('should restore node to Normal mode', async ({ comfyPage }) => {
+      await panel.getNodeStateButton('Bypass').click()
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByText('Bypassed')).toBeVisible()
+
+      await panel.getNodeStateButton('Normal').click()
+      await expect(nodeLocator.getByText('Bypassed')).not.toBeVisible()
+      await expect(nodeLocator.getByText('Muted')).not.toBeVisible()
+    })
+  })
+
+  test.describe('Node color', () => {
+    test('should display color swatches', async () => {
+      await expect(panel.getColorSwatch('noColor')).toBeVisible()
+      await expect(panel.getColorSwatch('red')).toBeVisible()
+      await expect(panel.getColorSwatch('blue')).toBeVisible()
+    })
+
+    test('should apply color to node', async ({ comfyPage }) => {
+      await panel.getColorSwatch('red').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color != null
+          })
+        )
+        .toBe(true)
+    })
+
+    test('should remove color with noColor swatch', async ({ comfyPage }) => {
+      await panel.getColorSwatch('red').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color != null
+          })
+        )
+        .toBe(true)
+
+      await panel.getColorSwatch('noColor').click()
+
+      await expect
+        .poll(() =>
+          comfyPage.page.evaluate(() => {
+            const selected = window.app!.canvas.selected_nodes
+            const node = Object.values(selected)[0]
+            return node?.color
+          })
+        )
+        .toBeFalsy()
+    })
+  })
+
+  test.describe('Pinned state', () => {
+    test('should display pinned toggle', async () => {
+      await expect(panel.pinnedSwitch).toBeVisible()
+    })
+
+    test('should toggle pinned state', async ({ comfyPage }) => {
+      await panel.pinnedSwitch.click()
+
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeVisible()
+    })
+
+    test('should unpin previously pinned node', async ({ comfyPage }) => {
+      const nodeLocator = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+      await panel.pinnedSwitch.click()
+      await expect(nodeLocator.getByTestId('node-pin-indicator')).toBeVisible()
+
+      await panel.pinnedSwitch.click()
+      await expect(
+        nodeLocator.getByTestId('node-pin-indicator')
+      ).not.toBeVisible()
+    })
+  })
+})

browser_tests/tests/propertiesPanel/openClose.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Open and close', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+  })
+
+  test('should open via actionbar toggle button', async ({ comfyPage }) => {
+    await expect(panel.root).not.toBeVisible()
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+  })
+
+  test('should close via panel close button', async ({ comfyPage }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+    await panel.closeButton.click()
+    await expect(panel.root).not.toBeVisible()
+  })
+
+  test('should close via close button after opening', async ({ comfyPage }) => {
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+    await panel.close()
+    await expect(panel.root).not.toBeVisible()
+  })
+})

browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts

@@ -1,36 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Properties panel', () => {
-  test('opens and updates title based on selection', async ({ comfyPage }) => {
-    await comfyPage.actionbar.propertiesButton.click()
-
-    const { propertiesPanel } = comfyPage.menu
-
-    await expect(propertiesPanel.panelTitle).toContainText('Workflow Overview')
-
-    await comfyPage.nodeOps.selectNodes([
-      'KSampler',
-      'CLIP Text Encode (Prompt)'
-    ])
-
-    await expect(propertiesPanel.panelTitle).toContainText('3 items selected')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(2)
-
-    await propertiesPanel.searchBox.fill('seed')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(0)
-
-    await propertiesPanel.searchBox.fill('')
-    await expect(propertiesPanel.root.getByText('KSampler')).toHaveCount(1)
-    await expect(
-      propertiesPanel.root.getByText('CLIP Text Encode (Prompt)')
-    ).toHaveCount(2)
-  })
-})

browser_tests/tests/propertiesPanel/searchFiltering.spec.ts

@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Search filtering', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes([
+      'KSampler',
+      'CLIP Text Encode (Prompt)'
+    ])
+  })
+
+  test('should filter nodes by search query', async () => {
+    await panel.searchWidgets('seed')
+    await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(panel.root.getByText('CLIP Text Encode (Prompt)')).toHaveCount(
+      0
+    )
+  })
+
+  test('should restore all nodes when search is cleared', async () => {
+    await panel.searchWidgets('seed')
+    await panel.clearSearch()
+    await expect(panel.root.getByText('KSampler')).toHaveCount(1)
+    await expect(panel.root.getByText('CLIP Text Encode (Prompt)')).toHaveCount(
+      2
+    )
+  })
+
+  test('should show empty state for no matches', async () => {
+    await panel.searchWidgets('nonexistent_widget_xyz')
+    await expect(
+      panel.contentArea.getByText(/no .* match|no results|no items/i)
+    ).toBeVisible()
+  })
+})

browser_tests/tests/propertiesPanel/titleEditing.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Title editing', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await comfyPage.nodeOps.selectNodes(['KSampler'])
+  })
+
+  test('should show pencil icon for editable title', async () => {
+    await expect(panel.titleEditIcon).toBeVisible()
+  })
+
+  test('should enter edit mode on pencil click', async () => {
+    await panel.titleEditIcon.click()
+    await expect(panel.titleInput).toBeVisible()
+  })
+
+  test('should update node title on edit', async () => {
+    const newTitle = 'My Custom Sampler'
+    await panel.editTitle(newTitle)
+    await expect(panel.panelTitle).toContainText(newTitle)
+  })
+
+  test('should not show pencil icon for multi-selection', async ({
+    comfyPage
+  }) => {
+    await comfyPage.nodeOps.selectNodes([
+      'KSampler',
+      'CLIP Text Encode (Prompt)'
+    ])
+    await expect(panel.titleEditIcon).not.toBeVisible()
+  })
+
+  test('should not show pencil icon when nothing is selected', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.deselectAll()
+    })
+    await comfyPage.nextFrame()
+    await expect(panel.panelTitle).toContainText('Workflow Overview')
+    await expect(panel.titleEditIcon).not.toBeVisible()
+  })
+})

browser_tests/tests/propertiesPanel/workflowOverview.spec.ts

@@ -0,0 +1,70 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { PropertiesPanelHelper } from './PropertiesPanelHelper'
+
+test.describe('Properties panel - Workflow Overview', () => {
+  let panel: PropertiesPanelHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    panel = new PropertiesPanelHelper(comfyPage.page)
+    await comfyPage.actionbar.propertiesButton.click()
+    await expect(panel.root).toBeVisible()
+  })
+
+  test('should show "Workflow Overview" title when nothing is selected', async () => {
+    await expect(panel.panelTitle).toContainText('Workflow Overview')
+  })
+
+  test('should show Parameters, Nodes, and Settings tabs', async () => {
+    await expect(panel.getTab('Parameters')).toBeVisible()
+    await expect(panel.getTab('Nodes')).toBeVisible()
+    await expect(panel.getTab('Settings')).toBeVisible()
+  })
+
+  test('should not show Info tab when nothing is selected', async () => {
+    await expect(panel.getTab('Info')).not.toBeVisible()
+  })
+
+  test('should switch to Nodes tab and list all workflow nodes', async ({
+    comfyPage
+  }) => {
+    await panel.switchToTab('Nodes')
+    const nodeCount = await comfyPage.nodeOps.getNodeCount()
+    expect(nodeCount).toBeGreaterThan(0)
+    await expect(panel.contentArea.locator('text=KSampler')).toBeVisible()
+  })
+
+  test('should filter nodes by search in Nodes tab', async () => {
+    await panel.switchToTab('Nodes')
+    await panel.searchWidgets('KSampler')
+    await expect(panel.contentArea.getByText('KSampler').first()).toBeVisible()
+  })
+
+  test('should switch to Settings tab and show global settings', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.viewAllSettingsButton).toBeVisible()
+  })
+
+  test('should show "View all settings" button', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.viewAllSettingsButton).toBeVisible()
+  })
+
+  test('should show Nodes section with toggles', async () => {
+    await panel.switchToTab('Settings')
+    await expect(
+      panel.contentArea.getByRole('button', { name: 'NODES' })
+    ).toBeVisible()
+  })
+
+  test('should show Canvas section with grid settings', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.contentArea.getByText('Canvas')).toBeVisible()
+  })
+
+  test('should show Connection Links section', async () => {
+    await panel.switchToTab('Settings')
+    await expect(panel.contentArea.getByText('Connection Links')).toBeVisible()
+  })
+})

browser_tests/tests/releaseNotifications.spec.ts

@@ -1,8 +1,23 @@
 import { expect } from '@playwright/test'
 
+import type { components } from '@comfyorg/registry-types'
+
+type ReleaseNote = components['schemas']['ReleaseNote']
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'
 
+function createMockRelease(overrides?: Partial<ReleaseNote>): ReleaseNote {
+  return {
+    id: 1,
+    project: 'comfyui',
+    version: 'v0.3.44',
+    attention: 'medium',
+    content: '## New Features\n\n- Added awesome feature',
+    published_at: new Date().toISOString(),
+    ...overrides
+  }
+}
+
 test.describe('Release Notifications', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -22,15 +37,10 @@ test.describe('Release Notifications', () => {
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
+            createMockRelease({
               content:
-                '## New Features\n\n- Added awesome feature\n- Fixed important bug',
-              published_at: new Date().toISOString()
-            }
+                '## New Features\n\n- Added awesome feature\n- Fixed important bug'
+            })
           ])
         })
       } else {
@@ -157,16 +167,7 @@ test.describe('Release Notifications', () => {
         await route.fulfill({
           status: 200,
           contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'high',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease({ attention: 'high' })])
         })
       } else {
         await route.continue()
@@ -250,16 +251,7 @@ test.describe('Release Notifications', () => {
         await route.fulfill({
           status: 200,
           contentType: 'application/json',
-          body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
-              attention: 'medium',
-              content: '## New Features\n\n- Added awesome feature',
-              published_at: new Date().toISOString()
-            }
-          ])
+          body: JSON.stringify([createMockRelease()])
         })
       } else {
         await route.continue()
@@ -303,14 +295,10 @@ test.describe('Release Notifications', () => {
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify([
-            {
-              id: 1,
-              project: 'comfyui',
-              version: 'v0.3.44',
+            createMockRelease({
               attention: 'low',
-              content: '## Bug Fixes\n\n- Fixed minor issue',
-              published_at: new Date().toISOString()
-            }
+              content: '## Bug Fixes\n\n- Fixed minor issue'
+            })
           ])
         })
       } else {

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,8 +1,72 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import {
+  createMockJob,
+  createMockJobs
+} from '../../fixtures/helpers/AssetsHelper'
+import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
 
-test.describe('Assets sidebar', () => {
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const SAMPLE_JOBS: RawJobListItem[] = [
+  createMockJob({
+    id: 'job-alpha',
+    create_time: 1000,
+    execution_start_time: 1000,
+    execution_end_time: 1010,
+    preview_output: {
+      filename: 'landscape.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-beta',
+    create_time: 2000,
+    execution_start_time: 2000,
+    execution_end_time: 2003,
+    preview_output: {
+      filename: 'portrait.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-gamma',
+    create_time: 3000,
+    execution_start_time: 3000,
+    execution_end_time: 3020,
+    preview_output: {
+      filename: 'abstract_art.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '3',
+      mediaType: 'images'
+    },
+    outputs_count: 2
+  })
+]
+
+const SAMPLE_IMPORTED_FILES = [
+  'reference_photo.png',
+  'background.jpg',
+  'audio_clip.wav'
+]
+
+// ==========================================================================
+// 1. Empty states
+// ==========================================================================
+
+test.describe('Assets sidebar - empty states', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.assets.mockEmptyState()
     await comfyPage.setup()
@@ -12,19 +76,705 @@ test.describe('Assets sidebar', () => {
     await comfyPage.assets.clearMocks()
   })
 
-  test('Shows empty-state copy for generated and imported tabs', async ({
-    comfyPage
-  }) => {
+  test('Shows empty-state copy for generated tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
-
     await tab.open()
 
     await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
+  })
 
-    await tab.importedTab.click()
+  test('Shows empty-state copy for imported tab', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.switchToImported()
 
     await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
   })
+
+  test('No asset cards are rendered when empty', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.assetCards).toHaveCount(0)
+  })
+})
+
+// ==========================================================================
+// 2. Tab navigation
+// ==========================================================================
+
+test.describe('Assets sidebar - tab navigation', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Generated tab is active by default', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.importedTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  test('Can switch between Generated and Imported tabs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    // Switch to Imported
+    await tab.switchToImported()
+    await expect(tab.importedTab).toHaveAttribute('aria-selected', 'true')
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'false')
+
+    // Switch back to Generated
+    await tab.switchToGenerated()
+    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('Search is cleared when switching tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    // Type search in Generated tab
+    await tab.searchInput.fill('landscape')
+    await expect(tab.searchInput).toHaveValue('landscape')
+
+    // Switch to Imported tab
+    await tab.switchToImported()
+    await expect(tab.searchInput).toHaveValue('')
+  })
+})
+
+// ==========================================================================
+// 3. Asset display - grid view
+// ==========================================================================
+
+test.describe('Assets sidebar - grid view display', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Displays generated assets as cards in grid view', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.waitForAssets()
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+  })
+
+  test('Displays imported files when switching to Imported tab', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.switchToImported()
+
+    // Wait for imported assets to render
+    await expect(tab.assetCards.first()).toBeVisible({ timeout: 5000 })
+
+    // Imported tab should show the mocked files
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+  })
+})
+
+// ==========================================================================
+// 4. View mode toggle (grid <-> list)
+// ==========================================================================
+
+test.describe('Assets sidebar - view mode toggle', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Can switch to list view via settings menu', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Open settings menu and select list view
+    await tab.openSettingsMenu()
+    await tab.listViewOption.click()
+
+    // List view items should now be visible
+    await expect(tab.listViewItems.first()).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Can switch back to grid view', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Switch to list view
+    await tab.openSettingsMenu()
+    await tab.listViewOption.click()
+    await expect(tab.listViewItems.first()).toBeVisible({ timeout: 5000 })
+
+    // Switch back to grid view (settings popover is still open)
+    await tab.gridViewOption.click()
+    await tab.waitForAssets()
+
+    // Grid cards (with data-selected attribute) should be visible again
+    await expect(tab.assetCards.first()).toBeVisible({ timeout: 5000 })
+  })
+})
+
+// ==========================================================================
+// 5. Search functionality
+// ==========================================================================
+
+test.describe('Assets sidebar - search', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Search input is visible', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.searchInput).toBeVisible()
+  })
+
+  test('Filtering assets by search query reduces displayed count', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    // Search for a specific filename that matches only one asset
+    await tab.searchInput.fill('landscape')
+
+    // Wait for filter to reduce the count
+    await expect(async () => {
+      const filteredCount = await tab.assetCards.count()
+      expect(filteredCount).toBeLessThan(initialCount)
+    }).toPass({ timeout: 5000 })
+  })
+
+  test('Clearing search restores all assets', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    // Filter then clear
+    await tab.searchInput.fill('landscape')
+    await expect(async () => {
+      expect(await tab.assetCards.count()).toBeLessThan(initialCount)
+    }).toPass({ timeout: 5000 })
+
+    await tab.searchInput.fill('')
+    await expect(tab.assetCards).toHaveCount(initialCount, { timeout: 5000 })
+  })
+
+  test('Search with no matches shows empty state', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.searchInput.fill('nonexistent_file_xyz')
+    await expect(tab.assetCards).toHaveCount(0, { timeout: 5000 })
+  })
+})
+
+// ==========================================================================
+// 6. Asset selection
+// ==========================================================================
+
+test.describe('Assets sidebar - selection', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Clicking an asset card selects it', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Click first asset card
+    await tab.assetCards.first().click()
+
+    // Should have data-selected="true"
+    await expect(tab.selectedCards).toHaveCount(1)
+  })
+
+  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const cards = tab.assetCards
+    const cardCount = await cards.count()
+    expect(cardCount).toBeGreaterThanOrEqual(2)
+
+    // Click first card
+    await cards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Ctrl+click second card
+    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
+    await expect(tab.selectedCards).toHaveCount(2)
+  })
+
+  test('Selection shows footer with count and actions', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+
+    // Footer should show selection count
+    await expect(tab.selectionCountButton).toBeVisible({ timeout: 3000 })
+  })
+
+  test('Deselect all clears selection', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Hover over the selection count button to reveal "Deselect all"
+    await tab.selectionCountButton.hover()
+    await expect(tab.deselectAllButton).toBeVisible({ timeout: 3000 })
+
+    // Click "Deselect all"
+    await tab.deselectAllButton.click()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('Selection is cleared when switching tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select an asset
+    await tab.assetCards.first().click()
+    await expect(tab.selectedCards).toHaveCount(1)
+
+    // Switch to Imported tab
+    await tab.switchToImported()
+
+    // Switch back - selection should be cleared
+    await tab.switchToGenerated()
+    await tab.waitForAssets()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+})
+
+// ==========================================================================
+// 7. Context menu
+// ==========================================================================
+
+test.describe('Assets sidebar - context menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Right-clicking an asset shows context menu', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Right-click first asset
+    await tab.assetCards.first().click({ button: 'right' })
+
+    // Context menu should appear with standard items
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible({ timeout: 3000 })
+  })
+
+  test('Context menu contains Download action for output asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Download')).toBeVisible()
+  })
+
+  test('Context menu contains Inspect action for image assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Inspect asset')).toBeVisible()
+  })
+
+  test('Context menu contains Delete action for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Delete')).toBeVisible()
+  })
+
+  test('Context menu contains Copy job ID for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+    await comfyPage.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+
+    await expect(tab.contextMenuItem('Copy job ID')).toBeVisible()
+  })
+
+  test('Context menu contains workflow actions for output assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible({ timeout: 3000 })
+
+    await expect(
+      tab.contextMenuItem('Open as workflow in new tab')
+    ).toBeVisible()
+    await expect(tab.contextMenuItem('Export workflow')).toBeVisible()
+  })
+
+  test('Bulk context menu shows when multiple assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const cards = tab.assetCards
+    const cardCount = await cards.count()
+    expect(cardCount).toBeGreaterThanOrEqual(2)
+
+    // Dismiss any toasts that appeared after asset loading
+    await tab.dismissToasts()
+
+    // Multi-select: use keyboard.down/up so useKeyModifier('Control') detects
+    // the modifier — click({ modifiers }) only sets the mouse event flag and
+    // does not fire a keydown event that VueUse tracks.
+    await cards.first().click()
+    await comfyPage.page.keyboard.down('Control')
+    await cards.nth(1).click()
+    await comfyPage.page.keyboard.up('Control')
+
+    // Verify multi-selection took effect and footer is stable before right-clicking
+    await expect(tab.selectedCards).toHaveCount(2, { timeout: 3000 })
+    await expect(tab.selectionFooter).toBeVisible({ timeout: 3000 })
+
+    // Use dispatchEvent instead of click({ button: 'right' }) to avoid any
+    // overlay intercepting the event, and assert directly without toPass.
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await cards.first().dispatchEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      button: 2
+    })
+    await expect(contextMenu).toBeVisible()
+
+    // Bulk menu should show bulk download action
+    await expect(tab.contextMenuItem('Download all')).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 8. Bulk actions (footer)
+// ==========================================================================
+
+test.describe('Assets sidebar - bulk actions', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Footer shows download button when assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click()
+
+    // Download button in footer should be visible
+    await expect(tab.downloadSelectedButton).toBeVisible({ timeout: 3000 })
+  })
+
+  test('Footer shows delete button when output assets selected', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.assetCards.first().click()
+
+    // Delete button in footer should be visible
+    await expect(tab.deleteSelectedButton).toBeVisible({ timeout: 3000 })
+  })
+
+  test('Selection count displays correct number', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Select two assets
+    const cards = tab.assetCards
+    const cardCount = await cards.count()
+    expect(cardCount).toBeGreaterThanOrEqual(2)
+
+    await cards.first().click()
+    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
+
+    // Selection count should show the count
+    await expect(tab.selectionCountButton).toBeVisible({ timeout: 3000 })
+    const text = await tab.selectionCountButton.textContent()
+    expect(text).toMatch(/Assets Selected: \d+/)
+  })
+})
+
+// ==========================================================================
+// 9. Pagination
+// ==========================================================================
+
+test.describe('Assets sidebar - pagination', () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Initially loads a batch of assets with has_more pagination', async ({
+    comfyPage
+  }) => {
+    // Create a large set of jobs to trigger pagination
+    const manyJobs = createMockJobs(30)
+    await comfyPage.assets.mockOutputHistory(manyJobs)
+    await comfyPage.setup()
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    // Should load at least the first batch
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+  })
+})
+
+// ==========================================================================
+// 10. Settings menu visibility
+// ==========================================================================
+
+test.describe('Assets sidebar - settings menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Settings menu shows view mode options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.openSettingsMenu()
+
+    await expect(tab.listViewOption).toBeVisible()
+    await expect(tab.gridViewOption).toBeVisible()
+  })
+})
+
+// ==========================================================================
+// 11. Sort functionality (cloud-only — sort options require DISTRIBUTION=cloud)
+// ==========================================================================
+
+// Sort options are guarded by isCloud (compile-time). The cloud CI project
+// cannot use comfyPageFixture (auth required). Enable once cloud E2E infra
+// supports authenticated comfyPage setup.
+test.describe('Assets sidebar - sort', () => {
+  test.fixme(true, 'Requires DISTRIBUTION=cloud build with auth bypass')
+  const SORT_JOBS: RawJobListItem[] = [
+    createMockJob({
+      id: 'sort-oldest',
+      create_time: 1000,
+      execution_start_time: 1000,
+      execution_end_time: 1010,
+      preview_output: {
+        filename: 'oldest_asset.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'sort-middle',
+      create_time: 2000,
+      execution_start_time: 2000,
+      execution_end_time: 2003,
+      preview_output: {
+        filename: 'middle_asset.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '2',
+        mediaType: 'images'
+      }
+    }),
+    createMockJob({
+      id: 'sort-newest',
+      create_time: 3000,
+      execution_start_time: 3000,
+      execution_end_time: 3020,
+      preview_output: {
+        filename: 'newest_asset.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '3',
+        mediaType: 'images'
+      }
+    })
+  ]
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.assets.mockOutputHistory(SORT_JOBS)
+    await comfyPage.assets.mockInputFiles([])
+    await comfyPage.setup()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Assets display in newest-first order by default', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets(3)
+
+    const firstCard = tab.assetCards.first()
+    await expect(firstCard).toContainText('newest_asset')
+  })
+
+  test('Sort by oldest first reverses order', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets(3)
+
+    await tab.openSettingsMenu()
+    await tab.sortOldestFirst.click()
+
+    await expect(tab.assetCards.first()).toContainText('oldest_asset')
+    await expect(tab.assetCards.last()).toContainText('newest_asset')
+  })
+
+  test('Sort by longest execution duration', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets(3)
+
+    await tab.openSettingsMenu()
+    await tab.sortLongestFirst.click()
+
+    // Durations: newest=20s, oldest=10s, middle=3s
+    await expect(tab.assetCards.first()).toContainText('newest_asset')
+    await expect(tab.assetCards.last()).toContainText('middle_asset')
+  })
+
+  test('Sort by fastest execution duration', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets(3)
+
+    await tab.openSettingsMenu()
+    await tab.sortFastestFirst.click()
+
+    // Durations: middle=3s, oldest=10s, newest=20s
+    await expect(tab.assetCards.first()).toContainText('middle_asset')
+    await expect(tab.assetCards.last()).toContainText('newest_asset')
+  })
 })

browser_tests/tests/templates.spec.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
+import type { WorkflowTemplates } from '../../src/platform/workflow/templates/types/template'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { TestIds } from '../fixtures/selectors'
 
@@ -244,7 +245,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       await comfyPage.page.route(
         '**/templates/index.json',
         async (route, _) => {
-          const response = [
+          const response: WorkflowTemplates[] = [
             {
               moduleName: 'default',
               title: 'Test Templates',

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

@@ -0,0 +1,528 @@
+import type { Locator } from '@playwright/test'
+
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+
+const BYPASS_CLASS = /before:bg-bypass\/60/
+const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
+
+async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
+  await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
+  await comfyPage.nextFrame()
+}
+
+async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
+  const header = comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .locator('.lg-node-header')
+  await header.click()
+  await header.click({ button: 'right' })
+  const menu = comfyPage.page.locator('.p-contextmenu')
+  await menu.waitFor({ state: 'visible' })
+  return menu
+}
+
+async function openMultiNodeContextMenu(
+  comfyPage: ComfyPage,
+  titles: string[]
+) {
+  // deselectAll via evaluate — clearSelection() clicks at a fixed position
+  // which can hit nodes or the toolbar overlay
+  await comfyPage.page.evaluate(() => window.app!.canvas.deselectAll())
+  await comfyPage.nextFrame()
+
+  for (const title of titles) {
+    const header = comfyPage.vueNodes
+      .getNodeByTitle(title)
+      .locator('.lg-node-header')
+    await header.click({ modifiers: ['ControlOrMeta'] })
+  }
+  await comfyPage.nextFrame()
+
+  const firstHeader = comfyPage.vueNodes
+    .getNodeByTitle(titles[0])
+    .locator('.lg-node-header')
+  const box = await firstHeader.boundingBox()
+  if (!box) throw new Error(`Header for "${titles[0]}" not found`)
+  await comfyPage.page.mouse.click(
+    box.x + box.width / 2,
+    box.y + box.height / 2,
+    { button: 'right' }
+  )
+
+  const menu = comfyPage.page.locator('.p-contextmenu')
+  await menu.waitFor({ state: 'visible' })
+  return menu
+}
+
+function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
+  return comfyPage.page
+    .locator('[data-node-id]')
+    .filter({ hasText: nodeTitle })
+    .getByTestId('node-inner-wrapper')
+}
+
+async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
+  const refs = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+  return refs[0]
+}
+
+test.describe('Vue Node Context Menu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test.describe('Single Node Actions', () => {
+    test('should rename node via context menu', async ({ comfyPage }) => {
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Rename')
+
+      const titleInput = comfyPage.page.locator(
+        '.node-title-editor input[type="text"]'
+      )
+      await titleInput.waitFor({ state: 'visible' })
+      await titleInput.fill('My Renamed Sampler')
+      await titleInput.press('Enter')
+      await comfyPage.nextFrame()
+
+      const renamedNode =
+        comfyPage.vueNodes.getNodeByTitle('My Renamed Sampler')
+      await expect(renamedNode).toBeVisible()
+    })
+
+    test('should copy and paste node via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openContextMenu(comfyPage, 'Load Checkpoint')
+      await clickExactMenuItem(comfyPage, 'Copy')
+
+      // Internal clipboard paste (menu Copy uses canvas clipboard, not OS)
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.pasteFromClipboard({ connectInputs: false })
+      })
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
+        initialCount + 1
+      )
+    })
+
+    test('should duplicate node via context menu', async ({ comfyPage }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openContextMenu(comfyPage, 'Load Checkpoint')
+      await clickExactMenuItem(comfyPage, 'Duplicate')
+
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
+        initialCount + 1
+      )
+    })
+
+    test('should pin and unpin node via context menu', async ({
+      comfyPage
+    }) => {
+      const nodeTitle = 'Load Checkpoint'
+      const nodeRef = await getNodeRef(comfyPage, nodeTitle)
+
+      // Pin via context menu
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Pin')
+
+      const pinIndicator = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator(PIN_INDICATOR)
+      await expect(pinIndicator).toBeVisible()
+      expect(await nodeRef.isPinned()).toBe(true)
+
+      // Verify drag blocked
+      const header = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator('.lg-node-header')
+      const posBeforeDrag = await header.boundingBox()
+      if (!posBeforeDrag) throw new Error('Header not found')
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: posBeforeDrag.x + 10, y: posBeforeDrag.y + 10 },
+        { x: posBeforeDrag.x + 256, y: posBeforeDrag.y + 256 }
+      )
+      const posAfterDrag = await header.boundingBox()
+      expect(posAfterDrag).toEqual(posBeforeDrag)
+
+      // Unpin via context menu
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Unpin')
+
+      await expect(pinIndicator).not.toBeVisible()
+      expect(await nodeRef.isPinned()).toBe(false)
+    })
+
+    test('should bypass node and remove bypass via context menu', async ({
+      comfyPage
+    }) => {
+      const nodeTitle = 'Load Checkpoint'
+      const nodeRef = await getNodeRef(comfyPage, nodeTitle)
+
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Bypass')
+
+      expect(await nodeRef.isBypassed()).toBe(true)
+      await expect(getNodeWrapper(comfyPage, nodeTitle)).toHaveClass(
+        BYPASS_CLASS
+      )
+
+      await openContextMenu(comfyPage, nodeTitle)
+      await clickExactMenuItem(comfyPage, 'Remove Bypass')
+
+      expect(await nodeRef.isBypassed()).toBe(false)
+      await expect(getNodeWrapper(comfyPage, nodeTitle)).not.toHaveClass(
+        BYPASS_CLASS
+      )
+    })
+
+    test('should minimize and expand node via context menu', async ({
+      comfyPage
+    }) => {
+      const fixture = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+      await expect(fixture.body).toBeVisible()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Minimize Node')
+      await expect(fixture.body).not.toBeVisible()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Expand Node')
+      await expect(fixture.body).toBeVisible()
+    })
+
+    test('should convert node to subgraph via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('KSampler')
+      ).not.toBeVisible()
+    })
+  })
+
+  test.describe('Image Node Actions', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.page
+        .context()
+        .grantPermissions(['clipboard-read', 'clipboard-write'])
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.vueNodes.waitForNodes(1)
+    })
+
+    test('should copy image to clipboard via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+      await clickExactMenuItem(comfyPage, 'Copy Image')
+
+      // Verify the clipboard contains an image
+      const hasImage = await comfyPage.page.evaluate(async () => {
+        const items = await navigator.clipboard.read()
+        return items.some((item) =>
+          item.types.some((t) => t.startsWith('image/'))
+        )
+      })
+      expect(hasImage).toBe(true)
+    })
+
+    test('should paste image to LoadImage node via context menu', async ({
+      comfyPage
+    }) => {
+      // Capture the original image src from the node's preview
+      const imagePreview = comfyPage.page.locator('.image-preview img')
+      const originalSrc = await imagePreview.getAttribute('src')
+
+      // Write a test image into the browser clipboard
+      await comfyPage.page.evaluate(async () => {
+        const resp = await fetch('/api/view?filename=example.png&type=input')
+        const blob = await resp.blob()
+        await navigator.clipboard.write([
+          new ClipboardItem({ [blob.type]: blob })
+        ])
+      })
+
+      // Right-click and select Paste Image
+      await openContextMenu(comfyPage, 'Load Image')
+      await clickExactMenuItem(comfyPage, 'Paste Image')
+
+      // Verify the image preview src changed
+      await expect(imagePreview).not.toHaveAttribute('src', originalSrc!)
+    })
+
+    test('should open image in new tab via context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+
+      const popupPromise = comfyPage.page.waitForEvent('popup')
+      await clickExactMenuItem(comfyPage, 'Open Image')
+      const popup = await popupPromise
+
+      expect(popup.url()).toContain('/api/view')
+      expect(popup.url()).toContain('filename=')
+      await popup.close()
+    })
+
+    test('should download image via Save Image context menu', async ({
+      comfyPage
+    }) => {
+      await openContextMenu(comfyPage, 'Load Image')
+
+      const downloadPromise = comfyPage.page.waitForEvent('download')
+      await clickExactMenuItem(comfyPage, 'Save Image')
+      const download = await downloadPromise
+
+      expect(download.suggestedFilename()).toBeTruthy()
+    })
+  })
+
+  test.describe('Subgraph Actions', () => {
+    test('should convert to subgraph and unpack back', async ({
+      comfyPage
+    }) => {
+      // Convert KSampler to subgraph
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('KSampler')
+      ).not.toBeVisible()
+
+      // Unpack the subgraph
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Unpack Subgraph')
+
+      await expect(comfyPage.vueNodes.getNodeByTitle('KSampler')).toBeVisible()
+      await expect(
+        comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      ).not.toBeVisible()
+    })
+
+    test('should open properties panel via Edit Subgraph Widgets', async ({
+      comfyPage
+    }) => {
+      // Convert to subgraph first
+      await openContextMenu(comfyPage, 'Empty Latent Image')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+      await comfyPage.nextFrame()
+
+      // Right-click subgraph and edit widgets
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Edit Subgraph Widgets')
+
+      await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+    })
+
+    test('should add subgraph to library and find in node library', async ({
+      comfyPage
+    }) => {
+      // Convert to subgraph first
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+      await comfyPage.nextFrame()
+
+      // Add to library
+      await openContextMenu(comfyPage, 'New Subgraph')
+      await clickExactMenuItem(comfyPage, 'Add Subgraph to Library')
+
+      // Fill the blueprint name
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('TestBlueprint')
+
+      // Open node library sidebar and search for the blueprint
+      await comfyPage.page.getByRole('button', { name: 'Node Library' }).click()
+      await comfyPage.nextFrame()
+      const searchBox = comfyPage.page.getByRole('combobox', {
+        name: 'Search'
+      })
+      await searchBox.waitFor({ state: 'visible' })
+      await searchBox.fill('TestBlueprint')
+      await comfyPage.nextFrame()
+
+      await expect(comfyPage.page.getByText('TestBlueprint')).toBeVisible()
+    })
+  })
+
+  test.describe('Multi-Node Actions', () => {
+    const nodeTitles = ['Load Checkpoint', 'KSampler']
+
+    test('should batch rename selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Rename')
+
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('MyNode')
+
+      await expect(comfyPage.vueNodes.getNodeByTitle('MyNode 1')).toBeVisible()
+      await expect(comfyPage.vueNodes.getNodeByTitle('MyNode 2')).toBeVisible()
+    })
+
+    test('should copy and paste selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Copy')
+
+      await comfyPage.page.evaluate(() => {
+        window.app!.canvas.pasteFromClipboard({ connectInputs: false })
+      })
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
+        initialCount + nodeTitles.length
+      )
+    })
+
+    test('should duplicate selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Duplicate')
+
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
+        initialCount + nodeTitles.length
+      )
+    })
+
+    test('should pin and unpin selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Pin')
+
+      for (const title of nodeTitles) {
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).toBeVisible()
+      }
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Unpin')
+
+      for (const title of nodeTitles) {
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).not.toBeVisible()
+      }
+    })
+
+    test('should bypass and remove bypass on selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Bypass')
+
+      for (const title of nodeTitles) {
+        const nodeRef = await getNodeRef(comfyPage, title)
+        expect(await nodeRef.isBypassed()).toBe(true)
+        await expect(getNodeWrapper(comfyPage, title)).toHaveClass(BYPASS_CLASS)
+      }
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Remove Bypass')
+
+      for (const title of nodeTitles) {
+        const nodeRef = await getNodeRef(comfyPage, title)
+        expect(await nodeRef.isBypassed()).toBe(false)
+        await expect(getNodeWrapper(comfyPage, title)).not.toHaveClass(
+          BYPASS_CLASS
+        )
+      }
+    })
+
+    test('should minimize and expand selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const fixture1 =
+        await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+      const fixture2 = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+      await expect(fixture1.body).toBeVisible()
+      await expect(fixture2.body).toBeVisible()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Minimize Node')
+
+      await expect(fixture1.body).not.toBeVisible()
+      await expect(fixture2.body).not.toBeVisible()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Expand Node')
+
+      await expect(fixture1.body).toBeVisible()
+      await expect(fixture2.body).toBeVisible()
+    })
+
+    test('should frame selected nodes via context menu', async ({
+      comfyPage
+    }) => {
+      const initialGroupCount = await comfyPage.page.evaluate(
+        () => window.app!.graph.groups.length
+      )
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Frame Nodes')
+
+      const newGroupCount = await comfyPage.page.evaluate(
+        () => window.app!.graph.groups.length
+      )
+      expect(newGroupCount).toBe(initialGroupCount + 1)
+    })
+
+    test('should convert to group node via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Convert to Group Node')
+
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('TestGroupNode')
+
+      const groupNodes = await comfyPage.nodeOps.getNodeRefsByType(
+        'workflow>TestGroupNode'
+      )
+      expect(groupNodes.length).toBe(1)
+    })
+
+    test('should convert selected nodes to subgraph via context menu', async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Convert to Subgraph')
+
+      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+      await expect(subgraphNode).toBeVisible()
+
+      expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(
+        initialCount - nodeTitles.length + 1
+      )
+    })
+  })
+})

browser_tests/tests/workflowPersistence.spec.ts

@@ -0,0 +1,532 @@
+import { readFileSync } from 'fs'
+
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Workflow Persistence', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Sidebar'
+    )
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.workflow.setupWorkflowsDirectory({})
+  })
+
+  test('Rapid tab switching does not desync workflow and graph state', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9533 — desynced workflow/graph state during loading'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('rapid-A')
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.menu.topbar.saveWorkflow('rapid-B')
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+
+    expect(nodeCountA).not.toBe(nodeCountB)
+
+    for (let i = 0; i < 3; i++) {
+      await tab.switchToWorkflow('rapid-A')
+      await tab.switchToWorkflow('rapid-B')
+    }
+
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
+      .toBe(nodeCountB)
+
+    await tab.switchToWorkflow('rapid-A')
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
+      .toBe(nodeCountA)
+  })
+
+  test('Node outputs are preserved when switching workflow tabs', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #9380 — ChangeTracker.store() did not save nodeOutputs, losing preview images on tab switch'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('outputs-test')
+
+    const firstNode = await comfyPage.nodeOps.getFirstNodeRef()
+    expect(firstNode).toBeTruthy()
+    const nodeId = firstNode!.id
+
+    // Simulate node outputs as if execution completed
+    await comfyPage.page.evaluate((id) => {
+      const outputStore = window.app!.nodeOutputs
+      if (outputStore) {
+        outputStore[id] = {
+          images: [{ filename: 'test.png', subfolder: '', type: 'output' }]
+        }
+      }
+    }, String(nodeId))
+
+    // Trigger changeTracker to capture current state including outputs
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { checkState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.checkState()
+    })
+    await comfyPage.nextFrame()
+
+    const outputsBefore = await comfyPage.page.evaluate((id) => {
+      return window.app!.nodeOutputs?.[id]
+    }, String(nodeId))
+    expect(outputsBefore).toBeTruthy()
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.nextFrame()
+
+    await tab.switchToWorkflow('outputs-test')
+    await comfyPage.nextFrame()
+
+    const outputsAfter = await comfyPage.page.evaluate((id) => {
+      return window.app!.nodeOutputs?.[id]
+    }, String(nodeId))
+    expect(outputsAfter).toBeTruthy()
+    expect(outputsAfter?.images).toBeDefined()
+  })
+
+  test('Loading a new workflow cleanly replaces the previous graph', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'Commit 44bb6f13 — canvas graph not reset before workflow load'
+    })
+
+    const defaultNodeCount = await comfyPage.nodeOps.getNodeCount()
+    expect(defaultNodeCount).toBeGreaterThan(1)
+
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(1)
+
+    const nodes = await comfyPage.nodeOps.getNodes()
+    expect(nodes[0].type).toBe('KSampler')
+  })
+
+  test('Widget values on nodes are preserved across workflow tab switches', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #7648 — component widget state lost on graph change'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    await comfyPage.menu.topbar.saveWorkflow('widget-state-test')
+
+    // Read widget values via page.evaluate — these are internal LiteGraph
+    // state not exposed through DOM
+    const widgetValuesBefore = await comfyPage.page.evaluate(() => {
+      const nodes = window.app!.graph.nodes
+      const results: Record<string, unknown[]> = {}
+      for (const node of nodes) {
+        if (node.widgets && node.widgets.length > 0) {
+          results[node.id] = node.widgets.map((w) => ({
+            name: w.name,
+            value: w.value
+          }))
+        }
+      }
+      return results
+    })
+
+    expect(Object.keys(widgetValuesBefore).length).toBeGreaterThan(0)
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.nextFrame()
+
+    await tab.switchToWorkflow('widget-state-test')
+    await comfyPage.nextFrame()
+
+    const widgetValuesAfter = await comfyPage.page.evaluate(() => {
+      const nodes = window.app!.graph.nodes
+      const results: Record<string, unknown[]> = {}
+      for (const node of nodes) {
+        if (node.widgets && node.widgets.length > 0) {
+          results[node.id] = node.widgets.map((w) => ({
+            name: w.name,
+            value: w.value
+          }))
+        }
+      }
+      return results
+    })
+
+    expect(widgetValuesAfter).toEqual(widgetValuesBefore)
+  })
+
+  test('API format workflow with missing node types partially loads', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9694 — loadApiJson early-returned on missing node types'
+    })
+
+    const fixturePath = comfyPage.assetPath(
+      'nodes/api_workflow_with_missing_nodes.json'
+    )
+    const apiWorkflow = JSON.parse(readFileSync(fixturePath, 'utf-8'))
+
+    await comfyPage.page.evaluate(async (workflow) => {
+      await window.app!.loadApiJson(workflow, 'test-api-workflow.json')
+    }, apiWorkflow)
+    await comfyPage.nextFrame()
+
+    // Known nodes (KSampler, EmptyLatentImage) should load; unknown node skipped
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBeGreaterThanOrEqual(2)
+
+    const nodeTypes = await comfyPage.page.evaluate(() => {
+      return window.app!.graph.nodes.map((n: { type: string }) => n.type)
+    })
+    expect(nodeTypes).toContain('KSampler')
+    expect(nodeTypes).toContain('EmptyLatentImage')
+    expect(nodeTypes).not.toContain('NonExistentCustomNode_XYZ_12345')
+  })
+
+  test('Canvas has auxclick handler to prevent middle-click paste', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #8259 — middle-click paste duplicates entire workflow on Linux'
+    })
+
+    const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.canvas.click({
+      button: 'middle',
+      position: { x: 100, y: 100 }
+    })
+    await comfyPage.nextFrame()
+
+    const nodeCountAfter = await comfyPage.nodeOps.getNodeCount()
+    expect(nodeCountAfter).toBe(initialNodeCount)
+  })
+
+  test('Exported workflow does not contain transient blob: URLs', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #8715 — transient image URLs leaked into workflow serialization'
+    })
+
+    const exportedWorkflow = await comfyPage.workflow.getExportedWorkflow()
+
+    for (const node of exportedWorkflow.nodes) {
+      if (node.widgets_values && Array.isArray(node.widgets_values)) {
+        for (const value of node.widgets_values) {
+          if (typeof value === 'string') {
+            expect(value).not.toMatch(/^blob:/)
+            expect(value).not.toMatch(/^https?:\/\/.*\/api\/view/)
+          }
+        }
+      }
+    }
+  })
+
+  test('Changing locale does not break workflow operations', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #8963 — template workflows not reloaded on locale change'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+    await comfyPage.menu.topbar.saveWorkflow('locale-test')
+
+    const initialNodeCount = await comfyPage.nodeOps.getNodeCount()
+
+    await comfyPage.settings.setSetting('Comfy.Locale', 'zh')
+    await comfyPage.nextFrame()
+
+    await comfyPage.settings.setSetting('Comfy.Locale', 'en')
+    await comfyPage.nextFrame()
+
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .toBe(initialNodeCount)
+
+    await expect.poll(() => tab.getActiveWorkflowName()).toBe('locale-test')
+  })
+
+  test('Node links survive save/load/switch cycles', async ({ comfyPage }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description: 'PR #9533 — node links must survive serialization roundtrips'
+    })
+
+    const tab = comfyPage.menu.workflowsTab
+    await tab.open()
+
+    // Link count requires internal graph state — not exposed via DOM
+    const linkCountBefore = await comfyPage.page.evaluate(() => {
+      return window.app!.graph.links
+        ? Object.keys(window.app!.graph.links).length
+        : 0
+    })
+    expect(linkCountBefore).toBeGreaterThan(0)
+
+    await comfyPage.menu.topbar.saveWorkflow('links-test')
+
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.nextFrame()
+
+    await tab.switchToWorkflow('links-test')
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    const linkCountAfter = await comfyPage.page.evaluate(() => {
+      return window.app!.graph.links
+        ? Object.keys(window.app!.graph.links).length
+        : 0
+    })
+    expect(linkCountAfter).toBe(linkCountBefore)
+  })
+
+  test('Closing an inactive tab with save preserves its own content', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — saveWorkflow called checkState on inactive tab, serializing the active graph instead'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B: duplicate and save
+    await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
+    await comfyPage.nextFrame()
+    await comfyPage.menu.topbar.saveWorkflow(nameB)
+
+    // Add a Note node in B to mark it as modified
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+    expect(nodeCountB).toBe(nodeCountA + 1)
+
+    // Trigger checkState so isModified is set
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { checkState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.checkState()
+    })
+
+    // Switch to A via topbar tab (making B inactive)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Close inactive B tab via middle-click — triggers "Save before closing?"
+    await comfyPage.menu.topbar.getWorkflowTab(nameB).click({
+      button: 'middle'
+    })
+
+    // Click "Save" in the dirty close dialog
+    const saveButton = comfyPage.page.getByRole('button', { name: 'Save' })
+    await saveButton.waitFor({ state: 'visible' })
+    await saveButton.click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    // Verify we're still on A with A's content
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Re-open B from sidebar saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have the extra Note node we added, not A's node count
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
+      .toBe(nodeCountB)
+  })
+
+  test('Closing an inactive unsaved tab with save preserves its own content', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — saveWorkflowAs called checkState on inactive temp tab, serializing the active graph'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B as an unsaved workflow with a Note node
+    await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+
+    // Trigger checkState so isModified is set
+    await comfyPage.page.evaluate(() => {
+      const em = window.app!.extensionManager as unknown as Record<
+        string,
+        { activeWorkflow?: { changeTracker?: { checkState(): void } } }
+      >
+      em.workflow?.activeWorkflow?.changeTracker?.checkState()
+    })
+
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+    expect(nodeCountB).toBe(1)
+    expect(nodeCountA).not.toBe(nodeCountB)
+
+    // Switch to A via topbar tab (making unsaved B inactive)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Close inactive unsaved B tab — triggers "Save before closing?"
+    await comfyPage.menu.topbar
+      .getWorkflowTab('Unsaved Workflow')
+      .click({ button: 'middle' })
+
+    // Click "Save" in the dirty close dialog (scoped to dialog)
+    const dialog = comfyPage.page.getByRole('dialog')
+    const saveButton = dialog.getByRole('button', { name: 'Save' })
+    await saveButton.waitFor({ state: 'visible' })
+    await saveButton.click()
+
+    // Fill in the filename dialog
+    const saveDialog = comfyPage.menu.topbar.getSaveDialog()
+    await saveDialog.waitFor({ state: 'visible' })
+    await saveDialog.fill(nameB)
+    await comfyPage.page.keyboard.press('Enter')
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await comfyPage.nextFrame()
+
+    // Verify we're still on A with A's content
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Re-open B from sidebar saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have 1 node (the Note), not A's node count
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
+      .toBe(nodeCountB)
+  })
+
+  test('Splitter panel sizes persist correctly in localStorage', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'Commits 91f197d9d + a1b7e57bc — splitter panel size drift on reload'
+    })
+
+    await comfyPage.page.evaluate(() => {
+      localStorage.setItem(
+        'Comfy.Splitter.MainSplitter',
+        JSON.stringify([30, 70])
+      )
+    })
+
+    await comfyPage.setup({ clearStorage: false })
+    await comfyPage.nextFrame()
+
+    const storedSizes = await comfyPage.page.evaluate(() => {
+      const raw = localStorage.getItem('Comfy.Splitter.MainSplitter')
+      return raw ? JSON.parse(raw) : null
+    })
+
+    expect(storedSizes).toBeTruthy()
+    expect(Array.isArray(storedSizes)).toBe(true)
+    for (const size of storedSizes as number[]) {
+      expect(typeof size).toBe('number')
+      expect(size).toBeGreaterThanOrEqual(0)
+      expect(size).not.toBeNaN()
+    }
+    const total = (storedSizes as number[]).reduce(
+      (a: number, b: number) => a + b,
+      0
+    )
+    expect(total).toBeGreaterThan(90)
+    expect(total).toBeLessThanOrEqual(101)
+  })
+})

docs/FEATURE_FLAGS.md

@@ -363,7 +363,7 @@ Test your feature flags with different combinations:
 ### Example Test
 
 ```typescript
-// In tests-ui/tests/api.featureFlags.test.ts
+// Example from a colocated unit test
 it('should handle preview metadata based on feature flag', () => {
   // Mock server supports feature
   api.serverFeatureFlags = { supports_preview_metadata: true }

docs/guidance/playwright.md

@@ -117,6 +117,18 @@ export const test = base.extend<{
 - Keep fixtures modular — extend `@playwright/test` base, not
   `comfyPageFixture`, so they can be composed via `mergeTests`
 
+## Custom Assertions
+
+Add assertion methods directly on the page object or helper class instead of extending `comfyExpect`. Page object methods are discoverable via IntelliSense without special imports.
+
+```typescript
+// ✅ Page object assertions
+await node.expectPinned()
+await node.expectBypassed()
+
+// ❌ Do not add custom matchers to comfyExpect
+```
+
 ## Test Tags
 
 - `@mobile` — Mobile viewport tests
@@ -143,6 +155,47 @@ Key schema locations:
 - `src/platform/workflow/validation/schemas/workflowSchema.ts` — Workflow validation (`ComfyWorkflowJSON`, `ComfyApiWorkflow`)
 - `src/types/metadataTypes.ts` — Asset metadata types
 
+## Typed API Mocks
+
+When mocking API responses with `route.fulfill()`, **always** type the response body
+using existing schemas or generated types — never use untyped inline JSON objects.
+This catches shape mismatches at compile time instead of through flaky runtime failures.
+
+All three generated-type packages (`ingest-types`, `registry-types`, `generatedManagerTypes`)
+are auto-generated from their respective OpenAPI specs. Prefer these as the single
+source of truth for any mock that targets their endpoints.
+
+### Sources of truth
+
+| Endpoint category                                   | Type source                                                                                         |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Cloud-only (hub, billing, workflows)                | `@comfyorg/ingest-types` (`packages/ingest-types`, auto-generated from OpenAPI)                     |
+| Registry (releases, nodes, publishers)              | `@comfyorg/registry-types` (`packages/registry-types`, auto-generated from OpenAPI)                 |
+| Manager (queue tasks, packages)                     | `generatedManagerTypes.ts` (`src/workbench/extensions/manager/types/`, auto-generated from OpenAPI) |
+| Python backend (queue, history, settings, features) | Manual Zod schemas in `src/schemas/apiSchema.ts`                                                    |
+| Node definitions                                    | `src/schemas/nodeDefSchema.ts`                                                                      |
+| Templates                                           | `src/platform/workflow/templates/types/template.ts`                                                 |
+
+### Patterns
+
+```typescript
+// ✅ Import the type and annotate mock data
+import type { ReleaseNote } from '@/platform/updates/common/releaseService'
+
+const mockRelease: ReleaseNote = {
+  id: 1,
+  project: 'comfyui',
+  version: 'v0.3.44',
+  attention: 'medium',
+  content: '## New Features',
+  published_at: new Date().toISOString()
+}
+body: JSON.stringify([mockRelease])
+
+// ❌ Untyped inline JSON — schema drift goes unnoticed
+body: JSON.stringify([{ id: 1, project: 'comfyui', version: 'v0.3.44', ... }])
+```
+
 ## Running Tests
 
 ```bash

docs/testing/store-testing.md

@@ -17,7 +17,7 @@ This guide covers patterns and examples for testing Pinia stores in the ComfyUI
 Basic setup for testing Pinia stores:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -51,7 +51,7 @@ describe('useWorkflowStore', () => {
 Testing store state changes:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 it('should create a temporary workflow with a unique path', () => {
   const workflow = store.createTemporary()
   expect(workflow.path).toBe('workflows/Unsaved Workflow.json')
@@ -72,7 +72,7 @@ it('should create a temporary workflow not clashing with persisted workflows', a
 Testing store actions:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 describe('openWorkflow', () => {
   it('should load and open a temporary workflow', async () => {
     // Create a test workflow
@@ -115,7 +115,7 @@ describe('openWorkflow', () => {
 Testing store getters:
 
 ```typescript
-// Example from: tests-ui/tests/store/modelStore.test.ts
+// Example from a colocated store unit test
 describe('getters', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
@@ -162,7 +162,7 @@ describe('getters', () => {
 Mocking API and other dependencies:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 // Add mock for api at the top of the file
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -205,7 +205,7 @@ describe('syncWorkflows', () => {
 Testing store watchers and reactive behavior:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 import { nextTick } from 'vue'
 
 describe('Subgraphs', () => {
@@ -253,7 +253,7 @@ describe('Subgraphs', () => {
 Testing store integration with other parts of the application:
 
 ```typescript
-// Example from: tests-ui/tests/store/workflowStore.test.ts
+// Example from a colocated store unit test
 describe('renameWorkflow', () => {
   it('should rename workflow and update bookmarks', async () => {
     const workflow = store.createTemporary('dir/test.json')

docs/testing/unit-testing.md

@@ -18,7 +18,7 @@ This guide covers patterns and examples for unit testing utilities, composables,
 Testing Vue composables requires handling reactivity correctly:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+// Example from a colocated composable unit test
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { useServerLogs } from '@/composables/useServerLogs'
@@ -59,7 +59,7 @@ describe('useServerLogs', () => {
 Testing LiteGraph-related functionality:
 
 ```typescript
-// Example from: tests-ui/tests/litegraph.test.ts
+// Example from a colocated LiteGraph unit test
 import { LGraph, LGraphNode, LiteGraph } from '@/lib/litegraph'
 import { describe, expect, it } from 'vitest'
 
@@ -93,7 +93,7 @@ describe('LGraph', () => {
 Testing with ComfyUI workflow files:
 
 ```typescript
-// Example from: tests-ui/tests/comfyWorkflow.test.ts
+// Example from a colocated workflow unit test
 import { describe, expect, it } from 'vitest'
 import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
@@ -125,7 +125,7 @@ describe('workflow validation', () => {
 Mocking the ComfyUI API object:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useServerLogs.test.ts
+// Example from a colocated composable unit test
 import { describe, expect, it, vi } from 'vitest'
 import { api } from '@/scripts/api'
 
@@ -183,7 +183,7 @@ describe('Function using debounce', () => {
 When you need to test real debounce/throttle behavior:
 
 ```typescript
-// Example from: tests-ui/tests/composables/useWorkflowAutoSave.test.ts
+// Example from a colocated composable unit test
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 describe('debounced function', () => {
@@ -223,7 +223,7 @@ describe('debounced function', () => {
 Creating mock node definitions for testing:
 
 ```typescript
-// Example from: tests-ui/tests/apiTypes.test.ts
+// Example from a colocated schema unit test
 import { describe, expect, it } from 'vitest'
 import {
   type ComfyNodeDef,

eslint.config.ts

@@ -230,15 +230,6 @@ export default defineConfig([
       ]
     }
   },
-  {
-    files: ['tests-ui/**/*'],
-    rules: {
-      '@typescript-eslint/consistent-type-imports': [
-        'error',
-        { disallowTypeAnnotations: false }
-      ]
-    }
-  },
   {
     files: ['**/*.spec.ts'],
     ignores: ['browser_tests/tests/**/*.spec.ts'],
@@ -252,6 +243,22 @@ export default defineConfig([
       ]
     }
   },
+  // fixtures/data/ must contain only static data — no executable code or
+  // Playwright imports. This enforces the architectural separation documented
+  // in browser_tests/AGENTS.md.
+  {
+    files: ['browser_tests/fixtures/data/**/*.ts'],
+    rules: {
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'ImportDeclaration[source.value=/^@playwright/]',
+          message:
+            'fixtures/data/ must contain only static data. No Playwright imports allowed.'
+        }
+      ]
+    }
+  },
   {
     files: ['browser_tests/tests/**/*.test.ts'],
     rules: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.9",
+  "version": "1.43.11",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -8,6 +8,7 @@
   "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-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
@@ -44,6 +45,7 @@
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
     "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",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",
@@ -56,6 +58,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "catalog:",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/ingest-types": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
@@ -137,6 +140,7 @@
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/user-event": "catalog:",
     "@testing-library/vue": "catalog:",
+    "@total-typescript/shoehorn": "catalog:",
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",

packages/ingest-types/openapi-ts.config.ts

@@ -9,27 +9,7 @@ export default defineConfig({
   parser: {
     filters: {
       operations: {
-        // Exclude endpoints that overlap with ComfyUI Python backend.
-        // These are shared between local and cloud, with separate Zod
-        // schemas already maintained in src/schemas/apiSchema.ts.
         exclude: [
-          '/^GET \\/api\\/prompt$/',
-          '/^POST \\/api\\/prompt$/',
-          '/^GET \\/api\\/queue$/',
-          '/^POST \\/api\\/queue$/',
-          '/^GET \\/api\\/history$/',
-          '/^POST \\/api\\/history$/',
-          '/^GET \\/api\\/history_v2/',
-          '/^GET \\/api\\/object_info$/',
-          '/^GET \\/api\\/features$/',
-          '/^GET \\/api\\/settings$/',
-          '/^POST \\/api\\/settings$/',
-          '/^GET \\/api\\/system_stats$/',
-          '/^(GET|POST) \\/api\\/interrupt$/',
-          '/^POST \\/api\\/upload\\//',
-          '/^GET \\/api\\/view$/',
-          '/^GET \\/api\\/jobs/',
-          '/\\/api\\/userdata/',
           // Webhooks are server-to-server, not called by frontend
           '/\\/api\\/webhooks\\//',
           // Internal analytics endpoint

packages/ingest-types/src/index.ts

@@ -145,6 +145,11 @@ export type {
   DeleteSessionResponse,
   DeleteSessionResponse2,
   DeleteSessionResponses,
+  DeleteUserdataFileData,
+  DeleteUserdataFileError,
+  DeleteUserdataFileErrors,
+  DeleteUserdataFileResponse,
+  DeleteUserdataFileResponses,
   DeleteWorkflowData,
   DeleteWorkflowError,
   DeleteWorkflowErrors,
@@ -170,6 +175,12 @@ export type {
   ExchangeTokenResponse,
   ExchangeTokenResponse2,
   ExchangeTokenResponses,
+  ExecutePromptData,
+  ExecutePromptError,
+  ExecutePromptErrors,
+  ExecutePromptResponse,
+  ExecutePromptResponses,
+  ExecutionError,
   ExportDownloadUrlResponse,
   FeedbackRequest,
   FeedbackResponse,
@@ -180,6 +191,11 @@ export type {
   ForkWorkflowRequest,
   ForkWorkflowResponse,
   ForkWorkflowResponses,
+  GetAllSettingsData,
+  GetAllSettingsError,
+  GetAllSettingsErrors,
+  GetAllSettingsResponse,
+  GetAllSettingsResponses,
   GetAssetByIdData,
   GetAssetByIdError,
   GetAssetByIdErrors,
@@ -220,6 +236,9 @@ export type {
   GetDeletionRequestErrors,
   GetDeletionRequestResponse,
   GetDeletionRequestResponses,
+  GetFeaturesData,
+  GetFeaturesResponse,
+  GetFeaturesResponses,
   GetFilesData,
   GetFilesError,
   GetFilesErrors,
@@ -235,6 +254,16 @@ export type {
   GetGlobalSubgraphsErrors,
   GetGlobalSubgraphsResponse,
   GetGlobalSubgraphsResponses,
+  GetHistoryData,
+  GetHistoryError,
+  GetHistoryErrors,
+  GetHistoryForPromptData,
+  GetHistoryForPromptError,
+  GetHistoryForPromptErrors,
+  GetHistoryForPromptResponse,
+  GetHistoryForPromptResponses,
+  GetHistoryResponse,
+  GetHistoryResponses,
   GetHubProfileByUsernameData,
   GetHubProfileByUsernameError,
   GetHubProfileByUsernameErrors,
@@ -250,6 +279,11 @@ export type {
   GetInviteCodeStatusErrors,
   GetInviteCodeStatusResponse,
   GetInviteCodeStatusResponses,
+  GetJobDetailData,
+  GetJobDetailError,
+  GetJobDetailErrors,
+  GetJobDetailResponse,
+  GetJobDetailResponses,
   GetJobStatusData,
   GetJobStatusError,
   GetJobStatusErrors,
@@ -288,16 +322,29 @@ export type {
   GetMyHubProfileErrors,
   GetMyHubProfileResponse,
   GetMyHubProfileResponses,
+  GetNodeInfoData,
+  GetNodeInfoResponse,
+  GetNodeInfoResponses,
   GetPaymentPortalData,
   GetPaymentPortalError,
   GetPaymentPortalErrors,
   GetPaymentPortalResponse,
   GetPaymentPortalResponses,
+  GetPromptInfoData,
+  GetPromptInfoError,
+  GetPromptInfoErrors,
+  GetPromptInfoResponse,
+  GetPromptInfoResponses,
   GetPublishedWorkflowData,
   GetPublishedWorkflowError,
   GetPublishedWorkflowErrors,
   GetPublishedWorkflowResponse,
   GetPublishedWorkflowResponses,
+  GetQueueInfoData,
+  GetQueueInfoError,
+  GetQueueInfoErrors,
+  GetQueueInfoResponse,
+  GetQueueInfoResponses,
   GetRawLogsData,
   GetRawLogsError,
   GetRawLogsErrors,
@@ -318,12 +365,34 @@ export type {
   GetSettingByKeyErrors,
   GetSettingByKeyResponse,
   GetSettingByKeyResponses,
+  GetSystemStatsData,
+  GetSystemStatsError,
+  GetSystemStatsErrors,
+  GetSystemStatsResponse,
+  GetSystemStatsResponses,
   GetTaskData,
   GetTaskError,
   GetTaskErrors,
   GetTaskResponse,
   GetTaskResponses,
   GetUserData,
+  GetUserdataData,
+  GetUserdataError,
+  GetUserdataErrors,
+  GetUserdataFileData,
+  GetUserdataFileError,
+  GetUserdataFileErrors,
+  GetUserdataFilePublishData,
+  GetUserdataFilePublishError,
+  GetUserdataFilePublishErrors,
+  GetUserdataFilePublishResponse,
+  GetUserdataFilePublishResponses,
+  GetUserdataFileResponse,
+  GetUserdataFileResponses,
+  GetUserdataResponse,
+  GetUserDataResponseFull,
+  GetUserDataResponseFullFile,
+  GetUserdataResponses,
   GetUserError,
   GetUserErrors,
   GetUserResponse,
@@ -348,6 +417,11 @@ export type {
   GetWorkspaceResponses,
   GlobalSubgraphData,
   GlobalSubgraphInfo,
+  HistoryDetailEntry,
+  HistoryDetailResponse,
+  HistoryEntry,
+  HistoryManageRequest,
+  HistoryResponse,
   HubAssetUploadUrlRequest,
   HubAssetUploadUrlResponse,
   HubLabelInfo,
@@ -367,8 +441,15 @@ export type {
   ImportPublishedAssetsResponse,
   ImportPublishedAssetsResponse2,
   ImportPublishedAssetsResponses,
+  InterruptJobData,
+  InterruptJobError,
+  InterruptJobErrors,
+  InterruptJobResponses,
   InviteCodeClaimResponse,
   InviteCodeStatusResponse,
+  JobDetailResponse,
+  JobEntry,
+  JobsListResponse,
   JobStatusResponse,
   JwkKey,
   JwksResponse,
@@ -401,6 +482,11 @@ export type {
   ListHubWorkflowsResponse,
   ListHubWorkflowsResponses,
   ListInvitesResponse,
+  ListJobsData,
+  ListJobsError,
+  ListJobsErrors,
+  ListJobsResponse,
+  ListJobsResponses,
   ListMembersResponse,
   ListSecretsData,
   ListSecretsError,
@@ -441,9 +527,24 @@ export type {
   ListWorkspacesResponses,
   LogsResponse,
   LogsSubscribeRequest,
+  ManageHistoryData,
+  ManageHistoryError,
+  ManageHistoryErrors,
+  ManageHistoryResponses,
+  ManageQueueData,
+  ManageQueueError,
+  ManageQueueErrors,
+  ManageQueueResponse,
+  ManageQueueResponses,
   Member,
   ModelFile,
   ModelFolder,
+  MoveUserdataFileData,
+  MoveUserdataFileError,
+  MoveUserdataFileErrors,
+  MoveUserdataFileResponse,
+  MoveUserdataFileResponses,
+  NodeInfo,
   PaginationInfo,
   PartnerUsageRequest,
   PartnerUsageResponse,
@@ -459,6 +560,16 @@ export type {
   PostAssetsFromWorkflowErrors,
   PostAssetsFromWorkflowResponse,
   PostAssetsFromWorkflowResponses,
+  PostUserdataFileData,
+  PostUserdataFileError,
+  PostUserdataFileErrors,
+  PostUserdataFilePublishData,
+  PostUserdataFilePublishError,
+  PostUserdataFilePublishErrors,
+  PostUserdataFilePublishResponse,
+  PostUserdataFilePublishResponses,
+  PostUserdataFileResponse,
+  PostUserdataFileResponses,
   PreviewPlanInfo,
   PreviewSubscribeData,
   PreviewSubscribeError,
@@ -467,6 +578,10 @@ export type {
   PreviewSubscribeResponse,
   PreviewSubscribeResponse2,
   PreviewSubscribeResponses,
+  PromptErrorResponse,
+  PromptInfo,
+  PromptRequest,
+  PromptResponse,
   PublishedWorkflowDetail,
   PublishHubWorkflowData,
   PublishHubWorkflowError,
@@ -474,6 +589,10 @@ export type {
   PublishHubWorkflowRequest,
   PublishHubWorkflowResponse,
   PublishHubWorkflowResponses,
+  PublishWorkflowAssetsRequest,
+  QueueInfo,
+  QueueManageRequest,
+  QueueManageResponse,
   RawLogsResponse,
   RemoveAssetTagsData,
   RemoveAssetTagsError,
@@ -537,6 +656,7 @@ export type {
   SubscribeToLogsResponses,
   SubscriptionDuration,
   SubscriptionTier,
+  SystemStatsResponse,
   TagInfo,
   TagsModificationResponse,
   TaskEntry,
@@ -558,6 +678,11 @@ export type {
   UpdateHubProfileRequest,
   UpdateHubProfileResponse,
   UpdateHubProfileResponses,
+  UpdateMultipleSettingsData,
+  UpdateMultipleSettingsError,
+  UpdateMultipleSettingsErrors,
+  UpdateMultipleSettingsResponse,
+  UpdateMultipleSettingsResponses,
   UpdateSecretData,
   UpdateSecretError,
   UpdateSecretErrors,
@@ -586,13 +711,30 @@ export type {
   UploadAssetErrors,
   UploadAssetResponse,
   UploadAssetResponses,
+  UploadImageData,
+  UploadImageError,
+  UploadImageErrors,
+  UploadImageResponse,
+  UploadImageResponses,
+  UploadMaskData,
+  UploadMaskError,
+  UploadMaskErrors,
+  UploadMaskResponse,
+  UploadMaskResponses,
+  UserDataResponseFull,
   UserResponse,
   ValidationError,
   ValidationResult,
+  ViewFileData,
+  ViewFileError,
+  ViewFileErrors,
+  ViewFileResponse,
+  ViewFileResponses,
   WorkflowApiAssetsRequest,
   WorkflowApiAssetsResponse,
   WorkflowForkedFrom,
   WorkflowListResponse,
+  WorkflowPublishInfo,
   WorkflowResponse,
   WorkflowVersionContentResponse,
   WorkflowVersionResponse,

packages/ingest-types/src/zod.gen.ts

@@ -216,6 +216,18 @@ export const zWorkflowApiAssetsRequest = z.object({
   workflow_api_json: z.record(z.unknown())
 })
 
+export const zPublishWorkflowAssetsRequest = z.object({
+  asset_ids: z.array(z.string())
+})
+
+export const zWorkflowPublishInfo = z.object({
+  workflow_id: z.string(),
+  share_id: z.string(),
+  publish_time: z.string().datetime().nullish(),
+  listed: z.boolean(),
+  assets: z.array(zAssetInfo)
+})
+
 export const zForkWorkflowRequest = z.object({
   source_version: z.number().int(),
   name: z.string().optional()
@@ -756,6 +768,106 @@ export const zDeletionRequest = z.object({
   deletion_status: z.array(zDeletionStatus)
 })
 
+/**
+ * Detailed execution error information from ComfyUI
+ */
+export const zExecutionError = z.object({
+  node_id: z.string(),
+  node_type: z.string(),
+  exception_message: z.string(),
+  exception_type: z.string(),
+  traceback: z.array(z.string()),
+  current_inputs: z.record(z.unknown()),
+  current_outputs: z.record(z.unknown())
+})
+
+/**
+ * Full job details including workflow and outputs
+ */
+export const zJobDetailResponse = z.object({
+  id: z.string().uuid(),
+  status: z.enum([
+    'pending',
+    'in_progress',
+    'completed',
+    'failed',
+    'cancelled'
+  ]),
+  workflow: z.record(z.unknown()).optional(),
+  execution_error: zExecutionError.optional(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  update_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  outputs: z.record(z.unknown()).optional(),
+  preview_output: z.record(z.unknown()).optional(),
+  outputs_count: z.number().int().optional(),
+  workflow_id: z.string().optional(),
+  execution_status: z.record(z.unknown()).optional(),
+  execution_meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Lightweight job data for list views (workflow and full outputs excluded)
+ */
+export const zJobEntry = z.object({
+  id: z.string().uuid(),
+  status: z.enum([
+    'pending',
+    'in_progress',
+    'completed',
+    'failed',
+    'cancelled'
+  ]),
+  execution_error: zExecutionError.optional(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  preview_output: z.record(z.unknown()).optional(),
+  outputs_count: z.number().int().optional(),
+  workflow_id: z.string().optional(),
+  execution_start_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional(),
+  execution_end_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+export const zJobsListResponse = z.object({
+  jobs: z.array(zJobEntry),
+  pagination: zPaginationInfo
+})
+
 export const zTagsModificationResponse = z.object({
   added: z.array(z.string()).optional(),
   removed: z.array(z.string()).optional(),
@@ -931,6 +1043,33 @@ export const zUserResponse = z.object({
   status: z.string()
 })
 
+/**
+ * System statistics response
+ */
+export const zSystemStatsResponse = z.object({
+  system: z.object({
+    os: z.string(),
+    python_version: z.string(),
+    embedded_python: z.boolean(),
+    comfyui_version: z.string(),
+    comfyui_frontend_version: z.string().optional(),
+    workflow_templates_version: z.string().optional(),
+    cloud_version: z.string().optional(),
+    pytorch_version: z.string(),
+    argv: z.array(z.string()),
+    ram_total: z.number(),
+    ram_free: z.number()
+  }),
+  devices: z.array(
+    z.object({
+      name: z.string(),
+      type: z.string(),
+      vram_total: z.number().optional(),
+      vram_free: z.number().optional()
+    })
+  )
+})
+
 export const zLogsSubscribeRequest = z.object({
   enabled: z.boolean()
 })
@@ -998,6 +1137,49 @@ export const zModelFolder = z.object({
   folders: z.array(z.string())
 })
 
+/**
+ * Error response for ComfyUI prompt execution.
+ */
+export const zPromptErrorResponse = z.record(z.unknown())
+
+export const zGetUserDataResponseFullFile = z.object({
+  path: z.string().optional(),
+  size: z.number().int().optional(),
+  modified: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+export const zGetUserDataResponseFull = z.array(zGetUserDataResponseFullFile)
+
+export const zUserDataResponseFull = z.object({
+  path: z.string().optional(),
+  size: z.number().int().optional(),
+  modified: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional()
+})
+
+/**
+ * Request to manage history operations
+ */
+export const zHistoryManageRequest = z.object({
+  delete: z.array(z.string()).optional(),
+  clear: z.boolean().optional()
+})
+
 /**
  * Job status information
  */
@@ -1018,6 +1200,89 @@ export const zJobStatusResponse = z.object({
   error_message: z.string().nullish()
 })
 
+export const zQueueManageResponse = z.object({
+  deleted: z.array(z.string()).optional(),
+  cleared: z.boolean().optional()
+})
+
+/**
+ * Request to manage queue operations
+ */
+export const zQueueManageRequest = z.object({
+  delete: z.array(z.string()).optional(),
+  clear: z.boolean().optional()
+})
+
+/**
+ * Queue information with pending and running jobs
+ */
+export const zQueueInfo = z.object({
+  queue_running: z.array(z.array(z.unknown())).optional(),
+  queue_pending: z.array(z.array(z.unknown())).optional()
+})
+
+/**
+ * History entry with full prompt data
+ */
+export const zHistoryDetailEntry = z.object({
+  prompt: z
+    .object({
+      priority: z.number().optional(),
+      prompt_id: z.string().optional(),
+      prompt: z.record(z.unknown()).optional(),
+      extra_data: z.record(z.unknown()).optional(),
+      outputs_to_execute: z.array(z.string()).optional()
+    })
+    .optional(),
+  outputs: z.record(z.unknown()).optional(),
+  status: z.record(z.unknown()).optional(),
+  meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Detailed execution history response for a specific prompt.
+ * Returns a dictionary with prompt_id as key and full history data as value.
+ *
+ */
+export const zHistoryDetailResponse = z.record(zHistoryDetailEntry)
+
+/**
+ * History entry with prompt_id and execution data
+ */
+export const zHistoryEntry = z.object({
+  prompt_id: z.string(),
+  create_time: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional(),
+  workflow_id: z.string().optional(),
+  prompt: z
+    .object({
+      priority: z.number().optional(),
+      prompt_id: z.string().optional(),
+      extra_data: z.record(z.unknown()).optional()
+    })
+    .optional(),
+  outputs: z.record(z.unknown()).optional(),
+  status: z.record(z.unknown()).optional(),
+  meta: z.record(z.unknown()).optional()
+})
+
+/**
+ * Execution history response with history array.
+ * Returns an object with a "history" key containing an array of history entries.
+ * Each entry includes prompt_id as a property along with execution data.
+ *
+ */
+export const zHistoryResponse = z.object({
+  history: z.array(zHistoryEntry)
+})
+
 /**
  * Full data for a global subgraph blueprint
  */
@@ -1042,6 +1307,32 @@ export const zGlobalSubgraphInfo = z.object({
   data: z.string().optional()
 })
 
+export const zNodeInfo = z.object({
+  input: z.record(z.unknown()).optional(),
+  input_order: z.record(z.array(z.string())).optional(),
+  output: z.array(z.string()).optional(),
+  output_is_list: z.array(z.boolean()).optional(),
+  output_name: z.array(z.string()).optional(),
+  name: z.string().optional(),
+  display_name: z.string().optional(),
+  description: z.string().optional(),
+  python_module: z.string().optional(),
+  category: z.string().optional(),
+  output_node: z.boolean().optional(),
+  output_tooltips: z.array(z.string()).optional(),
+  deprecated: z.boolean().optional(),
+  experimental: z.boolean().optional(),
+  api_node: z.boolean().optional()
+})
+
+export const zPromptInfo = z.object({
+  exec_info: z
+    .object({
+      queue_remaining: z.number().int().optional()
+    })
+    .optional()
+})
+
 export const zExportDownloadUrlResponse = z.object({
   url: z.string(),
   expires_at: z.string().datetime().optional()
@@ -1052,6 +1343,22 @@ export const zErrorResponse = z.object({
   message: z.string()
 })
 
+export const zPromptResponse = z.object({
+  prompt_id: z.string().uuid().optional(),
+  number: z.number().optional(),
+  node_errors: z.record(z.unknown()).optional()
+})
+
+export const zPromptRequest = z.object({
+  prompt: z.record(z.unknown()),
+  number: z.number().optional(),
+  front: z.boolean().optional(),
+  extra_data: z.record(z.unknown()).optional(),
+  partial_execution_targets: z.array(z.string()).optional(),
+  workflow_id: z.string().optional(),
+  workflow_version_id: z.string().optional()
+})
+
 export const zAssetWritable = z.object({
   id: z.string().uuid(),
   name: z.string(),
@@ -1096,6 +1403,53 @@ export const zAssetCreatedWritable = zAssetWritable.and(
  */
 export const zFeedbackResponseWritable = z.record(z.unknown())
 
+export const zGetPromptInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetPromptInfoResponse = zPromptInfo
+
+export const zExecutePromptData = z.object({
+  body: zPromptRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success - Prompt accepted
+ */
+export const zExecutePromptResponse = zPromptResponse
+
+export const zGetNodeInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetNodeInfoResponse = z.record(zNodeInfo)
+
+export const zGetFeaturesData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetFeaturesResponse = z.object({
+  supports_preview_metadata: z.boolean().optional(),
+  max_upload_size: z.number().int().optional()
+})
+
 export const zGetWorkflowTemplatesData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1170,6 +1524,97 @@ export const zGetModelPreviewData = z.object({
  */
 export const zGetModelPreviewResponse = z.string()
 
+export const zManageHistoryData = z.object({
+  body: zHistoryManageRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+export const zGetHistoryData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      max_items: z.number().int().optional(),
+      offset: z.number().int().optional().default(0)
+    })
+    .optional()
+})
+
+/**
+ * Success - Execution history retrieved
+ */
+export const zGetHistoryResponse = zHistoryResponse
+
+export const zGetHistoryForPromptData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    prompt_id: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Success - History for prompt retrieved
+ */
+export const zGetHistoryForPromptResponse = zHistoryDetailResponse
+
+export const zListJobsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      status: z.string().optional(),
+      workflow_id: z.string().optional(),
+      output_type: z.enum(['image', 'video', 'audio', '3d']).optional(),
+      sort_by: z.enum(['create_time', 'execution_time']).optional(),
+      sort_order: z.enum(['asc', 'desc']).optional(),
+      offset: z.number().int().gte(0).optional().default(0),
+      limit: z.number().int().gte(1).lte(1000).optional().default(100)
+    })
+    .optional()
+})
+
+/**
+ * Success - Jobs retrieved
+ */
+export const zListJobsResponse = zJobsListResponse
+
+export const zGetJobDetailData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    job_id: z.string().uuid()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Success - Job details retrieved
+ */
+export const zGetJobDetailResponse = zJobDetailResponse
+
+export const zViewFileData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    filename: z.string(),
+    subfolder: z.string().optional(),
+    type: z.string().optional(),
+    fullpath: z.string().optional(),
+    format: z.string().optional(),
+    frame_rate: z.number().int().optional(),
+    workflow: z.string().optional(),
+    timestamp: z.number().int().optional(),
+    channel: z.string().optional(),
+    res: z.number().int().gte(64).lte(1024).optional()
+  })
+})
+
+/**
+ * Success - File content returned (used when channel or res parameter is present)
+ */
+export const zViewFileResponse = z.string()
+
 export const zGetMaskLayersData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1482,6 +1927,34 @@ export const zImportPublishedAssetsData = z.object({
  */
 export const zImportPublishedAssetsResponse2 = zImportPublishedAssetsResponse
 
+export const zGetQueueInfoData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetQueueInfoResponse = zQueueInfo
+
+export const zManageQueueData = z.object({
+  body: zQueueManageRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zManageQueueResponse = zQueueManageResponse
+
+export const zInterruptJobData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
 export const zListSecretsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1543,6 +2016,28 @@ export const zUpdateSecretData = z.object({
  */
 export const zUpdateSecretResponse = zSecretResponse
 
+export const zGetAllSettingsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * User settings as key-value pairs
+ */
+export const zGetAllSettingsResponse = z.record(z.unknown())
+
+export const zUpdateMultipleSettingsData = z.object({
+  body: z.record(z.unknown()),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Updated user settings
+ */
+export const zUpdateMultipleSettingsResponse = z.record(z.unknown())
+
 export const zGetSettingByKeyData = z.object({
   body: z.never().optional(),
   path: z.object({
@@ -1584,6 +2079,164 @@ export const zSubmitFeedbackData = z.object({
  */
 export const zSubmitFeedbackResponse = zFeedbackResponse
 
+export const zGetUserdataData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      dir: z.string().optional(),
+      recurse: z.boolean().optional().default(false),
+      split: z.boolean().optional().default(false),
+      full_info: z.boolean().optional().default(false)
+    })
+    .optional()
+})
+
+/**
+ * A list of user data files.
+ */
+export const zGetUserdataResponse = zGetUserDataResponseFull
+
+export const zGetUserdataFilePublishData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Publish info (publish_time is null if never published)
+ */
+export const zGetUserdataFilePublishResponse = zWorkflowPublishInfo
+
+export const zPostUserdataFilePublishData = z.object({
+  body: zPublishWorkflowAssetsRequest,
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Workflow published
+ */
+export const zPostUserdataFilePublishResponse = zWorkflowPublishInfo
+
+export const zDeleteUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * File deleted successfully (No Content).
+ */
+export const zDeleteUserdataFileResponse = z.void()
+
+export const zGetUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Successfully retrieved the file.
+ */
+export const zGetUserdataFileResponse = z.string()
+
+export const zPostUserdataFileData = z.object({
+  body: z.string(),
+  path: z.object({
+    file: z.string()
+  }),
+  query: z
+    .object({
+      overwrite: z.enum(['true', 'false']).optional(),
+      full_info: z.enum(['true', 'false']).optional()
+    })
+    .optional()
+})
+
+/**
+ * File uploaded successfully.
+ */
+export const zPostUserdataFileResponse = zUserDataResponseFull
+
+export const zMoveUserdataFileData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    file: z.string(),
+    dest: z.string()
+  }),
+  query: z
+    .object({
+      overwrite: z.enum(['true', 'false']).optional()
+    })
+    .optional()
+})
+
+/**
+ * File moved successfully.
+ */
+export const zMoveUserdataFileResponse = zUserDataResponseFull
+
+export const zUploadImageData = z.object({
+  body: z.object({
+    image: z.string(),
+    overwrite: z.string().optional(),
+    subfolder: z.string().optional(),
+    type: z.string().optional()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Image uploaded successfully
+ */
+export const zUploadImageResponse = z.object({
+  name: z.string().optional(),
+  subfolder: z.string().optional(),
+  type: z.string().optional()
+})
+
+export const zUploadMaskData = z.object({
+  body: z.object({
+    image: z.string(),
+    original_ref: z.string()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Mask uploaded successfully
+ */
+export const zUploadMaskResponse = z.object({
+  name: z.string().optional(),
+  subfolder: z.string().optional(),
+  type: z.string().optional(),
+  metadata: z
+    .object({
+      is_mask: z.boolean().optional(),
+      original_hash: z.string().optional(),
+      mask_type: z.string().optional(),
+      related_files: z
+        .object({
+          mask: z.string().optional(),
+          paint: z.string().optional(),
+          painted: z.string().optional()
+        })
+        .optional()
+    })
+    .optional()
+})
+
 export const zGetLogsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1619,6 +2272,17 @@ export const zSubscribeToLogsResponse = z.object({
   enabled: z.boolean().optional()
 })
 
+export const zGetSystemStatsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zGetSystemStatsResponse = zSystemStatsResponse
+
 export const zDeleteSessionData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf|@audit/ // Run all tests except those tagged with @mobile, @perf, or @audit
+      grepInvert: /@mobile|@perf|@audit|@cloud/ // Run all tests except those tagged with @mobile, @perf, @audit, or @cloud
     },
 
     {
@@ -85,6 +85,14 @@ export default defineConfig({
     //   use: { ...devices['Desktop Safari'] },
     // },
 
+    {
+      name: 'cloud',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 15000,
+      grep: /@cloud/, // Run only tests tagged with @cloud
+      grepInvert: /@oss/ // Exclude tests tagged with @oss
+    },
+
     /* Test against mobile viewports. */
     {
       name: 'mobile-chrome',

pnpm-lock.yaml

@@ -135,6 +135,9 @@ catalogs:
     '@tiptap/starter-kit':
       specifier: ^2.27.2
       version: 2.27.2
+    '@total-typescript/shoehorn':
+      specifier: ^0.1.2
+      version: 0.1.2
     '@types/fs-extra':
       specifier: ^11.0.4
       version: 11.0.4
@@ -410,6 +413,9 @@ importers:
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
+      '@comfyorg/ingest-types':
+        specifier: workspace:*
+        version: link:packages/ingest-types
       '@comfyorg/registry-types':
         specifier: workspace:*
         version: link:packages/registry-types
@@ -648,6 +654,9 @@ importers:
       '@testing-library/vue':
         specifier: 'catalog:'
         version: 8.1.0(@vue/compiler-sfc@3.5.28)(vue@3.5.13(typescript@5.9.3))
+      '@total-typescript/shoehorn':
+        specifier: 'catalog:'
+        version: 0.1.2
       '@types/fs-extra':
         specifier: 'catalog:'
         version: 11.0.4
@@ -4271,6 +4280,9 @@ packages:
       '@tmcp/auth':
         optional: true
 
+  '@total-typescript/shoehorn@0.1.2':
+    resolution: {integrity: sha512-p7nNZbOZIofpDNyP0u1BctFbjxD44Qc+oO5jufgQdFdGIXJLc33QRloJpq7k5T59CTgLWfQSUxsuqLcmeurYRw==}
+
   '@tweenjs/tween.js@23.1.3':
     resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
 
@@ -13305,6 +13317,8 @@ snapshots:
       esm-env: 1.2.2
       tmcp: 1.19.0(typescript@5.9.3)
 
+  '@total-typescript/shoehorn@0.1.2': {}
+
   '@tweenjs/tween.js@23.1.3': {}
 
   '@tybys/wasm-util@0.10.1':

pnpm-workspace.yaml

@@ -46,6 +46,7 @@ catalog:
   '@tiptap/extension-table-row': ^2.27.2
   '@tiptap/pm': 2.27.2
   '@tiptap/starter-kit': ^2.27.2
+  '@total-typescript/shoehorn': ^0.1.2
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0

scripts/perf-report.ts

@@ -29,6 +29,8 @@ interface PerfMeasurement {
   eventListeners: number
   totalBlockingTimeMs: number
   frameDurationMs: number
+  p95FrameDurationMs: number
+  allFrameDurationsMs?: number[]
 }
 
 interface PerfReport {
@@ -53,6 +55,7 @@ type MetricKey =
   | 'eventListeners'
   | 'totalBlockingTimeMs'
   | 'frameDurationMs'
+  | 'p95FrameDurationMs'
   | 'heapUsedBytes'
 
 interface MetricDef {
@@ -64,6 +67,8 @@ interface MetricDef {
 }
 
 const REPORTED_METRICS: MetricDef[] = [
+  { key: 'frameDurationMs', label: 'avg frame time', unit: 'ms' },
+  { key: 'p95FrameDurationMs', label: 'p95 frame time', unit: 'ms' },
   { key: 'layoutDurationMs', label: 'layout duration', unit: 'ms' },
   {
     key: 'styleRecalcDurationMs',
@@ -80,12 +85,15 @@ const REPORTED_METRICS: MetricDef[] = [
   { key: 'taskDurationMs', label: 'task duration', unit: 'ms' },
   { key: 'scriptDurationMs', label: 'script duration', unit: 'ms' },
   { key: 'totalBlockingTimeMs', label: 'TBT', unit: 'ms' },
-  { key: 'frameDurationMs', label: 'frame duration', unit: 'ms' },
   { key: 'heapUsedBytes', label: 'heap used', unit: 'bytes' },
   { key: 'domNodes', label: 'DOM nodes', unit: '', minAbsDelta: 5 },
   { key: 'eventListeners', label: 'event listeners', unit: '', minAbsDelta: 5 }
 ]
 
+/** Target: P5 FPS ≥ 52 → P95 frame time ≤ 19.2ms */
+const TARGET_P95_FRAME_MS = 19.2
+const TARGET_P5_FPS = 52
+
 function groupByName(
   measurements: PerfMeasurement[]
 ): Map<string, PerfMeasurement[]> {
@@ -207,6 +215,46 @@ function formatBytes(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
+function frameTimeToFps(ms: number): number {
+  return ms > 0 ? 1000 / ms : 0
+}
+
+function renderHeadlineSummary(
+  prGroups: Map<string, PerfMeasurement[]>
+): string[] {
+  const lines: string[] = []
+  const summaries: string[] = []
+
+  for (const [testName, prSamples] of prGroups) {
+    const avgFrame = medianMetric(prSamples, 'frameDurationMs')
+    const p95Frame = medianMetric(prSamples, 'p95FrameDurationMs')
+    const tbt = medianMetric(prSamples, 'totalBlockingTimeMs')
+    const heap = medianMetric(prSamples, 'heapUsedBytes')
+
+    const avgFps = avgFrame !== null ? frameTimeToFps(avgFrame) : null
+    const p5Fps = p95Frame !== null ? frameTimeToFps(p95Frame) : null
+
+    const parts: string[] = [`**${testName}**:`]
+    if (avgFps !== null) parts.push(`${avgFps.toFixed(1)} avg FPS`)
+    if (p5Fps !== null) {
+      const pass = p5Fps >= TARGET_P5_FPS
+      parts.push(
+        `${p5Fps.toFixed(1)} P5 FPS ${pass ? '✅' : '❌'} (target: ≥${TARGET_P5_FPS})`
+      )
+    }
+    if (tbt !== null) parts.push(`${tbt.toFixed(0)}ms TBT`)
+    if (heap !== null) parts.push(`${formatBytes(heap)} heap`)
+
+    if (parts.length > 1) summaries.push(parts.join(' · '))
+  }
+
+  if (summaries.length > 0) {
+    lines.push('> ' + summaries.join('\n> '), '')
+  }
+
+  return lines
+}
+
 function renderFullReport(
   prGroups: Map<string, PerfMeasurement[]>,
   baseline: PerfReport,
@@ -423,6 +471,7 @@ function main() {
 
   const lines: string[] = []
   lines.push('## ⚡ Performance Report\n')
+  lines.push(...renderHeadlineSummary(prGroups))
 
   if (baseline && historical.length >= 2) {
     lines.push(...renderFullReport(prGroups, baseline, historical))
@@ -432,9 +481,15 @@ function main() {
     lines.push(...renderNoBaselineReport(prGroups))
   }
 
+  const rawData = {
+    ...current,
+    measurements: current.measurements.map(
+      ({ allFrameDurationsMs: _, ...rest }) => rest
+    )
+  }
   lines.push('\n<details><summary>Raw data</summary>\n')
   lines.push('```json')
-  lines.push(JSON.stringify(current, null, 2))
+  lines.push(JSON.stringify(rawData, null, 2))
   lines.push('```')
   lines.push('\n</details>')
 

src/base/common/downloadUtil.test.ts

@@ -1,3 +1,4 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
@@ -43,12 +44,12 @@ describe('downloadUtil', () => {
     createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
     revokeObjectURLSpy.mockClear().mockImplementation(() => {})
     // Create a mock anchor element
-    mockLink = {
+    mockLink = fromPartial<HTMLAnchorElement>({
       href: '',
       download: '',
       click: vi.fn(),
       style: { display: '' }
-    } as unknown as HTMLAnchorElement
+    })
 
     // Spy on DOM methods
     vi.spyOn(document, 'createElement').mockReturnValue(mockLink)
@@ -172,12 +173,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue(null)
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -198,11 +201,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-      fetchMock.mockResolvedValue({
-        ok: false,
-        status: 404,
-        blob: vi.fn()
-      } as Partial<Response> as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: false,
+          status: 404,
+          blob: vi.fn()
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -224,12 +229,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue('attachment; filename="user-friendly.png"')
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -256,12 +263,14 @@ describe('downloadUtil', () => {
             'attachment; filename="fallback.png"; filename*=UTF-8\'\'%E4%B8%AD%E6%96%87.png'
           )
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl)
 
@@ -282,12 +291,14 @@ describe('downloadUtil', () => {
       const headersMock = {
         get: vi.fn().mockReturnValue(null)
       }
-      fetchMock.mockResolvedValue({
-        ok: true,
-        status: 200,
-        blob: blobFn,
-        headers: headersMock
-      } as unknown as Response)
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          status: 200,
+          blob: blobFn,
+          headers: headersMock
+        })
+      )
 
       downloadFile(testUrl, 'my-fallback.png')
 
@@ -328,11 +339,13 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/image.png'
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab(testUrl)
 
@@ -346,11 +359,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab('https://example.com/image.png')
 
@@ -364,11 +379,10 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/missing.png'
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: false,
-        status: 404
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({ ok: false, status: 404 })
+      )
 
       await openFileInNewTab(testUrl)
 
@@ -381,11 +395,13 @@ describe('downloadUtil', () => {
       mockIsCloud.value = true
       const blob = new Blob(['test'], { type: 'image/png' })
       const mockTab = { location: { href: '' }, closed: true, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
+      windowOpenSpy.mockReturnValue(fromAny<Window, unknown>(mockTab))
+      fetchMock.mockResolvedValue(
+        fromPartial<Response>({
+          ok: true,
+          blob: vi.fn().mockResolvedValue(blob)
+        })
+      )
 
       await openFileInNewTab('https://example.com/image.png')
 

src/components/builder/BuilderFooterToolbar.vue

@@ -33,76 +33,91 @@
         {{ t('g.next') }}
         <i class="icon-[lucide--chevron-right]" aria-hidden="true" />
       </Button>
-      <ConnectOutputPopover
-        v-if="!hasOutputs"
-        :is-select-active="isSelectStep"
-        @switch="navigateToStep('builder:outputs')"
-      >
+      <div class="relative min-w-24">
+        <!--
+          Invisible sizers: both labels rendered with matching button padding
+          so the container's intrinsic width equals the wider label.
+          height:0 + overflow:hidden keeps them invisible without affecting height.
+        -->
+        <div class="max-h-0 overflow-y-hidden" aria-hidden="true">
+          <div class="px-4 py-2 text-sm">{{ t('g.save') }}</div>
+          <div class="px-4 py-2 text-sm">{{ t('builderToolbar.saveAs') }}</div>
+        </div>
+        <ConnectOutputPopover
+          v-if="!hasOutputs"
+          class="w-full"
+          :is-select-active="isSelectStep"
+          @switch="navigateToStep('builder:outputs')"
+        >
+          <Button
+            size="lg"
+            class="w-full"
+            :class="disabledSaveClasses"
+            data-testid="builder-save-as-button"
+          >
+            {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+          </Button>
+        </ConnectOutputPopover>
+        <ButtonGroup
+          v-else-if="isSaved"
+          data-testid="builder-save-group"
+          class="w-full rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
+        >
+          <Button
+            size="lg"
+            :disabled="!isModified"
+            class="flex-1"
+            :class="isModified ? activeSaveClasses : disabledSaveClasses"
+            data-testid="builder-save-button"
+            @click="save()"
+          >
+            {{ t('g.save') }}
+          </Button>
+          <DropdownMenuRoot>
+            <DropdownMenuTrigger as-child>
+              <Button
+                size="lg"
+                :aria-label="t('builderToolbar.saveAs')"
+                data-save-chevron
+                data-testid="builder-save-as-chevron"
+                class="w-6 rounded-l-none border-l border-border-default px-0"
+              >
+                <i
+                  class="icon-[lucide--chevron-down] size-4"
+                  aria-hidden="true"
+                />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent
+                align="end"
+                :side-offset="4"
+                class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
+              >
+                <DropdownMenuItem as-child @select="saveAs()">
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    class="w-full justify-start font-normal"
+                  >
+                    {{ t('builderToolbar.saveAs') }}
+                  </Button>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenuRoot>
+        </ButtonGroup>
         <Button
+          v-else
           size="lg"
-          :class="cn('w-24', disabledSaveClasses)"
+          class="w-full"
+          :class="activeSaveClasses"
           data-testid="builder-save-as-button"
+          @click="saveAs()"
         >
-          {{ isSaved ? t('g.save') : t('builderToolbar.saveAs') }}
+          {{ t('builderToolbar.saveAs') }}
         </Button>
-      </ConnectOutputPopover>
-      <ButtonGroup
-        v-else-if="isSaved"
-        class="w-24 rounded-lg bg-secondary-background has-[[data-save-chevron]:hover]:bg-secondary-background-hover"
-      >
-        <Button
-          size="lg"
-          :disabled="!isModified"
-          class="flex-1"
-          :class="isModified ? activeSaveClasses : disabledSaveClasses"
-          data-testid="builder-save-button"
-          @click="save()"
-        >
-          {{ t('g.save') }}
-        </Button>
-        <DropdownMenuRoot>
-          <DropdownMenuTrigger as-child>
-            <Button
-              size="lg"
-              :aria-label="t('builderToolbar.saveAs')"
-              data-save-chevron
-              data-testid="builder-save-as-chevron"
-              class="w-6 rounded-l-none border-l border-border-default px-0"
-            >
-              <i
-                class="icon-[lucide--chevron-down] size-4"
-                aria-hidden="true"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuContent
-              align="end"
-              :side-offset="4"
-              class="z-1001 min-w-36 rounded-lg border border-border-subtle bg-base-background p-1 shadow-interface"
-            >
-              <DropdownMenuItem as-child @select="saveAs()">
-                <Button
-                  variant="secondary"
-                  size="lg"
-                  class="w-full justify-start font-normal"
-                >
-                  {{ t('builderToolbar.saveAs') }}
-                </Button>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenuPortal>
-        </DropdownMenuRoot>
-      </ButtonGroup>
-      <Button
-        v-else
-        size="lg"
-        :class="activeSaveClasses"
-        data-testid="builder-save-as-button"
-        @click="saveAs()"
-      >
-        {{ t('builderToolbar.saveAs') }}
-      </Button>
+      </div>
     </nav>
   </div>
 </template>
@@ -126,8 +141,6 @@ import { useAppMode } from '@/composables/useAppMode'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { cn } from '@/utils/tailwindUtil'
-
 import BuilderOpensAsPopover from './BuilderOpensAsPopover.vue'
 import { setWorkflowDefaultView } from './builderViewOptions'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'

src/components/curve/curveUtils.ts

@@ -192,3 +192,15 @@ export function curvesToLUT(
 
   return lut
 }
+
+export function curveDataToFloatLUT(
+  curve: CurveData,
+  size: number = 256
+): Float32Array {
+  const lut = new Float32Array(size)
+  const interpolate = createInterpolator(curve.points, curve.interpolation)
+  for (let i = 0; i < size; i++) {
+    lut[i] = interpolate(i / (size - 1))
+  }
+  return lut
+}

src/components/graph/DomWidgets.test.ts

@@ -1,3 +1,5 @@
+import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
 import { mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -9,7 +11,6 @@ import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-import { createTestingPinia } from '@pinia/testing'
 
 type TestWidget = BaseDOMWidget<object | string>
 
@@ -28,7 +29,7 @@ function createNode(
 }
 
 function createWidget(id: string, node: LGraphNode, y = 12): TestWidget {
-  return {
+  return fromPartial<TestWidget>({
     id,
     node,
     name: 'test_widget',
@@ -40,16 +41,16 @@ function createWidget(id: string, node: LGraphNode, y = 12): TestWidget {
     computedHeight: 40,
     margin: 10,
     isVisible: () => true
-  } as unknown as TestWidget
+  })
 }
 
 function createCanvas(graph: LGraph): LGraphCanvas {
-  return {
+  return fromPartial<LGraphCanvas>({
     graph,
     low_quality: false,
     read_only: false,
     isNodeVisible: vi.fn(() => true)
-  } as unknown as LGraphCanvas
+  })
 }
 
 function drawFrame(canvas: LGraphCanvas) {

src/components/graph/widgets/DomWidget.test.ts

@@ -1,14 +1,14 @@
-import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { fromPartial } from '@total-typescript/shoehorn'
+import { mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { reactive } from 'vue'
 
-import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
 import type { DomWidgetState } from '@/stores/domWidgetStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
-
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import DomWidget from './DomWidget.vue'
 
 const mockUpdatePosition = vi.fn()
@@ -63,7 +63,7 @@ function createWidgetState(overrideDisabled: boolean): DomWidgetState {
     }
   })
 
-  const widget = {
+  const widget = fromPartial<BaseDOMWidget<object | string>>({
     id: 'dom-widget-id',
     name: 'test_widget',
     type: 'custom',
@@ -71,7 +71,7 @@ function createWidgetState(overrideDisabled: boolean): DomWidgetState {
     options: {},
     node,
     computedDisabled: false
-  } as unknown as BaseDOMWidget<object | string>
+  })
 
   domWidgetStore.registerWidget(widget)
   domWidgetStore.setPositionOverride(widget.id, {

src/components/graph/widgets/domWidgetZIndex.test.ts

@@ -1,7 +1,7 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-
 import { getDomWidgetZIndex } from './domWidgetZIndex'
 
 describe('getDomWidgetZIndex', () => {
@@ -15,7 +15,7 @@ describe('getDomWidgetZIndex', () => {
     first.order = 0
     second.order = 1
 
-    const nodes = (graph as unknown as { _nodes: LGraphNode[] })._nodes
+    const nodes = fromAny<{ _nodes: LGraphNode[] }, unknown>(graph)._nodes
     nodes.splice(nodes.indexOf(first), 1)
     nodes.push(first)
 

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

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -159,7 +160,7 @@ describe('swapNodeGroups computed', () => {
 
   it('excludes string nodeType entries', async () => {
     const swap = getSwapNodeGroups([
-      'StringGroupNode' as unknown as MissingNodeType,
+      fromAny<MissingNodeType, unknown>('StringGroupNode'),
       makeMissingNodeType('OldNode', {
         nodeId: '1',
         isReplaceable: true,

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

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { createPinia, setActivePinia } from 'pinia'
 import { nextTick, ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -215,7 +216,7 @@ describe('useErrorGroups', () => {
       const { groups } = createErrorGroups()
       const missingNodesStore = useMissingNodesErrorStore()
       missingNodesStore.setMissingNodeTypes([
-        'StringGroupNode' as unknown as MissingNodeType
+        fromAny<MissingNodeType, unknown>('StringGroupNode')
       ])
       await nextTick()
 

src/components/rightSidePanel/parameters/WidgetActions.test.ts

@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 import type { Slots } from 'vue'
@@ -10,7 +11,6 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { usePromotionStore } from '@/stores/promotionStore'
-
 import WidgetActions from './WidgetActions.vue'
 
 const { mockGetInputSpecForWidget } = vi.hoisted(() => ({
@@ -93,13 +93,13 @@ describe('WidgetActions', () => {
   }
 
   function createMockNode(): LGraphNode {
-    return {
+    return fromAny<LGraphNode, unknown>({
       id: 1,
       type: 'TestNode',
       rootGraph: { id: 'graph-test' },
       computeSize: vi.fn(),
       size: [200, 100]
-    } as unknown as LGraphNode
+    })
   }
 
   function mountWidgetActions(widget: IBaseWidget, node: LGraphNode) {
@@ -216,17 +216,17 @@ describe('WidgetActions', () => {
     mockGetInputSpecForWidget.mockReturnValue({
       type: 'CUSTOM'
     })
-    const parentSubgraphNode = {
+    const parentSubgraphNode = fromAny<SubgraphNode, unknown>({
       id: 4,
       rootGraph: { id: 'graph-test' },
       computeSize: vi.fn(),
       size: [300, 150]
-    } as unknown as SubgraphNode
-    const node = {
+    })
+    const node = fromAny<LGraphNode, unknown>({
       id: 4,
       type: 'SubgraphNode',
       rootGraph: { id: 'graph-test' }
-    } as unknown as LGraphNode
+    })
     const widget = {
       name: 'text',
       type: 'text',

src/components/rightSidePanel/parameters/WidgetItem.test.ts

@@ -1,4 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
 import { mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -72,13 +73,13 @@ const i18n = createI18n({
 })
 
 function createMockNode(overrides: Partial<LGraphNode> = {}): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     id: 1,
     type: 'TestNode',
     isSubgraphNode: () => false,
     graph: { rootGraph: { id: 'test-graph-id' } },
     ...overrides
-  } as unknown as LGraphNode
+  })
 }
 
 function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
@@ -128,7 +129,7 @@ function createMockPromotedWidgetView(
       return 0
     }
   }
-  return new MockPromotedWidgetView() as unknown as IBaseWidget
+  return fromAny<IBaseWidget, unknown>(new MockPromotedWidgetView())
 }
 
 function mountWidgetItem(

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -143,11 +143,16 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
+              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button size="icon" @click="handleDownloadSelected">
+            <Button
+              size="icon"
+              data-testid="assets-download-selected"
+              @click="handleDownloadSelected"
+            >
               <i class="icon-[lucide--download] size-4" />
             </Button>
           </template>
@@ -156,12 +161,17 @@
             <Button
               v-if="shouldShowDeleteButton"
               variant="secondary"
+              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <span>{{ $t('mediaAsset.selection.deleteSelected') }}</span>
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button variant="secondary" @click="handleDownloadSelected">
+            <Button
+              variant="secondary"
+              data-testid="assets-download-selected"
+              @click="handleDownloadSelected"
+            >
               <span>{{ $t('mediaAsset.selection.downloadSelected') }}</span>
               <i class="icon-[lucide--download] size-4" />
             </Button>

src/composables/element/useDomClipping.test.ts

@@ -1,3 +1,4 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
 
 import { useDomClipping } from './useDomClipping'
@@ -8,7 +9,7 @@ function createMockElement(rect: {
   width: number
   height: number
 }): HTMLElement {
-  return {
+  return fromPartial<HTMLElement>({
     getBoundingClientRect: vi.fn(
       () =>
         ({
@@ -20,7 +21,7 @@ function createMockElement(rect: {
           toJSON: () => ({})
         }) as DOMRect
     )
-  } as unknown as HTMLElement
+  })
 }
 
 function createMockCanvas(rect: {
@@ -29,7 +30,7 @@ function createMockCanvas(rect: {
   width: number
   height: number
 }): HTMLCanvasElement {
-  return {
+  return fromPartial<HTMLCanvasElement>({
     getBoundingClientRect: vi.fn(
       () =>
         ({
@@ -41,7 +42,7 @@ function createMockCanvas(rect: {
           toJSON: () => ({})
         }) as DOMRect
     )
-  } as unknown as HTMLCanvasElement
+  })
 }
 
 describe('useDomClipping', () => {

src/composables/graph/useErrorClearingHooks.test.ts

@@ -1,5 +1,6 @@
-import { setActivePinia } from 'pinia'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
@@ -194,7 +195,7 @@ describe('Widget change error clearing via onWidgetChanged', () => {
 
     const store = useExecutionErrorStore()
     vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(
-      undefined as unknown as LGraph
+      fromAny<LGraph, unknown>(undefined)
     )
     store.lastNodeErrors = {
       [String(node.id)]: {

src/composables/graph/useGraphHierarchy.test.ts

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle'
@@ -8,7 +9,6 @@ import {
   createMockLGraphNode,
   createMockLGraphGroup
 } from '@/utils/__tests__/litegraphTestUtils'
-
 import { useGraphHierarchy } from './useGraphHierarchy'
 
 vi.mock('@/renderer/core/canvas/canvasStore')
@@ -36,7 +36,10 @@ describe('useGraphHierarchy', () => {
     mockNode = createMockNode()
     mockGroups = []
 
-    mockCanvasStore = {
+    mockCanvasStore = fromAny<
+      Partial<ReturnType<typeof useCanvasStore>>,
+      unknown
+    >({
       canvas: {
         graph: {
           groups: mockGroups
@@ -51,7 +54,7 @@ describe('useGraphHierarchy', () => {
       $dispose: vi.fn(),
       _customProperties: new Set(),
       _p: {}
-    } as unknown as Partial<ReturnType<typeof useCanvasStore>>
+    })
 
     vi.mocked(useCanvasStore).mockReturnValue(
       mockCanvasStore as ReturnType<typeof useCanvasStore>

src/composables/graph/useGraphNodeManager.test.ts

@@ -1,5 +1,6 @@
-import { setActivePinia } from 'pinia'
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny } from '@total-typescript/shoehorn'
+import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, nextTick, watch } from 'vue'
 
@@ -11,10 +12,10 @@ import {
   createTestSubgraphNode
 } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
-import { app } from '@/scripts/app'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
@@ -277,18 +278,20 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const secondPromotedView = promotedViews[1]
     if (!secondPromotedView) throw new Error('Expected second promoted view')
 
-    ;(
-      secondPromotedView as unknown as {
+    fromAny<
+      {
         sourceNodeId: string
         sourceWidgetName: string
-      }
-    ).sourceNodeId = '9999'
-    ;(
-      secondPromotedView as unknown as {
+      },
+      unknown
+    >(secondPromotedView).sourceNodeId = '9999'
+    fromAny<
+      {
         sourceNodeId: string
         sourceWidgetName: string
-      }
-    ).sourceWidgetName = 'stale_widget'
+      },
+      unknown
+    >(secondPromotedView).sourceWidgetName = 'stale_widget'
 
     const { vueNodeData } = useGraphNodeManager(graph)
     const nodeData = vueNodeData.get(String(subgraphNode.id))

src/composables/graph/useImageMenuOptions.test.ts

@@ -1,8 +1,8 @@
+import { fromPartial } from '@total-typescript/shoehorn'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
-
 import { useImageMenuOptions } from './useImageMenuOptions'
 
 vi.mock('vue-i18n', async (importOriginal) => {
@@ -112,9 +112,11 @@ describe('useImageMenuOptions', () => {
         getType: vi.fn().mockResolvedValue(mockBlob)
       }
 
-      mockClipboard({
-        read: vi.fn().mockResolvedValue([mockClipboardItem])
-      } as unknown as Clipboard)
+      mockClipboard(
+        fromPartial<Clipboard>({
+          read: vi.fn().mockResolvedValue([mockClipboardItem])
+        })
+      )
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)
@@ -131,7 +133,7 @@ describe('useImageMenuOptions', () => {
 
     it('handles missing clipboard API gracefully', async () => {
       const node = createImageNode()
-      mockClipboard({ read: undefined } as unknown as Clipboard)
+      mockClipboard(fromPartial<Clipboard>({ read: undefined }))
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)
@@ -148,9 +150,11 @@ describe('useImageMenuOptions', () => {
         getType: vi.fn()
       }
 
-      mockClipboard({
-        read: vi.fn().mockResolvedValue([mockClipboardItem])
-      } as unknown as Clipboard)
+      mockClipboard(
+        fromPartial<Clipboard>({
+          read: vi.fn().mockResolvedValue([mockClipboardItem])
+        })
+      )
 
       const { getImageMenuOptions } = useImageMenuOptions()
       const options = getImageMenuOptions(node)

src/composables/maskeditor/useMaskEditorSaver.test.ts

@@ -1,10 +1,11 @@
 import { createTestingPinia } from '@pinia/testing'
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { setActivePinia } from 'pinia'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import { useMaskEditorSaver } from './useMaskEditorSaver'
 
@@ -21,7 +22,7 @@ vi.mock('@/stores/maskEditorDataStore', () => ({
 }))
 
 function createMockCtx(): CanvasRenderingContext2D {
-  return {
+  return fromPartial<CanvasRenderingContext2D>({
     drawImage: vi.fn(),
     getImageData: vi.fn(() => ({
       data: new Uint8ClampedArray(4 * 4 * 4),
@@ -30,11 +31,11 @@ function createMockCtx(): CanvasRenderingContext2D {
     })),
     putImageData: vi.fn(),
     globalCompositeOperation: 'source-over'
-  } as unknown as CanvasRenderingContext2D
+  })
 }
 
 function createMockCanvas(): HTMLCanvasElement {
-  return {
+  return fromPartial<HTMLCanvasElement>({
     width: 4,
     height: 4,
     getContext: vi.fn(() => createMockCtx()),
@@ -42,7 +43,7 @@ function createMockCanvas(): HTMLCanvasElement {
       cb(new Blob(['x'], { type: 'image/png' }))
     }),
     toDataURL: vi.fn(() => 'data:image/png;base64,mock')
-  } as unknown as HTMLCanvasElement
+  })
 }
 
 const mockEditorStore: Record<string, HTMLCanvasElement | null> = {
@@ -96,7 +97,7 @@ describe('useMaskEditorSaver', () => {
     app.nodeOutputs = {}
     app.nodePreviewImages = {}
 
-    mockNode = {
+    mockNode = fromAny<LGraphNode, unknown>({
       id: 42,
       type: 'LoadImage',
       images: [],
@@ -107,7 +108,7 @@ describe('useMaskEditorSaver', () => {
       widgets_values: ['original.png [input]'],
       properties: { image: 'original.png [input]' },
       graph: { setDirtyCanvas: vi.fn() }
-    } as unknown as LGraphNode
+    })
 
     mockDataStore.sourceNode = mockNode
     mockDataStore.inputData = {
@@ -135,7 +136,7 @@ describe('useMaskEditorSaver', () => {
     vi.spyOn(document, 'createElement').mockImplementation(
       (tagName: string, options?: ElementCreationOptions) => {
         if (tagName === 'canvas')
-          return createMockCanvas() as unknown as HTMLCanvasElement
+          return fromAny<HTMLCanvasElement, unknown>(createMockCanvas())
         return originalCreateElement(tagName, options)
       }
     )

src/composables/node/useNodeImageUpload.test.ts

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -44,12 +45,12 @@ vi.mock('@/stores/assetsStore', () => ({
 }))
 
 function createMockNode(): LGraphNode {
-  return {
+  return fromAny<LGraphNode, unknown>({
     isUploading: false,
     imgs: [new Image()],
     graph: { setDirtyCanvas: vi.fn() },
     size: [300, 400]
-  } as unknown as LGraphNode
+  })
 }
 
 function createFile(name = 'test.png'): File {

src/composables/node/useNodePreviewAndDrag.test.ts

@@ -1,8 +1,8 @@
+import { fromAny, fromPartial } from '@total-typescript/shoehorn'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-
 import { useNodePreviewAndDrag } from './useNodePreviewAndDrag'
 
 const mockStartDrag = vi.fn()
@@ -72,9 +72,9 @@ describe('useNodePreviewAndDrag', () => {
         toJSON: () => ({})
       })
 
-      const mockEvent = {
+      const mockEvent = fromPartial<MouseEvent>({
         currentTarget: mockElement
-      } as Partial<MouseEvent> as MouseEvent
+      })
       result.handleMouseEnter(mockEvent)
 
       expect(result.isHovered.value).toBe(true)
@@ -85,9 +85,9 @@ describe('useNodePreviewAndDrag', () => {
       const result = useNodePreviewAndDrag(nodeDef)
 
       const mockElement = document.createElement('div')
-      const mockEvent = {
+      const mockEvent = fromPartial<MouseEvent>({
         currentTarget: mockElement
-      } as Partial<MouseEvent> as MouseEvent
+      })
       result.handleMouseEnter(mockEvent)
 
       expect(result.isHovered.value).toBe(false)
@@ -116,9 +116,9 @@ describe('useNodePreviewAndDrag', () => {
         setData: vi.fn(),
         setDragImage: vi.fn()
       }
-      const mockEvent = {
+      const mockEvent = fromAny<DragEvent, unknown>({
         dataTransfer: mockDataTransfer
-      } as unknown as DragEvent
+      })
 
       result.handleDragStart(mockEvent)
 
@@ -151,10 +151,10 @@ describe('useNodePreviewAndDrag', () => {
 
       result.isDragging.value = true
 
-      const mockEvent = {
+      const mockEvent = fromPartial<DragEvent>({
         clientX: 100,
         clientY: 200
-      } as Partial<DragEvent> as DragEvent
+      })
 
       result.handleDragEnd(mockEvent)
 
@@ -168,11 +168,11 @@ describe('useNodePreviewAndDrag', () => {
 
       result.isDragging.value = true
 
-      const mockEvent = {
+      const mockEvent = fromPartial<DragEvent>({
         dataTransfer: { dropEffect: 'none' },
         clientX: 300,
         clientY: 400
-      } as Partial<DragEvent> as DragEvent
+      })
 
       result.handleDragEnd(mockEvent)
 

src/composables/useServerLogs.test.ts

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { useEventListener } from '@vueuse/core'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -79,10 +80,10 @@ describe('useServerLogs', () => {
 
     // Simulate receiving a log event
     const mockEvent = new CustomEvent('logs', {
-      detail: {
+      detail: fromAny<LogsWsMessage, unknown>({
         type: 'logs',
         entries: [{ m: 'Log message 1' }, { m: 'Log message 2' }]
-      } as unknown as LogsWsMessage
+      })
     }) as CustomEvent<LogsWsMessage>
 
     eventCallback(mockEvent)
@@ -103,14 +104,14 @@ describe('useServerLogs', () => {
     ) => void
 
     const mockEvent = new CustomEvent('logs', {
-      detail: {
+      detail: fromAny<LogsWsMessage, unknown>({
         type: 'logs',
         entries: [
           { m: 'Log message 1 dont remove me' },
           { m: 'remove me' },
           { m: '' }
         ]
-      } as unknown as LogsWsMessage
+      })
     }) as CustomEvent<LogsWsMessage>
 
     eventCallback(mockEvent)

src/composables/useWaveAudioPlayer.test.ts

@@ -1,3 +1,4 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { ref } from 'vue'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
@@ -80,10 +81,12 @@ describe('useWaveAudioPlayer', () => {
 
     const mockDecodeAudioData = vi.fn(() => Promise.resolve(mockAudioBuffer))
     const mockClose = vi.fn().mockResolvedValue(undefined)
-    globalThis.AudioContext = class {
-      decodeAudioData = mockDecodeAudioData
-      close = mockClose
-    } as unknown as typeof AudioContext
+    globalThis.AudioContext = fromAny<typeof AudioContext, unknown>(
+      class {
+        decodeAudioData = mockDecodeAudioData
+        close = mockClose
+      }
+    )
 
     mockFetchApi.mockResolvedValue({
       ok: true,

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

@@ -1,7 +1,7 @@
+import { fromAny } from '@total-typescript/shoehorn'
 import { describe, expect, it } from 'vitest'
 
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
 import { matchPromotedInput } from './matchPromotedInput'
 
 type MockInput = {
@@ -31,10 +31,13 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [aliasInput, exactInput] as unknown as Array<{
-        name: string
-        _widget?: IBaseWidget
-      }>,
+      fromAny<
+        Array<{
+          name: string
+          _widget?: IBaseWidget
+        }>,
+        unknown
+      >([aliasInput, exactInput]),
       targetWidget
     )
 
@@ -48,7 +51,9 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [aliasInput] as unknown as Array<{ name: string; _widget?: IBaseWidget }>,
+      fromAny<Array<{ name: string; _widget?: IBaseWidget }>, unknown>([
+        aliasInput
+      ]),
       targetWidget
     )
 
@@ -65,10 +70,13 @@ describe(matchPromotedInput, () => {
     }
 
     const matched = matchPromotedInput(
-      [firstAliasInput, secondAliasInput] as unknown as Array<{
-        name: string
-        _widget?: IBaseWidget
-      }>,
+      fromAny<
+        Array<{
+          name: string
+          _widget?: IBaseWidget
+        }>,
+        unknown
+      >([firstAliasInput, secondAliasInput]),
       targetWidget
     )